⚙ Settings rework 2

front/css/app.css

@@ -25,6 +25,7 @@
   color:white;
   background-color: black;
   font-family: 'Courier New', monospace;
+  font-size: .85em;
   
 }
 .logs-row textarea
@@ -58,7 +59,7 @@
 }
 .logs-small
 {
-    height: 100px;
+    height: 150px;
 }
 .log-file
 {

front/deviceDetails.php

@@ -824,7 +824,7 @@ function initializeCombos () {
   initializeCombo ( '#dropdownDevices',        'getDevices',      'txtFromDevice', false);  
 
   // Initiate dropdown
-  //  initSettingDropdown(settingKey,       // Identifier for the setting
+  //  generateSetOptions(settingKey,       // Identifier for the setting
   //                      valuesArray,       // Array of values to be pre-selected in the dropdown
   //                      targetLocation,    // ID of the HTML element where dropdown should be rendered (will be replaced)
   //                      callbackToGenerateEntries,  // Callback function to generate entries based on options
@@ -832,12 +832,12 @@ function initializeCombos () {
   //                      nameTransformer)   // callback to transform name
 
 
-  initSettingDropdown("NEWDEV_dev_Icon", [], "dropdownIcon_tmp", genListWithInputSet, 'txtIcon', atob )
+  generateOptionsOrSetOptions("NEWDEV_dev_Icon", [], "dropdownIcon_tmp", genListWithInputSet, 'txtIcon', ["base64"])
-  initSettingDropdown("NEWDEV_dev_DeviceType", [], "dropdownDeviceType_tmp", genListWithInputSet, 'txtDeviceType' )
+  generateOptionsOrSetOptions("NEWDEV_dev_DeviceType", [], "dropdownDeviceType_tmp", genListWithInputSet, 'txtDeviceType' )
-  initSettingDropdown("NEWDEV_dev_Owner", [], "dropdownOwner_tmp", genListWithInputSet, 'txtOwner' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Owner", [], "dropdownOwner_tmp", genListWithInputSet, 'txtOwner' )
-  initSettingDropdown("NEWDEV_dev_Group", [], "dropdownGroup_tmp", genListWithInputSet, 'txtGroup' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Group", [], "dropdownGroup_tmp", genListWithInputSet, 'txtGroup' )
-  initSettingDropdown("NEWDEV_dev_Location", [], "dropdownLocation_tmp", genListWithInputSet, 'txtLocation' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Location", [], "dropdownLocation_tmp", genListWithInputSet, 'txtLocation' )
-  initSettingDropdown("NEWDEV_dev_Network_Node_MAC_ADDR", [], "dropdownNetworkNodeMac_tmp", genListWithInputSet, 'txtNetworkNodeMac' )
+  generateOptionsOrSetOptions("NEWDEV_dev_Network_Node_MAC_ADDR", [], "dropdownNetworkNodeMac_tmp", genListWithInputSet, 'txtNetworkNodeMac' )
 
   // Initialize static combos
   initializeComboSkipRepeated ();

front/js/common.js

@@ -160,12 +160,7 @@ function cacheSettings()
               }    
             }
 
-            console.log(resolved);
-            console.log(resolvedOptionsOld);
-            console.log(resolvedOptions);
-
             setCache(`pia_set_${set.Code_Name}`, set.Value)             
-            
             setCache(`pia_set_opt_${set.Code_Name}`, resolvedOptions) 
           });
         }).then(() => handleSuccess('cacheSettings', resolve())).catch(() => handleFailure('cacheSettings', reject("cacheSettings already completed")));    // handle AJAX synchronization
@@ -756,7 +751,7 @@ function isRandomMAC(mac)
       return input;
     }
     // Empty array
-    if (input === '[]') {
+    if (input === '[]' || input === '') {
       return [];
     } 
   

front/js/db_methods.js

@@ -5,49 +5,95 @@
 
 // --------------------------------------------------
 // Read data and place intotarget location, callback processies the results
-function readData(sqlQuery, processDataCallback, valuesArray, targetLocation, targetField, nameTransformer) {
+function renderList(
+  options,
+  processDataCallback,
+  valuesArray,
+  placeholder,
+  targetField,
+  transformers
+) {
+  // Check if there are options provided
+  if (options.length > 0) {
+    // Determine if the first option's name is an SQL query
+    const sqlQuery = isSQLQuery(options[0].name) ? options[0].name : "";
 
-    var apiUrl = `php/server/dbHelper.php?action=read&rawSql=${encodeURIComponent(sqlQuery)}`;
+    // If there is an SQL query, fetch additional options
-    $.get(apiUrl, function(data) {
+    if (sqlQuery) {
-        // Process the JSON data using the provided callback function
+      // remove first item containing the SQL query
+      options.shift();
 
-        data = JSON.parse(data)
+      const apiUrl = `php/server/dbHelper.php?action=read&rawSql=${encodeURIComponent(sqlQuery)}`;
 
-        var htmlResult = processDataCallback(data, valuesArray, targetField, nameTransformer);
+      $.get(apiUrl, function (sqlOptionsData) {
         
-        // Place the resulting HTML into the specified placeholder div
+        // Parse the returned SQL data 
-        $("#" + targetLocation).replaceWith(htmlResult);
+        const sqlOption = JSON.parse(sqlOptionsData);
+
+        // Concatenate options from SQL query with the supplied options
+        options = options.concat(sqlOption);        
+
+        // Process the combined options
+        setTimeout(() => {
+          processDataCallback(
+            options,
+            valuesArray,
+            targetField,
+            transformers,
+            placeholder
+          );
+        }, 1);
       });
+    } else {
+      // No SQL query, directly process the supplied options
+      setTimeout(() => {
+        processDataCallback(
+          options,
+          valuesArray,
+          targetField,
+          transformers,
+          placeholder
+        );
+      }, 1);
     }
+  } else {
+    // No options provided, directly process with empty options
+    setTimeout(() => {
+      processDataCallback(
+        options,
+        valuesArray,
+        targetField,
+        transformers,
+        placeholder
+      );
+    }, 1);
+  }
+}
+
 
 // --------------------------------------------------
 // Check if database is locked
 function checkDbLock() {
   $.ajax({
-        url: 'log/db_is_locked.log', // Replace with the actual path to your PHP file
+    url: "log/db_is_locked.log", // Replace with the actual path to your PHP file
-        type: 'GET',
+    type: "GET",
 
     success: function (response) {
       console.log(response);
       if (response == 0) {
         // console.log('Database is not locked');
-                $(".header-status-locked-db").hide()  
+        $(".header-status-locked-db").hide();
-                  
       } else {
-                console.log('🟥 Database is locked:');            
+        console.log("🟥 Database is locked:");
         console.log(response);
-                $(".header-status-locked-db").show()  
+        $(".header-status-locked-db").show();
       }
     },
     error: function () {
-            console.log('🟥 Error checking database lock status');
+      console.log("🟥 Error checking database lock status");
-            $(".header-status-locked-db").show()
+      $(".header-status-locked-db").show();
-        }
+    },
   });
 }
 
 setInterval(checkDbLock(), 1000);
-
-
-
-

front/js/settings_utils.js

@@ -1,17 +1,16 @@
 // -------------------------------------------------------------------
 // Get all plugin prefixes of a given type
-  function getPluginsByType(pluginsData, pluginType, onlyEnabled)
+function getPluginsByType(pluginsData, pluginType, onlyEnabled) {
-  {
+  var result = [];
-
-    var result = []
 
   pluginsData.forEach((plug) => {
-      
+    if (plug.plugin_type == pluginType) {
-      if(plug.plugin_type == pluginType)
-      {
       // collect all, or if only enabled, check if NOT disabled
-        if (onlyEnabled == false || (onlyEnabled && getSetting(plug.unique_prefix + '_RUN') != 'disabled')) {
+      if (
-          result.push(plug.unique_prefix)         
+        onlyEnabled == false ||
+        (onlyEnabled && getSetting(plug.unique_prefix + "_RUN") != "disabled")
+      ) {
+        result.push(plug.unique_prefix);
       }
     }
   });
@@ -21,12 +20,10 @@
 
 // -------------------------------------------------------------------
 // Get plugin code name base on prefix
-  function getPluginCodeName(pluginsData, prefix)
+function getPluginCodeName(pluginsData, prefix) {
-  {
+  var result = "";
-    var result = ""
 
   pluginsData.forEach((plug) => {
-
     if (plug.unique_prefix == prefix) {
       id = plug.code_name;
 
@@ -38,15 +35,12 @@
   return result;
 }
 
-
 // -------------------------------------------------------------------
 // Get plugin type base on prefix
-  function getPluginType(pluginsData, prefix)
+function getPluginType(pluginsData, prefix) {
-  {
+  var result = "core";
-    var result = "core"
 
   pluginsData.forEach((plug) => {
-
     if (plug.unique_prefix == prefix) {
       id = plug.plugin_type;
 
@@ -60,15 +54,11 @@
 
 // -------------------------------------------------------------------
 // Get plugin config based on prefix
-  function getPluginConfig(pluginsData, prefix)
+function getPluginConfig(pluginsData, prefix) {
-  {
+  result = "";
-
-    result = ""
 
   pluginsData.forEach((plug) => {
-
     if (plug.unique_prefix == prefix) {
-        
       // console.log(id)
       result = plug;
     }
@@ -79,25 +69,24 @@
 
 // -------------------------------------------------------------------
 // Generate plugin HTML card based on prefixes in an array
-  function pluginCards(prefixesOfEnabledPlugins, includeSettings)
+function pluginCards(prefixesOfEnabledPlugins, includeSettings) {
-  {    
+  html = "";
-    html = ""
 
   prefixesOfEnabledPlugins.forEach((prefix) => {
-
+    includeSettings_html = "";
-      includeSettings_html = ''
 
     includeSettings.forEach((set) => {
-
       includeSettings_html += `
             <div class="col-sm-6 overview-setting-value-wrap">
-              <a href="#${prefix + '_' + set}" onclick="toggleAllSettings()">
+              <a href="#${prefix + "_" + set}" onclick="toggleAllSettings()">
-                <div class="overview-setting-value  pointer" title="${prefix + '_' + set}">
+                <div class="overview-setting-value  pointer" title="${
-                  <code>${getSetting(prefix + '_' + set)}</code>
+                  prefix + "_" + set
+                }">
+                  <code>${getSetting(prefix + "_" + set)}</code>
                 </div> 
               </a>
             </div>
-          `
+          `;
     });
 
     html += `            
@@ -117,66 +106,67 @@
                 </div>
                 
               </div>
-            `
+            `;
   });
 
   return html;
 }
 
-
 // -----------------------------------------------------------------------------
 // Open or close all settings
 // -----------------------------------------------------------------------------
-  function toggleAllSettings(openOrClose = '')
+function toggleAllSettings(openOrClose = "") {
-  {
+  inStr = " in";
-    inStr = ' in';
   allOpen = true;
-    openIcon = 'fa-angle-double-down';
+  openIcon = "fa-angle-double-down";
-    closeIcon = 'fa-angle-double-up';    
+  closeIcon = "fa-angle-double-up";
 
-    $('.panel-collapse').each(function(){
+  $(".panel-collapse").each(function () {
-      if($(this).attr('class').indexOf(inStr) == -1)
+    if ($(this).attr("class").indexOf(inStr) == -1) {
-      {
       allOpen = false;
     }
-    })
+  });
 
-    if(allOpen == false || openOrClose == 'open')
+  if (allOpen == false || openOrClose == "open") {
-    {
     // open all
-      openAllSettings()
+    openAllSettings();
-      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(openIcon, closeIcon))
+    $("#toggleSettings").attr(
-      
+      "class",
-    }
+      $("#toggleSettings").attr("class").replace(openIcon, closeIcon)
-    else{
+    );
+  } else {
     // close all
-      $('div[data-myid="collapsible"]').each(function(){$(this).attr('class', 'panel-collapse collapse  ')})      
+    $('div[data-myid="collapsible"]').each(function () {
-      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(closeIcon, openIcon))
+      $(this).attr("class", "panel-collapse collapse  ");
+    });
+    $("#toggleSettings").attr(
+      "class",
+      $("#toggleSettings").attr("class").replace(closeIcon, openIcon)
+    );
   }
-    
 }
 
 function openAllSettings() {
-    $('div[data-myid="collapsible"]').each(function(){$(this).attr('class', 'panel-collapse collapse in')})
+  $('div[data-myid="collapsible"]').each(function () {
-    $('div[data-myid="collapsible"]').each(function(){$(this).attr('style', 'height:inherit')})
+    $(this).attr("class", "panel-collapse collapse in");
+  });
+  $('div[data-myid="collapsible"]').each(function () {
+    $(this).attr("style", "height:inherit");
+  });
 }
 
-
 // -------------------------------------------------------------------
 // Checks if all schedules are the same
-  function schedulesAreSynchronized(prefixesOfEnabledPlugins, pluginsData)
+function schedulesAreSynchronized(prefixesOfEnabledPlugins, pluginsData) {
-  {    
+  plug_schedules = [];
-    plug_schedules = []    
 
   prefixesOfEnabledPlugins.forEach((prefix) => {
     pluginsData.forEach((plug) => {
-
       if (plug.unique_prefix == prefix) {
-          
+        plug_schedules.push(
-          plug_schedules.push(getSetting(prefix+"_RUN_SCHD").replace(/\s/g, "")) // replace all white characters to compare them easier
+          getSetting(prefix + "_RUN_SCHD").replace(/\s/g, "")
-
+        ); // replace all white characters to compare them easier
       }
-
     });
   });
 
@@ -204,7 +194,8 @@
 // -------------------------------------------------------------------
 // Utility function to check if the value is already Base64
 function isBase64(value) {
-    const base64Regex = /^(?:[A-Za-z0-9+\/]{4})*?(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/;
+  const base64Regex =
+    /^(?:[A-Za-z0-9+\/]{4})*?(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/;
   return base64Regex.test(value);
 }
 
@@ -212,34 +203,37 @@
 // Validation
 // -------------------------------------------------------------------
 function settingsCollectedCorrectly(settingsArray, settingsJSON_DB) {
-
   // check if the required UI_LANG setting is in the array - if not something went wrong
   $.each(settingsArray, function (index, value) {
     if (value[1] == "UI_LANG") {
-        if(isEmpty(value[3]) == true)
+      if (isEmpty(value[3]) == true) {
-        {
         console.log(`⚠ Error: Required setting UI_LANG not found`);
-          showModalOk('ERROR', getString('settings_missing_block')); 
+        showModalOk("ERROR", getString("settings_missing_block"));
 
         return false;
       }
     }
   });
 
-  const settingsCodeNames = settingsJSON_DB.map(setting => setting.Code_Name);
+  const settingsCodeNames = settingsJSON_DB.map((setting) => setting.Code_Name);
-  const detailedCodeNames = settingsArray.map(item => item[1]);
+  const detailedCodeNames = settingsArray.map((item) => item[1]);
 
-  const missingCodeNamesOnPage = detailedCodeNames.filter(codeName => !settingsCodeNames.includes(codeName));
+  const missingCodeNamesOnPage = detailedCodeNames.filter(
-  const missingCodeNamesInDB = settingsCodeNames.filter(codeName => !detailedCodeNames.includes(codeName));
+    (codeName) => !settingsCodeNames.includes(codeName)
+  );
+  const missingCodeNamesInDB = settingsCodeNames.filter(
+    (codeName) => !detailedCodeNames.includes(codeName)
+  );
 
   // check if the number of settings on the page and in the DB are the same
   if (missingCodeNamesOnPage.length !== missingCodeNamesInDB.length) {
-
+    console.log(
-      console.log(`⚠ Error: The following settings are missing in the DB or on the page (Reload page to fix):`);
+      `⚠ Error: The following settings are missing in the DB or on the page (Reload page to fix):`
+    );
     console.log(missingCodeNamesOnPage);
     console.log(missingCodeNamesInDB);
 
-      showModalOk('ERROR', getString('settings_missing_block')); 
+    showModalOk("ERROR", getString("settings_missing_block"));
 
     return false;
   }
@@ -253,22 +247,22 @@ function settingsCollectedCorrectly(settingsArray, settingsJSON_DB) {
 
 // ---------------------------------------------------------
 // Add item to list
-function addList(element, clearInput = true)
+function addList(element, clearInput = true) {
-{
+  const fromId = $(element).attr("my-input-from");
-  const fromId = $(element).attr('my-input-from');
+  const toId = $(element).attr("my-input-to");
-  const toId = $(element).attr('my-input-to');  
 
   const input = $(`#${fromId}`).val();
 
   console.log(`fromId | toId | input : ${fromId} | ${toId} | ${input}`);
 
-  const newOption = $("<option class='interactable-option'></option>").attr("value", input).text(input);
+  const newOption = $("<option class='interactable-option'></option>")
+    .attr("value", input)
+    .text(input);
 
   const el = $(`#${toId}`).append(newOption);
 
   // clear input
-  if (clearInput)
+  if (clearInput) {
-  {
     $(`#${fromId}`).val("");
   }
 
@@ -279,36 +273,38 @@ function addList(element, clearInput = true)
 }
 
 // ---------------------------------------------------------
-function removeFromList(element)
+function removeFromList(element) {
-{
   settingsChanged();
-  $(`#${$(element).attr('my-input-to')}`).find("option:last").remove();
+  $(`#${$(element).attr("my-input-to")}`)
-  
+    .find("option:last")
+    .remove();
 }
 // ---------------------------------------------------------
-function addInterface()
+function addInterface() {
-{
+  ipMask = $("#ipMask").val();
-  ipMask = $('#ipMask').val();
+  ipInterface = $("#ipInterface").val();
-  ipInterface = $('#ipInterface').val();
 
   full = ipMask + " --interface=" + ipInterface;
 
-  console.log(full)
+  console.log(full);
 
-  if(ipMask == "" || ipInterface == "")
+  if (ipMask == "" || ipInterface == "") {
-  {
+    showModalOk(
-    showModalOk ('Validation error', 'Specify both, the network mask and the interface');
+      "Validation error",
+      "Specify both, the network mask and the interface"
+    );
   } else {
-    $('#SCAN_SUBNETS').append($('<option disabled></option>').attr('value', full).text(full));
+    $("#SCAN_SUBNETS").append(
+      $("<option disabled></option>").attr("value", full).text(full)
+    );
 
-    $('#ipMask').val('');
+    $("#ipMask").val("");
-    $('#ipInterface').val('');
+    $("#ipInterface").val("");
 
     settingsChanged();
   }
 }
 
-
 // -------------------------------------------------------------------
 // Function to remove an item from the select element
 function removeOptionItem(option) {
@@ -326,11 +322,9 @@ function removeOptionItem(option) {
 
 // -------------------------------------------------------------------
 // Remove all options
-function removeAllOptions(element)
+function removeAllOptions(element) {
-{
   settingsChanged();
-  $(`#${$(element).attr('my-input-to')}`).empty();
+  $(`#${$(element).attr("my-input-to")}`).empty();
-  
 }
 
 // -------------------------------------------------------------------
@@ -341,16 +335,14 @@ let clickCounter = 0;
 
 // Function to initialize list interaction options
 function initListInteractionOptions(element) {
-  if(element)
+  if (element) {
-  {
     $options = $(element);
-  } else
+  } else {
-  {
     $options = $(`.interactable-option`);
   }
 
   // Attach click event listener to options
-  $options.on('click', function() {
+  $options.on("click", function () {
     const $option = $(this);
 
     // Increment click counter
@@ -362,13 +354,15 @@ function initListInteractionOptions(element) {
       if (clickCounter === 1) {
         // Single-click action
         showModalFieldInput(
-          `<i class="fa-regular fa-pen-to-square"></i> ${getString('Gen_Update_Value')}`,
+          `<i class="fa-regular fa-pen-to-square"></i> ${getString(
-          getString('settings_update_item_warning'),
+            "Gen_Update_Value"
-          getString('Gen_Cancel'),
+          )}`,
-          getString('Gen_Update'),
+          getString("settings_update_item_warning"),
+          getString("Gen_Cancel"),
+          getString("Gen_Update"),
           $option.html(),
           function () {
-            updateOptionItem($option, $(`#modal-field-input-field`).val())
+            updateOptionItem($option, $(`#modal-field-input-field`).val());
           }
         );
       } else if (clickCounter === 2) {
@@ -380,30 +374,29 @@ function initListInteractionOptions(element) {
       clickCounter = 0;
     }, 300); // Adjust delay as needed
   });
-
 }
 
-
 // -------------------------------------------------------------------
 // Function to filter rows based on input text
 function filterRows(inputText) {
-
+  if (!inputText) {
-  if(!inputText)
+    inputText = "";
-  {
-    inputText = ''
   }
 
-  $('.table_row').each(function() {
+  $(".table_row").each(function () {
     // Check if the row id ends with '__metadata'
-    var idAttribute = $(this).attr('id');
+    var idAttribute = $(this).attr("id");
-    if (idAttribute && idAttribute.endsWith('__metadata')) {
+    if (idAttribute && idAttribute.endsWith("__metadata")) {
       $(this).hide(); // Hide the row if it ends with '__metadata'
       return; // Skip to the next iteration
     }
 
-    var description = $(this).find('.setting_description').text().toLowerCase();
+    var description = $(this).find(".setting_description").text().toLowerCase();
-    var codeName = $(this).find('.setting_name code').text().toLowerCase();
+    var codeName = $(this).find(".setting_name code").text().toLowerCase();
-    if (description.includes(inputText.toLowerCase()) || codeName.includes(inputText.toLowerCase())) {
+    if (
+      description.includes(inputText.toLowerCase()) ||
+      codeName.includes(inputText.toLowerCase())
+    ) {
       $(this).show(); // Show the row if it matches the input text
     } else {
       $(this).hide(); // Hide the row if it doesn't match the input text
@@ -412,67 +405,59 @@ function filterRows(inputText) {
 }
 
 setTimeout(() => {
-
   // Event listener for input change
-    $('#settingsSearch').on('input', function() {
+  $("#settingsSearch").on("input", function () {
     var searchText = $(this).val();
     // hide the setting overview dashboard
-      $('#settingsOverview').collapse('hide');
+    $("#settingsOverview").collapse("hide");
 
     filterRows(searchText);
   });
 
   // Event listener for input focus
   // var firstFocus = true;
-    $('#settingsSearch').on('focus', function() {
+  $("#settingsSearch").on("focus", function () {
-      openAllSettings()
+    openAllSettings();
   });
-
-    
-    
 }, 1000);
 
-
-
 // -----------------------------------------------------------------------------
 // handling events on the backend initiated by the front end END
 // -----------------------------------------------------------------------------
 
-
 // ---------------------------------------------------------
 // UNUSED?
 function getParam(targetId, key, skipCache = false) {
-
   skipCacheQuery = "";
 
-  if(skipCache)
+  if (skipCache) {
-  {
     skipCacheQuery = "&skipcache";
   }
 
   // get parameter value
-  $.get('php/server/parameters.php?action=get&defaultValue=0&parameter='+ key + skipCacheQuery, function(data) {
+  $.get(
-
+    "php/server/parameters.php?action=get&defaultValue=0&parameter=" +
+      key +
+      skipCacheQuery,
+    function (data) {
       var result = data;
 
-    result = result.replaceAll('"', '');
+      result = result.replaceAll('"', "");
 
-    document.getElementById(targetId).innerHTML = result.replaceAll('"', ''); 
+      document.getElementById(targetId).innerHTML = result.replaceAll('"', "");
-  });
+    }
+  );
 }
 
 // -----------------------------------------------------------------------------
 // Show/hide the metadata settings
 // -----------------------------------------------------------------------------
-  function toggleMetadata(element)
+function toggleMetadata(element) {
-  {
+  const id = $(element).attr("my-to-toggle");
-    const id = $(element).attr('my-to-toggle');
 
   $(`#${id}`).toggle();
 }
 
-
-
 // ---------------------------------------------------------
 // Helper methods
 // ---------------------------------------------------------
@@ -494,81 +479,194 @@ function getParam(targetId, key, skipCache = false) {
   } else if (inputElement.type === "checkbox") {
     inputElement.disabled = !inputElement.disabled;
   } else {
-      console.warn("Unsupported input type. Only text, password, and checkbox inputs are supported.");
+    console.warn(
+      "Unsupported input type. Only text, password, and checkbox inputs are supported."
+    );
   }
-
 }
 
 
-    // ---------------------------------------------------------
-     // generate a list of options for a input select
-    function generateOptions(pluginsData, set, input, dataType, isMultiSelect = false, editable = false, transformers = []) {
-      let multi           = isMultiSelect ? "multiple" : "";
-      let valuesArray     = createArray(set['Value']);
-      let settingKey      = set['Code_Name'];
-      // editable ? classNames += " interactable-option" : classNames = ""
 
-      //  generate different ID depending on if it's the source for the value to be saved or only used as an input
+// Refactored function to generate options or set options based on the provided parameters
-      // isValueSource ? id = settingKey : id = settingKey + '_input';
+function generateOptionsOrSetOptions(
+  codeName,
+  valuesArray, // Array of values to be pre-selected in the dropdown
+  placeholder, // ID of the HTML element where dropdown should be rendered (will be replaced)
+  callbackToGenerateEntries, // Callback function to generate entries based on options
+  targetField, // Target field or element where selected value should be applied or updated
+  transformers = [] // Transformers to be applied to the values
+) {
 
-      // main selection dropdown wrapper
+  console.log(codeName);
-      input += `
-        <select onChange="settingsChanged()" my-data-type="${dataType}"  my-editable="${editable}" class="form-control" name="${settingKey}" id="${settingKey}" ${multi}>          
-      `;
 
-      // if available transformers are applied
+  // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
-      valuesArray = valuesArray.map(value => applyTransformers(value, transformers));
+  options = arrayToObject(createArray(getSettingOptions(codeName)))
 
-      // get all options
+  // Call to render lists
-      optionsArray = createArray(getSettingOptions(settingKey)) 
+  renderList(
+    options,
+    callbackToGenerateEntries,
+    valuesArray,
+    placeholder,
+    targetField,
+    transformers
+  );
   
-      // loop over all options and select the ones selected in the valuesArray (saved by the user)
+  // valuesArray = valuesArray.map((value) => applyTransformers(value, transformers));
-      if(optionsArray.length > 0 )
-      {
-        //  check if needs to be processed ASYNC
-        if(isSQLQuery(optionsArray[0]))
-        {
-          // create temporary placeholder
-          targetLocation = settingKey + "_temp_"
-          input += `<option value="" id="${targetLocation}" ></option>`; 
 
-          //  callback to the DB
+  // let optionsArray = createArray(getSettingOptions(settingKey));
-          readData(optionsArray[0], generateDropdownOptions, valuesArray, targetLocation, settingKey);
+
-        } else // sync processing
+  // if (optionsArray.length > 0 && isSQLQuery(optionsArray[0])) {
-        {
+  //   // Add temporary placeholder for async options
-          optionsArray.forEach(option => {
+  //   input += `<option value="" id="${placeholder}"></option>`;
-            let selected = valuesArray.includes(option) ? 'selected' : '';
+  //   input += `</select>`;
-            input += `<option value="${option}" ${selected}>${option}</option>`;
+
-          });  
+  //   // Replace the specified placeholder div with the resulting HTML
-        }
+  //   setTimeout(() => {
-      } else // this is an interactable list with default and user-defined values
+  //     $("#" + targetLocation).replaceWith(input);
-      {
+  //   }, 50);
-        // generates [1x 📝 | 2x 🚮]
+
-        valuesArray.forEach(option => {          
+
-          input += `<option class="interactable-option" value="${option}">${option}</option>`;
+
-        });  
+  // } 
+  // else {
+    
+  //   optionsArray.forEach((option) => {
+  //     let transformedOption = nameTransformer ? nameTransformer(option) : option;
+  //     let selected = valuesArray.includes(option) ? "selected" : "";
+  //     input += `<option value="${option}" ${selected}>${transformedOption}</option>`;
+  //   });
+  //   input += `</select>`;
+
+  //   setTimeout(() => {
+  //     $("#" + targetLocation).replaceWith(input);
+  //   }, 500);
+  // }
+
+  // return input;
 }
 
-      input += `</select>`;
 
-      // add values from the setting options - execute AJAX callback + SQL query resolution
-      // initSettingDropdown(settingKey, valuesArray, targetLocation, generateDropdownOptions);
 
-      return input;
+
-    }
+// // -----------------------------------------------------------------------------
+// // (ASYNC) Initiate dropdown
+// function generateSetOptions(
+//   settingKey, // Identifier for the setting
+//   valuesArray, // Array of values to be pre-selected in the dropdown
+//   targetLocation, // ID of the HTML element where dropdown should be rendered (will be replaced)
+//   callbackToGenerateEntries, // Callback function to generate entries based on options
+//   targetField, // Target field or element where selected value should be applied or updated
+//   nameTransformer
+// ) {
+//   // callback to transform the name (e.g. base64)
+//   var optionsHtml = "";
+
+//   // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
+//   optionsArray = createArray(getSettingOptions(settingKey));
+
+//   // check if the result is a SQL query
+//   if (optionsArray.length > 0 && isSQLQuery(optionsArray[0])) {
+
+//     readData(
+//       optionsArray[0],
+//       callbackToGenerateEntries,
+//       valuesArray,
+//       targetLocation,
+//       targetField,
+//       nameTransformer
+//     );
+//   } // this should be already an array, e.g. from a setting or pre-defined
+//   else {
+//     optionsArray.forEach((option) => {
+//       let selected = valuesArray.includes(option) ? "selected" : "";
+//       optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
+//     });
+
+//     // Replace the specified placeholder div with the resulting HTML
+//     setTimeout(() => {
+//       $("#" + targetLocation).replaceWith(optionsHtml);
+//     }, 50);
+//   }
+// }
+
+// // ---------------------------------------------------------
+// // generate a list of options for a input select
+// function generateOptions(
+//   settingKey,
+//   input,
+//   dataType,
+//   isMultiSelect = false,
+//   editable = false,
+//   transformers = []
+// ) {
+//   let multi = isMultiSelect ? "multiple" : "";
+//   let valuesArray = createArray(set["Value"]);
+
+//   // main selection dropdown wrapper
+//   input += `
+//         <select onChange="settingsChanged()" my-data-type="${dataType}"  my-editable="${editable}" class="form-control" name="${settingKey}" id="${settingKey}" ${multi}>          
+//       `;
+
+//   // if available transformers are applied
+//   valuesArray = valuesArray.map((value) =>
+//     applyTransformers(value, transformers)
+//   );
+
+//   // get all options
+//   optionsArray = createArray(getSettingOptions(settingKey));
+
+//   // loop over all options and select the ones selected in the valuesArray (saved by the user)
+//   if (optionsArray.length > 0) {
+//     //  check if needs to be processed ASYNC
+//     if (isSQLQuery(optionsArray[0])) {
+//       // create temporary placeholder
+//       targetLocation = settingKey + "_temp_";
+//       input += `<option value="" id="${targetLocation}" ></option>`;
+
+//       //  callback to the DB
+//       readData(
+//         optionsArray[0],
+//         generateOptions,
+//         valuesArray,
+//         targetLocation,
+//         settingKey
+//       );
+//     } // sync processing
+//     else {
+//       optionsArray.forEach((option) => {
+//         let selected = valuesArray.includes(option) ? "selected" : "";
+//         input += `<option value="${option}" ${selected}>${option}</option>`;
+//       });
+//     }
+//   } // this is an interactable list with default and user-defined values
+//   else {
+//     // generates [1x 📝 | 2x 🚮]
+//     valuesArray.forEach((option) => {
+//       input += `<option class="interactable-option" value="${option}">${option}</option>`;
+//     });
+//   }
+
+//   input += `</select>`;
+
+//   // add values from the setting options - execute AJAX callback + SQL query resolution
+//   // generateSetOptions(settingKey, valuesArray, targetLocation, generateOptions);
+
+//   return input;
+// }
 
 // ------------------------------------------------------------
 // Function to apply transformers to a value
 function applyTransformers(val, transformers) {
-  transformers.forEach(transformer => {
+  transformers.forEach((transformer) => {
     switch (transformer) {
-      case 'sha256':
+      case "sha256":
         // Implement sha256 hashing logic
         if (!isSHA256(val)) {
           val = CryptoJS.SHA256(val).toString(CryptoJS.enc.Hex);
         }
         break;
-      case 'base64':
+      case "base64":
         // Implement base64  logic
         if (!isBase64(val)) {
           val = btoa(val);
@@ -581,27 +679,49 @@ function applyTransformers(val, transformers) {
   return val;
 }
 
+// ------------------------------------------------------------
+// Function to reverse transformers applied to a value
+function reverseTransformers(val, transformers) {
+  transformers.reverse().forEach((transformer) => {
+    switch (transformer) {
+      case "sha256":
+        // Reversing sha256 is not possible since it's a one-way hash function
+        console.warn("Reversing sha256 is not possible");
+        break;
+      case "base64":
+        // Implement base64 decoding logic
+        console.log("💌");
+        if (isBase64(val)) {
+          val = atob(val);
+        }
+        break;
+      default:
+        console.warn(`Unknown transformer: ${transformer}`);
+    }
+  });
+  return val;
+}
 
 
 // ------------------------------------------------------------
 // Function to initialize relevant variables based on HTML element
 const handleElementOptions = (codeName, elementOptions, transformers, val) => {
-  let inputType = 'text';
+  let inputType = "text";
   let readOnly = "";
   let isMultiSelect = false;
-  let cssClasses = '';
+  let cssClasses = "";
-  let placeholder = '';
+  let placeholder = "";
-  let suffix = '';
+  let suffix = "";
-  let separator = '';
+  let separator = "";
   let editable = false;
   let valRes = val;
   let sourceIds = [];
   let getStringKey = "";
   let onClick = "alert('Not implemented');";
 
-  elementOptions.forEach(option => {
+  elementOptions.forEach((option) => {
     if (option.prefillValue) {
-      valRes = option.prefillValue === 'null' ? "" : option.prefillValue;
+      valRes = option.prefillValue === "null" ? "" : option.prefillValue;
     }
     if (option.type) {
       inputType = option.type;
@@ -626,8 +746,8 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     }
     if (option.sourceSuffixes) {
       $.each(option.sourceSuffixes, function (index, suf) {
-        sourceIds.push(codeName + suf)
+        sourceIds.push(codeName + suf);
-      })
+      });
     }
     if (option.separator) {
       separator = option.separator;
@@ -640,8 +760,8 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     }
   });
 
-  if (transformers.includes('sha256')) {
+  if (transformers.includes("sha256")) {
-    inputType = 'password';
+    inputType = "password";
   }
 
   return {
@@ -656,9 +776,133 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     editable,
     valRes,
     getStringKey,
-    onClick
+    onClick,
   };
 };
 
 
+// -----------------------------------------------------------------------------
+// Data processors
+// -----------------------------------------------------------------------------
 
+// --------------------------------------------------
+// Creates an object from an array 
+function arrayToObject(array) {
+  const obj = [];
+  array.forEach((item, index) => {
+    obj.push({ id: item, name: item })
+  });
+  return obj;
+}
+
+// -----------------------------------------------------------------------------
+// Processor to generate options
+function generateOptions(options, valuesArray, targetField, transformers, placeholder) {
+  var optionsHtml = "";
+
+  resultArray    = []
+  selectedArray  = []
+  cssClass       = ""
+
+  // determine if options or values are used in teh listing
+  if (valuesArray.length > 0 && options.length > 0){
+
+    // multiselect list ->  options only + selected the ones in valuesArray 
+    resultArray   = options;
+    selectedArray = valuesArray
+
+  } else if (valuesArray.length > 0 && options.length == 0){
+
+    // editable list -> values only     
+    resultArray   = arrayToObject(valuesArray)
+    cssClass = "interactable-option"
+  } else if (options.length > 0){
+
+    // dropdown -> options only (value == 1 STRING not ARRAY)
+    resultArray   = options;
+  }
+
+
+
+  resultArray.forEach(function(item) {
+
+    labelName = item.name
+
+    // console.log(nameTransformer);
+    // console.log(labelName);
+
+    if(labelName != '❌None')
+    {
+      labelName = reverseTransformers(labelName, transformers)
+    }
+
+    // what's teh source?
+    //   if options & vlaues -> source is options + select
+    //   if values only ignore options
+    // if options.length == 0 -> editable list -> combine -> don't select
+    // if not selected ->  all options (combined) and all values combined
+    // if selected     ->  options (combined) only
+
+    // needs to happen always if options ued as 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);
+}
+
+
+// -----------------------------------------------------------------------------
+// Processor to generate a list
+function generateList(options, valuesArray, targetField, transformers, placeholder) {
+  var listHtml = "";
+  options.forEach(function(item) {
+
+    labelName = item.name
+
+    if(labelName != '❌None')
+    {
+      labelName = reverseTransformers(labelName, transformers)
+    }
+
+    let selected = valuesArray.includes(item.id) ? 'selected' : '';
+
+    listHtml += `<li ${selected}>${labelName}</li>`;
+  });
+  
+  // Place the resulting HTML into the specified placeholder div
+  $("#" + placeholder).replaceWith(listHtml);
+}
+
+// -----------------------------------------------------------------------------
+// Processor to generate a list in the deviceDetails page
+function genListWithInputSet(options, valuesArray, targetField, transformers, placeholder) {
+
+  var listHtml = "";
+
+  
+  options.forEach(function(item) {
+
+    let selected = valuesArray.includes(item.id) ? 'selected' : '';
+
+    // console.log(item);
+
+    labelName = item.name
+
+    if(labelName != '❌None')
+    {
+      labelName = reverseTransformers(labelName, transformers)
+      console.log(transformers);
+    }
+
+    listHtml += `<li ${selected}>
+                      <a href="javascript:void(0)" onclick="setTextValue('${targetField}','${item.id}')">${labelName}</a> 
+                </li>`;
+    
+  });
+
+  // Place the resulting HTML into the specified placeholder div
+  $("#" + placeholder).replaceWith(listHtml);
+}

front/js/ui_components.js

@@ -78,50 +78,50 @@ function initDeviceSelectors() {
 
 
 
-// -----------------------------------------------------------------------------
+// // -----------------------------------------------------------------------------
-// (ASYNC) Initiate dropdown
+// // (ASYNC) Initiate dropdown
-function initSettingDropdown(settingKey,       // Identifier for the setting
+// function generateSetOptions(settingKey,       // Identifier for the setting
-                            valuesArray,       // Array of values to be pre-selected in the dropdown
+//                             valuesArray,       // Array of values to be pre-selected in the dropdown
-                            targetLocation,    // ID of the HTML element where dropdown should be rendered (will be replaced)
+//                             targetLocation,    // ID of the HTML element where dropdown should be rendered (will be replaced)
-                            callbackToGenerateEntries,  // Callback function to generate entries based on options
+//                             callbackToGenerateEntries,  // Callback function to generate entries based on options
-                            targetField,      // Target field or element where selected value should be applied or updated
+//                             targetField,      // Target field or element where selected value should be applied or updated
-                            nameTransformer)      // callback to transform the name (e.g. base64)
+//                             nameTransformer)      // callback to transform the name (e.g. base64)
-{
+// {
 
-  var optionsHtml = ""
+//   var optionsHtml = ""
  
-  // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
+//   // NOTE {value} options to replace with a setting or SQL value are handled in the cacheSettings() function
-  optionsArray = createArray(getSettingOptions(settingKey))  
+//   optionsArray = createArray(getSettingOptions(settingKey))  
 
 
-  // check if the result is a SQL query
+//   // check if the result is a SQL query
-  if(optionsArray.length > 0 && isSQLQuery(optionsArray[0]))
+//   if(optionsArray.length > 0 && isSQLQuery(optionsArray[0]))
-  {    
+//   {    
 
-    if (settingKey == "NEWDEV_dev_Network_Node_MAC_ADDR") {
+//     if (settingKey == "NEWDEV_dev_Network_Node_MAC_ADDR") {
-      console.log("isSQLQuery in initSettingDropdown");
+//       console.log("isSQLQuery in generateSetOptions");
 
-    }
+//     }
-    readData(optionsArray[0], callbackToGenerateEntries, valuesArray, targetLocation, targetField, nameTransformer);
+//     readData(optionsArray[0], callbackToGenerateEntries, valuesArray, targetLocation, targetField, nameTransformer);
 
-  } else // this should be already an array, e.g. from a setting or pre-defined
+//   } else // this should be already an array, e.g. from a setting or pre-defined
-  {     
+//   {     
-    optionsArray.forEach(option => {
+//     optionsArray.forEach(option => {
-      let selected = valuesArray.includes(option) ? 'selected' : '';
+//       let selected = valuesArray.includes(option) ? 'selected' : '';
-      optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
+//       optionsHtml += `<option value="${option}" ${selected}>${option}</option>`;
-    });   
+//     });   
 
-    // Replace the specified placeholder div with the resulting HTML 
+//     // Replace the specified placeholder div with the resulting HTML 
-    setTimeout(() => {
+//     setTimeout(() => {
 
-      $("#" + targetLocation).replaceWith(optionsHtml);
+//       $("#" + targetLocation).replaceWith(optionsHtml);
       
-      }, 50); 
+//       }, 50); 
-  }
+//   }
 
 
   
-}
+// }
 
 
 // -----------------------------------------------------------------------------
@@ -153,86 +153,6 @@ function hideUIelements(settingKey) {
 }
 
 
-// -----------------------------------------------------------------------------
-// Data processors
-// -----------------------------------------------------------------------------
-
-
-// -----------------------------------------------------------------------------
-// Processor to generate options for a dropdown menu
-function generateDropdownOptions(data, valuesArray, targetField, nameTransformer) {
-  var optionsHtml = "";
-  data.forEach(function(item) {
-
-    labelName = item.name
-
-    // console.log(nameTransformer);
-    // console.log(labelName);
-
-    // if(nameTransformer && nameTransformer != '' && labelName != '❌None')
-    // {
-    //   console.log(labelName);
-    //   labelName = nameTransformer(labelName)
-    //   console.log(labelName);
-    // }
-
-    let selected = valuesArray.includes(item.id) ? 'selected' : '';
-
-    optionsHtml += `<option value="${item.id}" ${selected}>${labelName}</option>`;
-  });
-  return `${optionsHtml}`;
-}
-
-
-// -----------------------------------------------------------------------------
-// Processor to generate a list
-function generateList(data, valuesArray, targetField, nameTransformer) {
-  var listHtml = "";
-  data.forEach(function(item) {
-
-    labelName = item.name
-
-    if(nameTransformer && nameTransformer != '' && labelName != '❌None')
-    {
-      labelName = nameTransformer(labelName)
-    }
-
-    let selected = valuesArray.includes(item.id) ? 'selected' : '';
-
-    listHtml += `<li ${selected}>${labelName}</li>`;
-  });
-
-  return listHtml;
-}
-
-// -----------------------------------------------------------------------------
-// Processor to generate a list in the deviceDetails page
-function genListWithInputSet(data, valuesArray, targetField, nameTransformer) {
-
-  var listHtml = "";
-
-  console.log(data);
-  data.forEach(function(item) {
-
-    let selected = valuesArray.includes(item.id) ? 'selected' : '';
-
-    // console.log(item);
-
-    labelName = item.name
-
-    if(nameTransformer && nameTransformer != '' && labelName != '❌None')
-    {
-      labelName = nameTransformer(labelName)
-    }
-
-    listHtml += `<li ${selected}>
-                      <a href="javascript:void(0)" onclick="setTextValue('${targetField}','${item.id}')">${labelName}</a> 
-                </li>`;
-    
-  });
-
-  return listHtml;
-}
 
 
 // -----------------------------------------------------------------------------

front/maintenance.php

@@ -735,34 +735,21 @@ function performLogManage() {
 
 // --------------------------------------------------------
 // scroll down the log areas
-function scrollDown()
+function scrollDown() {
-{
-  setTimeout(() => {
  
     var elementToCheck = $("#tab_Logging_id");
 
     // Check if the parent <li> is active
     if (elementToCheck.parent().hasClass("active")) {
-    {
+      var textAreas = $("#logsPlc textarea");
-        var areaIDs = ['app_log', 'app_front_log', 'IP_changes_log', 'stdout_log', 'stderr_log', 'app_pholus_log',  'app_pholus_lastrun_log', 'app_php_log'];
 
-        for (let i = 0; i < areaIDs.length; i++) {
+      textAreas.each(function() {
-
+        $(this).scrollTop(this.scrollHeight);
-          var tempArea = $('#' + areaIDs[i]);
+      });
-          
-          if (tempArea.length > 0)
-          {
-            $(tempArea[0]).scrollTop(tempArea[0].scrollHeight);
     }
  
 }
-      }
-    }
 
-  }, 200);
-    
-  
-}
 
 // --------------------------------------------------------
 // Manage displayed columns
@@ -890,6 +877,7 @@ function renderLogs(customData) {
       // data: { items: JSON.stringify(customData) }, // Send customData as JSON
       success: function(response) {
         $('#logsPlc').html(response); // Replace container content with fetched HTML
+        scrollDown(); // scroll down the logs
       },
       error: function(xhr, status, error) {
         console.error('Error fetching infoboxes:', error);
@@ -903,7 +891,6 @@ window.onload = function asyncFooter()
 {
   initializeSelectedColumns();
   renderLogs();
-  scrollDown(); // scroll down the logs
 
   // initializeTabs();
 

front/multiEditCore.php

@@ -1,6 +1,4 @@
 
-<script src="js/settings_utils.js?v=<?php include 'php/templates/version.php'; ?>"></script>
-
 
 <div class="col-md-12">
     <div class="callout callout-warning">
@@ -128,9 +126,9 @@
                   //  render based on element type
                   if (lastElementObj.elementType === 'select') {
 
-                    targetLocation = columns[j].Code_Name + "_initSettingDropdown"
+                    targetLocation = columns[j].Code_Name + "_generateSetOptions"
 
-                    initSettingDropdown(columns[j].Code_Name, [], targetLocation, generateDropdownOptions)
+                    generateOptionsOrSetOptions(columns[j].Code_Name, [], targetLocation, generateOptions)
 
                     //  Handle Icons as tehy need a preview                 
                     if(columns[j].Code_Name == 'NEWDEV_dev_Icon')

front/php/components/logs.php

@@ -53,7 +53,7 @@ function renderLogArea($params) {
     $html = '
         <div class="log-area box box-solid box-primary">
             <div class="row logs-row col-sm-12 col-xs-12">
-                <textarea id="app_log" class="' . htmlspecialchars($textAreaCssClass) . '" cols="70" rows="10" wrap="off" readonly>'
+                <textarea class="' . htmlspecialchars($textAreaCssClass) . '" cols="70" rows="20" wrap="off" readonly>'
                     . htmlspecialchars($content) .
                 '</textarea>
             </div>

front/php/server/util.php

@@ -370,18 +370,7 @@ function saveSettings()
 
               $temp = '['.$temp.']'; // wrap brackets
               $txt .= $settingKey . "=" . $temp . "\n";
-              // $temp = '';
+ 
-              // if (is_array($settingValue) == FALSE) {
-              //     $settingValue = json_decode($settingValue);
-              // }
-              // if (count($setting) > 3 && is_array($settingValue) == true) {
-              //     foreach ($settingValue as $val) {
-              //         $temp .= "'" . encode_single_quotes($val) . "',";
-              //     }
-              //     $temp = substr_replace($temp, "", -1); // remove last comma ','
-              // }
-              // $temp = '[' . $temp . ']'; // wrap brackets
-              // $txt .= $settingKey . "=" . $temp . "\n";
           } else  {
               $txt .= $settingKey . "='⭕Not handled⭕'\n";
           }

front/php/templates/footer.php

@@ -55,7 +55,7 @@
 <!-- NetAlertX -->
 <script src="js/handle_version.js"></script>
 <script src="js/ui_components.js?v=<?php include 'php/templates/version.php'; ?>"></script>
-<script src="js/db_methods.js?v=<?php include 'php/templates/version.php'; ?>"></script>
+
 
 <!-- Select2 JavaScript -->
 <script src="lib/AdminLTE/bower_components/select2/dist/js/select2.full.min.js" defer></script>

front/php/templates/header.php

@@ -33,6 +33,8 @@ require dirname(__FILE__).'/security.php';
   <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>
   <script src="js/tests.js?v=<?php include 'php/templates/version.php'; ?>"></script>
+  <script src="js/db_methods.js?v=<?php include 'php/templates/version.php'; ?>"></script>
+  <script src="js/settings_utils.js?v=<?php include 'php/templates/version.php'; ?>"></script>
 
   <!-- Bootstrap 3.3.7 -->
   <link rel="stylesheet" href="lib/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">

front/plugins/newdev_template/config.json

@@ -28,7 +28,63 @@
   "settings": [
     {
       "function": "ignored_MACs",
-      "type": {"dataType": "array","elements": [  {"elementType": "input","elementOptions": [{ "placeholder": "Enter value" },{ "suffix": "_in" },{ "cssClasses": "col-sm-10" },{ "prefillValue": "null" }],"transformers": []  },  {"elementType": "button","elementOptions": [{ "sourceSuffixes": ["_in"] },{ "separator": "" },{ "cssClasses": "col-sm-12" },{ "onClick": "addList(this, false)" },{ "getStringKey": "Gen_Add" }],"transformers": []  }, {"elementType": "button","elementOptions": [{ "sourceSuffixes": [] },{ "separator": "" },{ "cssClasses": "col-sm-6" },{ "onClick": "removeAllOptions(this)" },{ "getStringKey": "Gen_Remove_All" }],"transformers": []},{"elementType": "button","elementOptions": [{ "sourceSuffixes": [] },{ "separator": "" },{ "cssClasses": "col-sm-6" },{ "onClick": "removeFromList(this)" },{ "getStringKey": "Gen_Remove_Last" }],"transformers": []}, {"elementType": "select","elementOptions": [{ "multiple": "true" },{ "readonly": "true" },{ "editable": "true" }],"transformers": []  }]},
+      "type": {
+        "dataType": "array",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [
+              { "placeholder": "Enter value" },
+              { "suffix": "_in" },
+              { "cssClasses": "col-sm-10" },
+              { "prefillValue": "null" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": ["_in"] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-12" },
+              { "onClick": "addList(this, false)" },
+              { "getStringKey": "Gen_Add" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": [] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-6" },
+              { "onClick": "removeAllOptions(this)" },
+              { "getStringKey": "Gen_Remove_All" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": [] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-6" },
+              { "onClick": "removeFromList(this)" },
+              { "getStringKey": "Gen_Remove_Last" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "select",
+            "elementOptions": [
+              { "multiple": "true" },
+              { "readonly": "true" },
+              { "editable": "true" }
+            ],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": [],
       "options": [],
       "localized": ["name", "description"],
@@ -47,7 +103,63 @@
     },
     {
       "function": "ignored_IPs",
-      "type": {"dataType": "array","elements": [  {"elementType": "input","elementOptions": [{ "placeholder": "Enter value" },{ "suffix": "_in" },{ "cssClasses": "col-sm-10" },{ "prefillValue": "null" }],"transformers": []  },  {"elementType": "button","elementOptions": [{ "sourceSuffixes": ["_in"] },{ "separator": "" },{ "cssClasses": "col-sm-12" },{ "onClick": "addList(this, false)" },{ "getStringKey": "Gen_Add" }],"transformers": []  }, {"elementType": "button","elementOptions": [{ "sourceSuffixes": [] },{ "separator": "" },{ "cssClasses": "col-sm-6" },{ "onClick": "removeAllOptions(this)" },{ "getStringKey": "Gen_Remove_All" }],"transformers": []},{"elementType": "button","elementOptions": [{ "sourceSuffixes": [] },{ "separator": "" },{ "cssClasses": "col-sm-6" },{ "onClick": "removeFromList(this)" },{ "getStringKey": "Gen_Remove_Last" }],"transformers": []}, {"elementType": "select","elementOptions": [{ "multiple": "true" },{ "readonly": "true" },{ "editable": "true" }],"transformers": []  }]},
+      "type": {
+        "dataType": "array",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [
+              { "placeholder": "Enter value" },
+              { "suffix": "_in" },
+              { "cssClasses": "col-sm-10" },
+              { "prefillValue": "null" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": ["_in"] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-12" },
+              { "onClick": "addList(this, false)" },
+              { "getStringKey": "Gen_Add" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": [] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-6" },
+              { "onClick": "removeAllOptions(this)" },
+              { "getStringKey": "Gen_Remove_All" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": [] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-6" },
+              { "onClick": "removeFromList(this)" },
+              { "getStringKey": "Gen_Remove_Last" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "select",
+            "elementOptions": [
+              { "multiple": "true" },
+              { "readonly": "true" },
+              { "editable": "true" }
+            ],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": [],
       "options": [],
       "localized": ["name", "description"],
@@ -66,7 +178,16 @@
     },
     {
       "function": "dev_MAC",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "readonly": "true" }],
+            "transformers": []
+          }
+        ]
+      },
       "maxLength": 50,
       "default_value": "",
       "options": [],
@@ -86,7 +207,16 @@
     },
     {
       "function": "dev_Name",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "readonly": "true" }],
+            "transformers": []
+          }
+        ]
+      },
       "maxLength": 50,
       "default_value": "(unknown)",
       "options": [],
@@ -106,7 +236,12 @@
     },
     {
       "function": "dev_Owner",
-      "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          { "elementType": "select", "elementOptions": [], "transformers": [] }
+        ]
+      },
       "maxLength": 30,
       "default_value": "",
       "options": ["{value}"],
@@ -133,7 +268,12 @@
     },
     {
       "function": "dev_DeviceType",
-      "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          { "elementType": "select", "elementOptions": [], "transformers": [] }
+        ]
+      },
       "maxLength": 30,
       "default_value": "",
       "options": ["{value}"],
@@ -165,7 +305,16 @@
     },
     {
       "function": "dev_Vendor",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "readonly": "true" }],
+            "transformers": []
+          }
+        ]
+      },
       "maxLength": 250,
       "default_value": "",
       "options": [],
@@ -185,7 +334,16 @@
     },
     {
       "function": "dev_Favorite",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 0,
       "options": [],
       "localized": ["name", "description"],
@@ -204,7 +362,12 @@
     },
     {
       "function": "dev_Group",
-      "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          { "elementType": "select", "elementOptions": [], "transformers": [] }
+        ]
+      },
       "maxLength": 10,
       "default_value": "",
       "options": ["{value}"],
@@ -231,7 +394,12 @@
     },
     {
       "function": "dev_Comments",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          { "elementType": "input", "elementOptions": [], "transformers": [] }
+        ]
+      },
       "default_value": "",
       "options": [],
       "localized": ["name", "description"],
@@ -250,7 +418,16 @@
     },
     {
       "function": "dev_FirstConnection",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "readonly": "true" }],
+            "transformers": []
+          }
+        ]
+      },
       "format": "date-time",
       "default_value": "",
       "options": [],
@@ -270,7 +447,16 @@
     },
     {
       "function": "dev_LastConnection",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "readonly": "true" }],
+            "transformers": []
+          }
+        ]
+      },
       "format": "date-time",
       "default_value": "",
       "options": [],
@@ -290,7 +476,16 @@
     },
     {
       "function": "dev_LastIP",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "readonly": "true" }],
+            "transformers": []
+          }
+        ]
+      },
       "maxLength": 50,
       "default_value": "",
       "options": [],
@@ -310,7 +505,16 @@
     },
     {
       "function": "dev_StaticIP",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 0,
       "options": [],
       "localized": ["name", "description"],
@@ -329,7 +533,16 @@
     },
     {
       "function": "dev_ScanCycle",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 1,
       "options": [],
       "localized": ["name", "description"],
@@ -348,7 +561,16 @@
     },
     {
       "function": "dev_LogEvents",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 1,
       "options": [],
       "localized": ["name", "description"],
@@ -367,7 +589,16 @@
     },
     {
       "function": "dev_AlertEvents",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 1,
       "options": [],
       "localized": ["name", "description"],
@@ -386,7 +617,16 @@
     },
     {
       "function": "dev_AlertDeviceDown",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 0,
       "options": [],
       "localized": ["name", "description"],
@@ -405,7 +645,12 @@
     },
     {
       "function": "dev_SkipRepeated",
-      "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          { "elementType": "select", "elementOptions": [], "transformers": [] }
+        ]
+      },
       "default_value": 0,
       "options": ["{value}"],
       "options_params": [
@@ -431,7 +676,16 @@
     },
     {
       "function": "dev_LastNotification",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "readonly": "true" }],
+            "transformers": []
+          }
+        ]
+      },
       "format": "date-time",
       "default_value": "",
       "options": [],
@@ -451,7 +705,16 @@
     },
     {
       "function": "dev_PresentLastScan",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 1,
       "options": [],
       "localized": ["name", "description"],
@@ -470,7 +733,16 @@
     },
     {
       "function": "dev_NewDevice",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 1,
       "options": [],
       "localized": ["name", "description"],
@@ -489,7 +761,12 @@
     },
     {
       "function": "dev_Location",
-      "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          { "elementType": "select", "elementOptions": [], "transformers": [] }
+        ]
+      },
       "maxLength": 250,
       "default_value": "",
       "options": ["{value}"],
@@ -516,7 +793,16 @@
     },
     {
       "function": "dev_Archived",
-      "type": {"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "integer",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 0,
       "options": [],
       "localized": ["name", "description"],
@@ -535,7 +821,12 @@
     },
     {
       "function": "dev_Network_Node_MAC_ADDR",
-      "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          { "elementType": "select", "elementOptions": [], "transformers": [] }
+        ]
+      },
       "default_value": "",
       "options": ["{value}"],
       "options_params": [
@@ -566,7 +857,16 @@
     },
     {
       "function": "dev_Network_Node_port",
-      "type": {"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [{"readonly": "true"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "readonly": "true" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 0,
       "options": [],
       "localized": ["name", "description"],
@@ -585,7 +885,12 @@
     },
     {
       "function": "dev_Icon",
-      "type": {"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]},
+      "type": {
+        "dataType": "string",
+        "elements": [
+          { "elementType": "select", "elementOptions": [], "transformers": [] }
+        ]
+      },
       "default_value": "",
       "options": ["{value}"],
       "options_params": [
@@ -611,7 +916,16 @@
     },
     {
       "function": "LESS_NAME_CLEANUP",
-      "type": {"dataType":"boolean", "elements": [{"elementType" : "input", "elementOptions" : [{"type":"checkbox"}] ,"transformers": []}]},
+      "type": {
+        "dataType": "boolean",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [{ "type": "checkbox" }],
+            "transformers": []
+          }
+        ]
+      },
       "default_value": 0,
       "options": [],
       "localized": ["name", "description"],
@@ -630,8 +944,75 @@
     },
     {
       "function": "NAME_CLEANUP_REGEX",
-      "type": {"dataType":"string", "elements": [{"elementType" : "textarea", "elementOptions" : [] ,"transformers": ["base64"]}]},
+      "type": {
-      "default_value": ["XC5fYWlycGxheQ==", "XC5fdGNw", "XC5sb2NhbGRvbWFpbg==", "XC5sb2NhbA==", "XC5fZXNwaG9tZWxpYg==", "XC5fZ29vZ2xlY2FzdA==", "XC5sYW4=", "XC5ob21l",  "LVthLWZBLUYwLTldezMyfQ==", "Iy4q" ],
+        "dataType": "array",
+        "elements": [
+          {
+            "elementType": "input",
+            "elementOptions": [
+              { "placeholder": "Enter value" },
+              { "suffix": "_in" },
+              { "cssClasses": "col-sm-10" },
+              { "prefillValue": "null" }
+            ],
+            "transformers": []
+          },         
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": [] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-3" },
+              { "onClick": "removeAllOptions(this)" },
+              { "getStringKey": "Gen_Remove_All" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": [] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-3" },
+              { "onClick": "removeFromList(this)" },
+              { "getStringKey": "Gen_Remove_Last" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "button",
+            "elementOptions": [
+              { "sourceSuffixes": ["_in"] },
+              { "separator": "" },
+              { "cssClasses": "col-sm-2" },
+              { "onClick": "addList(this, false)" },
+              { "getStringKey": "Gen_Add" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "select",
+            "elementOptions": [
+              { "multiple": "true" },
+              { "readonly": "true" },
+              { "editable": "true" }
+            ],
+            "transformers": ["base64"]
+          }
+        ]
+      },
+      "default_value": [
+        "XC5fYWlycGxheQ==",
+        "XC5fdGNw",
+        "XC5sb2NhbGRvbWFpbg==",
+        "XC5sb2NhbA==",
+        "XC5fZXNwaG9tZWxpYg==",
+        "XC5fZ29vZ2xlY2FzdA==",
+        "XC5sYW4=",
+        "XC5ob21l",
+        "LVthLWZBLUYwLTldezMyfQ==",
+        "Iy4q"
+      ],
       "options": [],
       "localized": ["name", "description"],
       "name": [

front/plugins/nmap_dev_scan/nmap_dev.py

@@ -84,7 +84,7 @@ def execute_scan(subnets_list, timeout):
     for interface in subnets_list:
         nmap_output = execute_scan_on_interface(interface, timeout)
 
-        mylog('verbose', [f"[{pluginName}] nmap_output: ", nmap_output])
+        # mylog('verbose', [f"[{pluginName}] nmap_output XML: ", nmap_output])
 
         if nmap_output:  # Proceed only if nmap output is not empty
             # Parse the XML output using python-nmap

front/settings.php

@@ -50,7 +50,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
 ?>
 <!-- Page ------------------------------------------------------------------ -->
 
-<script src="js/settings_utils.js?v=<?php include 'php/templates/version.php'; ?>"></script>
+
 
 <script src="lib/crypto/crypto-js.min.js"></script>
 
@@ -237,7 +237,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
             // only proceed if everything was loaded correctly
             if(!exception_occurred)
             {
-              initSettingsPage(settingsData, pluginsData, generateDropdownOptions);
+              initSettingsPage(settingsData, pluginsData);
             }
           })
         }        
@@ -374,7 +374,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
       // go thru all settings and collect settings per settings prefix 
       settingsData.forEach((set) => {
 
-        const val = set['Value'];
+        const valIn = set['Value'];
         const codeName = set['Code_Name'];
         const setType = set['Type'];
         const isMetadata = codeName.includes('__metadata');
@@ -382,7 +382,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
         const setObj = isMetadata ? {} : JSON.parse(getSetting(`${codeName}__metadata`));
 
         // not initialized properly, reload
-        if(isMetadata && val == "" )
+        if(isMetadata && valIn == "" )
         {
           console.warn(`Metadata setting value is empty: ${codeName}`);
           clearCache();
@@ -481,12 +481,22 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
               valRes,
               getStringKey,
               onClick
-            } = handleElementOptions(codeName, elementOptions, transformers, val);
+            } = handleElementOptions(codeName, elementOptions, transformers, valIn);
+
+            // override
+            val = valRes;
 
             // Generate HTML based on dataType and elementType
             switch (elementType) {
               case 'select':
-                inputHtml = generateOptions(pluginsData, set, inputHtml, dataType, isMultiSelect, editable, transformers);
+                let multi = isMultiSelect ? "multiple" : "";
+
+                inputHtml += `<select onChange="settingsChanged()" my-data-type="${dataType}" my-editable="${editable}" class="form-control" name="${codeName}" id="${codeName}" ${multi}>
+                                <option value="" id="${codeName + "_temp_"}"></option>
+                              </select>`;
+
+                generateOptionsOrSetOptions(codeName, createArray(val), `${codeName}_temp_`, generateOptions, targetField = null, transformers);
+
                 break;
 
               case 'input':
@@ -500,7 +510,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
                     my-data-type="${dataType}" 
                     id="${codeName}${suffix}" 
                     type="${inputType}" 
-                    value="${valRes}" 
+                    value="${val}" 
                     ${readOnly}
                     ${checked}
                     placeholder="${placeholder}" 
@@ -530,7 +540,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
                 break;
 
               default:
-                console.warn(`Unknown element type: ${elementType}`);
+                console.warn(`🟥Unknown element type: ${elementType}`);
             }
           });
 
@@ -569,7 +579,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
     }
 
     // init finished
+    setTimeout(() => {
       initListInteractionOptions()  // init remove and edit listitem click gestures
+    }, 50);
+    
     setupSmoothScrolling()
     hideSpinner()
 
@@ -616,6 +629,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
           const setTypeObject = JSON.parse(setType.replace(/'/g, '"'));         
           // console.log(setTypeObject);
 
+          const dataType = setTypeObject.dataType;
           const lastElementObj = setTypeObject.elements[setTypeObject.elements.length - 1];
           const { elementType, elementOptions = [], transformers = [] } = lastElementObj;
           const { 
@@ -635,20 +649,20 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
 
           let value;
 
-          if (setTypeObject.dataType === "string" || 
+          if (dataType === "string" || 
-              (setTypeObject.dataType === "integer" && (inputType === "number" || inputType === "text"))) {
+              (dataType === "integer" && (inputType === "number" || inputType === "text"))) {
             
             value = $('#' + setCodeName).val();
             value = applyTransformers(value, transformers);
-            settingsArray.push([prefix, setCodeName, setTypeObject.dataType, value]);
+            settingsArray.push([prefix, setCodeName, dataType, value]);
 
           } else if (inputType === 'checkbox') {
             
             value = $(`#${setCodeName}`).is(':checked') ? 1 : 0;
             value = applyTransformers(value, transformers);
-            settingsArray.push([prefix, setCodeName, setTypeObject.dataType, value]);
+            settingsArray.push([prefix, setCodeName, dataType, value]);
 
-          } else if (setTypeObject.dataType === "array" ) {
+          } else if (dataType === "array" ) {
             
             // make sure to collect all if set as "editable" or selected only otherwise
             $(`#${setCodeName}`).attr("my-editable") == "true" ? additionalSelector = "" : additionalSelector = ":selected" 
@@ -657,25 +671,27 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
             $(`#${setCodeName} option${additionalSelector}`).each(function() {
               const vl = $(this).val();
               if (vl !== '') {
-                temps.push(vl);
+                temps.push(applyTransformers(vl, transformers));
               }
             });
           
             value = JSON.stringify(temps);
-            value = applyTransformers(value, transformers);
+            settingsArray.push([prefix, setCodeName, dataType, value]);
-            settingsArray.push([prefix, setCodeName, setTypeObject.dataType, value]);
 
-          } else if (setTypeObject.dataType === "json") {
+          } else if (dataType === "json") {
             
             value = $('#' + setCodeName).val();
             value = applyTransformers(value, transformers);
             value = JSON.stringify(value, null, 2)
-            settingsArray.push([prefix, setCodeName, setTypeObject.dataType, value]);
+            settingsArray.push([prefix, setCodeName, dataType, value]);
 
           } else {
+            
+            console.error(`[saveSettings] Couldn't determnine how to handle (setCodeName|dataType|inputType):(${setCodeName}|${dataType}|${inputType})`);
+
             value = $('#' + setCodeName).val();
             value = applyTransformers(value, transformers);
-            settingsArray.push([prefix, setCodeName, setTypeObject.dataType, value]);
+            settingsArray.push([prefix, setCodeName, dataType, value]);
           }
         });
 
@@ -702,7 +718,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
                 window.onbeforeunload = null;         
 
                 // Reloads the current page
-                // setTimeout("clearCache()", 5000);    
+                setTimeout("clearCache()", 5000);    
               } else{
                 // something went wrong
                 // write_notification(data, 'interrupt')

server/plugin.py

@@ -42,11 +42,6 @@ class plugin_param:
 
                 mylog('debug', f'[Plugins] dType: {dataType}')
 
-                # noConversion            = ['text', 'string', 'integer', 'boolean', 'password', 'password.SHA256', 'readonly', 'integer.select', 'text.select', 'integer.checkbox'  ]
-                # arrayConversion         = ['text.multiselect', 'list', 'list.select', 'subnets']                 
-                # jsonConversion          = ['.template'] 
-
-                
 
                 if dataType  == 'array':
                     # store number of returned values