Skip to content

Commit 5622f1c

Browse files
logicoglogicog
committed
Add Mirroring web-pages
1 parent aa99921 commit 5622f1c

File tree

4 files changed

+133
-4
lines changed

4 files changed

+133
-4
lines changed

‎html/mirror.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<script src="/ports.js"></script>
4+
<script src="/main.js"></script>
5+
<link rel="stylesheet" href="style.css">
6+
<title>Mirror Configuration</title>
7+
</head>
8+
<body>
9+
<nav id="sidebar"></nav>
10+
<div style="margin-left:16%;padding:1px 16px;height:1000px;">
11+
<div id="ports"></div>
12+
<h1>Mirror Configuration</h1>
13+
<label class="tswitch">Enabled: <input id="me" type="checkbox"><span class="slider"></span></label><br/>
14+
<label for="mp">Mirroring Port:</label> <input type="number" id="mp" name="mp" min="1" max="9"/>
15+
<h2>Mirrored Ports (TX)</h2>
16+
<div id="mPortsTX"></div>
17+
<br />
18+
<h2>Mirrored Ports (RX)</h2>
19+
<div id="mPortsRX"></div>
20+
<br/> <input style="width:15%;" class="action" id="mirror_sub" onclick="mirrorSub();" type="button" value="Update / Create">
21+
<input style="width:15%;" class="action" id="mirror_del" onclick="mirrorDel();" type="button" value="Disable Mirroring">
22+
<script src="/mirror.js"></script>
23+
<script src="/mirror_sub.js"></script>
24+
</div>
25+
<script src="/navigation.js"></script>
26+
</body>
27+
</html>

‎html/mirror.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
var mirrorInterval = Number();
2+
const mirrors = ["mPortsTX", "mPortsRX"];
3+
4+
function mirrorForm() {
5+
if (!numPorts)
6+
return;
7+
clearInterval(mirrorInterval);
8+
for (let j=0; j < mirrors.length; j++) {
9+
console.log("Adding Mirror " + j)
10+
var m = document.getElementById(mirrors[j]);
11+
for (let i = 1; i <= numPorts; i++) {
12+
const d = document.createElement("div");
13+
d.classList.add("cbgroup");
14+
const l = document.createElement("label");
15+
l.innerHTML = "" + i;
16+
l.classList.add("cbgroup");
17+
const inp = document.createElement("input");
18+
inp.type = "checkbox"; inp.setAttribute("class","psel");
19+
inp.id = mirrors[j] + i;
20+
const o = document.createElement("img");
21+
if (pIsSFP[i - 1]) {
22+
o.src = "sfp.svg"; o.width ="60"; o.height ="60";
23+
} else {
24+
o.src = "port.svg"; o.width = "40"; o.height = "40";
25+
}
26+
l.appendChild(inp); l.appendChild(o);
27+
d.appendChild(l)
28+
m.appendChild(d);
29+
}
30+
}
31+
fetchMirror();
32+
}
33+
34+
function setM(p, c){
35+
document.getElementById(p).checked=c;
36+
}
37+
window.addEventListener("load", function() {
38+
mirrorInterval = setInterval(mirrorForm, 200);
39+
});
40+
41+
function fetchMirror() {
42+
var xhttp = new XMLHttpRequest();
43+
xhttp.onreadystatechange = function() {
44+
if (this.readyState == 4 && this.status == 200) {
45+
const s = JSON.parse(xhttp.responseText);
46+
console.log("MIRROR: ", JSON.stringify(s));
47+
document.getElementById('me').checked = s.enabled;
48+
document.getElementById('mp').value = s.mPort;
49+
let m_tx = parseInt(s.mirror_tx, 2);
50+
let m_rx = parseInt(s.mirror_rx, 2);
51+
for (let i = 1; i <= numPorts; i++) {
52+
setM("mPortsTX"+i, m_tx&1); setM("mPortsRX"+i, m_rx&1);
53+
m_tx = m_tx >> 1; m_rx = m_tx >> 1;
54+
}
55+
}
56+
};
57+
xhttp.open("GET", `/mirror.json`, true);
58+
xhttp.send();
59+
}

‎html/mirror_sub.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
async function mirrorSub() {
2+
var cmd = "mirror ";
3+
var mp=document.getElementById('mp').value
4+
if (!mp) {
5+
alert("Set Mirroring Port first");
6+
return;
7+
}
8+
document.getElementById(mirrors[0]+mp).checked=false;document.getElementById(mirrors[1]+mp).checked=false;
9+
cmd = cmd + mp;
10+
for (let i = 1; i <= numPorts; i++) {
11+
if (document.getElementById(mirrors[0] + i).checked && document.getElementById(mirrors[1] + i).checked)
12+
cmd = cmd + ` ${i}`;
13+
else if (document.getElementById(mirrors[0] + i).checked)
14+
cmd = cmd + ` ${i}t`;
15+
else if (document.getElementById(mirrors[1] + i).checked)
16+
cmd = cmd + ` ${i}r`;
17+
}
18+
if (cmd.length < 10) {
19+
alert("Select Mirrored Ports");
20+
return;
21+
}
22+
try {
23+
const response = await fetch('/cmd', {
24+
method: 'POST',
25+
body: cmd
26+
});
27+
console.log('Completed!', response);
28+
} catch(err) {
29+
console.error(`Error: ${err}`);
30+
}
31+
}
32+
async function mirrorDel() {
33+
var cmd = "mirror off";
34+
try {
35+
const response = await fetch('/cmd', {
36+
method: 'POST',
37+
body: cmd
38+
});
39+
location.reload();
40+
} catch(err) {
41+
console.error(`Error: ${err}`);
42+
}
43+
}

‎html/style.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,20 +42,19 @@ input[type=submit] { padding: 8px 16px;background-color:#aaf;color:#000; margin-
4242
input[type=submit]:hover { background-color: #226; color: white;}
4343
button {padding: 8px; background-color:#99f; color:#000;}
4444
button:hover { background-color: #226; color: white;}
45-
46-
[type=checkbox] {
45+
.psel {
4746
position: absolute;
4847
opacity: 0;
4948
width: 0;
5049
height: 0;
5150
margin-top: 1em;
5251
}
53-
[type=checkbox] + img {
52+
.psel + img {
5453
cursor: pointer;
5554
opacity: 0.4;
5655
padding: 8px;
5756
}
58-
[type=checkbox]:checked + img {
57+
.psel:checked + img {
5958
/* outline: 2px solid #f00;*/
6059
opacity: 1.0;
6160
}
@@ -74,3 +73,4 @@ object {
7473
.isSFP{ opacity: .4; background-color: #660;}
7574
.isNOK{ color: #900;}
7675
.isOK{ color: #090;}
76+
.action{padding: 8px 16px;margin-top: 2em;margin-right: 3em; background-color: #aaf;color: #000;}

0 commit comments

Comments
 (0)