[v2,4/6] 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(-)
@@ -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);
+ }
+}