diff --git a/html/mirror.html b/html/mirror.html new file mode 100644 index 0000000..1fba4e9 --- /dev/null +++ b/html/mirror.html @@ -0,0 +1,27 @@ + + + + + + Mirror Configuration + + + +
+
+

Mirror Configuration

+
+ +

Mirrored Ports (TX)

+
+
+

Mirrored Ports (RX)

+
+
+ + + +
+ + + diff --git a/html/mirror.js b/html/mirror.js new file mode 100644 index 0000000..b536405 --- /dev/null +++ b/html/mirror.js @@ -0,0 +1,59 @@ +var mirrorInterval = Number(); +const mirrors = ["mPortsTX", "mPortsRX"]; + +function mirrorForm() { + if (!numPorts) + return; + clearInterval(mirrorInterval); + for (let j=0; j < mirrors.length; j++) { + console.log("Adding Mirror " + j) + var m = document.getElementById(mirrors[j]); + 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 = mirrors[j] + 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) + m.appendChild(d); + } + } + fetchMirror(); +} + +function setM(p, c){ + document.getElementById(p).checked=c; +} +window.addEventListener("load", function() { + mirrorInterval = setInterval(mirrorForm, 200); +}); + +function fetchMirror() { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + const s = JSON.parse(xhttp.responseText); + console.log("MIRROR: ", JSON.stringify(s)); + document.getElementById('me').checked = s.enabled; + document.getElementById('mp').value = s.mPort; + let m_tx = parseInt(s.mirror_tx, 2); + let m_rx = parseInt(s.mirror_rx, 2); + for (let i = 1; i <= numPorts; i++) { + setM("mPortsTX"+i, m_tx&1); setM("mPortsRX"+i, m_rx&1); + m_tx = m_tx >> 1; m_rx = m_tx >> 1; + } + } + }; + xhttp.open("GET", `/mirror.json`, true); + xhttp.send(); +} diff --git a/html/mirror_sub.js b/html/mirror_sub.js new file mode 100644 index 0000000..7d8c0bb --- /dev/null +++ b/html/mirror_sub.js @@ -0,0 +1,43 @@ +async function mirrorSub() { + var cmd = "mirror "; + var mp=document.getElementById('mp').value + if (!mp) { + alert("Set Mirroring Port first"); + return; + } + document.getElementById(mirrors[0]+mp).checked=false;document.getElementById(mirrors[1]+mp).checked=false; + cmd = cmd + mp; + for (let i = 1; i <= numPorts; i++) { + if (document.getElementById(mirrors[0] + i).checked && document.getElementById(mirrors[1] + i).checked) + cmd = cmd + ` ${i}`; + else if (document.getElementById(mirrors[0] + i).checked) + cmd = cmd + ` ${i}t`; + else if (document.getElementById(mirrors[1] + i).checked) + cmd = cmd + ` ${i}r`; + } + if (cmd.length < 10) { + alert("Select Mirrored Ports"); + return; + } + try { + const response = await fetch('/cmd', { + method: 'POST', + body: cmd + }); + console.log('Completed!', response); + } catch(err) { + console.error(`Error: ${err}`); + } +} +async function mirrorDel() { + var cmd = "mirror off"; +try { + const response = await fetch('/cmd', { + method: 'POST', + body: cmd + }); + location.reload(); + } catch(err) { + console.error(`Error: ${err}`); + } +} diff --git a/html/style.css b/html/style.css index 0805ce9..b1cdecc 100644 --- a/html/style.css +++ b/html/style.css @@ -42,20 +42,19 @@ input[type=submit] { padding: 8px 16px;background-color:#aaf;color:#000; margin- input[type=submit]:hover { background-color: #226; color: white;} button {padding: 8px; background-color:#99f; color:#000;} button:hover { background-color: #226; color: white;} - -[type=checkbox] { +.psel { position: absolute; opacity: 0; width: 0; height: 0; margin-top: 1em; } -[type=checkbox] + img { +.psel + img { cursor: pointer; opacity: 0.4; padding: 8px; } -[type=checkbox]:checked + img { +.psel:checked + img { /* outline: 2px solid #f00;*/ opacity: 1.0; } @@ -74,3 +73,4 @@ object { .isSFP{ opacity: .4; background-color: #660;} .isNOK{ color: #900;} .isOK{ color: #090;} +.action{padding: 8px 16px;margin-top: 2em;margin-right: 3em; background-color: #aaf;color: #000;}