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

Double-click to remove in Settings lists ❌

Browse Source
This commit is contained in:
jokob-sk
2024-04-23 22:57:24 +10:00
parent f600398353
commit a8fad6ac74
4 changed files with 57 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
front/css/app.css
View File

@@ -875,6 +875,27 @@ input[readonly] {
cursor: not-allowed;
}
.removable-option:hover::before {
opacity: 1;
}
.removable-option::before {
content: 'Double-click to ❌';
position: absolute;
right: 0;
top: 0;
color: white;
background-color: rgb(255, 87, 87);
padding: 3px;
transition: opacity 0.5s;
opacity: 0;
border-radius: 3px;
}
.removable-option:hover {
transition: background-color 2s;
cursor: pointer;
}
/* ----------------------------------------------------------------- */
/* Devices page */

17
front/js/settings_utils.js
View File

@@ -175,9 +175,26 @@
} else {
return false;
}
}
// -------------------------------------------------------------------
// Function to remove an item from the select element
function removeOptionItem(option) {
option.remove();
}
// -------------------------------------------------------------------
// Function to initialize remove functionality on select options
function initRemoveBtnOptn(selectorId) {
// Attach double-click event listeners to "Remove"
$(`#${selectorId} option`).addClass('removable-option').on('dblclick', function() {
const $option = $(this);
removeOptionItem($option);
});
}

2
front/php/templates/language/en_us.json
View File

@@ -528,7 +528,7 @@
"REPORT_MAIL_name": "Enable email",
"REPORT_TITLE": "Report",
"RandomMAC_hover": "Autodetected - indicates if the device randomizes it's MAC address.",
"SCAN_SUBNETS_description": "Most on-network scanners (ARP-SCAN, NMAP, NSLOOKUP, DIG, PHOLUS) rely on scanning specific network interfaces and subnets. Check the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">subnets documentation</a> for help on this setting, especially VLANs, what VLANs are supported, or how to figure out the network mask and your interface. <br/> <br/> An alternative to on-network scanners is to enable some other Device scanners/importers that don't rely on NetALert<sup>X</sup> having access to the network (UNIFI, dhcp.leases, PiHole, etc.). <br/> <br/> Note: The scan time itself depends on the number of IP addresses to check so set this up carefully with the appropriate network mask and interface.",
"SCAN_SUBNETS_description": "Most on-network scanners (ARP-SCAN, NMAP, NSLOOKUP, DIG, PHOLUS) rely on scanning specific network interfaces and subnets. Check the <a href=\"https://github.com/jokob-sk/NetAlertX/blob/main/docs/SUBNETS.md\" target=\"_blank\">subnets documentation</a> for help on this setting, especially VLANs, what VLANs are supported, or how to figure out the network mask and your interface. <br/> <br/> An alternative to on-network scanners is to enable some other Device scanners/importers that don't rely on NetALert<sup>X</sup> having access to the network (UNIFI, dhcp.leases, PiHole, etc.). <br/> <br/> Note: The scan time itself depends on the number of IP addresses to check, so set this up carefully with the appropriate network mask and interface.",
"SYSTEM_TITLE": "System Information",
"Setting_Override": "Override value",
"Setting_Override_Description": "Enabling this option will override an App supplied default value with the value specified above.",

23
front/settings.php
View File

@@ -441,11 +441,11 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
<input class="form-control" id="ipInterface" type="text" placeholder="eth0" />
</div>
<div class="col-xs-3">
<button class="btn btn-primary" onclick="addInterface()">Add</button>
<button class="btn btn-primary" onclick="addInterface();initRemoveBtnOptn('${codeName}')">Add</button>
</div>
</div>
<div class="form-group">
<select class="form-control" my-data-type="${setType}" name="${codeName}" id="${codeName}" multiple readonly>`;
<select class="form-control" my-data-type="${setType}" name="${codeName}" id="${codeName}" onchange="initRemoveBtnOptn(${codeName})" multiple readonly>`;
options = createArray(val);
@@ -454,8 +454,13 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
inputHtml += `<option value="${option}" disabled>${option}</option>`;
});
inputHtml += '</select></div>' +
`<div class="col-xs-6"><button class="btn btn-primary" onclick="removeInterfaces()">Remove all</button><button class="btn btn-primary" my-input="${codeName}" onclick="removeFromList(this)">Remove last</button></div>`;
inputHtml += `</select>
</div>
<div class="col-xs-6">
<button class="btn btn-primary" onclick="removeInterfaces()">Remove all</button>
</div>`;
} else if (setType === 'list' || setType === 'list.readonly') {
settingKeyOfLists.push(codeName);
@@ -466,7 +471,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
<input class="form-control" type="text" id="${codeName}_input" placeholder="Enter value"/>
</div>
<div class="col-xs-3">
<button class="btn btn-primary" my-input-from="${codeName}_input" my-input-to="${codeName}" onclick="addList(this)">Add</button>
<button class="btn btn-primary" my-input-from="${codeName}_input" my-input-to="${codeName}" onclick="addList(this);initRemoveBtnOptn('${codeName}')">Add</button>
</div>
</div>
<div class="form-group">
@@ -475,6 +480,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
let options = createArray(val);
options.forEach(option => {
inputHtml += `<option value="${option}" disabled>${option}</option>`;
});
@@ -513,6 +519,12 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
// generate settings in the correct group section
$(`#${group} .panel-body`).append(setHtml);
// init remove list item buttons
if(['subnets', 'list' ].includes(setType))
{
initRemoveBtnOptn(codeName)
}
}
});
@@ -615,6 +627,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
{
settingsChanged();
$(`#${$(element).attr('my-input')}`).find("option:last").remove();
}
// ---------------------------------------------------------
function addInterface()