From mboxrd@z Thu Jan  1 00:00:00 1970
From: Leo-Andres Hofmann <hofmann@leo-andres.de>
To: development@lists.ipfire.org
Subject: [PATCH] zoneconf.cgi: Improve 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 dynamically
 follow changes made by the user.
Date: Tue, 10 Nov 2020 13:37:14 +0100
Message-ID: <06299a2d-c302-4712-8a2a-6842ccb3b24b@Leo-Laptop.local>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============8385439219850107010=="
List-Id: <development.lists.ipfire.org>

--===============8385439219850107010==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

Discussion: https://lists.ipfire.org/pipermail/development/2020-October/00856=
7.html

Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
---
 html/cgi-bin/zoneconf.cgi | 89 +++++++++++++++++++++++++++++----------
 1 file changed, 67 insertions(+), 22 deletions(-)

diff --git a/html/cgi-bin/zoneconf.cgi b/html/cgi-bin/zoneconf.cgi
index d99a3e611..2501901c4 100644
--- a/html/cgi-bin/zoneconf.cgi
+++ b/html/cgi-bin/zoneconf.cgi
@@ -26,7 +26,7 @@ require '/var/ipfire/general-functions.pl';
 require "${General::swroot}/lang.pl";
 require "${General::swroot}/header.pl";
=20
-my $css =3D <<END
+my $extraHead =3D <<END
 <style>
 	table {
 		width: 100%;
@@ -64,19 +64,19 @@ my $css =3D <<END
 	}
=20
 	td.green {
-		background-color: $Header::colourgreen;
+		background-color: $Header::colourgreen !important;
 	}
=20
 	td.red {
-		background-color: $Header::colourred;
+		background-color: $Header::colourred !important;
 	}
=20
 	td.blue {
-		background-color: $Header::colourblue;
+		background-color: $Header::colourblue !important;
 	}
=20
 	td.orange {
-		background-color: $Header::colourorange;
+		background-color: $Header::colourorange !important;
 	}
=20
 	td.topleft {
@@ -112,6 +112,44 @@ my $css =3D <<END
 		margin-top: 1em;
 	}
 </style>
+
+<script type=3D"text/javascript">
+	//highlight interface access selection, call this from "onchange" event of =
selection element
+	function highlightAccess(selectObj) {
+		if(!(selectObj && ('zone' in selectObj.dataset) && ('mac' in selectObj.dat=
aset))) {
+			return; //required parameters are missing
+		}
+
+		var zoneColor =3D selectObj.dataset.zone.trim().toLowerCase(); //zone colo=
r (red/green/blue/orange) CSS class
+
+		function colorParentCell(obj, color, enabled =3D true) { //find nearest pa=
rent table cell of "obj" and set its CSS color class
+			do {
+				obj =3D obj.parentElement;
+			} while(obj && (obj.nodeName.toUpperCase() !=3D=3D 'TD'));
+			if(obj && (['green', 'red', 'orange', 'blue'].includes(color))) {
+				obj.classList.toggle(color, enabled);
+			}
+		}
+
+		//handle other associated input fields
+		if(selectObj.type.toUpperCase() =3D=3D=3D 'RADIO') { //this is a radio but=
ton group: clear all highlights
+			let radios =3D document.getElementsByName(selectObj.name);
+			radios.forEach(function(button) {
+				if(button.nodeName.toUpperCase() =3D=3D=3D 'INPUT') { //make sure the fo=
und element is a button
+					colorParentCell(button, zoneColor, false); //remove css
+				}
+			});
+		} else { //this is a dropdown menu: enable/disable additional VLAN tag inp=
ut box
+			let tagInput =3D document.getElementById('TAG ' + selectObj.dataset.zone =
+ ' ' + selectObj.dataset.mac); //tag input element selector
+			if(tagInput) {
+				tagInput.disabled =3D (selectObj.value !=3D=3D 'VLAN'); //enable tag inp=
ut if VLAN mode selected
+			}
+		}
+
+		//if interface is assigned, highlight table cell in zone color
+		colorParentCell(selectObj, zoneColor, (selectObj.value !=3D=3D 'NONE'));
+	}
+</script>
 END
 ;
=20
@@ -162,7 +200,7 @@ foreach (@nics) {
 	}
 }
=20
-&Header::openpage($Lang::tr{"zoneconf title"}, 1, $css);
+&Header::openpage($Lang::tr{"zoneconf title"}, 1, $extraHead);
 &Header::openbigbox('100%', 'center');
=20
 ### Evaluate POST parameters ###
@@ -312,8 +350,8 @@ if ($cgiparams{"ACTION"} eq $Lang::tr{"save"}) {
 print <<END
 <form method=3D'post' enctype=3D'multipart/form-data'>
 	<table>
-		<tr>
-		<td class=3D"h narrow topleft" /td>
+	<tr>
+		<td class=3D"h narrow topleft"></td>
 END
 ;
=20
@@ -332,7 +370,7 @@ foreach (@zones) {
 		my $red_restricted =3D ($uc eq "RED" && ! ($red_type eq "STATIC" || $red_t=
ype eq "DHCP"));
=20
 		if ($red_restricted) {
-			print "<td class=3D'h textcenter $_'>$uc ($red_type)</td>";
+			print "\t\t<td class=3D'h textcenter $_'>$uc ($red_type)</td>\n";
=20
 			next; # We're done here
 		}
@@ -350,7 +388,7 @@ foreach (@zones) {
 	}
=20
 	print <<END
-		<td class=3D'h textcenter $_'>$uc</br>
+		<td class=3D'h textcenter $_'>$uc<br>
 			<select name=3D"MODE $uc">
 				<option value=3D"DEFAULT" $mode_selected{"DEFAULT"}>$Lang::tr{"zoneconf =
nicmode default"}</option>
 				<option value=3D"BRIDGE" $mode_selected{"BRIDGE"}>$Lang::tr{"zoneconf ni=
cmode bridge"}</option>
@@ -361,7 +399,7 @@ END
 ;
 }
=20
-print "</tr>";
+print "\t</tr>\n";
=20
 my $slightlygrey =3D "";
=20
@@ -370,12 +408,13 @@ foreach (@nics) {
 	my $nic =3D $_->[1];
 	my $wlan =3D $_->[2];
=20
-	print "<tr><td class=3D'h narrow textcenter'>$nic<br>$mac</td>";
+	print "\t<tr>\n\t\t<td class=3D'h narrow textcenter'>$nic<br>$mac</td>\n";
=20
 	# Iterate through all zones and check if the current NIC is assigned to it
 	foreach (@zones) {
 		my $uc =3D uc $_;
 		my $dev_name =3D $ethsettings{"${uc}_DEV"};
+		my $highlight =3D "";
=20
 		if ($dev_name eq "") { # Again, skip the zone if it is not activated
 			next;
@@ -391,9 +430,10 @@ foreach (@nics) {
=20
 				if ($mac eq $ethsettings{"${uc}_MACADDR"}) {
 					$checked =3D "checked";
+					$highlight =3D $_;
 				}
=20
-				print "<td class=3D'textcenter $slightlygrey'><input type=3D'radio' id=
=3D'PPPACCESS $mac' name=3D'PPPACCESS' value=3D'$mac' $checked></td>";
+				print "\t\t<td class=3D'textcenter $highlight $slightlygrey'><input type=
=3D'radio' id=3D'PPPACCESS $mac' name=3D'PPPACCESS' value=3D'$mac' data-zone=
=3D'RED' data-mac=3D'$mac' onchange=3D'highlightAccess(this)' $checked></td>\=
n";
 				next; # We're done here
 			}
 		}
@@ -430,21 +470,26 @@ foreach (@nics) {
=20
 		$access_selected{"NONE"} =3D ($access_selected{"NATIVE"} eq "") && ($acces=
s_selected{"VLAN"} eq "") ? "selected" : "";
 		my $vlan_disabled =3D ($wlan) ? "disabled" : "";
+	=09
+		# If the interface is assigned, hightlight table cell
+		if ($access_selected{"NONE"} eq "") {
+			$highlight =3D $_;
+		}
=20
 		print <<END
-			<td class=3D"textcenter $slightlygrey">
-				<select name=3D"ACCESS $uc $mac" onchange=3D"document.getElementById('TA=
G $uc $mac').disabled =3D (this.value =3D=3D=3D 'VLAN' ? false : true)">
-					<option value=3D"NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf a=
ccess none"} -</option>
-					<option value=3D"NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf=
 access native"}</option>
-					<option value=3D"VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::t=
r{"zoneconf access vlan"}</option>
-				</select>
-				<input type=3D"number" class=3D"vlanid" id=3D"TAG $uc $mac" name=3D"TAG =
$uc $mac" min=3D"1" max=3D"4095" value=3D"$zone_vlan_id" $field_disabled>
-			</td>
+		<td class=3D"textcenter $highlight $slightlygrey">
+			<select name=3D"ACCESS $uc $mac" data-zone=3D"$uc" data-mac=3D"$mac" onch=
ange=3D"highlightAccess(this)">
+				<option value=3D"NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf ac=
cess none"} -</option>
+				<option value=3D"NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneconf =
access native"}</option>
+				<option value=3D"VLAN" $access_selected{"VLAN"} $vlan_disabled>$Lang::tr=
{"zoneconf access vlan"}</option>
+			</select>
+			<input type=3D"number" class=3D"vlanid" id=3D"TAG $uc $mac" name=3D"TAG $=
uc $mac" min=3D"1" max=3D"4095" value=3D"$zone_vlan_id" $field_disabled>
+		</td>
 END
 ;
 	}
=20
-	print "</tr>";
+	print "\t</tr>\n";
=20
 	if ($slightlygrey) {
 		$slightlygrey =3D "";
--=20
2.27.0.windows.1



--===============8385439219850107010==--