1x📝|2x🚮 click list edit options in Settings

front/css/dark-patch.css

@@ -17,9 +17,10 @@ html {
   background-color: #353c42;
 }
 
-body {
+body, .bg-yellow, .callout.callout-warning, .alert-warning, .label-warning, .modal-warning .modal-body {
-  background-color: #353c42;
+
-  color: #bec5cb;
+  background-color: #353c42 !important;
+  color: #bec5cb !important;
 }
 h4 {
   color: #44def1;

front/js/common.js

@@ -9,7 +9,7 @@
 
 // -----------------------------------------------------------------------------
 var timerRefreshData = ''
-var modalCallbackFunction = '';
+
 var emptyArr            = ['undefined', "", undefined, null, 'null'];
 var UI_LANG = "English";
 var settingsJSON = {}
@@ -281,6 +281,8 @@ function getString (key) {
 // -----------------------------------------------------------------------------
 // Modal dialog handling
 // -----------------------------------------------------------------------------
+var modalCallbackFunction = '';
+
 function showModalOK (title, message, callbackFunction) {
   showModalOk (title, message, callbackFunction)
 }
@@ -376,12 +378,14 @@ function showModalFieldInput (title, message, btnCancel=getString('Gen_Cancel'),
   $(`#${prefix}-cancel`).html  (btnCancel);
   $(`#${prefix}-OK`).html      (btnOK);
 
+  console.log(callbackFunction);
+
   if ( callbackFunction != null)
   {
     modalCallbackFunction =          callbackFunction;
   }
 
-  $(`#modal-field-input-field`).val(curValue)
+  $(`#${prefix}-field`).val(curValue)
   
 
   // Show modal
@@ -410,6 +414,17 @@ function modalDefaultInput () {
   }, 100);
 }
 
+// -----------------------------------------------------------------------------
+function modalDefaultFieldInput () {
+  // Hide modal
+  $('#modal-field-input').modal('hide');
+
+  // timer to execute function
+  window.setTimeout( function() {
+    modalCallbackFunction();
+  }, 100);
+}
+
 // -----------------------------------------------------------------------------
 function modalWarningOK () {
   // Hide modal

front/js/settings_utils.js

@@ -178,49 +178,66 @@
   }
 
 // -------------------------------------------------------------------
- // Function to remove an item from the select element
+// Manipulating Editable List options
- function removeOptionItem(option) {
+// -------------------------------------------------------------------
-    option.remove();
+
-  }
+
+// -------------------------------------------------------------------
+// Function to remove an item from the select element
+function removeOptionItem(option) {
+  option.remove();
+}
+
+// -------------------------------------------------------------------
+// Update value of an item from the select elemen
+ function updateOptionItem(option, value) {
+  option.html(value);
+}
 
 // -------------------------------------------------------------------
 // Function to initialize remove functionality on select options 
 
-let isDoubleClick = false;
+// Counter to track number of clicks
+let clickCounter = 0;
 
+// Function to initialize list interaction options
 function initListInteractionOptions(selectorId) {
+  // Select all options within the specified selector
+  const $options = $(`#${selectorId} option`);
 
-  $(`#${selectorId} option`).addClass('interactable-option')
+  // Add class to make options interactable
+  $options.addClass('interactable-option');
 
-  // Attach double-click event listeners to "Remove" 
+  // Attach click event listener to options
-  $(`#${selectorId} option`).on('dblclick', function() {
+  $options.on('click', function() {
-    isDoubleClick = true;
-    const $option = $(this);
-    removeOptionItem($option);
-  });
-
-  $(`#${selectorId} option`).on('click', function() {
     const $option = $(this);
 
-    // Reset the flag after a short delay
+    // Increment click counter
+    clickCounter++;
+
+    // Delay to capture multiple clicks
     setTimeout(() => {
-      console.log(isDoubleClick);
+      // Perform action based on click count
-      if (!isDoubleClick) {
+      if (clickCounter === 1) {
         // Single-click action
-        showModalFieldInput (
+        showModalFieldInput(
-          `<i class="fa fa-square-plus pointer"></i> ${getString('DevDetail_button_AddIcon')}`, 
+          `<i class="fa-regular fa-pen-to-square"></i> ${getString('Gen_Update_Value')}`,
-          getString('DevDetail_button_AddIcon_Help'),
+          getString('settings_update_item_warning'),
           getString('Gen_Cancel'),
-          getString('Gen_Okay'), 
+          getString('Gen_Update'),
           $option.html(),
           function() {
-            alert('aaa');
+            updateOptionItem($option, $(`#modal-field-input-field`).val())
-          });
+          }
-
+        );
-        isDoubleClick = false;
+      } else if (clickCounter === 2) {
+        // Double-click action
+        removeOptionItem($option);
       }
 
-    }, 300); // Adjust this delay as needed
+      // Reset click counter
+      clickCounter = 0;
+    }, 300); // Adjust delay as needed
   });
 }
 
@@ -235,3 +252,4 @@ function initListInteractionOptions(selectorId) {
 
 
 
+

front/php/templates/notification.php

@@ -134,7 +134,7 @@
 
       <div class="modal-footer">
         <button id="modal-field-input-cancel" type="button" class="btn btn-outline pull-left" style="min-width: 80px;" data-dismiss="modal">       Cancel </button>
-        <button id="modal-field-input-OK"     type="button" class="btn btn-outline"           style="min-width: 80px;" onclick="modalDefaultInput()"> OK     </button>
+        <button id="modal-field-input-OK"     type="button" class="btn btn-outline"           style="min-width: 80px;" onclick="modalDefaultFieldInput()"> OK     </button>
       </div>
 
     </div>