diff --git a/html/index.html b/html/index.html index c5926dd..9466b34 100644 --- a/html/index.html +++ b/html/index.html @@ -1,16 +1,28 @@ + + + FreeSwitchOS Main Page -
- -
+ +
+
+ + + + + + +

Switch Configuration

#{html_index}
Setting
+
diff --git a/html/main.js b/html/main.js new file mode 100644 index 0000000..2740a07 --- /dev/null +++ b/html/main.js @@ -0,0 +1,44 @@ +function update() { + var xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4 && this.status == 200) { + const s = JSON.parse(xhttp.responseText); + console.log("Request returned", JSON.stringify(s)); + s.forEach(function (p, i) { + let pid = "port" + p.portNum; + console.log(p.txG, pid); + var psvg = document.getElementById(pid); + var bgs = psvg.contentDocument.getElementsByClassName("bg"); + console.log(JSON.stringify(bgs)); + var leds = psvg.contentDocument.getElementsByClassName("led"); + if (p.enabled == 0) { + 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; + if (p.link == 5) { + 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"; + } else { + 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); + xhttp.send(); +} + +window.addEventListener("load", function() { + update(); + const interval = setInterval(update, 5000); +}); diff --git a/html/port.svg b/html/port.svg index 93a181b..9a531df 100644 --- a/html/port.svg +++ b/html/port.svg @@ -4,7 +4,7 @@ - @@ -18,8 +18,8 @@ - - + + diff --git a/html/sfp.svg b/html/sfp.svg index b6711c2..59e3a5a 100644 --- a/html/sfp.svg +++ b/html/sfp.svg @@ -6,18 +6,18 @@ - - - + + - - + + diff --git a/html/style.css b/html/style.css new file mode 100644 index 0000000..28c3d9c --- /dev/null +++ b/html/style.css @@ -0,0 +1,31 @@ +body { + background-color: lightblue; +} + +h1 { + color: navy; + margin-left: 20px; +} +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 */ +} + +li a { + display: block; + color: #000; + padding: 8px 16px; + text-decoration: none; +} + +/* Change the link color on hover */ +li a:hover { + background-color: #555; + color: white; +}