css fixes, removal of ionicons

front/css/app.css

@@ -2101,7 +2101,12 @@ input[readonly] {
     transition: opacity 0.3s ease-in-out;
     pointer-events: none;
     display: block;
-    z-index: 999;
+    z-index: 800;
+}
+
+.fa-spinner
+{
+    font-size: initial;
 }
 
 #loadingSpinner.visible {

front/deviceDetailsEvents.php

@@ -110,7 +110,7 @@ function initializeEventsDatatable (eventsRows) {
       'processing'  : true,
       'language'    : {
           processing: '<table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td>'+
-                      '<td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></i></td></table>',
+                      '<td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td></table>',
           emptyTable: 'No data',
           "lengthMenu": "<?= lang('Events_Tablelenght');?>",
           "search":     "<?= lang('Events_Searchbox');?>: ",

front/deviceDetailsSessions.php

@@ -74,7 +74,7 @@ function initializeSessionsDatatable (sessionsRows) {
     'processing'  : true,
     'language'    : {
       processing: '<table><td width="130px" align="middle"><?= lang("DevDetail_Loading");?></td>'+
-                  '<td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw">'+
+                  '<td><i class="fa-solid fa-spinner fa-spin-pulse"></i>'+
                   '</td></table>',
       emptyTable: 'No data',
       "lengthMenu": "<?= lang('Events_Tablelenght');?>",

front/devices.php

@@ -274,7 +274,7 @@ function processDeviceTotals(devicesData) {
     { status: 'down',               color: 'bg-red',    label: getString('Device_Shortcut_DownOnly'),   icon: 'fa-warning' },
     { status: 'archived',           color: 'bg-gray',   label: getString('Device_Shortcut_Archived'),   icon: 'fa-eye-slash' },
     { status: 'offline',            color: 'bg-gray',   label: getString('Gen_Offline'),                icon: 'fa-xmark' },
-    { status: 'offline',            color: 'bg-gray',   label: getString('Gen_Offline'),                icon: 'fa-xmark' },
+    { status: 'all_devices',        color: 'bg-gray',   label: getString('Gen_All_Devices'),            icon: 'fa-laptop' },
     { status: 'network_devices',    color: 'bg-aqua',   label: getString('Network_Devices'),            icon: 'fa-sitemap fa-rotate-270' }
   ];
 
@@ -301,13 +301,7 @@ function processDeviceTotals(devicesData) {
     }
   });
 
-  // Render info boxes/tile cards
-  console.log(getSetting('UI_hide_empty'));
-  
-  console.log(dataArray);
-  console.log(devicesData);
-  
-  
+  // Render info boxes/tile cards  
   renderInfoboxes(dataArray);
 }
 
@@ -566,15 +560,17 @@ function initializeDatatable (status) {
 
   // Define color & title for the status selected
   switch (deviceStatus) {
-    case 'my_devices': tableTitle = getString('Device_Shortcut_AllDevices');  color = 'aqua';    break;
-    case 'connected':  tableTitle = getString('Device_Shortcut_Connected');   color = 'green';   break;
-    case 'all':        tableTitle = getString('Gen_All_Devices');             color = 'aqua';    break;
-    case 'favorites':  tableTitle = getString('Device_Shortcut_Favorites');   color = 'yellow';  break;
-    case 'new':        tableTitle = getString('Device_Shortcut_NewDevices');  color = 'yellow';  break;
-    case 'down':       tableTitle = getString('Device_Shortcut_DownOnly');    color = 'red';     break;
-    case 'archived':   tableTitle = getString('Device_Shortcut_Archived');    color = 'gray';    break;
-    case 'offline':    tableTitle = getString('Gen_Offline');                 color = 'gray';    break;
-    default:           tableTitle = getString('Device_Shortcut_Devices');     color = 'gray';    break;
+    case 'my_devices':      tableTitle = getString('Device_Shortcut_AllDevices');  color = 'aqua';    break;
+    case 'connected':       tableTitle = getString('Device_Shortcut_Connected');   color = 'green';   break;
+    case 'all':             tableTitle = getString('Gen_All_Devices');             color = 'aqua';    break;
+    case 'favorites':       tableTitle = getString('Device_Shortcut_Favorites');   color = 'yellow';  break;
+    case 'new':             tableTitle = getString('Device_Shortcut_NewDevices');  color = 'yellow';  break;
+    case 'down':            tableTitle = getString('Device_Shortcut_DownOnly');    color = 'red';     break;
+    case 'archived':        tableTitle = getString('Device_Shortcut_Archived');    color = 'gray';    break;
+    case 'offline':         tableTitle = getString('Gen_Offline');                 color = 'gray';    break;
+    case 'all_devices':     tableTitle = getString('Gen_All_Devices');             color = 'gray';    break;
+    case 'network_devices': tableTitle = getString('Network_Devices');             color = 'aqua';    break;
+    default:                tableTitle = getString('Device_Shortcut_Devices');     color = 'gray';    break;
   } 
 
   // Set title and color

front/events.php

@@ -2,6 +2,10 @@
   require 'php/templates/header.php';  
 ?>
 
+<script>
+  showSpinner();
+</script>
+
 <!-- ----------------------------------------------------------------------- -->
  
 <!-- Page ------------------------------------------------------------------ -->
@@ -67,7 +71,7 @@
               <div class="inner"> <h3 id="eventsNewDevices"> -- </h3>
                 <p class="infobox_label"><?= lang('Events_Shortcut_NewDevices');?></p>
               </div>
-              <div class="icon"> <i class="ion ion-plus-round text-yellow-40"></i> </div>
+              <div class="icon"> <i class="fa-solid fa-circle-plus text-yellow-40"></i> </div>
             </div>
           </a>
         </div>
@@ -238,7 +242,7 @@ function initializeDatatable () {
     // Processing
     'processing'  : true,
     'language'    : {
-      processing: '<table><td width="130px" align="middle"><?= lang("Events_Loading");?></td><td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td></table>',
+      processing: '<table><td width="130px" align="middle"><?= lang("Events_Loading");?></td><td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td></table>',
       emptyTable: 'No data',
       "lengthMenu": "<?= lang('Events_Tablelenght');?>",
       "search":     "<?= lang('Events_Searchbox');?>: ",
@@ -247,6 +251,9 @@ function initializeDatatable () {
           "previous":   "<?= lang('Events_Table_nav_prev');?>"
       },
       "info":           "<?= lang('Events_Table_info');?>",
+    },
+    initComplete: function(settings, json) {
+        hideSpinner(); // Called after the DataTable is fully initialized
     }
   });
 

front/php/templates/header.php

@@ -42,7 +42,6 @@
   <script src="lib/datatables.net/js/jquery.dataTables.min.js"></script>
   <script src="lib/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
   <script src="lib/datatables.net/js/dataTables.select.min.js"></script>
-  <script src="lib/popper_tooltip/popper.min.js"></script>
 
   <script src="js/common.js?v=<?php include 'php/templates/version.php'; ?>"></script>
   <script src="js/modal.js?v=<?php include 'php/templates/version.php'; ?>"></script>
@@ -51,8 +50,6 @@
   <script src="js/settings_utils.js?v=<?php include 'php/templates/version.php'; ?>"></script>
   <script src="js/device.js?v=<?php include 'php/templates/version.php'; ?>"></script>
 
-
-  
   <!-- iCheck -->
 
   <link rel="stylesheet" href="lib/iCheck/all.css">
@@ -146,7 +143,7 @@
   <div class="panel panel-default pa_spinner">
     <table>
       <td id="loadingSpinnerText" width="130px" ></td>
-      <td><i class="ion ion-ios-loop-strong fa-spin fa-2x fa-fw"></td>
+      <td><i class="fa-solid fa-spinner fa-spin-pulse"></i></td>
     </table>
   </div>
 </div>

front/php/templates/language/en_us.json

@@ -364,11 +364,11 @@
     "Maint_PurgeLog": "Purge log",
     "Maint_RestartServer": "Restart server",
     "Maint_Restart_Server_noti_text": "Are you sure you want to restart the backend server? This may casue app inconsistency. Backup your setup first. <br/> <br/> Note: This may take a few minutes.",
-    "Maintenance_InitCheck": "Init Check",
+    "Maintenance_InitCheck": "Init check",
     "Maintenance_InitCheck_Checking": "Checking…",
     "Maintenance_InitCheck_QuickSetupGuide": "Make sure you followed the <a href=\"https://jokob-sk.github.io/NetAlertX/INITIAL_SETUP/\" target=\"_blank\">quick setup guide</a>.",
     "Maintenance_InitCheck_Success": "Application initialized succesfully!",
-    "Maintenance_ReCheck": "Retry Check",
+    "Maintenance_ReCheck": "Retry check",
     "Maintenance_Running_Version": "Installed version",
     "Maintenance_Status": "Status",
     "Maintenance_Title": "Maintenance tools",
@@ -474,7 +474,7 @@
     "NETWORK_DEVICE_TYPES_description": "Which device types are allowed to be used as network devices in the Network view. The device type has to match exactly the <code>Type</code> setting on a specific device in Device details. Add it on the device via the <code>+</code> button. Do not remove existing types, only add new ones.",
     "NETWORK_DEVICE_TYPES_name": "Network device types",
     "Navigation_About": "About",
-    "Navigation_AppEvents": "App Events",
+    "Navigation_AppEvents": "App events",
     "Navigation_Devices": "Devices",
     "Navigation_Donations": "Donations",
     "Navigation_Events": "Events",
@@ -485,7 +485,7 @@
     "Navigation_Notifications": "Notifications",
     "Navigation_Plugins": "Plugins",
     "Navigation_Presence": "Presence",
-    "Navigation_Report": "Sent Reports",
+    "Navigation_Report": "Sent reports",
     "Navigation_Settings": "Settings",
     "Navigation_SystemInfo": "System info",
     "Navigation_Workflows": "Workflows",
@@ -529,15 +529,15 @@
     "Network_Root": "Root node",
     "Network_Root_Not_Configured": "Select a network device type, for example a <b>Gateway</b>, in the <b>Type</b> field of the <a href=\"deviceDetails.php?mac=Internet\">the Internet root device</a> to start configuring this screen. <br/><br/> More documentation can be found in the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/NETWORK_TREE.md\" target=\"_blank\">How to setup your Network page</a> guide",
     "Network_Root_Unconfigurable": "Unconfigurable root",
-    "Network_ShowArchived": "Show Archived",
-    "Network_ShowOffline": "Show Offline",
+    "Network_ShowArchived": "Show archived",
+    "Network_ShowOffline": "Show offline",
     "Network_Table_Hostname": "Hostname",
     "Network_Table_IP": "IP",
     "Network_Table_State": "State",
     "Network_Title": "Network overview",
     "Network_UnassignedDevices": "Unassigned devices",
-    "Notifications_All": "All Notifications",
-    "Notifications_Mark_All_Read": "Mark All Read",
+    "Notifications_All": "All notifications",
+    "Notifications_Mark_All_Read": "Mark all read",
     "PIALERT_WEB_PASSWORD_description": "The default password is <code>123456</code>. To change the password run <code>/app/back/pialert-cli</code> in the container or use the <a onclick=\"toggleAllSettings()\" href=\"#SETPWD_RUN\"><code>SETPWD_RUN</code> Set password plugin</a>.",
     "PIALERT_WEB_PASSWORD_name": "Login password",
     "PIALERT_WEB_PROTECTION_description": "When enabled a login dialog is displayed. Read below carefully if you get locked out of your instance.",
@@ -563,7 +563,7 @@
     "Presence_Key_OnlineNow_desc": "Device detected in the last scan as online.",
     "Presence_Key_OnlinePast": "Past online",
     "Presence_Key_OnlinePastMiss": "Past online (miss-match)",
-    "Presence_Key_OnlinePastMiss_desc": "Device online in the past, but currently offline, but the start session might be missing or has conflicting data. (might be a bug - please submit a PR if you know how to fix it - I'm a bit lost in code here)",
+    "Presence_Key_OnlinePastMiss_desc": "Device online in the past, but currently offline, but the start session might be missing or has conflicting data.",
     "Presence_Key_OnlinePast_desc": "Device online in the past, but currently offline.",
     "Presence_Loading": "Loading…",
     "Presence_Shortcut_AllDevices": "My devices",
@@ -583,7 +583,7 @@
     "REPORT_MAIL_name": "Enable email",
     "REPORT_TITLE": "Report",
     "RandomMAC_hover": "Autodetected - indicates if the device randomizes it's MAC address. You can exclude specific MACs with the UI_NOT_RANDOM_MAC setting. Click to find out more.",
-    "Reports_Sent_Log": "Sent Reports Log",
+    "Reports_Sent_Log": "Sent reports log",
     "SCAN_SUBNETS_description": "Most on-network scanners (ARP-SCAN, NMAP, NSLOOKUP, DIG) rely on scanning specific network interfaces and subnets. Check the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">subnets documentation</a> for help on this setting, especially VLANs, what VLANs are supported, or how to figure out the network mask and your interface. <br/> <br/> An alternative to on-network scanners is to enable some other device scanners/importers that don't rely on NetAlert<sup>X</sup> having access to the network (UNIFI, dhcp.leases, PiHole, etc.). <br/> <br/> Note: The scan time itself depends on the number of IP addresses to check, so set this up carefully with the appropriate network mask and interface.",
     "SCAN_SUBNETS_name": "Networks to scan",
     "SYSTEM_TITLE": "System Information",

front/presence.php

@@ -16,6 +16,10 @@
   require 'php/templates/header.php';
 ?>
 
+<script>
+  showSpinner();
+</script>
+
 <!-- Page ------------------------------------------------------------------ -->
   <div class="content-wrapper">
 
@@ -67,7 +71,7 @@
               <div class="inner"> <h3 id="devicesNew"> -- </h3>
                 <p class="infobox_label"><?= lang('Presence_Shortcut_NewDevices');?></p>
               </div>
-              <div class="icon"> <i class="ion ion-plus-round text-yellow-40"></i> </div>
+              <div class="icon"> <i class="fa-solid fa-circle-plus text-yellow-40"></i> </div>
             </div>
           </a>
         </div>

front/report.php

@@ -5,6 +5,10 @@
   
 ?>
 
+<script>
+  showSpinner();
+</script>
+
 <!-- Page ------------------------------------------------------------------ -->
 <div class="content-wrapper">
 
@@ -119,6 +123,9 @@
             })
             .catch(error => {
                 console.error('Error:', error);
+            })
+            .finally(() => {
+                hideSpinner(); // always called, even if error occurred
             });
     }
 

front/systeminfo.php

@@ -17,6 +17,12 @@
 <!-- ----------------------------------------------------------------------- -->
  
 
+<script>
+
+  // show spinning icon
+  showSpinner()
+</script>
+
 <!-- Page ------------------------------------------------------------------ -->
 <div class="content-wrapper">
 
@@ -574,26 +580,19 @@ echo '<br>';
 
 <!-- ----------------------------------------------------------------------- -->
 
-
-
-
 <!-- DataTable initialization -->
 <script>
 
-  // show spinning icon
-  showSpinner()
-
   setTimeout(() => {
-
-    $('#networkTable').DataTable({
-            "searching": true,
-            "order": [[0, "desc"]]
-        });
-
-    // hide spinning icon
-    hideSpinner()
+      $('#networkTable').DataTable({
+      searching: true,
+      order: [[0, "desc"]],
+      initComplete: function(settings, json) {
+          hideSpinner(); // Called after the DataTable is fully initialized
+      }
+  });
     
-  }, 500);
+  }, 200);
 
 </script>
 

front/userNotifications.php

@@ -9,6 +9,9 @@ require 'php/templates/header.php';
 
 <!-- ----------------------------------------------------------------------- -->
  
+<script>
+  showSpinner();
+</script>
 
 <div id="notifications" class="content-wrapper">
   <section class="content">
@@ -160,7 +163,10 @@ require 'php/templates/header.php';
         
       ],
       "order": [[0, "desc"]]
-    });
+    ,
+    initComplete: function(settings, json) {
+        hideSpinner(); // Called after the DataTable is fully initialized
+    }});
 
     fetchData(function(data) {
       table.clear().rows.add(data).draw();

front/workflowsCore.php

@@ -4,6 +4,10 @@
   require_once  $_SERVER['DOCUMENT_ROOT'] . '/php/templates/security.php';
 ?>
 
+<script>
+  showSpinner();
+</script>
+
 
 <section class="content workflows col-sm-12 col-xs-12">
   <div id="workflowContainerWrap" class="bg-grey-dark color-palette  col-sm-12 col-xs-12 box-default box-info ">
@@ -83,8 +87,6 @@ let emptyWorkflow = {
 // Retrieve and process the data
 function getData() {
 
-  showSpinner();
-
   getSetting()
 
   $.get('php/server/query_json.php?file=workflows.json')