vh/NetAlertX
1
0
Fork 0
mirror of https://github.com/jokob-sk/NetAlertX.git synced 2025-12-07 09:36:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

refactor ui init

Browse Source
This commit is contained in:
jokob-sk
2025-07-16 22:00:55 +10:00
parent 09fd345528
commit 698ad8e45d
7 changed files with 79 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/css/app.css
View File

@@ -1552,7 +1552,7 @@ input[readonly] {
#deviceDetailsEdit .select2-container--default .select2-selection--multiple .select2-selection__choice a
{
color: #FFF0E0;
color: #bec5cb;
}
#deviceDetailsEdit .iconPreview svg

3
front/deviceDetailsEdit.php
View File

@@ -286,6 +286,9 @@
toggleNetworkConfiguration(mac == 'Internet')
initSelect2();
initHoverNodeInfo();
hideSpinner();
})

2
front/deviceDetailsTools.php
View File

@@ -295,7 +295,7 @@
function initCopyFromDevice() {
const devices = getVisibleDevicesList()
console.log(devices);
// console.log(devices);
const $select = $('#txtCopyFromDevice');
$select.empty(); // Clear existing options

73
front/js/ui_components.js
View File

@@ -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 += `<option value="${device.devMac}">${device.devName}</option>`;
});
selector = `<div class="db_info_table_row col-sm-12" >
<div class="form-group" >
<div class="input-group col-sm-12 " >
<select class="form-control select2 select2-hidden-accessible" multiple="" style="width: 100%;" tabindex="-1" aria-hidden="true">
${selectorFieldsHTML}
</select>
</div>
</div>
</div>`
// 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_<random string of specified length>
@@ -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")

76
front/multiEditCore.php
View File

@@ -17,18 +17,21 @@
<h3 class="box-title"><?= lang('Gen_Selected_Devices');?></h3>
</div>
<div class="deviceSelector col-md-11 col-sm-11" style="z-index:5"></div>
<div class="deviceSelector col-md-11 col-sm-11" style="z-index:5">
<div class="db_info_table_row col-sm-12" >
<div class="form-group" >
<div class="input-group col-sm-12 " >
<select class="form-control select2 select2-hidden-accessible" multiple="" style="width: 100%;" tabindex="-1" aria-hidden="true">
<div class="col-md-1">
<button type="button" class="btn btn-default col-md-12" onclick="markAllSelected()" title="<?= lang('Gen_Add_All');?>">
<i class="fa-solid fa-circle-check"></i>
</button>
<button type="button" class="btn btn-default col-md-12" onclick="markAllNotSelected()" title="<?= lang('Gen_Remove_All');?>">
<i class="fa-solid fa-circle-xmark"></i>
</button>
</select>
</div>
</div>
</div>
</div>
<div class="col-md-1">
<i class="fa-solid fa-circle-check" onclick="markAllSelected()" title="<?= lang('Gen_Add_All');?>"></i>
<i class="fa-solid fa-circle-xmark" onclick="markAllNotSelected()" title="<?= lang('Gen_Remove_All');?>"></i>
</div>
</div>
@@ -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 => `<option value="${d.devMac}">${d.devName}</option>`)
.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

5
front/network.php
View File

@@ -782,7 +782,7 @@ function initTree(myHierarchy)
data-icon="${nodeData.data.icon}"
>
<div class="netNodeText">
<strong><span class="${badgeConf.cssText}">${devicePort} ${deviceIcon}</span>
<strong><span>${devicePort} <span class="${badgeConf.cssText}">${deviceIcon}</span></span>
<span class="spanNetworkTree anonymizeDev" style="width:${nodeWidthPx-50}px">${nodeData.data.name}</span>
</strong>
</div>
@@ -941,6 +941,9 @@ initTab();
// init Assign/Unassign buttons
initButtons()
// init pop up hover boxes for device details
initHoverNodeInfo();
</script>

7
front/settings.php
View File

@@ -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();
}