diff --git a/html/index.html b/html/index.html
index 9466b34..e6f90d7 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,23 +1,17 @@
-
+
FreeSwitchOS Main Page
-
-
-
-
-
-
-
-
-
-
+
+
+
Switch Configuration
| Setting | |
diff --git a/html/main.js b/html/main.js
index 2740a07..0761b58 100644
--- a/html/main.js
+++ b/html/main.js
@@ -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() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
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));
- s.forEach(function (p, i) {
+ for (let i = 0; i < s.length; i++) {
+ p = s[i];
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);
+ if (psvg == null || !psvg.contentDocument)
+ continue;
var bgs = psvg.contentDocument.getElementsByClassName("bg");
- console.log(JSON.stringify(bgs));
var leds = psvg.contentDocument.getElementsByClassName("led");
if (p.enabled == 0) {
+ pState[i] = -1;
bgs[0].style.fill = "red";
leds[0].style.fill = "black";
leds[1].style.fill = "black";
psvg.style.opacity = 0.4;
} else {
psvg.style.opacity = 1.0;
+ pState[i] = p.link;
if (p.link == 5) {
- leds[0].style.fill = "green";
- leds[1].style.fill = "orange";
+ leds[0].style.fill = "green"; leds[1].style.fill = "orange";
} else if (p.link == 2) {
- leds[0].style.fill = "green";
- leds[1].style.fill = "green";
+ leds[0].style.fill = "green"; leds[1].style.fill = "green";
} else {
- leds[0].style.fill = "black";
- leds[1].style.fill = "black";
+ leds[0].style.fill = "black"; leds[1].style.fill = "black";
psvg.style.opacity = 0.4
}
console.log(JSON.stringify(leds));
}
- });
+ }
}
};
xhttp.open("GET", "/status.json", true);
@@ -40,5 +56,5 @@ function update() {
window.addEventListener("load", function() {
update();
- const interval = setInterval(update, 5000);
+ const interval = setInterval(update, 1000);
});
diff --git a/html/style.css b/html/style.css
index 28c3d9c..40a0203 100644
--- a/html/style.css
+++ b/html/style.css
@@ -1,23 +1,18 @@
-body {
- background-color: lightblue;
-}
-
-h1 {
- color: navy;
- margin-left: 20px;
+h1, h2 {
+ color: #226;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 12%;
- background-color: #f1f1f1;
- height: 100%; /* Full height */
- position: fixed; /* Make it stick, even on scroll */
- overflow: auto; /* Enable scrolling if the sidenav has too much content */
+ height: 100%;
+ position: fixed;
+ overflow: auto;
}
li a {
+ background-color: #aaf;
display: block;
color: #000;
padding: 8px 16px;
@@ -26,6 +21,51 @@ li a {
/* Change the link color on hover */
li a:hover {
- background-color: #555;
+ background-color: #226;
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;
+}