Add VLAN configuration page

2026-08-30 14:52:51 +08:00 · 2025-08-19 09:28:00 +02:00
parent 41b181d9fb
commit 7727c1e561
2 changed files with 111 additions and 0 deletions
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+  <script src="/ports.js"></script>
+  <script src="/main.js"></script>
+  <head>
+    <link rel="stylesheet" href="style.css">
+    <title>FreeSwitchOS VLAN Configuration</title>
+  </head>
+  <body>
+     <ul> <li><a href="index.html">Overview</a></li> <li><a href="stat.html">Port Statisitcs</a></li>
+     <li><a href="vlan.html">VLAN</a></li> <li><a href="mirror.html">Mirroring</a></li>
+     <li><a href="trunk.html">Port Aggregation</a></li></ul>
+    <div style="margin-left:16%;padding:1px 16px;height:1000px;">
+    <div id="ports"></div>
+    <h1>VLAN Configuration</h1>
+    <form id="vform" action="/vlan.html">
+      <div>
+        <label for="vid">VLAN ID:</label>
+        <input type="number" min="1" max="2047" id="vid" name="vid">
+        <button type="button" style="margin: 0 0 0 24px" onclick="fetchVLAN();">Get Configuration</button>
+      </div>
+      <br/><br/>
+      <label for="vname">VLAN Name:</label>
+      <input type="text" id="vname" name="vname"><br><br>
+      <br/>
+      <h2>Tagged Ports</h2>
+      <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>
+      <script src="/vlan.js"></script>
+      <br/> <input style="width:60%;" type="submit" value="Update / Create">
+    </form>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,76 @@
+var vlanInterval = Number();
+
+function vlanForm() {
+  if (!numPorts)
+    return;
+  clearInterval(vlanInterval);
+  var t = document.getElementById('tPorts');
+  var u = document.getElementById('uPorts');
+  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.id = "tport" + i;
+    inp.setAttribute('onclick', `pClicked(true, ${i});`);
+    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', `pClicked(false, ${i});`);
+    u.appendChild(d2);
+  }
+}
+
+function pClicked(t, n){
+  if (t)
+    document.getElementById('uport' + n).checked=false;
+  else
+    document.getElementById('tport' + n).checked=false;
+}
+
+function utClicked(t){
+  console.log("CLICKED 1");
+  for (let i = 1; i <= numPorts; i++) {
+    document.getElementById('tport' + i).checked=t;
+    document.getElementById('uport' + i).checked=!t;
+  }
+}
+
+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);
+      console.log("Members: ", m.toString(16));
+      for (let i = 1; i <= numPorts; i++) {
+        document.getElementById('tport' + i).checked=(m>>(16+i-1))&1;
+        document.getElementById('uport' + i).checked=(m>>(i-1))&1;
+      }
+    }
+  };
+  var v=document.getElementById('vid').value
+  if (!v) {
+    alert("Please enter a VLAN ID first");
+    return;
+  }
+  xhttp.open("GET", `/vlan.json?vid=${v}`, true);
+  xhttp.send(); 
+}