gitproxy/RTLPlayground
1
0
Fork 0
mirror of https://github.com/logicog/RTLPlayground.git synced 2026-08-30 14:52:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add Mirroring web-pages

Browse Source
This commit is contained in:
logicog
2025-10-29 15:39:47 +01:00
parent aa99921ea2
commit 5622f1c843
4 changed files with 133 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/mirror.html
+27
View File
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<script src="/ports.js"></script>
<script src="/main.js"></script>
<link rel="stylesheet" href="style.css">
<title>Mirror Configuration</title>
</head>
<body>
<nav id="sidebar"></nav>
<div style="margin-left:16%;padding:1px 16px;height:1000px;">
<div id="ports"></div>
<h1>Mirror Configuration</h1>
<label class="tswitch">Enabled: <input id="me" type="checkbox"><span class="slider"></span></label><br/>
<label for="mp">Mirroring Port:</label> <input type="number" id="mp" name="mp" min="1" max="9"/>
<h2>Mirrored Ports (TX)</h2>
<div id="mPortsTX"></div>
<br />
<h2>Mirrored Ports (RX)</h2>
<div id="mPortsRX"></div>
<br/> <input style="width:15%;" class="action" id="mirror_sub" onclick="mirrorSub();" type="button" value="Update / Create">
<input style="width:15%;" class="action" id="mirror_del" onclick="mirrorDel();" type="button" value="Disable Mirroring">
<script src="/mirror.js"></script>
<script src="/mirror_sub.js"></script>
</div>
<script src="/navigation.js"></script>
</body>
</html>
html/mirror.js
+59
View File
@@ -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();
}
html/mirror_sub.js
+43
View File
@@ -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}`);
}
}
html/style.css
+4 -4
View File
@@ -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;} input[type=submit]:hover { background-color: #226; color: white;}
button {padding: 8px; background-color:#99f; color:#000;} button {padding: 8px; background-color:#99f; color:#000;}
button:hover { background-color: #226; color: white;} button:hover { background-color: #226; color: white;}
.psel {
[type=checkbox] {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
width: 0; width: 0;
height: 0; height: 0;
margin-top: 1em; margin-top: 1em;
} }
[type=checkbox] + img { .psel + img {
cursor: pointer; cursor: pointer;
opacity: 0.4; opacity: 0.4;
padding: 8px; padding: 8px;
} }
[type=checkbox]:checked + img { .psel:checked + img {
/* outline: 2px solid #f00;*/ /* outline: 2px solid #f00;*/
opacity: 1.0; opacity: 1.0;
} }
@@ -74,3 +73,4 @@ object {
.isSFP{ opacity: .4; background-color: #660;} .isSFP{ opacity: .4; background-color: #660;}
.isNOK{ color: #900;} .isNOK{ color: #900;}
.isOK{ color: #090;} .isOK{ color: #090;}
.action{padding: 8px 16px;margin-top: 2em;margin-right: 3em; background-color: #aaf;color: #000;}