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 {
@@ -530,4 +526,4 @@ background-image: url('../img/Loading_Animation.gif');
 background-repeat: no-repeat;
 background-position: center;
 height: 50px;
-}
+}

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,64 +113,13 @@
             </div>
           </div>
       </div>
-
-        <script>
-        var xValues = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
-        new Chart("OnlineChart", {
-          type: "line",
-          data: {
-            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 -->
+      <script src="js/graph_online_history.js"></script>
+      <script>
+        var pia_js_online_history_time = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
+        var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>];
+        var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>];
+        pia_draw_graph_online_history(pia_js_online_history_time, pia_js_online_history_ondev, pia_js_online_history_dodev);
+      </script>
 
 <!-- datatable ------------------------------------------------------------- -->
       <div class="row">

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,151 +160,194 @@ if (submit && isset($_POST['langselector_set'])) {
 }
 ?>
 
-<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">
-            <?php echo $pia_db;?>
-        </div>
-    </div>
-    <div class="db_info_table_row">
-        <div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_size'];?></div>
-        <div class="db_info_table_cell">
-            <?php echo $pia_db_size;?>
-        </div>
-    </div>
-    <div class="db_info_table_row">
-        <div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_lastmod'];?></div>
-        <div class="db_info_table_cell">
-            <?php echo $pia_db_mod;?>
-        </div>
-    </div>
-    <div class="db_info_table_row">
-        <div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_backup'];?></div>
-        <div class="db_info_table_cell">
-            <?php echo $Pia_Archive_count.' '.$pia_lang['Maintenance_database_backup_found'].' / '.$pia_lang['Maintenance_database_backup_total'].': '.$Pia_Archive_diskusage;?>
-        </div>
-    </div>
-    <div class="db_info_table_row">
-        <div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_arp_status'];?></div>
-        <div class="db_info_table_cell">
-            <?php echo $pia_arpscans_result;?></div>
-    </div>
-</div>
 
-<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>
-                    <option value="skin-black-light">black light</option>
-                    <option value="skin-black">black</option>
-                    <option value="skin-blue-light">blue light</option>
-                    <option value="skin-blue">blue</option>
-                    <option value="skin-green-light">green light</option>
-                    <option value="skin-green">green</option>
-                    <option value="skin-purple-light">purple light</option>
-                    <option value="skin-purple">purple</option>
-                    <option value="skin-red-light">red light</option>
-                    <option value="skin-red">red</option>
-                    <option value="skin-yellow-light">yellow light</option>
-                    <option value="skin-yellow">yellow</option>
-                </select></div>
-            <div style="display: inline-block;"><input type="submit" name="skinselector_set" value="Okay">
-                <?php echo $pia_skin_test; ?>
+      <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">
+                            <?php echo $pia_db;?>
+                        </div>
+                    </div>
+                    <div class="db_info_table_row">
+                        <div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_size'];?></div>
+                        <div class="db_info_table_cell">
+                            <?php echo $pia_db_size;?>
+                        </div>
+                    </div>
+                    <div class="db_info_table_row">
+                        <div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_lastmod'];?></div>
+                        <div class="db_info_table_cell">
+                            <?php echo $pia_db_mod;?>
+                        </div>
+                    </div>
+                    <div class="db_info_table_row">
+                        <div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_database_backup'];?></div>
+                        <div class="db_info_table_cell">
+                            <?php echo $Pia_Archive_count.' '.$pia_lang['Maintenance_database_backup_found'].' / '.$pia_lang['Maintenance_database_backup_total'].': '.$Pia_Archive_diskusage;?>
+                        </div>
+                    </div>
+                    <div class="db_info_table_row">
+                        <div class="db_info_table_cell"><?php echo $pia_lang['Maintenance_arp_status'];?></div>
+                        <div class="db_info_table_cell">
+                            <?php echo $pia_arpscans_result;?></div>
+                    </div>
+                </div>                
+              </div>
+              <!-- /.box-body -->
             </div>
-        </div>
-    </div>
-    <div class="db_info_table_row">
-        <div class="db_info_table_cell" style="padding: 10px; height:40px; text-align:center; vertical-align: middle;">
-            <?php echo $pia_lang['Maintenance_themeselector_text'];?>
-        </div>
-    </div>
-</div>
-</form>
+          </div>
+      </div>
 
-
-<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>
-                    <option value="en_us"><?php echo $pia_lang['Maintenance_lang_en_us'];?></option>
-                    <option value="de_de"><?php echo $pia_lang['Maintenance_lang_de_de'];?></option>
-                </select></div>
-            <div style="display: inline-block;"><input type="submit" name="langselector_set" value="Okay">
-                <?php echo $pia_lang_test; ?>
+      <div class="row">
+          <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;">
+                                <select name="skinselector">
+                                    <option value=""><?php echo $pia_lang['Maintenance_themeselector_empty'];?></option>
+                                    <option value="skin-black-light">black light</option>
+                                    <option value="skin-black">black</option>
+                                    <option value="skin-blue-light">blue light</option>
+                                    <option value="skin-blue">blue</option>
+                                    <option value="skin-green-light">green light</option>
+                                    <option value="skin-green">green</option>
+                                    <option value="skin-purple-light">purple light</option>
+                                    <option value="skin-purple">purple</option>
+                                    <option value="skin-red-light">red light</option>
+                                    <option value="skin-red">red</option>
+                                    <option value="skin-yellow-light">yellow light</option>
+                                    <option value="skin-yellow">yellow</option>
+                                </select></div>
+                            <div style="display: inline-block;"><input type="submit" name="skinselector_set" value="Okay">
+                                <?php echo $pia_skin_test; ?>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="db_info_table_row">
+                        <div class="db_info_table_cell" style="padding: 10px; height:40px; text-align:center; vertical-align: middle;">
+                            <?php echo $pia_lang['Maintenance_themeselector_text'];?>
+                        </div>
+                    </div>
+                </div>
+                </form>
+              </div>
+              <!-- /.box-body -->
             </div>
-        </div>
-    </div>
-    <div class="db_info_table_row">
-        <div class="db_info_table_cell" style="padding: 10px; height:40px; text-align:center; vertical-align: middle;">
-            <?php echo $pia_lang['Maintenance_lang_selector_text'];?>
-        </div>
-    </div>
-</div>
-</form>
+          </div>
+      </div>
 
 
+      <div class="row">
+          <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;">
+                                <select name="langselector">
+                                    <option value=""><?php echo $pia_lang['Maintenance_lang_selector_empty'];?></option>
+                                    <option value="en_us"><?php echo $pia_lang['Maintenance_lang_en_us'];?></option>
+                                    <option value="de_de"><?php echo $pia_lang['Maintenance_lang_de_de'];?></option>
+                                </select></div>
+                            <div style="display: inline-block;"><input type="submit" name="langselector_set" value="Okay">
+                                <?php echo $pia_lang_test; ?>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="db_info_table_row">
+                        <div class="db_info_table_cell" style="padding: 10px; height:40px; text-align:center; vertical-align: middle;">
+                            <?php echo $pia_lang['Maintenance_lang_selector_text'];?>
+                        </div>
+                    </div>
+                </div>
+                </form>
+              </div>
+              <!-- /.box-body -->
+            </div>
+          </div>
+      </div>
 
-
-<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>
-        </div>
-        <div class="db_tools_table_cell_b" style=""><?php echo $pia_lang['Maintenance_Tool_darkmode_text'];?></div>
-    </div>
-    <div class="db_info_table_row">
-        <div class="db_tools_table_cell_a">
-            <button type="button" class="btn btn-default pa-btn pa-btn-delete bg-yellow dbtools-button" id="btnPiaToggleArpScan" style="border-top: solid 3px #ffd080;" onclick="askPiaToggleArpScan()"><?php echo $pia_lang['Maintenance_Tool_arpscansw'];?></button>
-        </div>
-        <div class="db_tools_table_cell_b" style=""><?php echo $pia_lang['Maintenance_Tool_arpscansw_text'];?></div>
-    </div>
-    <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-red dbtools-button" id="btnDeleteMAC" style="border-top: solid 3px #dd4b39;" onclick="askDeleteDevicesWithEmptyMACs()"><?php echo $pia_lang['Maintenance_Tool_del_empty_macs'];?></button>
-        </div>
-        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_empty_macs_text'];?></div>
-    </div>
-    <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-red dbtools-button" id="btnDeleteMAC" style="border-top: solid 3px #dd4b39;" onclick="askDeleteAllDevices()"><?php echo $pia_lang['Maintenance_Tool_del_alldev'];?></button>
-        </div>
-        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_alldev_text'];?></div>
-    </div>
-    <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-red dbtools-button" id="btnDeleteUnknown" style="border-top: solid 3px #dd4b39;" onclick="askDeleteUnknown()"><?php echo $pia_lang['Maintenance_Tool_del_unknowndev'];?></button>
-        </div>
-        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_unknowndev_text'];?></div>
-    </div>
-    <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-red dbtools-button" id="btnDeleteEvents" style="border-top: solid 3px #dd4b39;" onclick="askDeleteEvents()"><?php echo $pia_lang['Maintenance_Tool_del_allevents'];?></button>
-        </div>
-        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_allevents_text'];?></div>
-    </div>
-    <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-red dbtools-button" id="btnPiaBackupDBtoArchive" style="border-top: solid 3px #dd4b39;" onclick="askPiaBackupDBtoArchive()"><?php echo $pia_lang['Maintenance_Tool_backup'];?></button>
-        </div>
-        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_backup_text'];?></div>
-    </div>
-    <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-red dbtools-button" id="btnPiaRestoreDBfromArchive" style="border-top: solid 3px #dd4b39;" onclick="askPiaRestoreDBfromArchive()"><?php echo $pia_lang['Maintenance_Tool_restore'];?><br><?php echo $latestbackup_date;?></button>
-        </div>
-        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_restore_text'];?></div>
-    </div>
-</div>
-
+      <div class="row">
+          <div class="col-md-12">
+          <div class="box" id="Maintain-Tools">
+              <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>
+                        </div>
+                        <div class="db_tools_table_cell_b" style=""><?php echo $pia_lang['Maintenance_Tool_darkmode_text'];?></div>
+                    </div>
+                    <div class="db_info_table_row">
+                        <div class="db_tools_table_cell_a">
+                            <button type="button" class="btn btn-default pa-btn pa-btn-delete bg-yellow dbtools-button" id="btnPiaToggleArpScan" style="border-top: solid 3px #ffd080;" onclick="askPiaToggleArpScan()"><?php echo $pia_lang['Maintenance_Tool_arpscansw'];?></button>
+                        </div>
+                        <div class="db_tools_table_cell_b" style=""><?php echo $pia_lang['Maintenance_Tool_arpscansw_text'];?></div>
+                    </div>
+                    <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-red dbtools-button" id="btnDeleteMAC" style="border-top: solid 3px #dd4b39;" onclick="askDeleteDevicesWithEmptyMACs()"><?php echo $pia_lang['Maintenance_Tool_del_empty_macs'];?></button>
+                        </div>
+                        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_empty_macs_text'];?></div>
+                    </div>
+                    <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-red dbtools-button" id="btnDeleteMAC" style="border-top: solid 3px #dd4b39;" onclick="askDeleteAllDevices()"><?php echo $pia_lang['Maintenance_Tool_del_alldev'];?></button>
+                        </div>
+                        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_alldev_text'];?></div>
+                    </div>
+                    <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-red dbtools-button" id="btnDeleteUnknown" style="border-top: solid 3px #dd4b39;" onclick="askDeleteUnknown()"><?php echo $pia_lang['Maintenance_Tool_del_unknowndev'];?></button>
+                        </div>
+                        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_unknowndev_text'];?></div>
+                    </div>
+                    <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-red dbtools-button" id="btnDeleteEvents" style="border-top: solid 3px #dd4b39;" onclick="askDeleteEvents()"><?php echo $pia_lang['Maintenance_Tool_del_allevents'];?></button>
+                        </div>
+                        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_del_allevents_text'];?></div>
+                    </div>
+                    <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-red dbtools-button" id="btnPiaBackupDBtoArchive" style="border-top: solid 3px #dd4b39;" onclick="askPiaBackupDBtoArchive()"><?php echo $pia_lang['Maintenance_Tool_backup'];?></button>
+                        </div>
+                        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_backup_text'];?></div>
+                    </div>
+                    <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-red dbtools-button" id="btnPiaRestoreDBfromArchive" style="border-top: solid 3px #dd4b39;" onclick="askPiaRestoreDBfromArchive()"><?php echo $pia_lang['Maintenance_Tool_restore'];?><br><?php echo $latestbackup_date;?></button>
+                        </div>
+                        <div class="db_tools_table_cell_b"><?php echo $pia_lang['Maintenance_Tool_restore_text'];?></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,61 +114,13 @@
           </div>
       </div>
 
-        <script>
-        var xValues = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
-        new Chart("OnlineChart", {
-          type: "line",
-          data: {
-            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>
+      <script src="js/graph_online_history.js"></script>
+      <script>
+        var pia_js_online_history_time = [<?php pia_graph_devices_data($Pia_Graph_Device_Time); ?>];
+        var pia_js_online_history_ondev = [<?php pia_graph_devices_data($Pia_Graph_Device_Online); ?>];
+        var pia_js_online_history_dodev = [<?php pia_graph_devices_data($Pia_Graph_Device_Down); ?>];
+        pia_draw_graph_online_history(pia_js_online_history_time, pia_js_online_history_ondev, pia_js_online_history_dodev);
+      </script>
   
       <!-- /.row -->