From ddbc1afd2867ba09de9b1edc1c3acc5c83714e3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= Date: Mon, 19 Jun 2023 11:51:19 -0300 Subject: [PATCH] Replace system monitor tab links with buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Maurício Meneghini Fauth --- js/src/server/status/monitor.ts | 69 ++++++++----------- templates/server/status/base.twig | 2 +- templates/server/status/monitor/index.twig | 25 ++----- .../Server/Status/MonitorControllerTest.php | 7 +- 4 files changed, 39 insertions(+), 64 deletions(-) diff --git a/js/src/server/status/monitor.ts b/js/src/server/status/monitor.ts index 59aae2a454..7ede43cb9f 100644 --- a/js/src/server/status/monitor.ts +++ b/js/src/server/status/monitor.ts @@ -99,7 +99,7 @@ AJAX.registerOnload('server/status/monitor.js', function () { */ AJAX.registerTeardown('server/status/monitor.js', function () { $('#emptyDialog').remove(); - $('a.popupLink').off('click'); + $('#monitorSettingsButton').off('click'); $('body').off('click'); }); @@ -111,14 +111,12 @@ AJAX.registerOnload('server/status/monitor.js', function () { .attr('id', 'emptyDialog') .appendTo('#page_content'); - $('a.popupLink').on('click', function () { + $('#monitorSettingsButton').on('click', function () { var $link = $(this); - $('div.' + $link.attr('href').substring(1)) + $('div.settingsPopup') .show() .offset({ top: $link.offset().top + $link.height() + 5, left: $link.offset().left }) .addClass('openedPopup'); - - return false; }); $('body').on('click', function (event) { @@ -136,15 +134,16 @@ AJAX.registerOnload('server/status/monitor.js', function () { }); AJAX.registerTeardown('server/status/monitor.js', function () { - $('a[href="#rearrangeCharts"], a[href="#endChartEditMode"]').off('click'); + $('a[href="#rearrangeCharts"]').off('click'); + $('#monitorRearrangeChartButton').off('click'); $('div.popupContent select[name="chartColumns"]').off('change'); $('div.popupContent select[name="gridChartRefresh"]').off('change'); $('a[href="#addNewChart"]').off('click'); $('a[href="#exportMonitorConfig"]').off('click'); $('a[href="#importMonitorConfig"]').off('click'); $('a[href="#clearMonitorConfig"]').off('click'); - $('a[href="#pauseCharts"]').off('click'); - $('a[href="#monitorInstructionsDialog"]').off('click'); + $('#monitorPauseResumeButton').off('click'); + $('#monitorInstructionsButton').off('click'); $('input[name="chartType"]').off('click'); $('input[name="useDivisor"]').off('click'); $('input[name="useUnit"]').off('click'); @@ -160,8 +159,6 @@ AJAX.registerTeardown('server/status/monitor.js', function () { }); AJAX.registerOnload('server/status/monitor.js', function () { - // Show tab links - $('div.tabLinks').show(); $('#loadingMonitorIcon').remove(); // Codemirror is loaded on demand so we might need to initialize it if (! window.codeMirrorEditor) { @@ -483,36 +480,36 @@ AJAX.registerOnload('server/status/monitor.js', function () { defaultChartGrid.c5 = presetCharts.swap; } - $('a[href="#rearrangeCharts"], a[href="#endChartEditMode"]').on('click', function (event) { + $('a[href="#rearrangeCharts"]').on('click', function (event) { event.preventDefault(); - editMode = ! editMode; - if ($(this).attr('href') === '#endChartEditMode') { - editMode = false; - } + editMode = true; - $('a[href="#endChartEditMode"]').toggle(editMode); + $('#monitorRearrangeChartButton').removeClass('d-none'); - if (editMode) { - // Close the settings popup - $('div.popupContent').hide().removeClass('openedPopup'); + // Close the settings popup + $('div.popupContent').hide().removeClass('openedPopup'); - $('#chartGrid').sortableTable({ - ignoreRect: { - top: 8, - left: chartSize.width - 63, - width: 54, - height: 24 - } - }); - } else { - $('#chartGrid').sortableTable('destroy'); - } + $('#chartGrid').sortableTable({ + ignoreRect: { + top: 8, + left: chartSize.width - 63, + width: 54, + height: 24 + } + }); saveMonitor(); // Save settings return false; }); + $('#monitorRearrangeChartButton').on('click', function (event) { + editMode = false; + $('#chartGrid').sortableTable('destroy'); + saveMonitor(); + $('#monitorRearrangeChartButton').addClass('d-none'); + }); + // global settings ($('div.popupContent select[name="chartColumns"]') as JQuery).on('change', function () { monitorSettings.columns = parseInt(this.value, 10); @@ -821,8 +818,7 @@ AJAX.registerOnload('server/status/monitor.js', function () { rebuildGrid(); }); - $('a[href="#pauseCharts"]').on('click', function (event) { - event.preventDefault(); + $('#monitorPauseResumeButton').on('click', function () { runtime.redrawCharts = ! runtime.redrawCharts; if (! runtime.redrawCharts) { $(this).html(getImageTag('play') + window.Messages.strResumeMonitor); @@ -830,16 +826,11 @@ AJAX.registerOnload('server/status/monitor.js', function () { $(this).html(getImageTag('pause') + window.Messages.strPauseMonitor); if (! runtime.charts) { initGrid(); - $('a[href="#settingsPopup"]').show(); } } - - return false; }); - $('a[href="#monitorInstructionsDialog"]').on('click', function (event) { - event.preventDefault(); - + $('#monitorInstructionsButton').on('click', function () { var $dialog = $('#monitorInstructionsDialog'); var dlgBtns = { [window.Messages.strClose]: { @@ -2469,5 +2460,5 @@ AJAX.registerOnload('server/status/monitor.js', function () { // Run the monitor once loaded AJAX.registerOnload('server/status/monitor.js', function () { - $('a[href="#pauseCharts"]').trigger('click'); + $('#monitorPauseResumeButton').trigger('click'); }); diff --git a/templates/server/status/base.twig b/templates/server/status/base.twig index 03a1cd8562..e0eacc971a 100644 --- a/templates/server/status/base.twig +++ b/templates/server/status/base.twig @@ -1,5 +1,5 @@
-
+