From 8586c5a307548cce950a57ea3e38c58e448ca6c2 Mon Sep 17 00:00:00 2001
From: jokob-sk <jokob.sk@gmail.com>
Date: Sat, 29 Nov 2025 15:45:28 +1100
Subject: [PATCH] FE: delay UI_DEFAULT_PAGE_SIZE setting check after cahce
 rebuilt #1181

Signed-off-by: jokob-sk <jokob.sk@gmail.com>
---
 front/devices.php  | 203 ++++++++++++++++++++++----------------------
 front/js/common.js | 207 ++++++++++++++++++++++-----------------------
 2 files changed, 206 insertions(+), 204 deletions(-)

diff --git a/front/devices.php b/front/devices.php
index d28638be..187869e2 100755
--- a/front/devices.php
+++ b/front/devices.php
@@ -1,7 +1,7 @@
 <!--
 #---------------------------------------------------------------------------------#
-#  NetAlertX                                                                       #
-#  Open Source Network Guard / WIFI & LAN intrusion detector                      #  
+#  NetAlertX                                                                      #
+#  Open Source Network Guard / WIFI & LAN intrusion detector                      #
 #                                                                                 #
 #  devices.php - Front module. Devices list page                                  #
 #---------------------------------------------------------------------------------#
@@ -15,7 +15,7 @@
 <?php
 
   require 'php/templates/header.php';
-  
+
   // check permissions
   // Use environment-aware paths with fallback to legacy locations
   $dbFolderPath = rtrim(getenv('NETALERTX_DB') ?: '/data/db', '/');
@@ -36,7 +36,7 @@
 ?>
 
 <!-- ----------------------------------------------------------------------- -->
- 
+
 
 <!-- Page ------------------------------------------------------------------ -->
   <div class="content-wrapper">
@@ -55,15 +55,15 @@
           <div class="col-md-12">
             <div class="box" id="clients">
               <div class="box-header ">
-                <h3 class="box-title col-md-12"><?= lang('Device_Shortcut_OnlineChart');?> </h3> 
+                <h3 class="box-title col-md-12"><?= lang('Device_Shortcut_OnlineChart');?> </h3>
               </div>
               <div class="box-body">
                 <div class="chart">
                   <script src="lib/chart.js/Chart.js?v=<?php include 'php/templates/version.php'; ?>"></script>
                   <!-- presence chart -->
-                  <?php  
+                  <?php
                       require 'php/components/graph_online_history.php';
-                  ?>     
+                  ?>
                 </div>
               </div>
               <!-- /.box-body -->
@@ -74,7 +74,7 @@
       <!-- Device Filters ------------------------------------------------------- -->
       <div class="box box-aqua hidden" id="columnFiltersWrap">
         <div class="box-header ">
-          <h3 class="box-title col-md-12"><?= lang('Devices_Filters');?> </h3> 
+          <h3 class="box-title col-md-12"><?= lang('Devices_Filters');?> </h3>
         </div>
         <!-- Placeholder ------------------------------------------------------- -->
          <div id="columnFilters" ></div>
@@ -88,8 +88,8 @@
             <!-- box-header -->
             <div class="box-header">
               <div class=" col-sm-8 ">
-                <h3 id="tableDevicesTitle" class="box-title text-gray "></h3>  
-              </div>    
+                <h3 id="tableDevicesTitle" class="box-title text-gray "></h3>
+              </div>
               <div  class="dummyDevice col-sm-4 ">
                 <span id="multiEditPlc">
                   <!-- multi edit button placeholder -->
@@ -104,8 +104,8 @@
             <div class="box-body table-responsive">
               <table id="tableDevices" class="table table-bordered table-hover table-striped">
                 <thead>
-                <tr>                
-                  
+                <tr>
+
                 </tr>
                 </thead>
               </table>
@@ -122,7 +122,7 @@
 <!-- ----------------------------------------------------------------------- -->
     </section>
     <!-- /.content -->
-    
+
   </div>
   <!-- /.content-wrapper -->
 
@@ -136,9 +136,9 @@
 <!-- page script ----------------------------------------------------------- -->
 <script>
   var deviceStatus    = 'all';
-  var tableRows       = getCache ("nax_parTableRows") == "" ? parseInt(getSetting("UI_DEFAULT_PAGE_SIZE")) : getCache ("nax_parTableRows") ;
+
   var tableOrder      = getCache ("nax_parTableOrder") == "" ? [[3,'desc'], [0,'asc']] : JSON.parse(getCache ("nax_parTableOrder")) ;
-  
+
   var tableColumnHide = [];
   var tableColumnOrder = [];
   var tableColumnVisible = [];
@@ -161,7 +161,7 @@ function main () {
 
   //initialize the table headers in the correct order
   var availableColumns = getSettingOptions("UI_device_columns").split(",");
-  headersDefaultOrder = availableColumns.map(val => getString(val));  
+  headersDefaultOrder = availableColumns.map(val => getString(val));
 
   var selectedColumns = JSON.parse(getSetting("UI_device_columns").replace(/'/g, '"'));
 
@@ -190,10 +190,10 @@ function main () {
 
   // Initialize components with parameters
   initializeDatatable(getUrlAnchor('my_devices'));
-  
+
   // check if data outdated and show spinner if so
   handleLoadingDialog()
-  
+
 }
 
 // -----------------------------------------------------------------------------
@@ -202,7 +202,7 @@ function mapIndx(oldIndex)
 {
   // console.log(oldIndex);
   // console.log(tableColumnOrder);
-  
+
   for(i=0;i<tableColumnOrder.length;i++)
   {
     if(tableColumnOrder[i] == oldIndex)
@@ -311,7 +311,7 @@ function processDeviceTotals(devicesData) {
     }
   });
 
-  // Render info boxes/tile cards  
+  // Render info boxes/tile cards
   renderInfoboxes(dataArray);
 }
 
@@ -350,9 +350,9 @@ function initFilters() {
             nocache: Date.now() // Prevent caching with a timestamp
         },
         success: function(response) {
-            if (response && response.data) {                
-                
-                let resultJSON = response.data; 
+            if (response && response.data) {
+
+                let resultJSON = response.data;
 
                 // Save the result to cache
                 setCache("devicesFilters", JSON.stringify(resultJSON));
@@ -381,7 +381,7 @@ function initFilters() {
                     });
 
                     // Filter resultJSON to include only entries with columnName in columnFilters
-                    resultJSON = resultJSON.filter(entry => 
+                    resultJSON = resultJSON.filter(entry =>
                         columnFilters.some(filter => filter[0] === entry.columnName)
                     );
 
@@ -451,7 +451,7 @@ function initFilters() {
 function renderFilters(customData) {
 
   // console.log(JSON.stringify(customData));
-  
+
   // Load filter data from the JSON file
   $.ajax({
     url: 'php/components/devices_filters.php', // PHP script URL
@@ -471,7 +471,7 @@ function renderFilters(customData) {
 
           // Update DataTable with the new filters or search value (if applicable)
           $('#tableDevices').DataTable().draw();
-          
+
           // Optionally, apply column filters (if using filters for individual columns)
           const table = $('#tableDevices').DataTable();
           table.columnFilters = columnFilters;  // Apply your column filters logic
@@ -493,11 +493,11 @@ function collectFilters() {
     // Loop through each filter group
     document.querySelectorAll('.filter-group').forEach(filterGroup => {
         const dropdown = filterGroup.querySelector('.filter-dropdown');
-        
+
         if (dropdown) {
             const filterColumn = dropdown.getAttribute('data-column');
             const filterValue = dropdown.value;
-            
+
             if (filterValue && filterColumn) {
                 columnFilters.push({
                     filterColumn: filterColumn,
@@ -548,7 +548,7 @@ function mapColumnIndexToFieldName(index, tableColumnVisible) {
     "devReqNicsOnline"         // 29
   ];
 
-  // console.log("OrderBy: " + columnNames[tableColumnOrder[index]]);  
+  // console.log("OrderBy: " + columnNames[tableColumnOrder[index]]);
 
   return columnNames[tableColumnOrder[index]] || null;
 }
@@ -557,12 +557,15 @@ function mapColumnIndexToFieldName(index, tableColumnVisible) {
 // ---------------------------------------------------------
 // Initializes the main devices list datatable
 function initializeDatatable (status) {
-  
+
   if(!status)
   {
     status = 'my_devices'
   }
 
+  // retrieve page size
+  var tableRows       = getCache ("nax_parTableRows") == "" ? parseInt(getSetting("UI_DEFAULT_PAGE_SIZE")) : getCache ("nax_parTableRows") ;
+
   // Save status selected
   deviceStatus = status;
 
@@ -579,7 +582,7 @@ function initializeDatatable (status) {
     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
   $('#tableDevicesTitle')[0].className = 'box-title text-'+ color;
@@ -588,23 +591,23 @@ function initializeDatatable (status) {
 
   // render table headers
   html = '';
-                                  
+
   for(index = 0; index < tableColumnOrder.length; index++)
   {
     html += '<th>' + headersDefaultOrder[tableColumnOrder[index]] + '</th>';
   }
 
-  $('#tableDevices tr').html(html);  
+  $('#tableDevices tr').html(html);
 
   hideUIelements("UI_DEV_SECTIONS")
 
   for(i = 0; i < tableColumnOrder.length; i++)
-  {    
-    // hide this column if not in the tableColumnVisible variable (we need to keep the MAC address (index 11) for functionality reasons)    
+  {
+    // hide this column if not in the tableColumnVisible variable (we need to keep the MAC address (index 11) for functionality reasons)
     if(tableColumnVisible.includes(tableColumnOrder[i]) == false)
     {
       tableColumnHide.push(mapIndx(tableColumnOrder[i]));
-    }    
+    }
   }
 
   var table = $('#tableDevices').DataTable({
@@ -690,7 +693,7 @@ function initializeDatatable (status) {
               "status": deviceStatus,
               "filters" : columnFilters
             }
-            
+
           }
         };
 
@@ -766,8 +769,8 @@ function initializeDatatable (status) {
 
     // Parameters
     'pageLength'   : tableRows,
-    'order'        : tableOrder,   
-    'select'       : true, // Enable selection   
+    'order'        : tableOrder,
+    'select'       : true, // Enable selection
 
     'fixedHeader': true,
     'fixedHeader': {
@@ -776,19 +779,19 @@ function initializeDatatable (status) {
     },
 
     'columnDefs'   : [
-      {visible:   false,         targets: tableColumnHide },      
-      {className: 'text-center', targets: [mapIndx(4), mapIndx(9), mapIndx(10), mapIndx(15), mapIndx(18)] },      
-      {className: 'iconColumn text-center',  targets: [mapIndx(3)]},      
-      {width:     '80px',        targets: [mapIndx(6), mapIndx(7), mapIndx(15), mapIndx(27)] },      
-      {width:     '85px',        targets: [mapIndx(9)] },      
-      {width:     '30px',        targets: [mapIndx(3), mapIndx(10), mapIndx(13), mapIndx(18)] },      
+      {visible:   false,         targets: tableColumnHide },
+      {className: 'text-center', targets: [mapIndx(4), mapIndx(9), mapIndx(10), mapIndx(15), mapIndx(18)] },
+      {className: 'iconColumn text-center',  targets: [mapIndx(3)]},
+      {width:     '80px',        targets: [mapIndx(6), mapIndx(7), mapIndx(15), mapIndx(27)] },
+      {width:     '85px',        targets: [mapIndx(9)] },
+      {width:     '30px',        targets: [mapIndx(3), mapIndx(10), mapIndx(13), mapIndx(18)] },
       {orderData: [mapIndx(12)],          targets: mapIndx(8) },
 
       // Device Name and FQDN
       {targets: [mapIndx(0), mapIndx(27)],
-        'createdCell': function (td, cellData, rowData, row, col) {    
-                      
-            // console.log(cellData)      
+        'createdCell': function (td, cellData, rowData, row, col) {
+
+            // console.log(cellData)
             $(td).html (
               `<b class="anonymizeDev "
               >
@@ -811,9 +814,9 @@ function initializeDatatable (status) {
             );
       } },
 
-      // Connected Devices       
+      // Connected Devices
       {targets: [mapIndx(15)],
-        'createdCell': function (td, cellData, rowData, row, col) {                   
+        'createdCell': function (td, cellData, rowData, row, col) {
           // check if this is a network device
           if(getSetting("NETWORK_DEVICE_TYPES").includes(`'${rowData[mapIndx(2)]}'`)   )
           {
@@ -823,13 +826,13 @@ function initializeDatatable (status) {
           {
             $(td).html (`<i class="fa-solid fa-xmark" title="${getString("Device_Table_Not_Network_Device")}"></i>`)
           }
-            
+
       } },
 
-      // Icon      
+      // Icon
       {targets: [mapIndx(3)],
         'createdCell': function (td, cellData, rowData, row, col) {
-         
+
           if (!emptyArr.includes(cellData)){
             $(td).html (atob(cellData));
           } else {
@@ -837,7 +840,7 @@ function initializeDatatable (status) {
           }
       } },
 
-      // Full MAC      
+      // Full MAC
       {targets: [mapIndx(11)],
         'createdCell': function (td, cellData, rowData, row, col) {
           if (!emptyArr.includes(cellData)){
@@ -846,8 +849,8 @@ function initializeDatatable (status) {
             $(td).html ('');
           }
       } },
-      
-      // IP address     
+
+      // IP address
       {targets: [mapIndx(8)],
         'createdCell': function (td, cellData, rowData, row, col) {
             if (!emptyArr.includes(cellData)){
@@ -864,9 +867,9 @@ function initializeDatatable (status) {
             } else {
               $(td).html ('');
             }
-        } 
+        }
       },
-      // IP address (ordeable)     
+      // IP address (ordeable)
       {targets: [mapIndx(12)],
         'createdCell': function (td, cellData, rowData, row, col) {
             if (!emptyArr.includes(cellData)){
@@ -874,10 +877,10 @@ function initializeDatatable (status) {
             } else {
               $(td).html ('');
             }
-        } 
+        }
       },
 
-      // Custom Properties     
+      // Custom Properties
       {targets: [mapIndx(26)],
         'createdCell': function (td, cellData, rowData, row, col) {
             if (!emptyArr.includes(cellData)){
@@ -885,10 +888,10 @@ function initializeDatatable (status) {
             } else {
               $(td).html ('');
             }
-        } 
+        }
       },
-      
-      // Favorite      
+
+      // Favorite
       {targets: [mapIndx(4)],
         'createdCell': function (td, cellData, rowData, row, col) {
           if (cellData == 1){
@@ -897,8 +900,8 @@ function initializeDatatable (status) {
             $(td).html ('');
           }
       } },
-        
-      // Dates      
+
+      // Dates
       {targets: [mapIndx(6), mapIndx(7)],
         'createdCell': function (td, cellData, rowData, row, col) {
           var result = cellData.toString(); // Convert to string
@@ -908,7 +911,7 @@ function initializeDatatable (status) {
           $(td).html (translateHTMLcodes (result));
       } },
 
-      // Random MAC      
+      // Random MAC
       {targets: [mapIndx(9)],
         'createdCell': function (td, cellData, rowData, row, col) {
           // console.log(cellData)
@@ -919,7 +922,7 @@ function initializeDatatable (status) {
           }
       } },
 
-      // Parent Mac      
+      // Parent Mac
       {targets: [mapIndx(14)],
         'createdCell': function (td, cellData, rowData, row, col) {
           if (!isValidMac(cellData)) {
@@ -938,13 +941,13 @@ function initializeDatatable (status) {
 
           const chipHtml = renderDeviceLink(data, spanWrap, true); // pass the td as container
 
-          $(spanWrap).append(chipHtml); 
-        } 
+          $(spanWrap).append(chipHtml);
+        }
       },
-      // Status color      
+      // Status color
       {targets: [mapIndx(10)],
         'createdCell': function (td, cellData, rowData, row, col) {
-          
+
           tmp_devPresentLastScan = rowData[mapIndx(24)]
           tmp_devAlertDown = rowData[mapIndx(25)]
 
@@ -954,11 +957,11 @@ function initializeDatatable (status) {
             rowData[mapIndx(11)],  // MAC
             cellData               // optional text
           );
-      
+
           $(td).html (`<a href="${badge.url}" class="badge ${badge.cssClass}">${badge.iconHtml} ${badge.text}</a>`);
       } },
     ],
-    
+
     // Processing
     'processing'  : true,
     'language'    : {
@@ -978,7 +981,7 @@ function initializeDatatable (status) {
       $('#tableDevices').on( 'length.dt', function ( e, settings, len ) {
             setCache ("nax_parTableRows", len, 129600); // save for 90 days
           } );
-            
+
           $('#tableDevices').on( 'order.dt', function () {
             setCache ("nax_parTableOrder", JSON.stringify (table.order()), 129600); // save for 90 days
           } );
@@ -998,7 +1001,7 @@ function initializeDatatable (status) {
                 // Toggle visibility of element with ID 'multiEdit'
                 $('#multiEdit').toggle(anyRowSelected);
             }, 100);
-            
+
           });
 
           // search only after idle
@@ -1014,59 +1017,59 @@ function initializeDatatable (status) {
               }, debounceTime);
           });
 
-          initHoverNodeInfo(); 
+          initHoverNodeInfo();
           hideSpinner();
-          
+
     },
     createdRow: function(row, data, dataIndex) {
         // add devMac to the table row
-        $(row).attr('my-devMac', data[mapIndx(11)]); 
-                
+        $(row).attr('my-devMac', data[mapIndx(11)]);
+
     }
-    
-  });  
+
+  });
 }
 
 
 // -----------------------------------------------------------------------------
 function handleLoadingDialog(needsReload = false)
 {
-  // console.log(`needsReload: ${needsReload}`); 
+  // console.log(`needsReload: ${needsReload}`);
 
-  $.get('php/server/query_logs.php?file=execution_queue.log&nocache=' + Date.now(), function(data) {     
+  $.get('php/server/query_logs.php?file=execution_queue.log&nocache=' + Date.now(), function(data) {
 
     if(data.includes("update_api|devices"))
-    {       
+    {
       showSpinner("devices_old")
 
       setTimeout(handleLoadingDialog(true), 1000);
 
     } else if (needsReload)
-    {    
-      location.reload();     
+    {
+      location.reload();
     }else
     {
-      // hideSpinner();     
-    }      
+      // hideSpinner();
+    }
 
   })
-  
+
 }
 
 // -----------------------------------------------------------------------------
-// Function collects selected devices in the DataTable and redirects the user to 
-// the Miantenance section with a 'macs' query string identifying selected devices 
+// Function collects selected devices in the DataTable and redirects the user to
+// the Miantenance section with a 'macs' query string identifying selected devices
 function multiEditDevices()
 {
   // get selected devices
   var selectedDevicesDataTableData = $('#tableDevices').DataTable().rows({ selected: true, page: 'current' }).data().toArray();
 
   console.log(selectedDevicesDataTableData);
- 
+
   macs = ""
 
   for (var j = 0; j < selectedDevicesDataTableData.length; j++) {
-    macs += selectedDevicesDataTableData[j][mapIndx(11)] + ",";  // [11] == MAC    
+    macs += selectedDevicesDataTableData[j][mapIndx(11)] + ",";  // [11] == MAC
   }
 
   // redirect to the Maintenance section
@@ -1075,7 +1078,7 @@ function multiEditDevices()
 
 
 // -----------------------------------------------------------------------------
-// Function collects shown devices from the DataTable  
+// Function collects shown devices from the DataTable
 function getMacsOfShownDevices() {
   var table = $('#tableDevices').DataTable();
 
@@ -1096,15 +1099,15 @@ function getMacsOfShownDevices() {
 
 
 // -----------------------------------------------------------------------------
-// Handle custom actions/properties on a device    
+// Handle custom actions/properties on a device
 function renderCustomProps(custProps, mac) {
   // Decode and parse the custom properties
 
   if (!isBase64(custProps)) {
 
-    console.error(`Unable to decode CustomProps for ${mac}`);    
-    console.error(custProps);    
-    
+    console.error(`Unable to decode CustomProps for ${mac}`);
+    console.error(custProps);
+
   } else{
     const props = JSON.parse(atob(custProps));
     let html = "";
@@ -1150,13 +1153,13 @@ function renderCustomProps(custProps, mac) {
 
 
 // -----------------------------------------------------------------------------
-// Update cache with shown devices before navigating away    
+// Update cache with shown devices before navigating away
 window.addEventListener('beforeunload', function(event) {
     // Call your function here
     macs = getMacsOfShownDevices();
 
     setCache("ntx_visible_macs", macs)
-  
+
 });
 
 </script>
diff --git a/front/js/common.js b/front/js/common.js
index 4e0601ac..05999097 100755
--- a/front/js/common.js
+++ b/front/js/common.js
@@ -1,6 +1,6 @@
 /* -----------------------------------------------------------------------------
 *  NetAlertX
-*  Open Source Network Guard / WIFI & LAN intrusion detector 
+*  Open Source Network Guard / WIFI & LAN intrusion detector
 *
 *  common.js - Front module. Common Javascript functions
 *-------------------------------------------------------------------------------
@@ -35,16 +35,16 @@ function getCache(key, noCookie = false)
     // }
   }
 
-  return "";  
+  return "";
 }
 
 // -----------------------------------------------------------------------------
 function setCache(key, data, expirationMinutes='')
 {
-  localStorage.setItem(key, data);  
+  localStorage.setItem(key, data);
 
   // // create cookie if expiration set to handle refresh of data
-  // if (expirationMinutes != '') 
+  // if (expirationMinutes != '')
   // {
   //   setCookie ('cache_session_expiry', 'OK', 1)
   // }
@@ -57,7 +57,7 @@ function setCookie (cookie, value, expirationMinutes='') {
   var expires = '';
   if (typeof expirationMinutes === 'number') {
     expires = ';expires=' + new Date(Date.now() + expirationMinutes *60*1000).toUTCString();
-  } 
+  }
 
   // Save Cookie
   document.cookie = cookie + "=" + value + expires;
@@ -107,42 +107,42 @@ function deleteAllCookies() {
 
 
 // -----------------------------------------------------------------------------
-// Get settings from the .json file generated by the python backend 
-// and cache them, if available, with options 
+// Get settings from the .json file generated by the python backend
+// and cache them, if available, with options
 // -----------------------------------------------------------------------------
 function cacheSettings()
 {
   return new Promise((resolve, reject) => {
     if(!getCache('cacheSettings_completed') === true)
-    {  
-      $.get('php/server/query_json.php', { file: 'table_settings.json', nocache: Date.now() }, function(resSet) { 
+    {
+      $.get('php/server/query_json.php', { file: 'table_settings.json', nocache: Date.now() }, function(resSet) {
 
         $.get('php/server/query_json.php', { file: 'plugins.json', nocache: Date.now() }, function(resPlug) {
-       
-          pluginsData = resPlug["data"]; 
-          settingsData = resSet["data"];  
 
-          settingsData.forEach((set) => {  
+          pluginsData = resPlug["data"];
+          settingsData = resSet["data"];
+
+          settingsData.forEach((set) => {
 
             resolvedOptions = createArray(set.setOptions)
             resolvedOptionsOld = resolvedOptions
             setPlugObj     = {};
             options_params = [];
             resolved = ""
-          
+
             // proceed only if first option item contains something to resolve
-            if( !set.setKey.includes("__metadata") && 
-                resolvedOptions.length != 0 && 
+            if( !set.setKey.includes("__metadata") &&
+                resolvedOptions.length != 0 &&
                 resolvedOptions[0].includes("{value}"))
             {
               // get setting definition from the plugin config if available
               setPlugObj = getPluginSettingObject(pluginsData, set.setKey)
 
-              // check if options contains parameters and resolve 
+              // check if options contains parameters and resolve
               if(setPlugObj != {} && setPlugObj["options_params"])
               {
                 // get option_params for {value} resolution
-                options_params = setPlugObj["options_params"]      
+                options_params = setPlugObj["options_params"]
 
                 if(options_params != [])
                 {
@@ -154,19 +154,19 @@ function cacheSettings()
                   {
                     resolvedOptions = `[${resolved}]`
                   } else // one value only
-                  { 
+                  {
                     resolvedOptions = `["${resolved}"]`
-                  }                  
+                  }
                 }
-              }    
+              }
             }
 
-            setCache(`nax_set_${set.setKey}`, set.setValue)             
-            setCache(`nax_set_opt_${set.setKey}`, resolvedOptions) 
+            setCache(`nax_set_${set.setKey}`, set.setValue)
+            setCache(`nax_set_opt_${set.setKey}`, resolvedOptions)
           });
         }).then(() => handleSuccess('cacheSettings', resolve())).catch(() => handleFailure('cacheSettings', reject("cacheSettings already completed")));    // handle AJAX synchronization
       })
-    } 
+    }
   });
 }
 
@@ -176,7 +176,7 @@ function getSettingOptions (key) {
 
   // handle initial load to make sure everything is set-up and cached
   // handleFirstLoad()
- 
+
   result = getCache(`nax_set_opt_${key}`, true);
 
   if (result == "")
@@ -194,7 +194,7 @@ function getSetting (key) {
 
   // handle initial load to make sure everything is set-up and cached
   // handleFirstLoad()
- 
+
   result = getCache(`nax_set_${key}`, true);
 
   if (result == "")
@@ -210,7 +210,7 @@ function getSetting (key) {
 // -----------------------------------------------------------------------------
 function cacheStrings() {
   return new Promise((resolve, reject) => {
-    
+
       // Create a promise for each language (include en_us by default as fallback)
       languagesToLoad = ['en_us']
 
@@ -222,11 +222,11 @@ function cacheStrings() {
       }
 
       console.log(languagesToLoad);
-      
+
       const languagePromises = languagesToLoad.map((language_code) => {
         return new Promise((resolveLang, rejectLang) => {
           // Fetch core strings and translations
-          
+
           $.get(`php/templates/language/${language_code}.json?nocache=${Date.now()}`)
             .done((res) => {
               // Iterate over each key-value pair and store the translations
@@ -238,7 +238,7 @@ function cacheStrings() {
               $.get('php/server/query_json.php', { file: 'table_plugins_language_strings.json', nocache: Date.now() })
                 .done((pluginRes) => {
                   const data = pluginRes["data"];
-                  
+
                   // Store plugin translations
                   data.forEach((langString) => {
                     setCache(`pia_lang_${langString.String_Key}_${langString.Language_Code}`, langString.String_Value);
@@ -269,7 +269,7 @@ function cacheStrings() {
           // Handle failure in any of the language processing
           handleFailure('cacheStrings', reject);
         });
-    
+
   });
 }
 
@@ -278,7 +278,7 @@ function cacheStrings() {
 function getString(key) {
 
   function fetchString(key) {
-    
+
     lang_code = getLangCode();
 
     let result = getCache(`pia_lang_${key}_${lang_code}`, true);
@@ -509,7 +509,7 @@ function isBase64(value) {
   const base64Regex = /^[A-Za-z0-9+/]+={0,2}$/;
   if (!base64Regex.test(value)) return false;
 
-  
+
   try {
     const decoded = atob(value);
 
@@ -568,7 +568,7 @@ function decodeSpecialChars(str) {
 function utf8ToBase64(str) {
   // Convert the string to a Uint8Array using TextEncoder
   const utf8Bytes = new TextEncoder().encode(str);
-  
+
   // Convert the Uint8Array to a base64-encoded string
   return btoa(String.fromCharCode(...utf8Bytes));
 }
@@ -597,31 +597,31 @@ function handle_locked_DB(data)
 {
   if(data.includes('database is locked'))
   {
-    // console.log(data)    
+    // console.log(data)
     showSpinner()
 
     setTimeout(function() {
       console.warn("Database locked - reload")
-      location.reload(); 
+      location.reload();
     }, 5000);
   }
 }
 
 // -----------------------------------------------------------------------------
 function numberArrayFromString(data)
-{  
+{
   data = JSON.parse(sanitize(data));
   return data.replace(/\[|\]/g, '').split(',').map(Number);
 }
 
-// -----------------------------------------------------------------------------  
+// -----------------------------------------------------------------------------
 function saveData(functionName, id, value) {
   $.ajax({
     method: "GET",
     url: "php/server/devices.php",
     data: { action: functionName, id: id, value:value  },
-    success: function(data) {      
-        
+    success: function(data) {
+
         if(sanitize(data) == 'OK')
         {
           showMessage("Saved")
@@ -630,7 +630,7 @@ function saveData(functionName, id, value) {
         } else
         {
           showMessage("ERROR")
-        }        
+        }
 
       }
   });
@@ -670,13 +670,13 @@ function sleep(milliseconds) {
   } while (currentDate - date < milliseconds);
 }
 
-// --------------------------------------------------------- 
+// ---------------------------------------------------------
 somethingChanged = false;
 function settingsChanged()
 {
   somethingChanged = true;
   // Enable navigation prompt ... "Are you sure you want to leave..."
-  window.onbeforeunload = function() {  
+  window.onbeforeunload = function() {
     return true;
   };
 }
@@ -694,16 +694,16 @@ function getUrlAnchor(defaultValue){
     selectedTab = defaultValue
 
     // the #target from the url
-    target = window.location.hash.substr(1) 
+    target = window.location.hash.substr(1)
 
     // get only the part between #...?
     if(target.includes('?'))
     {
       target = target.split('?')[0]
     }
-  
+
     return target
-  
+
   }
 
 }
@@ -715,7 +715,7 @@ function getQueryString(key){
     get: (searchParams, prop) => searchParams.get(prop),
   });
 
-  tmp = params[key] 
+  tmp = params[key]
 
   if(emptyArr.includes(tmp))
   {
@@ -726,17 +726,17 @@ function getQueryString(key){
 
     if (fullUrl.includes('?')) {
       var queryString = fullUrl.split('?')[1];
-  
+
       // Split the query string into individual parameters
       var paramsArray = queryString.split('&');
-  
+
       // Loop through the parameters array
       paramsArray.forEach(function(param) {
           // Split each parameter into key and value
           var keyValue = param.split('=');
           var keyTmp = decodeURIComponent(keyValue[0]);
           var value = decodeURIComponent(keyValue[1] || '');
-  
+
           // Store key-value pair in the queryParams object
           queryParams[keyTmp] = value;
       });
@@ -750,7 +750,7 @@ function getQueryString(key){
   result = emptyArr.includes(tmp) ? "" : tmp;
 
   return result
-}  
+}
 // -----------------------------------------------------------------------------
 function translateHTMLcodes (text) {
   if (text == null || emptyArr.includes(text)) {
@@ -769,14 +769,14 @@ function translateHTMLcodes (text) {
 // -----------------------------------------------------------------------------
 function stopTimerRefreshData () {
   try {
-    clearTimeout (timerRefreshData); 
+    clearTimeout (timerRefreshData);
   } catch (e) {}
 }
 
 
 // -----------------------------------------------------------------------------
 function newTimerRefreshData (refeshFunction, timeToRefresh) {
-  
+
   if(timeToRefresh && (timeToRefresh != 0 || timeToRefresh != ""))
   {
     time = parseInt(timeToRefresh)
@@ -813,7 +813,7 @@ function openInNewTab (url) {
   window.open(url, "_blank");
 }
 
-// ----------------------------------------------------------------------------- 
+// -----------------------------------------------------------------------------
 // Navigate to URL if the current URL is not in the provided list of URLs
 function openUrl(urls) {
   var currentUrl = window.location.href;
@@ -844,21 +844,21 @@ function openUrl(urls) {
 function forceLoadUrl(relativeUrl) {
 
   window.location.replace(relativeUrl);
-  window.location.reload()  
-  
+  window.location.reload()
+
 }
 
 // -----------------------------------------------------------------------------
 function navigateToDeviceWithIp (ip) {
 
-  $.get('php/server/query_json.php', { file: 'table_devices.json', nocache: Date.now() }, function(res) {    
-        
+  $.get('php/server/query_json.php', { file: 'table_devices.json', nocache: Date.now() }, function(res) {
+
     devices = res["data"];
 
     mac = ""
-    
+
     $.each(devices, function(index, obj) {
-      
+
       if(obj.devLastIP.trim() == ip.trim())
       {
         mac = obj.devMac;
@@ -866,7 +866,7 @@ function navigateToDeviceWithIp (ip) {
         window.open('./deviceDetails.php?mac=' + mac , "_blank");
       }
     });
-    
+
   });
 }
 
@@ -898,7 +898,7 @@ function getMac(){
   });
 
   return params.mac
-}  
+}
 
 // -----------------------------------------------------------------------------
 // A function used to make the IP address orderable
@@ -950,7 +950,7 @@ function isRandomMAC(mac)
 {
   isRandom = false;
 
-  isRandom = ["2", "6", "A", "E", "a", "e"].includes(mac[1]); 
+  isRandom = ["2", "6", "A", "E", "a", "e"].includes(mac[1]);
 
   // if detected as random, make sure it doesn't start with a prefix which teh suer doesn't want to mark as random
   if(isRandom)
@@ -959,17 +959,17 @@ function isRandomMAC(mac)
 
       if(mac.startsWith(prefix))
       {
-        isRandom = false;     
-      }    
-      
+        isRandom = false;
+      }
+
     });
-    
+
   }
 
   return isRandom;
 }
 
-  // ---------------------------------------------------------  
+  // ---------------------------------------------------------
   // Generate an array object from a string representation of an array
   function createArray(input) {
     // Is already array, return
@@ -980,25 +980,25 @@ function isRandomMAC(mac)
     if (input === '[]' || input === '') {
       return [];
     }
-    // handle integer 
+    // handle integer
     if (typeof input === 'number') {
       input = input.toString();
     }
-  
+
     // Regex pattern for brackets
     const patternBrackets = /(^\s*\[)|(\]\s*$)/g;
     const replacement = '';
-  
+
     // Remove brackets
     const noBrackets = input.replace(patternBrackets, replacement);
-  
+
     const options = [];
-  
+
     // Detect the type of quote used after the opening bracket
     const firstChar = noBrackets.trim()[0];
     const isDoubleQuoted = firstChar === '"';
     const isSingleQuoted = firstChar === "'";
-  
+
     // Create array while handling commas within quoted segments
     let currentSegment = '';
     let withinQuotes = false;
@@ -1016,7 +1016,7 @@ function isRandomMAC(mac)
     }
     // Push the last segment
     options.push(currentSegment.trim());
-  
+
     // Remove quotes based on detected type
     options.forEach((item, index) => {
       let trimmedItem = item.trim();
@@ -1028,7 +1028,7 @@ function isRandomMAC(mac)
       }
       options[index] = trimmedItem;
     });
-  
+
     return options;
   }
 
@@ -1037,7 +1037,7 @@ function isRandomMAC(mac)
 //  for the value to be returned
 function getDevDataByMac(macAddress, dbColumn) {
 
-  const sessionDataKey = 'devicesListAll_JSON';  
+  const sessionDataKey = 'devicesListAll_JSON';
   const devicesCache = getCache(sessionDataKey);
 
   if (!devicesCache || devicesCache == "") {
@@ -1068,11 +1068,11 @@ function getDevDataByMac(macAddress, dbColumn) {
 // -----------------------------------------------------------------------------
 // Cache the devices as one JSON
 function cacheDevices()
-{ 
+{
   return new Promise((resolve, reject) => {
 
-    $.get('php/server/query_json.php', { file: 'table_devices.json', nocache: Date.now() }, function(data) {    
-        
+    $.get('php/server/query_json.php', { file: 'table_devices.json', nocache: Date.now() }, function(data) {
+
         // console.log(data)
 
         devicesListAll_JSON = data["data"]
@@ -1093,11 +1093,11 @@ function cacheDevices()
 
         // console.log(getCache('devicesListAll_JSON'))
       }).then(() => handleSuccess('cacheDevices', resolve())).catch(() => handleFailure('cacheDevices', reject("cacheDevices already completed"))); // handle AJAX synchronization
-    } 
+    }
   );
 }
 
-var devicesListAll_JSON      = [];   // this will contain a list off all devices 
+var devicesListAll_JSON      = [];   // this will contain a list off all devices
 
 // -----------------------------------------------------------------------------
 function isEmpty(value)
@@ -1127,7 +1127,7 @@ function getGuid() {
 }
 
 // -----------------------------------------------------------------------------
-// UI 
+// UI
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 
@@ -1230,7 +1230,7 @@ function hideSpinner() {
   });
 }
 
-    
+
 // --------------------------------------------------------
 // Calls a backend function to add a front-end event to an execution queue
 function updateApi(apiEndpoints)
@@ -1250,9 +1250,9 @@ function updateApi(apiEndpoints)
   })
 }
 
-// ----------------------------------------------------------------------------- 
+// -----------------------------------------------------------------------------
 // handling smooth scrolling
-// ----------------------------------------------------------------------------- 
+// -----------------------------------------------------------------------------
 function setupSmoothScrolling() {
   // Function to scroll to the element
   function scrollToElement(id) {
@@ -1310,17 +1310,17 @@ function getPluginSettingObject(pluginsData, setting_key, unique_prefix ) {
 
   result = {}
   unique_prefix == undefined ? unique_prefix = setting_key.split("_")[0] : unique_prefix = unique_prefix;
-  
+
   $.each(pluginsData, function (i, plgnObj){
     // go thru plugins
     if(plgnObj.unique_prefix == unique_prefix)
     {
       // go thru plugin settings
       $.each(plgnObj["settings"], function (j, setObj){
-        
+
         if(`${unique_prefix}_${setObj.function}` == setting_key)
-        {          
-          result = setObj          
+        {
+          result = setObj
         }
 
       });
@@ -1372,7 +1372,7 @@ function arraysContainSameValues(arr1, arr2) {
   if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
     return false;
   } else
-  {  
+  {
     // Sort and stringify arrays, then compare
     return JSON.stringify(arr1.slice().sort()) === JSON.stringify(arr2.slice().sort());
   }
@@ -1383,7 +1383,7 @@ function arraysContainSameValues(arr1, arr2) {
 function hideUIelements(setKey) {
 
   hiddenSectionsSetting = getSetting(setKey)
-  
+
   if(hiddenSectionsSetting != "") // handle if settings not yet initialized
   {
 
@@ -1398,9 +1398,9 @@ function hideUIelements(setKey) {
 
       if($('#' + hiddenSection))
       {
-        $('#' + hiddenSection).hide()      
-      }    
-      
+        $('#' + hiddenSection).hide()
+      }
+
     });
   }
 
@@ -1411,7 +1411,7 @@ function getDevicesList()
 {
   // Read cache (skip cookie expiry check)
   devicesList = getCache('devicesListAll_JSON', true);
-  
+
   if (devicesList != '') {
       devicesList = JSON.parse (devicesList);
   } else {
@@ -1468,7 +1468,7 @@ $(document).ready(function() {
 // Restart Backend Python Server
 
 function askRestartBackend() {
-  // Ask 
+  // Ask
   showModalWarning(getString('Maint_RestartServer'), getString('Maint_Restart_Server_noti_text'),
   getString('Gen_Cancel'), getString('Maint_RestartServer'), 'restartBackend');
 }
@@ -1477,7 +1477,7 @@ function askRestartBackend() {
 function restartBackend() {
 
   modalEventStatusId = 'modal-message-front-event'
-  
+
   // Execute
   $.ajax({
       method: "POST",
@@ -1523,7 +1523,7 @@ function clearCache() {
 // -----------------------------------------------------------------------------
 // Function to check if cache needs to be refreshed because of setting changes
 function checkSettingChanges() {
-  $.get('php/server/query_json.php', { file: 'app_state.json', nocache: Date.now() }, function(appState) {   
+  $.get('php/server/query_json.php', { file: 'app_state.json', nocache: Date.now() }, function(appState) {
     const importedMilliseconds = parseInt(appState["settingsImported"] * 1000);
     const lastReloaded = parseInt(sessionStorage.getItem(sessionStorageKey + '_time'));
 
@@ -1594,7 +1594,7 @@ function isAppInitialized() {
 
   lang_shouldBeCompletedCalls = getLangCode() == 'en_us' ? 1 : 2;
 
-  // check if each ajax call completed succesfully 
+  // check if each ajax call completed succesfully
   $.each(completedCalls_final, function(index, call_name){
 
     if(getCache(call_name + "_completed") != "true")
@@ -1622,8 +1622,7 @@ async function executeOnce() {
 
   if (!isAppInitialized()) {
     try {
-      console.log("HERE");
-      
+
       await waitForGraphQLServer(); // Wait for the server to start
 
       await cacheDevices();
@@ -1680,7 +1679,7 @@ const onAllCallsComplete = () => {
     // setTimeout(() => {
     //   location.reload()
     // }, 10);
-   
+
   } else {
     // If not all strings are initialized, retry initialization
     console.log('❌ Not all strings are initialized. Retrying...');
@@ -1702,7 +1701,7 @@ const areAllStringsInitialized = () => {
 // Call the function to execute the code
 executeOnce();
 
-// Set timer for regular UI refresh if enabled 
+// Set timer for regular UI refresh if enabled
 setTimeout(() => {
 
   // page refresh if configured