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

[Michael Tremer <michael.tremer@ipfire.org>]

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

Hi,

This patchset looks good to me, but I would like to hear back from Daniel for some test results :)

Breaking people’s networks would be really bad. So let’s give this a good test.

-Michael

> On 22 Dec 2020, at 21:15, Leo Hofmann <hofmann(a)leo-andres.de> wrote:
> 
> 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);
>> +	}
>> +}