Files
bpfire/html/html/include/zoneconf.js
Leo-Andres Hofmann b4434345dc zoneconf.cgi: Add Javascript for new GUI elements
Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
2021-02-22 18:58:13 +00:00

84 lines
3.9 KiB
JavaScript

/*#############################################################################
# #
# IPFire.org - A linux based firewall #
# Copyright (C) 2007-2020 IPFire Team <info@ipfire.org> #
# #
# This program is free software: you can redistribute it and/or modify #
# it under the terms of the GNU General Public License as published by #
# the Free Software Foundation, either version 3 of the License, or #
# (at your option) any later version. #
# #
# This program is distributed in the hope that it will be useful, #
# but WITHOUT ANY WARRANTY; without even the implied warranty of #
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the #
# GNU General Public License for more details. #
# #
# You should have received a copy of the GNU General Public License #
# along with this program. If not, see <http://www.gnu.org/licenses/>. #
# #
#############################################################################*/
//zoneconf.cgi dynamic highlighting of interface access selection
//(call this from "onchange" event of selection elements)
function highlightAccess(selectObj) {
if(!(selectObj && ('zone' in selectObj.dataset) && ('mac' in selectObj.dataset))) {
return; //required parameters are missing
}
var zoneColor = selectObj.dataset.zone.trim().toLowerCase(); //zone color (red/green/blue/orange) CSS class
function colorParentCell(obj, color, enabled = true) { //find nearest parent table cell of "obj" and set its CSS color class
do {
obj = obj.parentElement;
} while(obj && (obj.nodeName.toUpperCase() !== 'TD'));
if(obj && (['green', 'red', 'orange', 'blue'].includes(color))) {
obj.classList.toggle(color, enabled);
}
}
//handle other associated input fields
if(selectObj.type.toUpperCase() === 'RADIO') { //this is a radio button group: clear all highlights
let radios = document.getElementsByName(selectObj.name);
radios.forEach(function(button) {
if(button.nodeName.toUpperCase() === 'INPUT') { //make sure the found element is a button
colorParentCell(button, zoneColor, false); //remove css
}
});
} else { //this is a dropdown menu: enable/disable additional VLAN tag input box
let tagInput = document.getElementById('TAG-' + selectObj.dataset.zone + '-' + selectObj.dataset.mac); //tag input element selector
if(tagInput) {
tagInput.disabled = (selectObj.value !== 'VLAN'); //enable tag input if VLAN mode selected
}
}
//if interface is assigned, highlight table cell in zone color
colorParentCell(selectObj, zoneColor, (selectObj.value !== 'NONE'));
}
//update zone mode
function changeZoneMode(selectObj) {
if(!(selectObj && ('zone' in selectObj.dataset))) {
return; //required parameters are missing
}
// STP enable checkbox
let stpEnable = document.getElementById('STP-' + selectObj.dataset.zone);
if(stpEnable) {
stpEnable.disabled = (selectObj.value !== 'BRIDGE'); //STP is available if zone is in bridge mode
stpEnable.checked = stpEnable.checked && (! stpEnable.disabled); //un-check if disabled
stpEnable.dispatchEvent(new Event('change'));
}
}
//STP enable checkbox change toggles priority input
function changeEnableSTP(inputObj) {
if(!(inputObj && ('zone' in inputObj.dataset))) {
return; //required parameters are missing
}
let priority = document.getElementById('STP-PRIORITY-' + inputObj.dataset.zone);
if(priority) {
priority.disabled = inputObj.disabled || (! inputObj.checked);
}
}