From mboxrd@z Thu Jan 1 00:00:00 1970 From: Leo-Andres Hofmann To: development@lists.ipfire.org Subject: [PATCH 2/4] WUI: Refactor rrdimage JavaScript Date: Sat, 01 Apr 2023 16:43:41 +0200 Message-ID: <20230401144343.1483-2-hofmann@leo-andres.de> In-Reply-To: <20230401144343.1483-1-hofmann@leo-andres.de> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============7877254412065928107==" List-Id: --===============7877254412065928107== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable This migrates the rrdimage.js functions to the new WUI framework and improves some functions. Signed-off-by: Leo-Andres Hofmann --- config/cfgroot/graphs.pl | 2 +- html/html/include/rrdimage.js | 122 ------------------- html/html/include/wui_rrdimage.mjs | 103 +++++++++++++++- html/html/themes/ipfire/include/functions.pl | 1 - 4 files changed, 102 insertions(+), 126 deletions(-) delete mode 100644 html/html/include/rrdimage.js diff --git a/config/cfgroot/graphs.pl b/config/cfgroot/graphs.pl index 9803dd124..a637e1a6a 100644 --- a/config/cfgroot/graphs.pl +++ b/config/cfgroot/graphs.pl @@ -118,7 +118,7 @@ END # Print range select buttons foreach my $range (@time_ranges) { print < +
    • END } =20 diff --git a/html/html/include/rrdimage.js b/html/html/include/rrdimage.js deleted file mode 100644 index c6f5930c9..000000000 --- a/html/html/include/rrdimage.js +++ /dev/null @@ -1,122 +0,0 @@ -/*##########################################################################= ### -# = # -# IPFire.org - A linux based firewall = # -# Copyright (C) 2007-2021 IPFire Team = # -# = # -# This program is free software: you can redistribute it and/or modify = # -# it under the terms of the GNU General Public License as published by = # -# the Free Software Foundation, either version 3 of the License, or = # -# (at your option) any later version. = # -# = # -# This program is distributed in the hope that it will be useful, = # -# but WITHOUT ANY WARRANTY; without even the implied warranty of = # -# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the = # -# GNU General Public License for more details. = # -# = # -# You should have received a copy of the GNU General Public License = # -# along with this program. If not, see . = # -# = # -############################################################################= #*/ - -// "onclick" event handler for graph time range select button -// buttonObj: reference to the button -function rrdimage_selectRange(buttonObj) { - if(! (buttonObj && ('range' in buttonObj.dataset))) { - return; //required parameters are missing - } - - // Get selected time range from button - const range =3D buttonObj.dataset.range; - - // Get surrounding div box and select new range - let graphBox =3D $(buttonObj).closest('div'); - _rrdimg_setRange(graphBox, range); -} - -// Document loaded: Process all graphs, start reload timers -$(function() { - $('div.rrdimage').each(function() { - let graphBox =3D $(this); - _rrdimg_setRange(graphBox, graphBox.data('defaultRange'), true); - }); -}); - -//--- Internal functions --- - -// Set or update graph time range, start automatic reloading -// graphBox: jQuery object, reference to graph div box -// range: time range (day, hour, ...) -// initMode: don't immediately reload graph, but force timers and attributes= update -function _rrdimg_setRange(graphBox, range, initMode =3D false) { - if(! ((graphBox instanceof jQuery) && (graphBox.length =3D=3D=3D 1))) { - return; //graphBox element missing - } - - // Check range parameter, default to "day" on error - if(! ["hour", "day", "week", "month", "year"].includes(range)) { - range =3D "day"; - } - - // Check if the time range is changed - if((graphBox.data('range') !=3D=3D range) || initMode) { - graphBox.data('range', range); //Store new range - - // Update button highlighting - graphBox.find('button').removeClass('selected'); - graphBox.find(`button[data-range=3D"${range}"]`).addClass('selected'); - } - - // Clear pending reload timer to prevent multiple image reloads - let timerId =3D graphBox.data('reloadTimer'); - if(timerId !=3D=3D undefined) { - window.clearInterval(timerId); - graphBox.removeData('reloadTimer'); - } - - // Determine auto reload interval (in seconds), - // interval =3D 0 disables auto reloading by default - let interval =3D 0; - switch(range) { - case 'hour': - interval =3D 60; - break; - - case 'day': - case 'week': - interval =3D 300; - break; - } - - // Start reload timer and store reference - if(interval > 0) { - timerId =3D window.setInterval(function(graphRef) { - _rrdimg_reload(graphRef); - }, interval * 1000, graphBox); - graphBox.data('reloadTimer', timerId); - } - - // Always reload image unless disabled by init mode - if(! initMode) { - _rrdimg_reload(graphBox); - } -} - -// Reload graph image, add timestamp to prevent caching -// graphBox: jQuery object (graph element must be valid) -function _rrdimg_reload(graphBox) { - const origin =3D graphBox.data('origin'); - const graph =3D graphBox.data('graph'); - const timestamp =3D Date.now(); - - // Get user selected range or fall back to default - let range =3D graphBox.data('range'); - if(! range) { - range =3D graphBox.data('defaultRange'); - } - - // Generate new image URL with timestamp - const imageUrl =3D `/cgi-bin/getrrdimage.cgi?origin=3D${origin}&graph=3D${g= raph}&range=3D${range}×tamp=3D${timestamp}`; - - // Get graph image and set new URL - graphBox.children('img').first().attr('src', imageUrl); -} diff --git a/html/html/include/wui_rrdimage.mjs b/html/html/include/wui_rrdim= age.mjs index 5254b1e98..64b34dfac 100644 --- a/html/html/include/wui_rrdimage.mjs +++ b/html/html/include/wui_rrdimage.mjs @@ -24,7 +24,106 @@ import {WUIcore_moduleBase as WUI_module} from "./wui_cor= e.mjs"; =20 //--- RRDtool graph images --- export class WUImodule_rrdimage extends WUI_module { - constructor(translations) { - super(translations); + + // DOMContentLoaded/jQuery.ready event handler + _handleDOMReady() { + super._handleDOMReady(); + + // Process all graphs, start reload timers + $("div.rrdimage").each((i, divElem) =3D> { + const $graphBox =3D $(divElem); + this.#updateProperties($graphBox, $graphBox.data("defaultRange"), true); + + // Attach event listeners to buttons + $graphBox.find("button[data-range]").each((j, buttonElem) =3D> { + const $rangeBtn =3D $(buttonElem); + $rangeBtn.on(`click.${this.namespace}`, {"graphBox": $graphBox, "range":= $rangeBtn.data("range")}, this.#handleRangeClick.bind(this)); + }); + }); + } + + // Graph range select button "click" event handler + #handleRangeClick(event) { + event.preventDefault(); + + this.#updateProperties(event.data["graphBox"], event.data["range"]); + } + + // Update graph range + // $graphBox: jQuery object, reference to a single graph div box + // range: time range (day, hour, ...) + setRange($graphBox, range) { + if(($graphBox instanceof jQuery) && ($graphBox.length =3D=3D=3D 1)) { + this.#updateProperties($graphBox, range); + } + } + + // Update graph range properties, configure automatic reloading + // $graphBox: jQuery object, reference to graph div box + // range: time range (day, hour, ...) + // initialize: don't immediately reload graph, but force timers and attribu= tes update + #updateProperties($graphBox, range, initialize =3D false) { + // Check range parameter, default to "day" on error + if(! ["hour", "day", "week", "month", "year"].includes(range)) { + range =3D "day"; + } + + // Check if the time range is changed + if(($graphBox.data("range") !=3D=3D range) || initialize) { + $graphBox.data("range", range); //Store new range + + // Update button highlighting + $graphBox.find("button[data-range]").removeClass("selected"); + $graphBox.find(`button[data-range=3D"${range}"]`).addClass("selected"); + } + + // Clear pending reload timer to prevent multiple image reloads + let timerId =3D $graphBox.data("reloadTimer"); + if(typeof timerId !=3D=3D "undefined") { + window.clearInterval(timerId); + $graphBox.removeData("reloadTimer"); + } + + // Determine auto reload interval (in seconds), + // interval =3D 0 disables auto reloading by default + let interval =3D 0; + switch(range) { + case "hour": + interval =3D 60; + break; + + case "day": + case "week": + interval =3D 300; + break; + } + + // Start reload timer and store reference + if(interval > 0) { + timerId =3D window.setInterval(this.#reloadImage.bind(this), interval * 1= 000, $graphBox); + $graphBox.data("reloadTimer", timerId); + } + + // Always reload image unless disabled by init mode + if(! initialize) { + this.#reloadImage($graphBox); + } + } + + // Reload graph image, add timestamp to prevent caching + // $graphBox: jQuery object (graph element must be valid/previously process= ed by updateRange) + #reloadImage($graphBox) { + const origin =3D $graphBox.data("origin"); + const graph =3D $graphBox.data("graph"); + + // Get user selected range or fall back to default + const range =3D $graphBox.data("range") ?? $graphBox.data("defaultRange"); + + // Generate new image URL with timestamp + const timestamp =3D Date.now(); + const imageUrl =3D `/cgi-bin/getrrdimage.cgi?origin=3D${origin}&graph=3D${= graph}&range=3D${range}×tamp=3D${timestamp}`; + + // Get graph image and set new URL + $graphBox.children("img").first().attr("src", imageUrl); } } diff --git a/html/html/themes/ipfire/include/functions.pl b/html/html/themes/= ipfire/include/functions.pl index 445597e51..bc66d7fdb 100644 --- a/html/html/themes/ipfire/include/functions.pl +++ b/html/html/themes/ipfire/include/functions.pl @@ -115,7 +115,6 @@ print < - =20 $extrahead