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

@@ -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;
 }

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 {

front/devices.php

@@ -96,16 +96,16 @@
       </div>
 
 <!-- Activity Chart ------------------------------------------------------- -->
+
       <div class="row">
           <div class="col-md-12">
           <div class="box" id="clients">
               <div class="box-header with-border">
-                <h3 class="box-title"><?php echo $pia_lang['Device_Shortcut_OnlineChart_a'];?>  <span class="maxlogage-interval">40</span> <?php echo $pia_lang['Device_Shortcut_OnlineChart_b'];?></h3>
+                <h3 class="box-title"><?php echo $pia_lang['Device_Shortcut_OnlineChart_a'];?>  <span class="maxlogage-interval">12</span> <?php echo $pia_lang['Device_Shortcut_OnlineChart_b'];?></h3>
               </div>
               <div class="box-body">
                 <div class="chart">
                   <script src="lib/AdminLTE/bower_components/chart.js/Chart.js"></script>
-                  <!-- <canvas id="clientsChart" width="800" height="140" class="extratooltipcanvas no-user-select"></canvas> -->
                   <canvas id="OnlineChart" style="width:100%; height: 150px;  margin-bottom: 15px;"></canvas>
                 </div>
               </div>
@@ -113,65 +113,14 @@
             </div>
           </div>
       </div>
-
+      <script src="js/graph_online_history.js"></script>
       <script>
-        var xValues = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
+        var pia_js_online_history_time = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
-        new Chart("OnlineChart", {
+        var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>];
-          type: "line",
+        var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>];
-          data: {
+        pia_draw_graph_online_history(pia_js_online_history_time, pia_js_online_history_ondev, pia_js_online_history_dodev);
-            labels: xValues,
-            datasets: [{
-              label: 'Online Devices',
-              data: [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>],
-              borderColor: "#00a65a",
-              fill: true,
-              backgroundColor: "rgba(0, 166, 89, .3)",
-              pointStyle: 'circle',
-              pointRadius: 3,
-              pointHoverRadius: 3
-            }, {
-              label: 'Offline/Down Devices',
-              data: [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>],
-              borderColor: "#dd4b39",
-              fill: true,
-              backgroundColor: "rgba(222, 74, 56, .3)",
-              pointStyle: 'circle',
-              pointRadius: 3,
-              pointHoverRadius: 3
-            }]
-          },
-          options: {
-            legend: {
-                display: true,
-                labels: {
-                    fontColor: "#A0A0A0",
-                }
-            },
-            scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero:true,
-                        fontColor: '#A0A0A0'
-                    },
-                    gridLines: {
-                        color: "#999999"
-                    },
-                }],
-                xAxes: [{
-                    ticks: {
-                        fontColor: '#A0A0A0',
-                    },
-                    gridLines: {
-                        color: "#999999"
-                    },
-                }],
-            }
-          }
-        });
       </script>
 
-      <!-- /.row -->
-
 <!-- datatable ------------------------------------------------------------- -->
       <div class="row">
         <div class="col-xs-12">

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,
+                }],
+            }
+          }
+        });
+}

front/maintenance.php

@@ -160,7 +160,15 @@ if (submit && isset($_POST['langselector_set'])) {
 }
 ?>
 
-<div class="db_info_table">
+
+      <div class="row">
+          <div class="col-md-12">
+          <div class="box" id="Maintain-Status">
+              <div class="box-header with-border">
+                <h3 class="box-title">Status</h3>
+              </div>
+              <div class="box-body">
+                <div class="db_info_table">
                     <div class="db_info_table_row">
                         <div class="db_info_table_cell" style="min-width: 140px"><?php echo $pia_lang['Maintenance_database_path'];?></div>
                         <div class="db_info_table_cell">
@@ -190,13 +198,24 @@ if (submit && isset($_POST['langselector_set'])) {
                         <div class="db_info_table_cell">
                             <?php echo $pia_arpscans_result;?></div>
                     </div>
-</div>
+                </div>                
+              </div>
+              <!-- /.box-body -->
+            </div>
+          </div>
+      </div>
 
-<form method="post" action="maintenance.php">
+      <div class="row">
-<div class="db_info_table">
+          <div class="col-md-12">
+          <div class="box" id="Maintain-Skin">
+              <div class="box-header with-border">
+                <h3 class="box-title"><?php echo $pia_lang['Maintenance_themeselector_lable'];?>:</h3>
+              </div>
+              <div class="box-body">
+                <form method="post" action="maintenance.php">
+                <div class="db_info_table">
                     <div class="db_info_table_row">
                         <div class="db_info_table_cell" style="padding-left: 5px; height:50px; text-align:center; vertical-align: middle;">
-            <div style="display: inline-block; margin-right: 10px;"><?php echo $pia_lang['Maintenance_themeselector_lable'];?>:</div>
                             <div style="display: inline-block;">
                                 <select name="skinselector">
                                     <option value=""><?php echo $pia_lang['Maintenance_themeselector_empty'];?></option>
@@ -223,15 +242,26 @@ if (submit && isset($_POST['langselector_set'])) {
                             <?php echo $pia_lang['Maintenance_themeselector_text'];?>
                         </div>
                     </div>
-</div>
+                </div>
-</form>
+                </form>
+              </div>
+              <!-- /.box-body -->
+            </div>
+          </div>
+      </div>
 
 
-<form method="post" action="maintenance.php">
+      <div class="row">
-<div class="db_info_table">
+          <div class="col-md-12">
+          <div class="box" id="Maintain-Lang">
+              <div class="box-header with-border">
+                <h3 class="box-title"><?php echo $pia_lang['Maintenance_lang_selector_lable'];?>:</h3>
+              </div>
+              <div class="box-body">
+                <form method="post" action="maintenance.php">
+                <div class="db_info_table">
                     <div class="db_info_table_row">
                         <div class="db_info_table_cell" style="padding-left: 5px; height:50px; text-align:center; vertical-align: middle;">
-            <div style="display: inline-block; margin-right: 10px;"><?php echo $pia_lang['Maintenance_lang_selector_lable'];?>:</div>
                             <div style="display: inline-block;">
                                 <select name="langselector">
                                     <option value=""><?php echo $pia_lang['Maintenance_lang_selector_empty'];?></option>
@@ -248,13 +278,22 @@ if (submit && isset($_POST['langselector_set'])) {
                             <?php echo $pia_lang['Maintenance_lang_selector_text'];?>
                         </div>
                     </div>
-</div>
+                </div>
-</form>
+                </form>
+              </div>
+              <!-- /.box-body -->
+            </div>
+          </div>
+      </div>
 
-
+      <div class="row">
-
+          <div class="col-md-12">
-
+          <div class="box" id="Maintain-Tools">
-<div class="db_info_table">
+              <div class="box-header with-border">
+                <h3 class="box-title">Tools:</h3>
+              </div>
+              <div class="box-body">
+                <div class="db_info_table">
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a" style="">
                             <button type="button" class="btn btn-default pa-btn pa-btn-delete bg-green dbtools-button" id="btnPiaEnableDarkmode" style="border-top: solid 3px #00a65a;" onclick="askPiaEnableDarkmode()"><?php echo $pia_lang['Maintenance_Tool_darkmode'];?></button>
@@ -303,8 +342,12 @@ if (submit && isset($_POST['langselector_set'])) {
                         </div>
                         <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_restore_text'];?></div>
                     </div>
-</div>
+                </div>
-
+             </div>
+              <!-- /.box-body -->
+            </div>
+          </div>
+      </div>
 
 <div style="width: 100%; height: 20px;"></div>
     <!-- ----------------------------------------------------------------------- -->

front/php/templates/graph.php

@@ -1,11 +1,10 @@
 <?php
-
 $Pia_Graph_Device_Time = array();
 $Pia_Graph_Device_All = array();
 $Pia_Graph_Device_Online = array();
 $Pia_Graph_Device_Down = array();
 $db = new SQLite3('../db/pialert.db');
-$results = $db->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();
 ?>

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';

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';

front/presence.php

@@ -100,7 +100,7 @@
           <div class="col-md-12">
           <div class="box" id="clients">
               <div class="box-header with-border">
-                <h3 class="box-title"><?php echo $pia_lang['Device_Shortcut_OnlineChart_a'];?>  <span class="maxlogage-interval">40</span> <?php echo $pia_lang['Device_Shortcut_OnlineChart_b'];?></h3>
+                <h3 class="box-title"><?php echo $pia_lang['Device_Shortcut_OnlineChart_a'];?>  <span class="maxlogage-interval">12</span> <?php echo $pia_lang['Device_Shortcut_OnlineChart_b'];?></h3>
               </div>
               <div class="box-body">
                 <div class="chart">
@@ -114,60 +114,12 @@
           </div>
       </div>
 
+      <script src="js/graph_online_history.js"></script>
       <script>
-        var xValues = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
+        var pia_js_online_history_time = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
-        new Chart("OnlineChart", {
+        var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>];
-          type: "line",
+        var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>];
-          data: {
+        pia_draw_graph_online_history(pia_js_online_history_time, pia_js_online_history_ondev, pia_js_online_history_dodev);
-            labels: xValues,
-            datasets: [{
-              label: 'Online Devices',
-              data: [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>],
-              borderColor: "#00a65a",
-              fill: true,
-              backgroundColor: "rgba(0, 166, 89, .3)",
-              pointStyle: 'circle',
-              pointRadius: 3,
-              pointHoverRadius: 3
-            }, {
-              label: 'Offline/Down Devices',
-              data: [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>],
-              borderColor: "#dd4b39",
-              fill: true,
-              backgroundColor: "rgba(222, 74, 56, .3)",
-              pointStyle: 'circle',
-              pointRadius: 3,
-              pointHoverRadius: 3
-            }]
-          },
-          options: {
-            legend: {
-                display: true,
-                labels: {
-                    fontColor: "#A0A0A0",
-                }
-            },
-            scales: {
-                yAxes: [{
-                    ticks: {
-                        beginAtZero:true,
-                        fontColor: '#A0A0A0'
-                    },
-                    gridLines: {
-                        color: "#999999"
-                    },
-                }],
-                xAxes: [{
-                    ticks: {
-                        fontColor: '#A0A0A0',
-                    },
-                    gridLines: {
-                        color: "#999999"
-                    },
-                }],
-            }
-          }
-        });
       </script>
   
       <!-- /.row -->