Change the way the darkmode is activated

The dark mode can now be activated or deactivated via the maintenance page with the help of a button.

front/css/pialert.css

@@ -453,7 +453,7 @@
 }
 
 .dbtools-button {
-  margin: 5px; display: inline-block; width: 140px; height: 140px; white-space: normal; word-wrap: break-word; font-size: 16px; border-radius: 10px;
+  margin: 5px; display: inline-block; width: 140px; height: 100px; white-space: normal; word-wrap: break-word; font-size: 16px; border-radius: 10px;
 }
 
 .db_info_table_cell:nth-child(1) {background: white}
@@ -472,4 +472,4 @@
 }
 .db_info_table_row {display: table-row; padding: 3px; }
 .db_info_table_cell {display: table-cell; padding: 3px; padding-left: 10px;}
-}
+

front/maintenance.php

@@ -28,7 +28,7 @@
     </section>
 
     <!-- Main content ---------------------------------------------------------- -->
-    <section class="content" style="min-height: 750px;">
+    <section class="content" style="min-height: 600px;">
 
 
   <?php
@@ -91,6 +91,8 @@ $latestbackup_date = date ("Y-m-d H:i:s", filemtime($latestbackup));
 
     <div class="col-xs-12" style="text-align:center; padding-top: 10px; margin-bottom: 50px;">
 
+          <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()">Switch Themes (Dark/Light)</button>
+
           <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()">Delete Devices with empty MACs</button>
 
           <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()">Delete All Devices</button>
@@ -221,6 +223,22 @@ function PiaRestoreDBfromArchive()
   });
 }
 
+// Restore DB from Archive 
+function askPiaEnableDarkmode () {
+  // Ask 
+  showModalWarning('Switch Theme', 'After the theme switch, the page tries to reload itself to activate the change. If necessary, the cache must be cleared.',
+    'Cancel', 'Switch', 'PiaEnableDarkmode');
+}
+
+
+function PiaEnableDarkmode()
+{ 
+  // Execute
+  $.get('php/server/devices.php?action=PiaEnableDarkmode', function(msg) {
+    showMessage (msg);
+  });
+}
+
 </script>
 
 

front/php/server/devices.php

@@ -41,6 +41,7 @@
       case 'deleteEvents':            deleteEvents();                          break;
       case 'PiaBackupDBtoArchive':    PiaBackupDBtoArchive();                  break;
       case 'PiaRestoreDBfromArchive': PiaRestoreDBfromArchive();               break;
+      case 'PiaEnableDarkmode':       PiaEnableDarkmode();                     break;
 
       case 'getDevicesTotals':        getDevicesTotals();                      break;
       case 'getDevicesList':          getDevicesList();                        break;
@@ -314,6 +315,25 @@ function PiaRestoreDBfromArchive() {
 
 }
 
+//------------------------------------------------------------------------------
+//  Switch Themes
+//------------------------------------------------------------------------------
+function PiaEnableDarkmode() {
+  $file = '../../../db/darkmode';
+
+  if (file_exists($file)) {
+      echo 'Darkmode Disabled';
+      unlink($file);
+      echo("<meta http-equiv='refresh' content='1'>");
+     } else {
+      echo 'Darkmode Enabled';
+      $darkmode = fopen($file, 'w');
+      echo("<meta http-equiv='refresh' content='1'>");
+     }
+  }
+
+
+
 //------------------------------------------------------------------------------
 //  Query total numbers of Devices by status
 //------------------------------------------------------------------------------

front/php/templates/header.php

@@ -8,7 +8,7 @@
 #--------------------------------------------------------------------------- -->
 
 <?php
-if (file_exists("darkmode")) {
+if (file_exists('../db/darkmode')) {
     $ENABLED_DARKMODE = True;
 }
 ?>
@@ -57,9 +57,7 @@ if (file_exists("darkmode")) {
   <!-- Google Font -->
   <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> -->
   <link rel="stylesheet" href="css/offline-font.css">
-
-  <!-- Page Icon -->
-  <link rel="icon" type="image/png" sizes="160x160" href="img/pialertLogoGray80.png" />
+  <link rel="icon" type="image/x-icon" href="img/pialertLogoOrange.png">
 
   <!-- For better UX on Mobile Devices using the Shortcut on the Homescreen -->
   <link rel="manifest" href="img/manifest.json">
@@ -77,7 +75,7 @@ if ($ENABLED_DARKMODE === True) {
 var pia_servertime = new Date(<?php echo date("Y, n, j, G, i, s") ?>);
 
 function show_pia_servertime() {
-    if (!document.all && !document.getElementById) {
+    if (!document.getElementById) {
         return;
     }
     var pia_hour = pia_servertime.getHours();
@@ -87,7 +85,7 @@ function show_pia_servertime() {
     if (pia_hour <= 9) { pia_hour = "0" + pia_hour; }
     if (pia_minute <= 9) { pia_minute = "0" + pia_minute; }
     if (pia_second <= 9) { pia_second = "0" + pia_second; } realtime_pia_servertime = "(" + pia_hour + ":" + pia_minute + ":" + pia_second + ")";
-    if (document.getElementById) { document.getElementById("PIA_Servertime_place").innerHTML = realtime_pia_servertime; } else if (document.all) { PIA_Servertime_place.innerHTML = realtime_pia_servertime; } setTimeout("show_pia_servertime()", 1000);
+    if (document.getElementById) { document.getElementById("PIA_Servertime_place").innerHTML = realtime_pia_servertime; } setTimeout("show_pia_servertime()", 1000);
 }
 </script>
 
@@ -147,7 +145,7 @@ function show_pia_servertime() {
               <!-- Menu Body -->
 
 
-<!--               <li class="user-body">
+              <li class="user-body">
                 <div class="row">
                   <div class="col-xs-4 text-center">
                     <a target="_blank" href="https://github.com/pucherot/Pi.Alert">GitHub Pi.Alert</a>
@@ -157,22 +155,15 @@ function show_pia_servertime() {
                   </div>
                   <div class="col-xs-4 text-center">
                     <a target="_blank" href="https://github.com/pucherot/Pi.Alert/blob/main/LICENSE.txt">GNU GPLv3</a>
-                  </div> -->
-
-
+                  </div>
                   <!--
                   <div class="col-xs-4 text-center">
                     <a href="#">Updates</a>
                   </div>
                   -->
-
-
-                <!-- </div> -->
-
-
+                </div>
                 <!-- /.row -->
-             
-              <!-- </li> -->
+              </li>
               
             </ul>
           </li>