Refactor devices.php

front/devices.php

@@ -139,92 +139,49 @@
   var deviceStatus    = 'all';
   var parTableRows    = 'Front_Devices_Rows';
   var parTableOrder   = 'Front_Devices_Order';
-  var tableRows       = 10;
-  var tableOrder      = [[3,'desc'], [0,'asc']];
+  var tableRows       = getCookie ("nax_parTableRows") == "" ? 10 : getCookie ("nax_parTableRows") ;
+  var tableOrder       = getCookie ("nax_parTableOrder") == "" ? [[3,'desc'], [0,'asc']] : JSON.parse(getCookie ("nax_parTableOrder")) ;
   
   var tableColumnHide = [];
   var tableColumnOrder = [];
   var tableColumnVisible = [];
 
-
-
-
   // Read parameters & Initialize components
   callAfterAppInitialized(main)
   showSpinner();
 
-
-
 // -----------------------------------------------------------------------------
 function main () {
 
   //initialize the table headers in the correct order
-    var headersDefaultOrder = [ 
-                              getString('Device_TableHead_Name'),
-                              getString('Device_TableHead_Owner'),
-                              getString('Device_TableHead_Type'),   
-                              getString('Device_TableHead_Icon'),
-                              getString('Device_TableHead_Favorite'),
-                              getString('Device_TableHead_Group'),
-                              getString('Device_TableHead_FirstSession'),
-                              getString('Device_TableHead_LastSession'),
-                              getString('Device_TableHead_LastIP'),
-                              getString('Device_TableHead_MAC'),
-                              getString('Device_TableHead_Status'),
-                              getString('Device_TableHead_MAC_full'),
-                              getString('Device_TableHead_LastIPOrder'),
-                              getString('Device_TableHead_Rowid'),
-                              getString('Device_TableHead_Parent_MAC'),
-                              getString('Device_TableHead_Connected_Devices'),
-                              getString('Device_TableHead_Location'),
-                              getString('Device_TableHead_Vendor'),
-                              getString('Device_TableHead_Port'),
-                              getString('Device_TableHead_GUID'),
-                              getString('Device_TableHead_SyncHubNodeName'),
-                              getString('Device_TableHead_NetworkSite'),
-                              getString('Device_TableHead_SSID')
-                            ];
+  var availableColumns = getSettingOptions("UI_device_columns").split(",");
+  var headersDefaultOrder = availableColumns.map(val => getString(val));
+  var selectedColumns = JSON.parse(getSetting("UI_device_columns").replace(/'/g, '"'));
 
   // generate default order lists of given length
   var columnsStr = JSON.stringify(Array.from({ length: headersDefaultOrder.length }, (_, i) => i));
   tableColumnOrder = Array.from({ length: headersDefaultOrder.length }, (_, i) => i);
-  tableColumnVisible = tableColumnOrder;
+  tableColumnVisible = [];
 
-  handleLoadingDialog()
+  // Initialize tableColumnVisible by including all columns from selectedColumns, preserving their order.
+  tableColumnVisible = selectedColumns.map(column => availableColumns.indexOf(column)).filter(index => index !== -1);
 
-  // Hide UI elements as per settings
-  // setTimeout(() => {
-    hideUIelements("UI_DEV_SECTIONS")
+  // Add any columns from availableColumns that are not in selectedColumns to the end.
+  const remainingColumns = availableColumns.map((column, index) => index).filter(index => !tableColumnVisible.includes(index));
 
-  // }, 10);
+  // Combine both arrays.
+  tableColumnOrder = tableColumnVisible.concat(remainingColumns);
 
+  // Generate the full array of numbers from 0 to totalLength - 1 of tableColumnOrder
+  const fullArray = Array.from({ length: tableColumnOrder.length }, (_, i) => i);
 
-  // get from cookie if available (need to use decodeURI as saved as part of URI in PHP)
-  cookieColumnsVisibleStr = decodeURI(getCookie("Front_Devices_Columns_Visible")).replaceAll('%2C',',')  
+  // Filter out the elements already present in inputArray
+  const missingNumbers = fullArray.filter(num => !tableColumnVisible.includes(num));
 
-  defaultValue = cookieColumnsVisibleStr == "" ? columnsStr : cookieColumnsVisibleStr;
-
-  // get visible columns
-  $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue='+defaultValue+'&parameter=Front_Devices_Columns_Visible&skipcache', function(data) {
-
-    handle_locked_DB(data)
-    
-    // save which columns are in the Devices page visible
-    tableColumnVisible = numberArrayFromString(data);
-
-    // get from cookie if available (need to use decodeURI as saved as part of URI in PHP)
-    cookieColumnsOrderStr = decodeURI(getCookie("Front_Devices_Columns_Order")).replaceAll('%2C',',')
-
-    defaultValue = cookieColumnsOrderStr == "" ? columnsStr : cookieColumnsOrderStr;    
-
-    // get the custom order specified by the user
-    $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue='+defaultValue+'&parameter=Front_Devices_Columns_Order&skipcache', function(data) {
-
-      handle_locked_DB(data)
-    
-      // save the columns order in the Devices page 
-      tableColumnOrder = numberArrayFromString(data);
+  // Concatenate the inputArray with the missingNumbers
+  tableColumnOrder = [...tableColumnVisible, ...missingNumbers];
 
+  // render table headers
   html = '';
                                   
   for(index = 0; index < tableColumnOrder.length; index++)
@@ -234,39 +191,18 @@ function main () {
 
   $('#tableDevices tr').html(html);  
 
-      // get parameter value
-      $.get('php/server/parameters.php?action=get&defaultValue=50&parameter='+ parTableRows, function(data) {
-        var result = JSON.parse(data);
+  // Hide UI elements as per settings
+  // setTimeout(() => {
+    hideUIelements("UI_DEV_SECTIONS")
     
-        result = parseInt(result, 10)
-
-        if (Number.isInteger (result) ) {
-            tableRows = result;  
-        }
-
-        // get parameter value
-        $.get('php/server/parameters.php?action=get&defaultValue=[[3,"desc"],[0,"asc"]]&parameter='+ parTableOrder, function(data) {
-          var result = JSON.parse(data);
-          result = JSON.parse(result);
-
-          
-
-          if (Array.isArray (result) ) {
-            tableOrder = result;
-          }
+  // }, 10);
 
   // Initialize components with parameters
-
   initializeDatatable(getUrlAnchor('my_devices'));
   
   // check if data outdated and show spinner if so
   handleLoadingDialog()
   
-
-        });
-      });
-    });
-   });
 }
 
 // -----------------------------------------------------------------------------
@@ -679,11 +615,11 @@ function initializeDatatable (status) {
 
     // Save cookie Rows displayed, and Parameters rows & order
     $('#tableDevices').on( 'length.dt', function ( e, settings, len ) {
-      setParameter (parTableRows, len);
+      setCookie ("nax_parTableRows", len);
     } );
       
     $('#tableDevices').on( 'order.dt', function () {
-      setParameter (parTableOrder, JSON.stringify (table.order()) );
+      setCookie ("nax_parTableOrder", JSON.stringify (table.order()) );
       setCache ('devicesList', getDevicesFromTable(table) );
     } );
 

front/js/common.js

@@ -12,7 +12,7 @@ var timerRefreshData = ''
 
 var   emptyArr      = ['undefined', "", undefined, null, 'null'];
 var   UI_LANG       = "English";
-const allLanguages  = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "zh_cn", "cs_cz"]; // needs to be same as in lang.php
+const allLanguages  = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "pt_br", "tr_tr", "zh_cn", "cs_cz"]; // needs to be same as in lang.php
 var   settingsJSON  = {}
 
 
@@ -1201,7 +1201,7 @@ function callAfterAppInitialized(callback) {
 // Check if the code has been executed before by checking sessionStorage
 function isAppInitialized() {
   //  return arraysContainSameValues(getCache("completedCalls").split(',').filter(Boolean), completedCalls_final);
-  return (parseInt(getCache("completedCallsCount")) ==  completedCallsCount_final);
+  return (parseInt(getCache("completedCallsCount")) >=  completedCallsCount_final);
 }
 
 // Define a function that will execute the code only once

front/js/settings_utils.js

@@ -437,8 +437,6 @@ function filterRows(inputText) {
 }
 
 
-
-
 setTimeout(() => {
   // Event listener for input change
   $("#settingsSearch").on("input", function () {
@@ -712,7 +710,8 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh
   selectedArray  = []
   cssClass       = ""
   
-  // determine if options or values are used in teh listing
+
+  // determine if options or values are used in the listing
   if (valuesArray.length > 0 && options.length > 0){
 
     // multiselect list ->  options only + selected the ones in valuesArray 
@@ -730,21 +729,31 @@ function generateOptions(options, valuesArray, targetField, transformers, placeh
     resultArray   = options;
   }
 
+ 
+  // Create a map to track the index of each item in valuesArray
+  const orderMap = new Map(valuesArray.map((item, index) => [item, index]));
+
+  // Sort resultArray based on the order in valuesArray
+  resultArray.sort((a, b) => {
+    const indexA = orderMap.has(a.id) ? orderMap.get(a.id) : valuesArray.length;
+    const indexB = orderMap.has(b.id) ? orderMap.get(b.id) : valuesArray.length;
+    return indexA - indexB;
+  });
+
   resultArray.forEach(function(item) {
+    let labelName = item.name;
 
-    labelName = item.name
-
-    if(labelName != '❌None')
-    {
-      labelName = reverseTransformers(labelName, transformers)
+    if (labelName !== '❌None') {
+      labelName = reverseTransformers(labelName, transformers);
     }
 
-    // needs to happen always if options ued as source
-    let selected = options.length != 0 && valuesArray.includes(item.id) ? 'selected' : '';
+    // Always include selected if options are used as a source
+    let selected = options.length !== 0 && valuesArray.includes(item.id) ? 'selected' : '';
 
     optionsHtml += `<option class="${cssClass}" value="${item.id}" ${selected}>${labelName}</option>`;
   });
 
+
   // Place the resulting HTML into the specified placeholder div
   $("#" + placeholder).replaceWith(optionsHtml);
 }

front/js/ui_components.js

@@ -249,6 +249,7 @@ function initSelect2() {
     
     // --------------------------------------------------------
     //Initialize Select2 Elements and make them sortable
+    
     $(function () {
       // Iterate over each Select2 dropdown
       $('.select2').each(function() {

front/php/templates/language/lang.php

@@ -5,7 +5,8 @@
 // ###################################
 
 $defaultLang = "en_us";
-$allLanguages = ["en_us","es_es","de_de", "nb_no", "pl_pl", "pt_br", "ru_ru", "fr_fr", "it_it", "zh_cn", "cs_cz"];
+$allLanguages = ["en_us", "es_es", "de_de", "fr_fr", "it_it", "ru_ru", "nb_no", "pl_pl", "pt_br", "tr_tr", "zh_cn", "cs_cz"];
+
 
 global $db;
 

front/plugins/ui_settings/config.json

@@ -82,7 +82,7 @@
       "description": [
         {
           "language_code": "en_us",
-          "string": "Which columns to show on the Devices page."
+          "string": "Columns and their order that are shown on the Devices page. (work in progress -> use Maintenance -> UI Settings for now)"
         }
       ]
     },

front/settings.php

@@ -696,6 +696,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
             }
           
             value = JSON.stringify(temps);
+
             settingsArray.push([prefix, setCodeName, dataType, value]);
 
           } else if (dataType === "json") {
@@ -792,29 +793,9 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
 
       } else
       {       
-        // check if the app is initialized and hide the spinner
-        if(isAppInitialized())
-        {          
-          // init page
-          getData()
+        checkInitialization();
+      }
 
-          // reload page if outdated information might be displayed
-          if(secondsSincePageLoad() > 5)
-          {
-            clearCache()
-          }
-        } 
-        else
-        {
-          console.log("isAppInitialized() returned false, reloading in 3s");
-          // reload the page if not initialized to give time the background tasks to finish 
-          setTimeout(() => {
-
-            window.location.reload()
-            
-          }, 3000);
-        }     
-      }
 
       document.getElementById('lastImportedTime').innerHTML = humanReadable; 
      })
@@ -822,6 +803,25 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
   }
 
 
+  function checkInitialization() {
+    if (isAppInitialized()) {
+        // App is initialized, hide spinner and proceed with initialization
+        console.log("App initialized, proceeding...");
+        getData();
+
+        // Reload page if outdated information might be displayed
+        if (secondsSincePageLoad() > 10) {
+            clearCache();
+        }
+    } else {
+        console.log("App not initialized, checking again in 1s...");
+
+        // Check again after a delay
+        setTimeout(checkInitialization, 1000);
+    }
+}
+  
+
   showSpinner()
   handleLoadingDialog()