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

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

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

Hi Michael,

thank you very much for reviewing my patches! I agree, we should test this thoroughly.
I would rather submit new patches than break someones network :)

Regarding your other mail, I looked into moving the "is_zone_active"... functions to the general-functions.pl file.
I still need to make sure that these functions are universally applicable, then I will submit them.

Regards,
Leo

Am 27.12.2020 um 12:05 schrieb Michael Tremer:
> 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);
>>> +	}
>>> +}