[4/4] zoneconf.cgi: Add Javascript for new GUI elements
Commit Message
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
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);
> + }
> +}
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);
>> + }
>> +}
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);
>>> + }
>>> +}
@@ -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
;
@@ -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);
+ }
+}