Add support for configuring PVID on VLAN page.

This commit is contained in:
chriz
2026-01-25 22:04:05 +01:00
parent 17b428a603
commit c36136047c
3 changed files with 29 additions and 7 deletions
+2
View File
@@ -23,6 +23,8 @@
<div id="tPorts"><button type="button" style="transform: translateY(-100%);margin: 0 50px 0 0" onclick="utClicked(true);">Select all</button></div> <div id="tPorts"><button type="button" style="transform: translateY(-100%);margin: 0 50px 0 0" onclick="utClicked(true);">Select all</button></div>
<h2>Untagged Ports</h2> <h2>Untagged Ports</h2>
<div id="uPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="utClicked(false);">Select all</button> </div> <div id="uPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="utClicked(false);">Select all</button> </div>
<h2>PVID (default VLAN incoming traffic)</h2>
<div id="pPorts"><button type="button" style="transform: translateY(-100%); margin: 0 50px 0 0" onclick="pvClicked(true);">Select all</button> </div>
<script src="/vlan.js"></script> <script src="/vlan.js"></script>
<br/> <input style="width:40%;" class="action" id="vlan_sub" onclick="vlanSub();" type="button" value="Update / Create"> <br/> <input style="width:40%;" class="action" id="vlan_sub" onclick="vlanSub();" type="button" value="Update / Create">
<script src="/vlan_sub.js"></script> <script src="/vlan_sub.js"></script>
+12
View File
@@ -6,6 +6,7 @@ function vlanForm() {
clearInterval(vlanInterval); clearInterval(vlanInterval);
var t = document.getElementById('tPorts'); var t = document.getElementById('tPorts');
var u = document.getElementById('uPorts'); var u = document.getElementById('uPorts');
var p = document.getElementById('pPorts');
for (let i = 1; i <= numPorts; i++) { for (let i = 1; i <= numPorts; i++) {
const d = document.createElement("div"); const d = document.createElement("div");
d.classList.add("cbgroup"); d.classList.add("cbgroup");
@@ -29,6 +30,10 @@ function vlanForm() {
d2.children[0].children[0].id = "uport" + i; d2.children[0].children[0].id = "uport" + i;
d2.children[0].children[0].setAttribute('onclick', `setC("t", ${i}, false);`); d2.children[0].children[0].setAttribute('onclick', `setC("t", ${i}, false);`);
u.appendChild(d2); u.appendChild(d2);
var d3=d.cloneNode(true);
d3.children[0].children[0].id = "pport" + i;
d3.children[0].children[0].removeAttribute('onclick');
p.appendChild(d3);
} }
} }
@@ -42,6 +47,12 @@ function utClicked(t){
} }
} }
function pvClicked(p){
for (let i = 1; i <= numPorts; i++) {
setC('p', i, p);
}
}
window.addEventListener("load", function() { window.addEventListener("load", function() {
vlanInterval = setInterval(vlanForm, 100); vlanInterval = setInterval(vlanForm, 100);
}); });
@@ -57,6 +68,7 @@ function fetchVLAN() {
for (let i = 1; i <= numPorts; i++) { for (let i = 1; i <= numPorts; i++) {
setC('t', i, (m>>(10+i-1))&1); setC('t', i, (m>>(10+i-1))&1);
setC('u', i, (m>>(i-1))&1); setC('u', i, (m>>(i-1))&1);
setC('p', i, (m>>(20+i-1))&1);
} }
} }
}; };
+9 -1
View File
@@ -1,4 +1,5 @@
async function vlanSub() { async function vlanSub() {
var commands = [];
var cmd = "vlan "; var cmd = "vlan ";
var v=document.getElementById('vid').value var v=document.getElementById('vid').value
if (!v) { if (!v) {
@@ -14,12 +15,19 @@ async function vlanSub() {
else if (document.getElementById('uport' + i).checked) else if (document.getElementById('uport' + i).checked)
cmd = cmd + ` ${i}`; cmd = cmd + ` ${i}`;
} }
commands.push(cmd);
for (let i = 1; i <= numPorts; i++) {
if (document.getElementById('pport' + i).checked)
commands.push(`pvid ${i} ${v}`);
}
try { try {
for (let c of commands) {
const response = await fetch('/cmd', { const response = await fetch('/cmd', {
method: 'POST', method: 'POST',
body: cmd body: c
}); });
console.log('Completed!', response); console.log('Completed!', response);
}
} catch(err) { } catch(err) {
console.error(`Error: ${err}`); console.error(`Error: ${err}`);
} }