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

Dynamic generation of port overview.

Browse Source
This commit is contained in:
logicog
2025-08-19 09:26:17 +02:00
parent b1ac33b7fb
commit 4d45bee566
3 changed files with 85 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/index.html
+6 -12
View File
@@ -1,23 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<script src="/ports.js"></script>
<script src="/main.js"></script> <script src="/main.js"></script>
<head> <head>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>FreeSwitchOS Main Page</title> <title>FreeSwitchOS Main Page</title>
</head> </head>
<body> <body>
<ul> <li><a href="index.html">Overview</a></li> <li><a href="vlan.html">VLAN</a></li> <ul> <li><a href="index.html">Overview</a></li> <li><a href="stat.html">Port Statistics</a></li>
<li><a href="mirror.html">Mirroring</a></li> <li><a href="trunk.html">Port Aggregation</a></li></ul> <li><a href="vlan.html">VLAN</a></li> <li><a href="mirror.html">Mirroring</a></li>
<div style="margin-left:25%;padding:1px 16px;height:1000px;"> <li><a href="trunk.html">Port Aggregation</a></li></ul>
<div id="ports"> <div style="margin-left:16%;padding:1px 16px;height:1000px;">
<object type="image/svg+xml" data="port.svg" id="port1" width="40" height="40"></object> <div id="ports"></div>
<object type="image/svg+xml" data="port.svg" id="port2" width="40" height="40"></object>
<object type="image/svg+xml" data="port.svg" id="port3" width="40" height="40"></object>
<object type="image/svg+xml" data="port.svg" id="port4" width="40" height="40"></object>
<object type="image/svg+xml" data="sfp.svg" id="port5" width="60" height="60"></object>
<object type="image/svg+xml" data="sfp.svg" id="port6" width="60" height="60"></object>
</div>
<h1>Switch Configuration</h1> <h1>Switch Configuration</h1>
<table> <table>
<tr> <th>Setting</th> <th></th> </tr> <tr> <th>Setting</th> <th></th> </tr>
html/main.js
+27 -11
View File
@@ -1,37 +1,53 @@
var txG = new BigInt64Array(10);
var txB = new BigInt64Array(10);
var rxG = new BigInt64Array(10);
var rxB = new BigInt64Array(10);
const linkS = ["Disabled", "No Link", "100M", "1000M", "NO", "NO", "2.5G"];
var pState = new Int8Array(10);
var pIsSFP = new Int8Array(10);
var numPorts = 0;
function update() { function update() {
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200) {
const s = JSON.parse(xhttp.responseText); const s = JSON.parse(xhttp.responseText);
if (!numPorts) {
numPorts = s.length;
for (let i = 0; i < s.length; i++)
pIsSFP[i] = s[i].isSFP;
drawPorts();
}
console.log("Request returned", JSON.stringify(s)); console.log("Request returned", JSON.stringify(s));
s.forEach(function (p, i) { for (let i = 0; i < s.length; i++) {
p = s[i];
let pid = "port" + p.portNum; let pid = "port" + p.portNum;
console.log(p.txG, pid); txG[i] = BigInt(p.txG); txB[i] = BigInt(p.txB); rxG[i] = BigInt(p.rxG); rxB[i] = BigInt(p.rxB);
var psvg = document.getElementById(pid); var psvg = document.getElementById(pid);
if (psvg == null || !psvg.contentDocument)
continue;
var bgs = psvg.contentDocument.getElementsByClassName("bg"); var bgs = psvg.contentDocument.getElementsByClassName("bg");
console.log(JSON.stringify(bgs));
var leds = psvg.contentDocument.getElementsByClassName("led"); var leds = psvg.contentDocument.getElementsByClassName("led");
if (p.enabled == 0) { if (p.enabled == 0) {
pState[i] = -1;
bgs[0].style.fill = "red"; bgs[0].style.fill = "red";
leds[0].style.fill = "black"; leds[0].style.fill = "black";
leds[1].style.fill = "black"; leds[1].style.fill = "black";
psvg.style.opacity = 0.4; psvg.style.opacity = 0.4;
} else { } else {
psvg.style.opacity = 1.0; psvg.style.opacity = 1.0;
pState[i] = p.link;
if (p.link == 5) { if (p.link == 5) {
leds[0].style.fill = "green"; leds[0].style.fill = "green"; leds[1].style.fill = "orange";
leds[1].style.fill = "orange";
} else if (p.link == 2) { } else if (p.link == 2) {
leds[0].style.fill = "green"; leds[0].style.fill = "green"; leds[1].style.fill = "green";
leds[1].style.fill = "green";
} else { } else {
leds[0].style.fill = "black"; leds[0].style.fill = "black"; leds[1].style.fill = "black";
leds[1].style.fill = "black";
psvg.style.opacity = 0.4 psvg.style.opacity = 0.4
} }
console.log(JSON.stringify(leds)); console.log(JSON.stringify(leds));
} }
}); }
} }
}; };
xhttp.open("GET", "/status.json", true); xhttp.open("GET", "/status.json", true);
@@ -40,5 +56,5 @@ function update() {
window.addEventListener("load", function() { window.addEventListener("load", function() {
update(); update();
const interval = setInterval(update, 5000); const interval = setInterval(update, 1000);
}); });
html/style.css
+52 -12
View File
@@ -1,23 +1,18 @@
body { h1, h2 {
background-color: lightblue; color: #226;
}
h1 {
color: navy;
margin-left: 20px;
} }
ul { ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 12%; width: 12%;
background-color: #f1f1f1; height: 100%;
height: 100%; /* Full height */ position: fixed;
position: fixed; /* Make it stick, even on scroll */ overflow: auto;
overflow: auto; /* Enable scrolling if the sidenav has too much content */
} }
li a { li a {
background-color: #aaf;
display: block; display: block;
color: #000; color: #000;
padding: 8px 16px; padding: 8px 16px;
@@ -26,6 +21,51 @@ li a {
/* Change the link color on hover */ /* Change the link color on hover */
li a:hover { li a:hover {
background-color: #555; background-color: #226;
color: white; color: white;
} }
table, th, td {
border: 1px solid navy;
padding: 8px;
}
table {
border-collapse: collapse;
width: 60%;
}
td {
text-align: right;
}
input[type=submit] { padding: 8px 16px;background-color:#aaf;color:#000; margin-bottom: 2em;}
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] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
margin-top: 1em;
}
[type=checkbox] + img {
cursor: pointer;
opacity: 0.4;
padding: 8px;
}
[type=checkbox]:checked + img {
/* outline: 2px solid #f00;*/
opacity: 1.0;
}
object {
margin: 0.5em 0.5em;
}
.cbgroup {
display: inline-block;
text-align: center;
}
.cbgroup label {
display: block;
}