Re: [PATCH 4/4] zoneconf.cgi: Add Javascript for new GUI elements

[Leo Hofmann <hofmann@leo-andres.de>]

[-- Attachment #1: Type: text/plain, Size: 3458 bytes --]

Hi Daniel,

just in time for the holidays, I finished my work on the zoneconf.cgi STP GUI.
I'm not sure how to test STP in my development setup, but I think I got it right. I would appreciate if you could test these patches, thank you :)

Best regards & happy holidays
Leo

Am 22.12.2020 um 21:06 schrieb Leo-Andres Hofmann:
> Signed-off-by: Leo-Andres Hofmann <hofmann(a)leo-andres.de>
> ---
>   html/cgi-bin/zoneconf.cgi     |  6 +++---
>   html/html/include/zoneconf.js | 27 +++++++++++++++++++++++++++
>   2 files changed, 30 insertions(+), 3 deletions(-)
>
> diff --git a/html/cgi-bin/zoneconf.cgi b/html/cgi-bin/zoneconf.cgi
> index 1d30450ed..eb6cd0e66 100644
> --- a/html/cgi-bin/zoneconf.cgi
> +++ b/html/cgi-bin/zoneconf.cgi
> @@ -410,7 +410,7 @@ foreach (@zones) {
>   
>   	print <<END
>   		<td class='heading bold $_'>$uc<br>
> -			<select name="MODE $uc">
> +			<select name="MODE $uc" data-zone="$uc" onchange="changeZoneMode(this)">
>   				<option value="DEFAULT" $mode_selected{"DEFAULT"}>$Lang::tr{"zoneconf nicmode default"}</option>
>   				<option value="BRIDGE" $mode_selected{"BRIDGE"}>$Lang::tr{"zoneconf nicmode bridge"}</option>
>   				<option value="MACVTAP" $mode_selected{"MACVTAP"}>$Lang::tr{"zoneconf nicmode macvtap"}</option>
> @@ -544,7 +544,7 @@ foreach (@zones) { # load settings and prepare form elements for each zone
>   	# enable checkbox HTML
>   	my $row_1 = <<END
>   		<td>
> -			<input type="checkbox" name="STP-$uc" $disabled $checked>
> +			<input type="checkbox" id="STP-$uc" name="STP-$uc" data-zone="$uc" onchange="changeEnableSTP(this)" $disabled $checked>
>   		</td>
>   END
>   ;
> @@ -553,7 +553,7 @@ END
>   	# priority input box HTML
>   	my $row_2 = <<END
>   		<td>
> -			<input type="number" class="stp-priority" name="STP-PRIORITY-$uc" min="1" max="65535" value="$stp_priority" $disabled>
> +			<input type="number" class="stp-priority" id="STP-PRIORITY-$uc" name="STP-PRIORITY-$uc" min="1" max="65535" value="$stp_priority" $disabled>
>   		</td>
>   END
>   ;
> diff --git a/html/html/include/zoneconf.js b/html/html/include/zoneconf.js
> index d76f0ab68..d27a79bc8 100644
> --- a/html/html/include/zoneconf.js
> +++ b/html/html/include/zoneconf.js
> @@ -54,3 +54,30 @@ function highlightAccess(selectObj) {
>   	//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);
> +	}
> +}