diff options
Diffstat (limited to 'public')
| -rw-r--r-- | public/assets/custom.css | 91 | ||||
| -rw-r--r-- | public/assets/servers.js | 96 |
2 files changed, 186 insertions, 1 deletions
diff --git a/public/assets/custom.css b/public/assets/custom.css index 2fd749b..ef2d2e2 100644 --- a/public/assets/custom.css +++ b/public/assets/custom.css @@ -105,4 +105,95 @@ html, body { #navbar-skipper { margin-top: 56px; +} + +.server { + border-style: solid; + border-color: #303030; + border-radius: 10px; + + background-color: #333333; + + padding: 5px; + margin: 5px; +} + +.server .name { + border-style: none none solid none; + border-color: #303030; + padding: 5px; +} + +.server p, .server span { + margin-left: 5px; +} + +.server .category-container { + display: grid; + grid-template-columns: 20% 20% 20% 20% 20%; +} + +.server .category { + margin: 2.5px; + + border-style: solid; + border-color: #3a3a3a; + border-radius: 10px; + + background-color: #444444; +} + +.server .category .name { + border-style: none none solid none; + border-color: #3a3a3a; + padding: 5px; +} + +.server .category .item { + border-style: solid none solid none; + border-color: #404040; + /*border-radius: 5px; + + background-color: #464646;*/ +} + +.server .category .item p { + /*border-style: none none solid none; + border-color: #404040;*/ + padding: 2.5px; + margin: 0; + + font-size: 1.05em; + font-weight: bold; +} +.server .category .item span { + padding: 2.5px; +} + +.server .category .item.start { + border-style: none none solid none; +} +.server .category .item.last { + border-style: solid none none none; +} + +.server .category.cpu { + grid-column-start: 1; + grid-column-end: 1; +} +.server .category.processes { + grid-column-start: 2; + grid-column-end: 2; +} +.server .category.swap-memory { + grid-column-start: 3; + grid-column-end: 3; +} +.server .category.physical-memory { + grid-column-start: 4; + grid-column-end: 4; +} +.server .category.os { + grid-column-start: 5; + grid-column-end: 5; }
\ No newline at end of file diff --git a/public/assets/servers.js b/public/assets/servers.js index 6c6d129..566acde 100644 --- a/public/assets/servers.js +++ b/public/assets/servers.js @@ -24,6 +24,90 @@ */ const SERVER_API = "/api/servers"; +const idsToReadable = { + "data-cpu": "CPU", + "data-cpu-processors": "Processor Count", + "data-cpu-model": "Model", + "data-cpu-cores": "Core Count", + "data-cpu-speed": "Clock Speed", + "data-cpu-temperature": "Temperature", + "data-cpu-load": "Usage", + "data-processes": "Processes", + "data-processes-total": "Total", + "data-processes-running": "Running", + "data-processes-sleeping": "Sleeping", + "data-processes-blocked": "Blocked", + "data-processes-unknown": "Unknown", + "data-swapmemory": "Swap RAM", + "data-swapmemory-used": "Used", + "data-swapmemory-free": "Free", + "data-swapmemory-total": "Total", + "data-physicalmemory": "Physical RAM", + "data-physicalmemory-used": "Used", + "data-physicalmemory-free": "Free", + "data-physicalmemory-total": "Total", + "data-os": "OS", + "data-os-name": "Name", + "data-os-version": "Version" +} + +function isObject(obj) { + return obj === Object(obj); +} + +function iterateAndSetData(data, previous, element, server) { + for(var key in data) { + console.log(key); + console.log("iterateAndSetData: "+previous.join("-")); + if(isObject(data[key])) { + // Call self again but with this object as the input + console.log("iterateAndSetData: Calling self!") + newPrevious = previous.join("-").split("-"); + newPrevious.push(key); + + console.log(newPrevious.join("-")); + + let category = document.createElement("div"); + category.classList.add("category"); + category.classList.add(key); + + let title = document.createElement("h4"); + title.classList.add("name"); + title.innerHTML = idsToReadable[newPrevious.join("-")]; + + category.appendChild(title); + server.appendChild(category); + + iterateAndSetData(data[key], newPrevious, category, server); + } else { + // We're at a value, we can set stuff + if(key == "online") continue; + + console.log("interateAndSetData: Setting data!"); + + console.log(previous.join("-")+"-"+key); + let value = data[key]; + if(value == null || value == undefined) value = "No Data"; + + let item = document.createElement("div"); + item.classList.add("item"); + + let title = document.createElement("p"); + title.innerHTML = idsToReadable[previous.join("-")+"-"+key]; + + let content = document.createElement("span"); + content.innerHTML = value; + + item.appendChild(title); + item.appendChild(content); + + element.appendChild(item); + + //document.getElementById(server).getElementsByClassName(previous.join("-")+"-"+key)[0].innerHTML = value; + } + } +} + // apparently document.onload is never called??? function a() { console.log("a"); @@ -31,7 +115,17 @@ function a() { .then(data => data = data.json()) .then(data => { console.log(data); - document.getElementById("canterlot").getElementsByClassName("cpu-type")[0].innerHTML = data.canterlot.cpu.model; + for(var server in data) { + if(data[server] == null) { + document.getElementById(server).getElementsByClassName("category-container")[0].remove(); + document.getElementById(server).getElementsByTagName("p")[0].innerHTML = "Server Offline"; + document.getElementById(server).getElementsByTagName("p")[0].style = "color:#ff4444;"; + continue; + } + document.getElementById(server).getElementsByClassName("data-uptime")[0].innerHTML = data[server].uptime; + delete data[server].uptime; + iterateAndSetData(data[server], ["data"], null, document.getElementById(server).getElementsByClassName("category-container")[0]); + } }); } |