Create /servers page

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]);
+            }
         });
 }