Add support for configuring PVID on VLAN page.

html/vlan.html

@@ -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>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>
       <br/> <input style="width:40%;" class="action" id="vlan_sub" onclick="vlanSub();" type="button" value="Update / Create">
       <script src="/vlan_sub.js"></script>

html/vlan.js

@@ -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,6 +30,10 @@ 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);
   }
 }
 
@@ -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() {
   vlanInterval = setInterval(vlanForm, 100);
 });
@@ -55,8 +66,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);
       }
     }
   };

html/vlan_sub.js

@@ -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}`);
   }