NEWDEV_dev_Icon preview #789

front/css/app.css

@@ -1116,7 +1116,7 @@ input[readonly] {
 /*                    Devices page                                   */
 /* ----------------------------------------------------------------- */
 
-#txtIconFA {
+.iconPreview {
     min-width: 40px;
 }
 

front/deviceDetails.php

@@ -197,8 +197,8 @@
                         </label>
                         <div class="col-sm-9">
                           <div class="input-group">
-                            <span class="input-group-addon" id="txtIconFA"></span>
-                            <input class="form-control" id="txtIcon" type="text" value="--" readonly>
+                            <span class="input-group-addon iconPreview" id="txtIconPreview" my-customid="txtIconPreview"></span>
+                            <input class="form-control" id="txtIcon"  my-customid="txtIcon" my-customparams="txtIcon,txtIconPreview" type="text" value="--" readonly>
                             <span class="input-group-addon" title='<?= lang('DevDetail_button_AddIcon_Tooltip');?>'><i class="fa fa-square-plus pointer" onclick="askAddIcon();"></i></span>
                             <span class="input-group-addon" title='<?= lang('DevDetail_button_OverwriteIcons_Tooltip');?>'><i class="fa fa-copy pointer" onclick="askOverwriteIconType();"></i></span>
                             <div class="input-group-btn">
@@ -755,7 +755,7 @@ function main () {
 
     // Show device icon as it changes
   $('#txtIcon').on('change input', function() {
-    updateIconPreview('#txtIcon')
+    updateIconPreview(this)
   });
   
        
@@ -1136,7 +1136,7 @@ function initializeCalendar () {
           showSpinner()
         } else {
           setTimeout(() => {
-            updateIconPreview('#txtIcon')  
+            updateIconPreview($('#txtIcon'))  
           }, 500);
           
           hideSpinner()
@@ -1667,7 +1667,7 @@ function addAsBase64 () {
 
   $('#txtIcon').val(iconHtmlBase64); 
 
-  updateIconPreview('#txtIcon')
+  updateIconPreview($('#txtIcon'))  
 
 }
 

front/js/settings_utils.js

@@ -667,7 +667,11 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
   let valRes = val;
   let sourceIds = [];
   let getStringKey = "";
-  let onClick = "alert('Not implemented');";
+  let onClick = "console.log('onClick - Not implemented');";
+  let onChange = "console.log('onChange - Not implemented');";
+  let customParams = "";
+  let customId = "";
+
 
   elementOptions.forEach((option) => {
     if (option.prefillValue) {
@@ -711,6 +715,15 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     if (option.onClick) {
       onClick = option.onClick;
     }
+    if (option.onChange) {
+      onChange = option.onChange;
+    }
+    if (option.customParams) {
+      customParams = option.customParams;
+    }
+    if (option.customId) {
+      customId = option.customId;
+    }
   });
 
   if (transformers.includes("sha256")) {
@@ -731,6 +744,9 @@ const handleElementOptions = (codeName, elementOptions, transformers, val) => {
     valRes,
     getStringKey,
     onClick,
+    onChange,
+    customParams,
+    customId
   };
 };
 

front/js/ui_components.js

@@ -68,23 +68,66 @@ function initDeviceSelectors(devicesListAll_JSON) {
 }
 
 
-// -----------------------------------------------------------------------------
+// ----------------------------------------------
 // Updates the icon preview  
-function updateIconPreview (inputId) {
-  // update icon
-  iconInput = $(inputId) 
+function updateIconPreview(elem) {
+  // Retrieve and parse custom parameters from the element
+  let params = $(elem).attr("my-customparams")?.split(',').map(param => param.trim());
 
-  value = iconInput.val()
+  // console.log(params);
 
-  iconInput.on('change input', function() {
-    $('#txtIconFA').html(atob(value))
-  });    
+  if (params && params.length >= 2) {
+    var inputElementID = params[0];
+    var targetElementID = params[1];
+  } else {
+    console.error("Invalid parameters passed to updateIconPreview function");
+    return;
+  }
 
-  $('#txtIconFA').html(atob(value))
-  
+  // Get the input element using the inputElementID
+  let iconInput = $("#" + inputElementID);
+
+  if (iconInput.length === 0) {
+    console.error("Icon input element not found");
+    return;
+  }
+
+  // Get the initial value and update the target element
+  let value = iconInput.val();
+  if (!value) {
+    console.error("Input value is empty or not defined");
+    return;
+  }
+
+  if (!targetElementID) {
+    targetElementID = "txtIcon";
+  }
+
+  // Check if the target element exists, if not find an element with matching custom attribute
+  let targetElement = $('#' + targetElementID);
+  if (targetElement.length === 0) {
+    // Look for an element with my-custom-id attribute equal to targetElementID
+    targetElement = $('[my-customid="' + targetElementID + '"]');
+    if (targetElement.length === 0) {
+      console.error("Neither target element with ID nor element with custom attribute found");
+      return;
+    }
+  }
+
+  // Update the target element with decoded base64 value
+  targetElement.html(atob(value));
+
+  // Add event listener to update the icon on input change
+  iconInput.on('change input', function () {
+    let newValue = $(this).val();
+    $('#' + targetElementID).html(atob(newValue));
+  });
 }
 
 
+
+
+
 // -----------------------------------------------------------------------------
 // Generic function to copy text to clipboard
 function copyToClipboard(buttonElement) {

front/multiEditCore.php

@@ -101,19 +101,20 @@
                 for (let j = i * elementsPerColumn; j < Math.min((i + 1) * elementsPerColumn, columns.length); j++) {
 
                   const setTypeObject  = JSON.parse(columns[j].Type.replace(/'/g, '"'));         
-                  // console.log(setTypeObject); 🔽        
-                  // const lastElementObj = setTypeObject.elements[setTypeObject.elements.length - 1]
 
                   // get the element with the input value(s)
-                  let elementsWithInputValue = setTypeObject.elements.filter(element => element.elementHasInputValue === 1);
+                  let elements = setTypeObject.elements.filter(element => element.elementHasInputValue === 1);
 
                   //  if none found, take last
-                  if(elementsWithInputValue.length == 0)
+                  if(elements.length == 0)
                   {
-                    elementsWithInputValue = setTypeObject.elements[setTypeObject.elements.length - 1]
+                    elementWithInputValue = setTypeObject.elements[setTypeObject.elements.length - 1]
+                  } else
+                  {
+                    elementWithInputValue = elements[0]
                   }
 
-                  const { elementType, elementOptions = [], transformers = [] } = elementsWithInputValue;
+                  const { elementType, elementOptions = [], transformers = [] } = elementWithInputValue;
                   const { 
                     inputType,
                     readOnly,
@@ -127,26 +128,28 @@
                     editable,
                     valRes,
                     getStringKey,
-                    onClick
+                    onClick,
+                    onChange,
+                    customParams,
+                    customId
                   } = handleElementOptions('none', elementOptions, transformers, val = "");
 
-                  // console.log(setTypeObject);
-                  // console.log(inputType);
-
                   //  render based on element type 
-                  if (elementsWithInputValue.elementType === 'select') {
+                  if (elementType === 'select') {
 
                     targetLocation = columns[j].Code_Name + "_generateSetOptions"
 
                     generateOptionsOrSetOptions(columns[j].Code_Name, [], targetLocation, generateOptions)
 
-                    //  Handle Icons as tehy need a preview                 
+                    console.log(columns[j].Code_Name)
+                    //  Handle Icons as they need a preview                 
                     if(columns[j].Code_Name == 'NEWDEV_dev_Icon')
                     {
                       input = `
-                            <span class="input-group-addon" id="txtIconFA"></span>
+                            <span class="input-group-addon iconPreview" my-customid="NEWDEV_dev_Icon_preview"></span>
                             <select  class="form-control"
-                                      onChange="updateIconPreview('#NEWDEV_dev_Icon')"
+                                      onChange="updateIconPreview(this)"
+                                      my-customparams="NEWDEV_dev_Icon,NEWDEV_dev_Icon_preview"
                                       id="${columns[j].Code_Name}"
                                       data-my-column="${columns[j].Code_Name}" 
                                       data-my-targetColumns="${columns[j].Code_Name.replace('NEWDEV_','')}" >
@@ -164,7 +167,7 @@
                     }
 
 
-                  } else if (elementsWithInputValue.elementType === 'input'){ 
+                  } else if (elementType === 'input'){ 
                     
                     // Add classes specifically for checkboxes
                     inputType === 'checkbox' ?  inputClass = 'checkbox' : inputClass = 'form-control';
@@ -172,6 +175,7 @@
 
                     input =  `<input  class="${inputClass}" 
                                       id="${columns[j].Code_Name}"  
+                                      my-customid="${columns[j].Code_Name}"  
                                       data-my-column="${columns[j].Code_Name}" 
                                       data-my-targetColumns="${columns[j].Code_Name.replace('NEWDEV_','')}" 
                                       type="${inputType}">`

front/php/templates/language/cs_cz.json

@@ -295,6 +295,7 @@
     "Gen_Save": "",
     "Gen_Saved": "",
     "Gen_Search": "",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "",
     "Gen_Switch": "",
     "Gen_Upd": "",

front/php/templates/language/de_de.json

@@ -307,6 +307,7 @@
     "Gen_Save": "Speichern",
     "Gen_Saved": "Gespeichert",
     "Gen_Search": "Suchen",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Ausgewählte Geräte:",
     "Gen_Switch": "Umschalten",
     "Gen_Upd": "Aktualisierung erfolgreich",

front/php/templates/language/en_us.json

@@ -295,6 +295,7 @@
     "Gen_Save": "Save",
     "Gen_Saved": "Saved",
     "Gen_Search": "Search",
+    "Gen_SelectToPreview": "Select to preview",
     "Gen_Selected_Devices": "Selected Devices:",
     "Gen_Switch": "Switch",
     "Gen_Upd": "Updated successfully",

front/php/templates/language/es_es.json

@@ -305,6 +305,7 @@
     "Gen_Save": "Guardar",
     "Gen_Saved": "Guardado",
     "Gen_Search": "Buscar",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Dispositivos seleccionados:",
     "Gen_Switch": "Cambiar",
     "Gen_Upd": "Actualizado correctamente",

front/php/templates/language/fr_fr.json

@@ -295,6 +295,7 @@
     "Gen_Save": "Enregistrer",
     "Gen_Saved": "Enregistré",
     "Gen_Search": "Recherche",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Appareils sélectionnés :",
     "Gen_Switch": "Basculer",
     "Gen_Upd": "Mise à jour réussie",

front/php/templates/language/it_it.json

@@ -295,6 +295,7 @@
     "Gen_Save": "Salva",
     "Gen_Saved": "Salvato",
     "Gen_Search": "Cerca",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Dispositivi selezionati:",
     "Gen_Switch": "Cambia",
     "Gen_Upd": "Aggiornato correttamente",

front/php/templates/language/nb_no.json

@@ -295,6 +295,7 @@
     "Gen_Save": "Lagre",
     "Gen_Saved": "Lagret",
     "Gen_Search": "Søk",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Valgte Enheter:",
     "Gen_Switch": "Bytt",
     "Gen_Upd": "Oppdatering vellykket",

front/php/templates/language/pl_pl.json

@@ -295,6 +295,7 @@
     "Gen_Save": "Zapisz",
     "Gen_Saved": "Zapisano",
     "Gen_Search": "Szukaj",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Wybierz Urządzenia:",
     "Gen_Switch": "Switch",
     "Gen_Upd": "Zaktualizowane poprawnie",

front/php/templates/language/pt_br.json

@@ -295,6 +295,7 @@
     "Gen_Save": "Salvar",
     "Gen_Saved": "Salvo",
     "Gen_Search": "Procurar",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Dispositivos selecionados:",
     "Gen_Switch": "Trocar",
     "Gen_Upd": "Atualizado com sucesso",

front/php/templates/language/ru_ru.json

@@ -295,6 +295,7 @@
     "Gen_Save": "Сохранить",
     "Gen_Saved": "Сохранено",
     "Gen_Search": "Поиск",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Выбранные устройства:",
     "Gen_Switch": "Переключить",
     "Gen_Upd": "Успешное обновление",

front/php/templates/language/tr_tr.json

@@ -295,6 +295,7 @@
     "Gen_Save": "Kaydet",
     "Gen_Saved": "Kaydedildi",
     "Gen_Search": "",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "Seçilmiş Cihazlar:",
     "Gen_Switch": "",
     "Gen_Upd": "Başarılı bir şekilde güncellendi",

front/php/templates/language/zh_cn.json

@@ -295,6 +295,7 @@
     "Gen_Save": "保存",
     "Gen_Saved": "已保存",
     "Gen_Search": "搜索",
+    "Gen_SelectToPreview": "",
     "Gen_Selected_Devices": "选定的设备：",
     "Gen_Switch": "交换",
     "Gen_Upd": "已成功更新",

front/plugins/newdev_template/config.json

@@ -198,7 +198,7 @@
             "elementOptions": [
               { "sourceSuffixes": ["_in"] },
               { "separator": "" },
-              { "cssClasses": "col-sm-2" },
+              { "cssClasses": "col-xs-12" },
               { "onClick": "addList(this, false)" },
               { "getStringKey": "Gen_Add" }
             ],
@@ -219,7 +219,7 @@
             "elementOptions": [
               { "sourceSuffixes": [] },
               { "separator": "" },
-              { "cssClasses": "col-sm-3" },
+              { "cssClasses": "col-xs-6" },
               { "onClick": "removeFromList(this)" },
               { "getStringKey": "Gen_Remove_Last" }
             ],
@@ -230,7 +230,7 @@
             "elementOptions": [
               { "sourceSuffixes": [] },
               { "separator": "" },
-              { "cssClasses": "col-sm-3" },
+              { "cssClasses": "col-xs-6" },
               { "onClick": "removeAllOptions(this)" },
               { "getStringKey": "Gen_Remove_All" }
             ],
@@ -977,7 +977,27 @@
       "type": {
         "dataType": "string",
         "elements": [
-          { "elementType": "select", "elementOptions": [], "transformers": [] }
+          {
+            "elementType": "span",
+            "elementOptions": [
+              { "cssClasses": "input-group-addon iconPreview" },
+              { "getStringKey": "Gen_SelectToPreview" },
+              { "customId": "NEWDEV_dev_Icon_preview" }
+            ],
+            "transformers": []
+          },
+          {
+            "elementType": "select",
+            "elementHasInputValue": 1,
+            "elementOptions": [
+              { "cssClasses": "col-xs-12" },
+              {
+                "onChange": "updateIconPreview(this)"
+              },
+              { "customParams": "NEWDEV_dev_Icon,NEWDEV_dev_Icon_preview" }
+            ],
+            "transformers": []
+          }          
         ]
       },
       "default_value": "",

front/settings.php

@@ -416,7 +416,7 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
                       <div class="table_cell setting_description">
                         ${getString(codeName + '_description', set['Description'])}
                       </div>
-                      <div class="table_cell setting_input input-group col-sm-12">
+                      <div class="table_cell input-group setting_input input-group col-sm-12">
                   `;
 
           // OVERRIDE
@@ -485,7 +485,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
               editable,
               valRes,
               getStringKey,
-              onClick
+              onClick,
+              onChange,
+              customParams,
+              customId
             } = handleElementOptions(codeName, elementOptions, transformers, valIn);
 
             // override
@@ -498,7 +501,15 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
                 let addCss = isOrdeable ? "select2 select2-hidden-accessible" : "";
 
 
-                inputHtml += `<select onChange="settingsChanged()" my-data-type="${dataType}" my-editable="${editable}" class="form-control ${addCss}" name="${codeName}" id="${codeName}" ${multi}>
+                inputHtml += `<select onChange="settingsChanged();${onChange}" 
+                                      my-data-type="${dataType}" 
+                                      my-editable="${editable}" 
+                                      class="form-control ${addCss}" 
+                                      name="${codeName}" 
+                                      id="${codeName}" 
+                                      my-customparams="${customParams}" 
+                                      my-customid="${customId}" 
+                                      ${multi}>
                                 <option value="" id="${codeName + "_temp_"}"></option>
                               </select>`;
 
@@ -513,8 +524,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
                 inputHtml += `
                   <input 
                     class="${inputClass} ${cssClasses}" 
-                    onChange="settingsChanged()" 
+                    onChange="settingsChanged();${onChange}" 
                     my-data-type="${dataType}" 
+                    my-customparams="${customParams}" 
+                    my-customid="${customId}" 
                     id="${codeName}${suffix}" 
                     type="${inputType}" 
                     value="${val}" 
@@ -529,6 +542,8 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
                 inputHtml += `
                   <button 
                     class="btn btn-primary ${cssClasses}" 
+                    my-customparams="${customParams}" 
+                    my-customid="${customId}" 
                     my-input-from="${sourceIds}" 
                     my-input-to="${codeName}" 
                     onclick="${onClick}">
@@ -539,12 +554,25 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
                 inputHtml += `
                   <textarea 
                     class="form-control input" 
+                    my-customparams="${customParams}" 
+                    my-customid="${customId}" 
                     my-data-type="${dataType}" 
                     id="${codeName}" 
                     ${readOnly}>
                       ${val}
                     </textarea>`;
                 break;
+              case 'span':                
+                inputHtml += `
+                  <span 
+                    class="${cssClasses}" 
+                    my-data-type="${dataType}" 
+                    my-customparams="${customParams}" 
+                    my-customid="${customId}" 
+                    >
+                    ${getString(getStringKey)}
+                    </span>`;
+                break;
 
               default:
                 console.warn(`🟥Unknown element type: ${elementType}`);
@@ -640,17 +668,21 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
           // console.log(setTypeObject);
 
           const dataType = setTypeObject.dataType;
+          
 
           // get the element with the input value(s)
-          let elementsWithInputValue = setTypeObject.elements.filter(element => element.elementHasInputValue === 1);
+          let elements = setTypeObject.elements.filter(element => element.elementHasInputValue === 1);
 
           //  if none found, take last
-          if(elementsWithInputValue.length == 0)
+          if(elements.length == 0)
           {
-            elementsWithInputValue = setTypeObject.elements[setTypeObject.elements.length - 1]
+            elementWithInputValue = setTypeObject.elements[setTypeObject.elements.length - 1]
+          } else
+          {
+            elementWithInputValue = elements[0]
           }
 
-          const { elementType, elementOptions = [], transformers = [] } = elementsWithInputValue;
+          const { elementType, elementOptions = [], transformers = [] } = elementWithInputValue;
           const { 
             inputType,
             readOnly,
@@ -664,7 +696,10 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX
             editable,
             valRes,
             getStringKey,
-            onClick
+            onClick,
+            onChange,
+            customParams,
+            customId
           } = handleElementOptions('none', elementOptions, transformers, val = "");
 
           let value;