Merge pull request #99 from TylerDurden-23/vlan-pvid-clean

Add ability to configure PVID on VLAN page.

html/ports.js

@@ -42,9 +42,9 @@ function createPortTable() {
       for (let i = 1; i <= numPorts; i++) {
         let td = tr.insertCell();
         if (pIsSFP[i-1])
-          td.innerHTML = '<object type="image/svg+xml" data="sfp.svg", width="60"</object>'
+          td.innerHTML = '<object type="image/svg+xml" data="sfp.svg" width="60"></object>'
         else
-          td.innerHTML = '<object type="image/svg+xml" data="port.svg", width="40"</object>'
+          td.innerHTML = '<object type="image/svg+xml" data="port.svg" width="40"></object>'
       }
       tr = tbl.insertRow();
       for (let i = 1; i <= numPorts; i++) {

html/style.css

@@ -65,7 +65,7 @@ button:hover { background-color: #226; color: white;}
 /*  outline: 2px solid #f00;*/
   opacity: 1.0;
 }
-object {
+object, img {
  margin: 0.5em 0.5em;
 }
 .cbgroup {

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>Use as default VLAN for incoming traffic (PVID)</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,11 +30,20 @@ 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);
   }
 }
 
 function setC(t, p, c){
   document.getElementById(t+'port'+p).checked=c;
+  // When a tagged port is checked, automatically select the PVID port as well
+  const tportElem = document.getElementById('tport'+p);
+  if (tportElem && tportElem.checked) {
+    document.getElementById('pport'+p).checked=true;
+  }
 }
 
 function utClicked(t){
@@ -42,6 +52,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 +71,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('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);
       }
     }
   };

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', {
+    for (let c of commands) {
-      method: 'POST',
+      const response = await fetch('/cmd', {
-      body: cmd
+        method: 'POST',
-    });
+        body: c
-    console.log('Completed!', response);
+      });
+      console.log('Completed!', response);
+    }
   } catch(err) {
     console.error(`Error: ${err}`);
   }

httpd/httpd.c

@@ -599,6 +599,8 @@ void httpd_appcall(void)
 		} else {
 			dbg_string("Have entry, authenticated: "); dbg_byte(authenticated); dbg_char('\n');
 			if (!authenticated && !(f_data[entry].start == FDATA_START_login_html 
+						|| f_data[entry].start == FDATA_START_port_svg 
+						|| f_data[entry].start == FDATA_START_sfp_svg
 						|| f_data[entry].start == FDATA_START_style_css)) {
 				send_to_login();
 				goto do_send;
@@ -610,7 +612,8 @@ void httpd_appcall(void)
 
 			slen = strtox(outbuf, "HTTP/1.1 200 OK\r\nContent-Type: ");
 			slen += strtox(outbuf + slen, mime_strings[f_data[entry].mime]);
-			slen += strtox(outbuf + slen, "; charset=UTF-8\r\nCache-Control: max-age=60, must-revalidate\r\n\r\n");
+			slen += strtox(outbuf + slen, "; charset=UTF-8\r\nCache-Control: max-age=60, must-revalidate\r\nAccess-Control-Allow-Origin: *\r\n\r\n");
+
 			len_left = f_data[entry].len;
 			if (len_left > (TCP_OUTBUF_SIZE - slen)) {
 				cont_len = len_left - (TCP_OUTBUF_SIZE - slen);