From mboxrd@z Thu Jan  1 00:00:00 1970
From: Daniel =?utf-8?q?Weism=C3=BCller?= <daniel.weismueller@ipfire.org>
To: development@lists.ipfire.org
Subject: Re: [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: Thu, 12 Nov 2020 13:40:07 +0100
Message-ID: <1556f4a1-d135-2ce1-4f77-0472275df61f@ipfire.org>
In-Reply-To: <06299a2d-c302-4712-8a2a-6842ccb3b24b@Leo-Laptop.local>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============8961953909630209163=="
List-Id: <development.lists.ipfire.org>

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

Hello
Regardless of the advice and improvement requests of others, I have=20
applied the patch to my IPFire.
So far everything works as expected and I could not find any errors or=20
misbehaviour.

Greetings
Daniel

Am 10.11.2020 um 13:37 schrieb Leo-Andres Hofmann:
> Discussion: https://lists.ipfire.org/pipermail/development/2020-October/008=
567.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 o=
f selection element
> +	function highlightAccess(selectObj) {
> +		if(!(selectObj && ('zone' in selectObj.dataset) && ('mac' in selectObj.d=
ataset))) {
> +			return; //required parameters are missing
> +		}
> +
> +		var zoneColor =3D selectObj.dataset.zone.trim().toLowerCase(); //zone co=
lor (red/green/blue/orange) CSS class
> +
> +		function colorParentCell(obj, color, enabled =3D true) { //find nearest =
parent 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 b=
utton 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 =
found element is a button
> +					colorParentCell(button, zoneColor, false); //remove css
> +				}
> +			});
> +		} else { //this is a dropdown menu: enable/disable additional VLAN tag i=
nput box
> +			let tagInput =3D document.getElementById('TAG ' + selectObj.dataset.zon=
e + ' ' + selectObj.dataset.mac); //tag input element selector
> +			if(tagInput) {
> +				tagInput.disabled =3D (selectObj.value !=3D=3D 'VLAN'); //enable tag i=
nput 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" || $re=
d_type 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{"zoneco=
nf nicmode default"}</option>
>   				<option value=3D"BRIDGE" $mode_selected{"BRIDGE"}>$Lang::tr{"zoneconf=
 nicmode 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 ty=
pe=3D'radio' id=3D'PPPACCESS $mac' name=3D'PPPACCESS' value=3D'$mac' data-zon=
e=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 "") && ($ac=
cess_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('=
TAG $uc $mac').disabled =3D (this.value =3D=3D=3D 'VLAN' ? false : true)">
> -					<option value=3D"NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf=
 access none"} -</option>
> -					<option value=3D"NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zoneco=
nf 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"TA=
G $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" on=
change=3D"highlightAccess(this)">
> +				<option value=3D"NONE" $access_selected{"NONE"}>- $Lang::tr{"zoneconf =
access none"} -</option>
> +				<option value=3D"NATIVE" $access_selected{"NATIVE"}>$Lang::tr{"zonecon=
f 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 "";

--===============8961953909630209163==--