mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-08-30 14:52:51 +08:00
Mark H. Spatz
4cef63200f
I noticed that entering some vlan config, clicking "Update/Create", then clicking "Get Configuration" resulted in Tagged/Untagged/PVID displaying completely wrong data. It looks like the parisng in fetchVLAN() in vlan.js was just completely disconnected from the layout of the registers read by vlan_get() in rtl837x_port.c. Who knows how that happened. 1. Fix fetchVLAN() member/untag parsing: the old code read bits [9:0] as untagged and bits [10:19] as tagged, but the VLAN table register layout is members in [9:0] and untag in [19:10]. Now correctly derives tagged (member && !untag) and untagged (member && untag). 2. Add PVID to vlan.json response: PVID is stored per-port in separate PVID registers (RTL837x_PVID_BASE_REG), not in the VLAN table entry. The old code nonsensically tried to read it from bits [20:29] of the VLAN table. Add port_pvid_get() and build a pvid bitmask in send_vlan() so the JS can parse it correctly. 3. Remove auto-PVID logic from setC(): setC() is called by fetchVLAN() while it's loading existing config, and so this logic mangled the display of the existing config. Also, it doesn't make sense to auto-set the PVID for tagged members (PVID relates to untagged ingress.)
89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
var vlanInterval = Number();
|
|
|
|
function vlanForm() {
|
|
if (!numPorts)
|
|
return;
|
|
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");
|
|
const l = document.createElement("label");
|
|
l.innerHTML = "" + i;
|
|
l.classList.add("cbgroup");
|
|
const inp = document.createElement("input");
|
|
inp.type = "checkbox"; inp.setAttribute("class","psel");
|
|
inp.id = "tport" + i;
|
|
inp.setAttribute('onclick', `setC("u", ${i}, false);`);
|
|
const o = document.createElement("img");
|
|
if (pIsSFP[i - 1]) {
|
|
o.src = "sfp.svg"; o.width ="60"; o.height ="60";
|
|
} else {
|
|
o.src = "port.svg"; o.width = "40"; o.height = "40";
|
|
}
|
|
l.appendChild(inp); l.appendChild(o);
|
|
d.appendChild(l)
|
|
t.appendChild(d);
|
|
var d2=d.cloneNode(true);
|
|
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;
|
|
}
|
|
|
|
function utClicked(t){
|
|
for (let i = 1; i <= numPorts; i++) {
|
|
setC('t', i, t); setC('u', i, !t);
|
|
}
|
|
}
|
|
|
|
function pvClicked(p){
|
|
for (let i = 1; i <= numPorts; i++) {
|
|
setC('p', i, p);
|
|
}
|
|
}
|
|
|
|
window.addEventListener("load", function() {
|
|
vlanInterval = setInterval(vlanForm, 100);
|
|
});
|
|
|
|
function fetchVLAN() {
|
|
var xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4 && this.status == 200) {
|
|
const s = JSON.parse(xhttp.responseText);
|
|
console.log("VLAN: ", JSON.stringify(s));
|
|
m = parseInt(s.members, 16);
|
|
document.getElementById('vname').value = s.name;
|
|
var members = m & 0x3FF;
|
|
var untag = (m >> 10) & 0x3FF;
|
|
var pvid = parseInt(s.pvid, 16);
|
|
for (let i = 1; i <= numPorts; i++) {
|
|
var bit = i - 1;
|
|
var isMember = (members >> bit) & 1;
|
|
var isUntag = (untag >> bit) & 1;
|
|
setC('t', i, isMember && !isUntag);
|
|
setC('u', i, isMember && isUntag);
|
|
setC('p', i, (pvid >> bit) & 1);
|
|
}
|
|
}
|
|
};
|
|
var v=document.getElementById('vid').value
|
|
if (!v) {
|
|
alert("Set VLAN ID first");
|
|
return;
|
|
}
|
|
xhttp.open("GET", `/vlan.json?vid=${v}`, true);
|
|
xhttp.send();
|
|
}
|