Merge pull request #99 from TylerDurden-23/vlan-pvid-clean

Add ability to configure PVID on VLAN page.
This commit is contained in:
logicog
2026-01-28 06:18:37 +01:00
committed by GitHub
6 changed files with 42 additions and 12 deletions
+2 -2
View File
@@ -42,9 +42,9 @@ function createPortTable() {
for (let i = 1; i <= numPorts; i++) {
let td = tr.insertCell();
if (pIsSFP[i-1])
td.innerHTML = '<object type="image/svg+xml" data="sfp.svg", width="60"</object>'
td.innerHTML = '<object type="image/svg+xml" data="sfp.svg" width="60"></object>'
else
td.innerHTML = '<object type="image/svg+xml" data="port.svg", width="40"</object>'
td.innerHTML = '<object type="image/svg+xml" data="port.svg" width="40"></object>'
}
tr = tbl.insertRow();
for (let i = 1; i <= numPorts; i++) {
+1 -1
View File
@@ -65,7 +65,7 @@ button:hover { background-color: #226; color: white;}
/* outline: 2px solid #f00;*/
opacity: 1.0;
}
object {
object, img {
margin: 0.5em 0.5em;
}
.cbgroup {
+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>
<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>
<h2>Use as default VLAN for incoming traffic (PVID)</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>
<br/> <input style="width:40%;" class="action" id="vlan_sub" onclick="vlanSub();" type="button" value="Update / Create">
<script src="/vlan_sub.js"></script>
+19 -2
View File
@@ -6,6 +6,7 @@ function vlanForm() {
clearInterval(vlanInterval);
var t = document.getElementById('tPorts');
var u = document.getElementById('uPorts');
var p = document.getElementById('pPorts');
for (let i = 1; i <= numPorts; i++) {
const d = document.createElement("div");
d.classList.add("cbgroup");
@@ -29,11 +30,20 @@ function vlanForm() {
d2.children[0].children[0].id = "uport" + i;
d2.children[0].children[0].setAttribute('onclick', `setC("t", ${i}, false);`);
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);
}
}
function setC(t, p, c){
document.getElementById(t+'port'+p).checked=c;
// When a tagged port is checked, automatically select the PVID port as well
const tportElem = document.getElementById('tport'+p);
if (tportElem && tportElem.checked) {
document.getElementById('pport'+p).checked=true;
}
}
function utClicked(t){
@@ -42,6 +52,12 @@ function utClicked(t){
}
}
function pvClicked(p){
for (let i = 1; i <= numPorts; i++) {
setC('p', i, p);
}
}
window.addEventListener("load", function() {
vlanInterval = setInterval(vlanForm, 100);
});
@@ -55,8 +71,9 @@ function fetchVLAN() {
m = parseInt(s.members, 16);
document.getElementById('vname').value = s.name;
for (let i = 1; i <= numPorts; i++) {
setC('t', i, (m>>(10+i-1))&1);
setC('u', i, (m>>(i-1))&1);
setC('t', i, (m>>(10+i-1))&1);
setC('u', i, (m>>(i-1))&1);
setC('p', i, (m>>(20+i-1))&1);
}
}
};
+13 -5
View File
@@ -1,4 +1,5 @@
async function vlanSub() {
var commands = [];
var cmd = "vlan ";
var v=document.getElementById('vid').value
if (!v) {
@@ -14,12 +15,19 @@ async function vlanSub() {
else if (document.getElementById('uport' + i).checked)
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 {
const response = await fetch('/cmd', {
method: 'POST',
body: cmd
});
console.log('Completed!', response);
for (let c of commands) {
const response = await fetch('/cmd', {
method: 'POST',
body: c
});
console.log('Completed!', response);
}
} catch(err) {
console.error(`Error: ${err}`);
}
+5 -2
View File
@@ -598,7 +598,9 @@ void httpd_appcall(void)
}
} else {
dbg_string("Have entry, authenticated: "); dbg_byte(authenticated); dbg_char('\n');
if (!authenticated && !(f_data[entry].start == FDATA_START_login_html
if (!authenticated && !(f_data[entry].start == FDATA_START_login_html
|| f_data[entry].start == FDATA_START_port_svg
|| f_data[entry].start == FDATA_START_sfp_svg
|| f_data[entry].start == FDATA_START_style_css)) {
send_to_login();
goto do_send;
@@ -610,7 +612,8 @@ void httpd_appcall(void)
slen = strtox(outbuf, "HTTP/1.1 200 OK\r\nContent-Type: ");
slen += strtox(outbuf + slen, mime_strings[f_data[entry].mime]);
slen += strtox(outbuf + slen, "; charset=UTF-8\r\nCache-Control: max-age=60, must-revalidate\r\n\r\n");
slen += strtox(outbuf + slen, "; charset=UTF-8\r\nCache-Control: max-age=60, must-revalidate\r\nAccess-Control-Allow-Origin: *\r\n\r\n");
len_left = f_data[entry].len;
if (len_left > (TCP_OUTBUF_SIZE - slen)) {
cont_len = len_left - (TCP_OUTBUF_SIZE - slen);