zoneconf.cgi: Add Javascript for new GUI elements

[people/pmueller/ipfire-2.x.git] / html / html / include / zoneconf.js

/*#############################################################################
#                                                                             #
# 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);
	}
}