zoneconf.cgi: Add NIC selection highlighting

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

diff --git a/html/html/include/zoneconf.js b/html/html/include/zoneconf.js
new file mode 100644 (file)
index 0000000..d76f0ab
--- /dev/null
+++ b/html/html/include/zoneconf.js
@@ -0,0 +1,56 @@
+/*#############################################################################
+#                                                                             #
+# 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'));
+}