From 698ad8e45d227d8b26a8f49d6c75d7cc665d1c8a Mon Sep 17 00:00:00 2001 From: jokob-sk Date: Wed, 16 Jul 2025 22:00:55 +1000 Subject: [PATCH] refactor ui init --- front/css/app.css | 2 +- front/deviceDetailsEdit.php | 3 ++ front/deviceDetailsTools.php | 2 +- front/js/ui_components.js | 73 --------------------------------- front/multiEditCore.php | 78 ++++++++++++++++++++++++++++++------ front/network.php | 5 ++- front/settings.php | 7 ++-- 7 files changed, 79 insertions(+), 91 deletions(-) diff --git a/front/css/app.css b/front/css/app.css index 1289248d..0932fb05 100755 --- a/front/css/app.css +++ b/front/css/app.css @@ -1552,7 +1552,7 @@ input[readonly] { #deviceDetailsEdit .select2-container--default .select2-selection--multiple .select2-selection__choice a { - color: #FFF0E0; + color: #bec5cb; } #deviceDetailsEdit .iconPreview svg diff --git a/front/deviceDetailsEdit.php b/front/deviceDetailsEdit.php index 4c446db2..860abd8c 100755 --- a/front/deviceDetailsEdit.php +++ b/front/deviceDetailsEdit.php @@ -286,6 +286,9 @@ toggleNetworkConfiguration(mac == 'Internet') + initSelect2(); + initHoverNodeInfo(); + hideSpinner(); }) diff --git a/front/deviceDetailsTools.php b/front/deviceDetailsTools.php index cba3d5f7..e93ad674 100755 --- a/front/deviceDetailsTools.php +++ b/front/deviceDetailsTools.php @@ -295,7 +295,7 @@ function initCopyFromDevice() { const devices = getVisibleDevicesList() - console.log(devices); + // console.log(devices); const $select = $('#txtCopyFromDevice'); $select.empty(); // Clear existing options diff --git a/front/js/ui_components.js b/front/js/ui_components.js index df94323e..ea443c5b 100755 --- a/front/js/ui_components.js +++ b/front/js/ui_components.js @@ -8,64 +8,6 @@ ----------------------------------------------------------------------------- */ -// ----------------------------------------------------------------------------- -// Initialize device selectors / pickers fields -// ----------------------------------------------------------------------------- -function initDeviceSelectors(devicesListAll_JSON) { - - // Check if both device list exists - if (devicesListAll_JSON) { - // Parse the JSON string to get the device list array - var devicesList = JSON.parse(devicesListAll_JSON); - - var selectorFieldsHTML = '' - - // Loop through the devices list - devicesList.forEach(function(device) { - - selectorFieldsHTML += ``; - }); - - selector = `
-
-
- -
-
-
` - - - // Find HTML elements with class "deviceSelector" and append selector field - $('.deviceSelector').append(selector); - } - - // Initialize selected items after a delay so selected macs are available in the context - setTimeout(function(){ - // Retrieve MAC addresses from query string or cache - var macs = getQueryString('macs') || getCache('selectedDevices'); - - if(macs) - { - // Split MAC addresses if they are comma-separated - macs = macs.split(','); - - console.log(macs) - - // Loop through macs to be selected list - macs.forEach(function(mac) { - - // Create the option and append to Select2 - var option = new Option($('.deviceSelector select option[value="' + mac + '"]').html(), mac, true, true); - - $('.deviceSelector select').append(option).trigger('change'); - }); - - } - - }, 10); -} // ------------------------------------------------------------------- // Utility function to generate a random API token in the format t_ @@ -718,8 +660,6 @@ function initSelect2() { // check if cache ready if(isValidJSON(devicesListAll_JSON)) { - // prepare HTML DOM before initializing the frotend - initDeviceSelectors(devicesListAll_JSON) // -------------------------------------------------------- //Initialize Select2 Elements and make them sortable @@ -947,17 +887,4 @@ function initHoverNodeInfo() { } - - -// init functions after dom loaded -window.addEventListener("load", function() { - // try to initialize - setTimeout(() => { - initSelect2(); - initHoverNodeInfo(); - // initializeiCheck(); - }, 500); -}); - - console.log("init ui_components.js") \ No newline at end of file diff --git a/front/multiEditCore.php b/front/multiEditCore.php index a35a75eb..ca6b7c04 100755 --- a/front/multiEditCore.php +++ b/front/multiEditCore.php @@ -17,18 +17,21 @@

-
- -
- - +
+
+
+
+ +
+
+
+
+
+ +
- -
@@ -208,13 +211,64 @@ generateSimpleForm(relevantColumns); + initSelect2(); + initDeviceSelectors(); + }) - }, 500); + }, 100); } + // ----------------------------------------------------------------------------- + // Initialize device selectors / pickers fields + function initDeviceSelectors() { + + // Parse device list + devicesList = JSON.parse(getCache('devicesListAll_JSON')); + + // Check if the device list exists and is an array + if (Array.isArray(devicesList)) { + const $select = $(".deviceSelector select"); + + $select.append( + devicesList + .filter(d => d.devMac && d.devName) + .map(d => ``) + .join('') + ).trigger('change'); + } + + + + // Initialize selected items after a delay so selected macs are available in the context + setTimeout(function(){ + // Retrieve MAC addresses from query string or cache + var macs = getQueryString('macs') || getCache('selectedDevices'); + + if(macs) + { + // Split MAC addresses if they are comma-separated + macs = macs.split(','); + + console.log(macs) + + // Loop through macs to be selected list + macs.forEach(function(mac) { + + // Create the option and append to Select2 + var option = new Option($('.deviceSelector select option[value="' + mac + '"]').html(), mac, true, true); + + $('.deviceSelector select').append(option).trigger('change'); + }); + + } + + }, 10); + } + + // ----------------------------------------------------------------------------- // Get selected devices Macs diff --git a/front/network.php b/front/network.php index f915d6bf..c6e6d442 100755 --- a/front/network.php +++ b/front/network.php @@ -782,7 +782,7 @@ function initTree(myHierarchy) data-icon="${nodeData.data.icon}" >
- ${devicePort} ${deviceIcon} + ${devicePort} ${deviceIcon} ${nodeData.data.name}
@@ -941,6 +941,9 @@ initTab(); // init Assign/Unassign buttons initButtons() +// init pop up hover boxes for device details +initHoverNodeInfo(); + diff --git a/front/settings.php b/front/settings.php index 0171cff8..bc9a2d08 100755 --- a/front/settings.php +++ b/front/settings.php @@ -514,10 +514,11 @@ $settingsJSON_DB = json_encode($settings, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX initListInteractionOptions() // init remove and edit listitem click gestures }, 50); - setupSmoothScrolling() + setupSmoothScrolling(); // try to initialize select2 - initSelect2() - hideSpinner() + initSelect2(); + initHoverNodeInfo(); + hideSpinner(); }