From b06e666efeeccd5514658723b8dfd7c9860c3fc8 Mon Sep 17 00:00:00 2001 From: gabryon99 Date: Wed, 15 Jul 2020 09:59:50 +0200 Subject: [PATCH] changed datatable button style --- httpdocs/js/pages/datasource_list.js | 16 +-- httpdocs/js/pages/pools/pools.js | 23 ++-- .../js/pages/snmpdevices_stats/overview.js | 88 ++++++++++--- httpdocs/js/pages/widget_list.js | 20 ++- .../js/utils/alert-notifications-utils.js | 118 ++++++++++++++++-- .../pages/modals/pools/pool_modal.template | 14 ++- httpdocs/templates/pages/table_pools.template | 13 -- 7 files changed, 230 insertions(+), 62 deletions(-) diff --git a/httpdocs/js/pages/datasource_list.js b/httpdocs/js/pages/datasource_list.js index 9a3c6c8dd2..9385e4b0ad 100644 --- a/httpdocs/js/pages/datasource_list.js +++ b/httpdocs/js/pages/datasource_list.js @@ -277,11 +277,13 @@ $(document).ready(function () { const isDeleteDisabled = data.in_use; return (` - Edit - Delete +
+ Edit + + - ${i18n.edit} - - - ${i18n.delete} - +
+ + + + + + +
`); } } @@ -219,12 +226,12 @@ $(document).ready(function() { }); $(`#table-pools`).on('click', `a[href='#edit-pool']`, function (e) { - poolRowData = $poolTable.row($(this).parent()).data(); + poolRowData = $poolTable.row($(this).parent().parent()).data(); $editModalHandler.invokeModalInit(); }); $(`#table-pools`).on('click', `a[href='#remove-pool']`, function (e) { - poolRowData = $poolTable.row($(this).parent()).data(); + poolRowData = $poolTable.row($(this).parent().parent()).data(); $removeModalHandler.invokeModalInit(); }); diff --git a/httpdocs/js/pages/snmpdevices_stats/overview.js b/httpdocs/js/pages/snmpdevices_stats/overview.js index 9bb8c010fd..a9efdedcf0 100644 --- a/httpdocs/js/pages/snmpdevices_stats/overview.js +++ b/httpdocs/js/pages/snmpdevices_stats/overview.js @@ -1,12 +1,15 @@ +/** + * (C) 2020 - ntop.org + * + * This script implements the logic for the overview tab inside snmpdevice_stats.lua page. + */ $(document).ready(function () { + let snmpDeviceRowData; // define a constant for the snmp version dropdown value const SNMP_VERSION_THREE = 2; - const requiredFieldsAdd = { - community: [], - nonCommunity: [] - }; + const requiredFieldsAdd = { community: [], nonCommunity: [] }; $(`.community-field input[required], .community-field select[required]`) .each(function() { @@ -53,7 +56,7 @@ $(document).ready(function () { { text: '', action: function(e, dt, node, config) { - $('#add-snmp-modal').modal('show'); + $('#add-snmp-device-modal').modal('show'); } }, { @@ -129,9 +132,11 @@ $(document).ready(function () { if (!isAdministrator) return ""; return (` - - ${i18n.delete} - +
+ + + +
`); } } @@ -154,14 +159,63 @@ $(document).ready(function () { // initialize the DataTable with the created config const $snmpTable = $(`#table-devices`).DataTable(dtConfig); - $(`#table-devices`).on('click', `a[href='#delete_device_dialog']`, function (e) { + const $deleteModalHandler = $(`#delete-snmp-device-modal form`).modalHandler({ + method: 'post', + csrf: deleteCsrf, + endpoint: `${ http_prefix }/lua/pro/rest/v1/delete/snmp/device.lua`, + resetAfterSubmit: false, + onModalInit: function() { + $(`.delete-snmp-device-name`).text(snmpDeviceRowData.column_key); + }, + beforeSumbit: function() { + return { host: snmpDeviceRowData.column_key }; + }, + onSubmitSuccess: function (response, textStatus, modalHandler) { - const rowData = $snmpTable.row($(this).parent()).data(); - $('#snmp_device_to_delete').text(rowData.column_key); - delete_device_id = rowData.column_key; + if (response.rc < 0) { + $(`#delete-modal-feedback`).html(i18n.rest[response.rc_str]).fadeIn(); + return; + } + + $snmpTable.ajax.reload(); + $(`#delete-snmp-device-modal`).modal('hide'); + } }); - $(`#add-snmp-modal form`).modalHandler({ + const $editModalHandler = $(`#edit-snmp-device-modal form`).modalHandler({ + method: 'post', + csrf: deleteCsrf, + endpoint: `${ http_prefix }/lua/pro/rest/v1/delete/snmp/device.lua`, + resetAfterSubmit: false, + onModalInit: function() { + }, + beforeSumbit: function() { + return { }; + }, + onSubmitSuccess: function (response, textStatus, modalHandler) { + + if (response.rc < 0) { + $(`#delete-modal-feedback`).html(i18n.rest[response.rc_str]).fadeIn(); + return; + } + + $snmpTable.ajax.reload(); + // $(`#delete-snmp-device-modal`).modal('hide'); + } + }); + + $(`#table-devices`).on('click', `a[href='#delete-snmp-device-modal']`, function (e) { + snmpDeviceRowData = $snmpTable.row($(this).parent().parent()).data(); + $deleteModalHandler.invokeModalInit(); + }); + + $(`#table-devices`).on('click', `a[href='#edit-snmp-device-modal']`, function (e) { + snmpDeviceRowData = $snmpTable.row($(this).parent().parent()).data(); + $editModalHandler.invokeModalInit(); + }); + + + $(`#add-snmp-device-modal form`).modalHandler({ method: 'post', csrf: addCsrf, resetAfterSubmit: false, @@ -169,15 +223,15 @@ $(document).ready(function () { beforeSumbit: function() { const data = {}; - // show the spinner and hide the errors $(`#add-snmp-feedback`).hide(); $(`#snmp-add-spinner`).fadeIn(); // build the post params - $(`#add-snmp-modal form`).find('input,select,textarea').each((idx, element) => { + $(`#add-snmp-device-modal form`).find('input,select,textarea').each((idx, element) => { data[$(element).attr("name")] = $(element).val(); }); + return data; }, onModalInit: function() { @@ -236,12 +290,12 @@ $(document).ready(function () { modalHandler.cleanForm(); $snmpTable.ajax.reload(toggleSnmpTableButtons, false); $(`#snmp-add-spinner`).hide(); - $(`#add-snmp-modal`).modal('hide'); + $(`#add-snmp-device-modal`).modal('hide'); } }).invokeModalInit(); - $(`#select-snmp_version`).change(function() { + $(`#select-snmp-version`).change(function() { const value = $(this).val(); diff --git a/httpdocs/js/pages/widget_list.js b/httpdocs/js/pages/widget_list.js index 31f8af69fe..89fc4f4261 100644 --- a/httpdocs/js/pages/widget_list.js +++ b/httpdocs/js/pages/widget_list.js @@ -25,9 +25,17 @@ $(document).ready(function() { data: null, render: function () { return (` - Edit - Embed - Delete +
+ + + + + + + + + +
`); } } @@ -37,7 +45,7 @@ $(document).ready(function() { const $widgets_table = $(`#widgets-list`).DataTable(dtConfig); $(`#widgets-list`).on('click', `a[href='#embed-widget-modal']`, function(e) { - const rowData = $widgets_table.row($(this).parent()).data(); + const rowData = $widgets_table.row($(this).parent().parent()).data(); console.log(rowData); $(`#embded-container`).text(` `); + // set toast expiracy + if (this.delay !== 0) { + $toast.data('autohide', this.delay); + } + else { + $toast.data('autohide', false); + } + // assign an id to the notification + $toast.data('notification-id', this.id); + + const $toastHeader = $(`
+ ${this.title} +
`); + const $toastBody = $(`
${this.body}
`); + + if (this.link != undefined && this.link != "") { + const $anchor = $(`Click!`); + $toastBody.append($anchor); + } + + $toast.append($toastHeader, $toastBody); + $toast.toast('show'); + this.$element = $toast; + + return $toast; + } + + updateBody(body) { + + if (this.$element == undefined) throw '[AlertNotification] :: The notification has not been rendered yet!'; + this.$element.find('.toast-body span').text(body); + } + + destroy() { + this.$element.toast('dispose'); + } + +} + class AlertNotificationUtils { static initAlerts() { - $(`.toast.alert-notification`).each(function() { + $(`.toast.alert-notification`).each(function () { const noScope = $(this).data("notificationNoScope"); - const pages = (noScope == "") ? [] : noScope.split(";"); + const pages = (noScope == "" || noScope == undefined) ? [] : noScope.split(";"); // if the current page match the no-scoping attribute // then doesn't show the notification @@ -15,17 +71,65 @@ class AlertNotificationUtils { $(this).toast('show'); }); - // show the alert notifications inside the page - // binding the closing handler to toasts - AlertNotificationUtils.bindClosingEvent(); + } + + static hideAlert(notificationId) { + + if (!(notificationId in alertNotifications)) { + return; + } + + alertNotifications[notificationId].destroy(); + delete alertNotifications[notificationId]; + } + + static updateNotification(notificationId, body) { + + if (!(notificationId in alertNotifications)) { + throw '[AlertNotificationUtils] :: The notification was not found!'; + } + + alertNotifications[notificationId].updateBody(body); + } + + static showAlert(option) { + + const styles = { + warning: { + bg: 'warning', + text: 'text-dark', + icon: 'fa-exclamation-circle' + }, + info: { + bg: 'info', + text: 'text-white', + icon: 'fa-info-circle' + } + } + + const style = styles[option.level] || styles.warning; + + if (option.id === undefined) throw '[AlertNotificationUtils] :: An AlertNotification must have an in id!'; + if (option.id in alertNotifications) return; + if (option.title === undefined) throw '[AlertNotificationUtils]:: An AlertNotification must have a title!'; + if (option.body === undefined) throw '[AlertNotificationUtils]:: An AlertNotification must have a body!'; + + option.style = style; + + const notification = new AlertNotification(option); + // render the notification inside the main container + $(`#main-container`).prepend(notification.render()); + + // push the notification inside the global container + alertNotifications[option.id] = notification; } static bindClosingEvent() { // send the notification id to the handler - $('.toast.alert-notification').on('hidden.bs.toast', function () { + $('.toast.alert-notification[data-notification-id]').on('hidden.bs.toast', function () { $.post(`${http_prefix}/lua/handler_alert_notification.lua`, - { notification_id: $(this).data("notificationId"), action: `disposed` }); + { notification_id: $(this).data("notificationId"), action: `disposed` }); }); } diff --git a/httpdocs/templates/pages/modals/pools/pool_modal.template b/httpdocs/templates/pages/modals/pools/pool_modal.template index 73aeab85ab..8378295ba3 100644 --- a/httpdocs/templates/pages/modals/pools/pool_modal.template +++ b/httpdocs/templates/pages/modals/pools/pool_modal.template @@ -11,18 +11,21 @@
- + + + {{ i18n("pools.name_requirements") }} +
- {% for key, member in pairsByKeys(pool.all_members, asc) do %} {% @@ -41,6 +44,9 @@ {% end %} {% end %} + + {* i18n("howto_multiselect") *} +
diff --git a/httpdocs/templates/pages/table_pools.template b/httpdocs/templates/pages/table_pools.template index bf09623d59..19e5d1313d 100644 --- a/httpdocs/templates/pages/table_pools.template +++ b/httpdocs/templates/pages/table_pools.template @@ -12,19 +12,6 @@ - {# Only the admin can use the import/export utilities #} - {% if isAdministrator() then %} -
-
- -
- -
- {% end %}