Files
RTLPlayground/html/vlan_sub.js
Erdnusschokolade a369e46fe6 Add VLAN overview table to VLAN configuration page
Below the configuration form, a new table lists all configured VLANs
with their port memberships: Member, Tagged, Untagged, and PVID
columns. Port ranges are formatted compactly (e.g. "1-2,5").

Port-to-bit mapping uses the existing physToLogPort[] array populated
by /status.json, so the table is consistent with the icon view in
fetchVLAN() and works on any supported machine.

Each row has a delete button that sends "vlan N d" via /cmd, with
a confirmation dialog. VLAN 1 cannot be deleted (no button shown).

Table and dropdown both refresh automatically after Update/Create
and after delete via a new refreshVlanViews() helper.

The N+1 request pattern (1x /vlanlist + Nx /vlan.json) keeps the
backend simple and avoids buffer overflow risks for systems with
many VLANs. For typical configurations (<50 VLANs), page load
remains under one second.
2026-05-24 11:20:57 +02:00

37 lines
936 B
JavaScript

async function vlanSub() {
var commands = [];
var cmd = "vlan ";
var v=document.getElementById('vid').value
if (!v) {
alert("Set VLAN ID first");
return;
}
cmd = cmd + v;
if (document.getElementById('vname').value)
cmd = cmd + ' ' + document.getElementById('vname').value;
for (let i = 1; i <= numPorts; i++) {
if (document.getElementById('tport' + i).checked)
cmd = cmd + ` ${i}t`;
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 {
for (let c of commands) {
const response = await fetch('/cmd', {
method: 'POST',
body: c
});
console.log('Completed!', response);
}
refreshVlanViews();
} catch(err) {
console.error(`Error: ${err}`);
}
}