mirror of
https://github.com/logicog/RTLPlayground.git
synced 2026-08-30 14:52:51 +08:00
Add support for configuring PVID on VLAN page.
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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
@@ -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}`);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user