webadmin/bpfire
1
0
Fork 0
mirror of https://github.com/vincentmli/bpfire.git synced 2026-04-25 02:12:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

zoneconf.cgi: Add NIC selection highlighting

Browse Source 
This improves the usability of the zone configuration by marking assigned
NICs in the zone color. The highlighting is initially applied to the static
HTML output, and JavaScript is used to follow changes made by the user.

Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
This commit is contained in:
Leo-Andres Hofmann
2020-11-17 07:29:04 +01:00
committed by Michael Tremer
parent fc31c28d5c
commit 5c33a76135
3 changed files with 72 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
config/rootfiles/common/web-user-interface
View File

@@ -308,6 +308,7 @@ srv/web/ipfire/html/images/wakeup.gif
srv/web/ipfire/html/images/window-new.png
srv/web/ipfire/html/include
srv/web/ipfire/html/include/snortupdateutility.js
srv/web/ipfire/html/include/zoneconf.js
srv/web/ipfire/html/index.cgi
srv/web/ipfire/html/redirect-templates
srv/web/ipfire/html/redirect-templates/legacy

21
html/cgi-bin/zoneconf.cgi
View File

@@ -26,7 +26,7 @@ require '/var/ipfire/general-functions.pl';
require "${General::swroot}/lang.pl";
require "${General::swroot}/header.pl";
my $css = <<END
my $extraHead = <<END
<style>
table#zoneconf {
width: 100%;
@@ -101,6 +101,8 @@ my $css = <<END
margin-left: auto;
}
</style>
<script src="/include/zoneconf.js"></script>
END
;
@@ -151,7 +153,7 @@ foreach (@nics) {
}
}
&Header::openpage($Lang::tr{"zoneconf title"}, 1, $css);
&Header::openpage($Lang::tr{"zoneconf title"}, 1, $extraHead);
&Header::openbigbox('100%', 'center');
### Evaluate POST parameters ###
@@ -364,6 +366,7 @@ foreach (@nics) {
foreach (@zones) {
my $uc = uc $_;
my $dev_name = $ethsettings{"${uc}_DEV"};
my $highlight = "";
if ($dev_name eq "") { # Again, skip the zone if it is not activated
next;
@@ -379,11 +382,12 @@ foreach (@nics) {
if ($mac eq $ethsettings{"${uc}_MACADDR"}) {
$checked = "checked";
$highlight = $_;
}
print <<END
<td class="">
<input type="radio" name="PPPACCESS" value="$mac" $checked>
<td class="$highlight">
<input type="radio" name="PPPACCESS" value="$mac" data-zone="RED" data-mac="$mac" onchange="highlightAccess(this)" $checked>
</td>
END
;
@@ -424,9 +428,14 @@ END
$access_selected{"NONE"} = ($access_selected{"NATIVE"} eq "") && ($access_selected{"VLAN"} eq "") ? "selected" : "";
my $vlan_disabled = ($wlan) ? "disabled" : "";
# If the interface is assigned, hightlight table cell
if ($access_selected{"NONE"} eq "") {
$highlight = $_;
}
print <<END
<td class="">
<select name="ACCESS $uc $mac" onchange="document.getElementById('TAG-$uc-$mac').disabled = (this.value === 'VLAN' ? false : true)">
<td class="$highlight">
<select name="ACCESS $uc $mac" data-zone="$uc" data-mac="$mac" onchange="highlightAccess(this)">
<option value="NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf access none"} -</option>
<option value="NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf access native"}</option>
<option value="VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::tr{"zoneconf access vlan"}</option>

56
html/html/include/zoneconf.js Normal file
View File

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