From 2e970d028984b00dc58a73df3f3a0c3251ca1d47 Mon Sep 17 00:00:00 2001 From: leiweibau <105860611+leiweibau@users.noreply.github.com> Date: Thu, 14 Jul 2022 18:43:38 +0200 Subject: [PATCH] improve history graph - JS optimized to avoid duplicate code - Page redesigned with the help of the frameworks provides by AdminLTE - Modification of the chart for a better presentation - Headlines changed --- front/css/dark-patch.css | 5 +- front/css/pialert.css | 8 +- front/devices.php | 69 +----- front/js/graph_online_history.js | 57 +++++ front/maintenance.php | 319 ++++++++++++++----------- front/php/templates/graph.php | 5 +- front/php/templates/language/de_de.php | 2 + front/php/templates/language/en_us.php | 2 + front/presence.php | 64 +---- 9 files changed, 264 insertions(+), 267 deletions(-) create mode 100644 front/js/graph_online_history.js diff --git a/front/css/dark-patch.css b/front/css/dark-patch.css index 799786fb..acba4e05 100644 --- a/front/css/dark-patch.css +++ b/front/css/dark-patch.css @@ -674,9 +674,6 @@ input[type="password"]::-webkit-caps-lock-indicator { border-spacing: 0em; font-weight: 400; font-size: 15px; - width: 95%; + width: 100%; margin: auto; - margin-top: 40px; - margin-bottom: 40px; - border: solid 1px #606060; } diff --git a/front/css/pialert.css b/front/css/pialert.css index 7f7c8849..b79da8e4 100644 --- a/front/css/pialert.css +++ b/front/css/pialert.css @@ -490,11 +490,8 @@ border-spacing: 0em; font-weight: 400; font-size: 15px; - width: 95%; + width: 100%; margin: auto; - margin-top: 40px; - margin-bottom: 40px; - border: solid 1px #ddd; } .db_info_table_row { @@ -522,7 +519,6 @@ font-size: 16px; vertical-align: middle; padding: 10px; - padding-right: 15px; } .ajax_scripts_loading { @@ -530,4 +526,4 @@ background-image: url('../img/Loading_Animation.gif'); background-repeat: no-repeat; background-position: center; height: 50px; -} \ No newline at end of file +} diff --git a/front/devices.php b/front/devices.php index 14de362c..ec388348 100644 --- a/front/devices.php +++ b/front/devices.php @@ -96,16 +96,16 @@ +
-

40

+

12

-
@@ -113,64 +113,13 @@
- - - - + +
diff --git a/front/js/graph_online_history.js b/front/js/graph_online_history.js new file mode 100644 index 00000000..b87bf468 --- /dev/null +++ b/front/js/graph_online_history.js @@ -0,0 +1,57 @@ +function pia_draw_graph_online_history(pia_js_graph_online_history_time, pia_js_graph_online_history_ondev, pia_js_graph_online_history_dodev) { + var xValues = pia_js_graph_online_history_time; + new Chart("OnlineChart", { + type: "bar", + data: { + labels: xValues, + datasets: [{ + label: 'Online Devices', + data: pia_js_graph_online_history_ondev, + borderColor: "#00a65a", + fill: true, + backgroundColor: "rgba(0, 166, 89, .6)", + pointStyle: 'circle', + pointRadius: 3, + pointHoverRadius: 3 + }, { + label: 'Offline/Down Devices', + data: pia_js_graph_online_history_dodev, + borderColor: "#dd4b39", + fill: true, + backgroundColor: "rgba(222, 74, 56, .6)", + pointStyle: 'circle', + pointRadius: 3, + pointHoverRadius: 3 + }] + }, + options: { + legend: { + display: true, + labels: { + fontColor: "#A0A0A0", + } + }, + scales: { + yAxes: [{ + ticks: { + beginAtZero:true, + fontColor: '#A0A0A0' + }, + gridLines: { + color: "rgba(0, 0, 0, 0)", + }, + stacked: true, + }], + xAxes: [{ + ticks: { + fontColor: '#A0A0A0', + }, + gridLines: { + color: "rgba(0, 0, 0, 0)", + }, + stacked: true, + }], + } + } + }); +} \ No newline at end of file diff --git a/front/maintenance.php b/front/maintenance.php index c9650a8e..51462c18 100644 --- a/front/maintenance.php +++ b/front/maintenance.php @@ -160,151 +160,194 @@ if (submit && isset($_POST['langselector_set'])) { } ?> -
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
:
-
-
-
- +
+
+
+
+

Status

+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
-
-
-
-
- -
-
-
- +
+
- -
-
-
-
-
:
-
-
-
- +
+
+
+
+

:

+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ +
+
-
-
-
-
- -
-
-
- +
+
+
+
+
+
+

:

+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
- -
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
- +
+
+
+
+

Tools:

+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+ +
+
+
diff --git a/front/php/templates/graph.php b/front/php/templates/graph.php index 7706d2da..75a7bbb0 100644 --- a/front/php/templates/graph.php +++ b/front/php/templates/graph.php @@ -1,11 +1,10 @@ query('SELECT * FROM Online_History ORDER BY Scan_Date DESC LIMIT 40'); +$results = $db->query('SELECT * FROM Online_History ORDER BY Scan_Date DESC LIMIT 144'); while ($row = $results->fetchArray()) { $time_raw = explode(' ', $row['Scan_Date']); $time = explode(':', $time_raw[1]); @@ -21,5 +20,5 @@ function pia_graph_devices_data($Pia_Graph_Array) { echo ","; } } - +$db->close(); ?> \ No newline at end of file diff --git a/front/php/templates/language/de_de.php b/front/php/templates/language/de_de.php index d6ec1c58..17600d43 100644 --- a/front/php/templates/language/de_de.php +++ b/front/php/templates/language/de_de.php @@ -15,6 +15,8 @@ $pia_lang['Device_Shortcut_NewDevices'] = 'Neue Geräte'; $pia_lang['Device_Shortcut_DownAlerts'] = 'Down Meldung'; $pia_lang['Device_Shortcut_Archived'] = 'Archiviert'; $pia_lang['Device_Shortcut_Devices'] = 'Geräte'; +$pia_lang['Device_Shortcut_OnlineChart_a'] = 'Netzwerkaktivität über die letzten'; +$pia_lang['Device_Shortcut_OnlineChart_b'] = 'Stunden'; $pia_lang['Device_TableHead_Name'] = 'Name'; $pia_lang['Device_TableHead_Owner'] = 'Eigentümer'; $pia_lang['Device_TableHead_Type'] = 'Typ'; diff --git a/front/php/templates/language/en_us.php b/front/php/templates/language/en_us.php index d3c91219..36da6ed2 100644 --- a/front/php/templates/language/en_us.php +++ b/front/php/templates/language/en_us.php @@ -15,6 +15,8 @@ $pia_lang['Device_Shortcut_NewDevices'] = 'New Devices'; $pia_lang['Device_Shortcut_DownAlerts'] = 'Down Alerts'; $pia_lang['Device_Shortcut_Archived'] = 'Archived'; $pia_lang['Device_Shortcut_Devices'] = 'Devices'; +$pia_lang['Device_Shortcut_OnlineChart_a'] = 'Network activity over last'; +$pia_lang['Device_Shortcut_OnlineChart_b'] = 'hours'; $pia_lang['Device_TableHead_Name'] = 'Name'; $pia_lang['Device_TableHead_Owner'] = 'Owner'; $pia_lang['Device_TableHead_Type'] = 'Type'; diff --git a/front/presence.php b/front/presence.php index 46246503..733beea5 100644 --- a/front/presence.php +++ b/front/presence.php @@ -100,7 +100,7 @@
-

40

+

12

@@ -114,61 +114,13 @@
- + +