diff mbox series

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

Message ID 20201222200646.1609-4-hofmann@leo-andres.de
State Superseded
Headers
Series [1/4] zoneconf.cgi: Change NIC display order, improve code |

Commit Message

Leo-Andres Hofmann Dec. 22, 2020, 8:06 p.m. UTC 
  Signed-off-by: Leo-Andres Hofmann <hofmann@leo-andres.de>
---
 html/cgi-bin/zoneconf.cgi     |  6 +++---
 html/html/include/zoneconf.js | 27 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 3 deletions(-)

Comments

Leo-Andres Hofmann Dec. 22, 2020, 8:15 p.m. UTC | #1 
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@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);
> +	}
> +}
Michael Tremer Dec. 27, 2020, 11:05 a.m. UTC | #2 
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@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@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);
>> +	}
>> +}
Leo-Andres Hofmann Jan. 4, 2021, 12:19 p.m. UTC | #3 
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@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@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);
>>> +	}
>>> +}
diff mbox series

Patch

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);
+	}
+}