]>
git.ipfire.org Git - people/mfischer/ipfire-2.x.git/blob - html/html/include/rrdimage.js
1 /*#############################################################################
3 # IPFire.org - A linux based firewall #
4 # Copyright (C) 2007-2021 IPFire Team <info@ipfire.org> #
6 # This program is free software: you can redistribute it and/or modify #
7 # it under the terms of the GNU General Public License as published by #
8 # the Free Software Foundation, either version 3 of the License, or #
9 # (at your option) any later version. #
11 # This program is distributed in the hope that it will be useful, #
12 # but WITHOUT ANY WARRANTY; without even the implied warranty of #
13 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
14 # GNU General Public License for more details. #
16 # You should have received a copy of the GNU General Public License #
17 # along with this program. If not, see <http://www.gnu.org/licenses/>. #
19 #############################################################################*/
21 // "onclick" event handler for graph time range select button
22 // buttonObj: reference to the button
23 function rrdimage_selectRange(buttonObj
) {
24 if(! (buttonObj
&& ('range' in buttonObj
.dataset
))) {
25 return; //required parameters are missing
28 // Get selected time range from button
29 const range
= buttonObj
.dataset
.range
;
31 // Get surrounding div box and select new range
32 let graphBox
= $(buttonObj
).closest('div');
33 _rrdimg_setRange(graphBox
, range
);
36 // Document loaded: Process all graphs, start reload timers
38 $('div.rrdimage').each(function() {
39 let graphBox
= $(this);
40 _rrdimg_setRange(graphBox
, graphBox
.data('defaultRange'), true);
44 //--- Internal functions ---
46 // Set or update graph time range, start automatic reloading
47 // graphBox: jQuery object, reference to graph div box
48 // range: time range (day, hour, ...)
49 // initMode: don't immediately reload graph, but force timers and attributes update
50 function _rrdimg_setRange(graphBox
, range
, initMode
= false) {
51 if(! ((graphBox
instanceof jQuery
) && (graphBox
.length
=== 1))) {
52 return; //graphBox element missing
55 // Check range parameter, default to "day" on error
56 if(! ["hour", "day", "week", "month", "year"].includes(range
)) {
60 // Check if the time range is changed
61 if((graphBox
.data('range') !== range
) || initMode
) {
62 graphBox
.data('range', range
); //Store new range
64 // Update button highlighting
65 graphBox
.find('button').removeClass('selected');
66 graphBox
.find(`button[data-range="${range}"]`).addClass('selected');
69 // Clear pending reload timer to prevent multiple image reloads
70 let timerId
= graphBox
.data('reloadTimer');
71 if(timerId
!== undefined) {
72 window
.clearInterval(timerId
);
73 graphBox
.removeData('reloadTimer');
76 // Determine auto reload interval (in seconds),
77 // interval = 0 disables auto reloading by default
90 // Start reload timer and store reference
92 timerId
= window
.setInterval(function(graphRef
) {
93 _rrdimg_reload(graphRef
);
94 }, interval
* 1000, graphBox
);
95 graphBox
.data('reloadTimer', timerId
);
98 // Always reload image unless disabled by init mode
100 _rrdimg_reload(graphBox
);
104 // Reload graph image, add timestamp to prevent caching
105 // graphBox: jQuery object (graph element must be valid)
106 function _rrdimg_reload(graphBox
) {
107 const origin
= graphBox
.data('origin');
108 const graph
= graphBox
.data('graph');
109 const timestamp
= Date
.now();
111 // Get user selected range or fall back to default
112 let range
= graphBox
.data('range');
114 range
= graphBox
.data('defaultRange');
117 // Generate new image URL with timestamp
118 const imageUrl
= `/cgi-bin/getrrdimage.cgi?origin=${origin}&graph=${graph}&range=${range}×tamp=${timestamp}`;
120 // Get graph image and set new URL
121 graphBox
.children('img').first().attr('src', imageUrl
);