Create /servers page

5 files changed, 253 insertions, 48 deletions

diff --git a/index.js b/index.js
index f0cb4fd..78c9a11 100644
--- a/index.js
+++ b/index.js
@@ -55,10 +55,10 @@ function cacheReload() {
     refresh().then(data => {
         console.log("Refresh halfway done!");
         serverCache = data;
-        pkRefresh().then(data => {
+        /*pkRefresh().then(data => {
             console.log("Refresh totally done!");
             pluralCache = data;
-        });
+        });*/
     });
 }
 
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]);
+            }
         });
 }
 
diff --git a/refresh/servers.js b/refresh/servers.js
index e6b7d25..8bbdbd5 100644
--- a/refresh/servers.js
+++ b/refresh/servers.js
@@ -45,6 +45,28 @@ function roundToTwo(num) {
     return +(Math.round(num + "e+2")  + "e-2");
 }
 
+function createReadableUptime(timestamp) {
+    let minutes = Math.floor(timestamp / 1000 / 60 % 60);
+    let hours = Math.floor(timestamp / 1000 / 60 / 60 % 24);
+    let days = Math.floor(timestamp / 1000 / 60 / 60 / 24);
+
+    let daysString = " Day";
+    if(days == 0) daysString = "";
+    if(days > 1) daysString = daysString + "s";
+    if(days != 0 && hours != 0) daysString = days + daysString + ", ";
+
+    let hoursString = " Hour";
+    if(hours == 0) hoursString = "";
+    if(hours > 1) hoursString = hoursString + "s";
+    if(hours != 0) hoursString = hours + hoursString + ", and ";
+
+    let minutesString = " Minute";
+    if(minutes == 0) minutesString = "";
+    if(minutes > 1) minutesString = minutes + minutesString + "s";
+
+    return daysString + hoursString + minutesString;
+}
+
 module.exports = () => {
     // Code entered here will be run every 5 minutes
     return new Promise(async (res) => {
@@ -61,9 +83,10 @@ module.exports = () => {
         for (let key in Object.keys(servers)) {
             key = Object.keys(servers)[key];
             let status = {
-                online: null,
                 cpu: null,
-                memory: null,
+                processes: null,
+                swapmemory: null,
+                physicalmemory: null,
                 os: null,
                 uptime: null
             }
@@ -74,28 +97,33 @@ module.exports = () => {
                 })
                 .then(data => data = data.body)
                 .then(data => {
-                    status.online = true;
                     status.cpu = data.cpu;
-                    status.cpu.load = Math.floor(data.cpu.load * 100);
-                    status.memory = data.memory;
-                    status.memory.swap.used = roundToTwo(data.memory.swap.used / 1073741824);
-                    status.memory.swap.free = roundToTwo(data.memory.swap.free / 1073741824);
-                    status.memory.swap.total = roundToTwo(data.memory.swap.total / 1073741824);
-                    status.memory.physical.used = roundToTwo(data.memory.physical.used / 1073741824);
-                    status.memory.physical.free = roundToTwo(data.memory.physical.free / 1073741824);
-                    status.memory.physical.total = roundToTwo(data.memory.physical.total / 1073741824);
+                    status.cpu.speed = data.cpu.speed + "GHz";
+                    status.cpu.load = Math.floor(data.cpu.load * 100) + "%";
+                    if(data.cpu.temperature != null)
+                        status.cpu.temperature = data.cpu.temperature + "°C";
+                    status.processes = data.processes;
+                    status.swapmemory = data.swapmemory;
+                    status.swapmemory.used = roundToTwo(data.swapmemory.used / 1073741824) + "GB";
+                    status.swapmemory.free = roundToTwo(data.swapmemory.free / 1073741824) + "GB";
+                    status.swapmemory.total = roundToTwo(data.swapmemory.total / 1073741824) + "GB";
+                    status.physicalmemory = data.physicalmemory;
+                    status.physicalmemory.used = roundToTwo(data.physicalmemory.used / 1073741824) + "GB";
+                    status.physicalmemory.free = roundToTwo(data.physicalmemory.free / 1073741824) + "GB";
+                    status.physicalmemory.total = roundToTwo(data.physicalmemory.total / 1073741824) + "GB";
                     status.os = data.os;
-                    status.uptime = data.uptime;
+                    status.uptime = createReadableUptime(data.uptime);
                 })
                 .catch(reason => {
                     if (reason.timeout) {
                         // We timed out.
-                        status.online = false;
+                        status = null;
                     } else {
                         if(reason.code === "ECONNREFUSED") {
-                            status.online = false;
+                            status = null;
                             console.warn(`Server ${key} refused our connection. `)
                         } else {
+                            status = null;
                             console.error(reason);
                         }
                     }
diff --git a/views/servers.ejs b/views/servers.ejs
index 4f0e6e6..4d5aed7 100644
--- a/views/servers.ejs
+++ b/views/servers.ejs
@@ -22,42 +22,34 @@
   ~ SOFTWARE.
   ~
   -->
-<%- include("./partials/header.ejs", {title: "Servers"}) %>
+<%- include("./partials/header.ejs", {title: "Servers" }) %>
 
 <div id="navbar-skipper">
     <div class="server-container">
         <div class="server" id="canterlot">
             <h3 class="name">Canterlot</h3>
-            <div class="category cpu">
-                <h4 class="name">CPU</h4>
-                <p>CPU Type: <span class="item cpu-type"></span></p>
-                <p>CPU Core count: <span class="item cpu-cores"></span></p>
-                <p>CPU Temperature: <span class="item cpu-temperature"></span></p>
-                <p>CPU Usage: <span class="item cpu-usage"></span></p>
-                <div class="subcategory processes">
-                    <h5 class="name">Processes</h5>
-                    <p>Processes Total: <span class="item cpu-processes-total"></span></p>
-                    <p>Processes Running: <span class="item cpu-processes-running"></span></p>
-                    <p>Processes Sleeping: <span class="item cpu-processes-sleeping"></span></p>
-                    <p>Processes Blocked: <span class="item cpu-processes-blocked"></span></p>
-                    <p>Unknown Processes: <span class="item cpu-processes-unknown"></span></p>
-                </div>
-            </div>
-            <div class="category memory">
-                <h4 class="name">Memory</h4>
-                <div class="subcategory swap">
-                    <h5 class="name">Swap</h5>
-                    <p>Used Memory: <span class="item memory-swap-used"></span></p>
-                    <p>Free Memory: <span class="item memory-swap-free"></span></p>
-                    <p>Total Memory: <span class="item memory-swap-total"></span></p>
-                </div>
-                <div class="subcategory physical">
-                    <h5 class="name">Physical</h5>
-                    <p>Used Memory: <span class="item memory-physical-used"></span></p>
-                    <p>Free Memory: <span class="item memory-physical-free"></span></p>
-                    <p>Total Memory: <span class="item memory-physical-total"></span></p>
-                </div>
-            </div>
+            <p>Online for<span class="data-uptime"></span></p>
+            <div class="category-container"></div>
+        </div>
+        <div class="server" id="bridlewood">
+            <h3 class="name">Bridlewood</h3>
+            <p>Online for<span class="data-uptime"></span></p>
+            <div class="category-container"></div>
+        </div>
+        <div class="server" id="zephyrheights">
+            <h3 class="name">Zephyr Heights</h3>
+            <p>Online for<span class="data-uptime"></span></p>
+            <div class="category-container"></div>
+        </div>
+        <div class="server" id="maretimebay">
+            <h3 class="name">Maretime Bay</h3>
+            <p>Online for<span class="data-uptime"></span></p>
+            <div class="category-container"></div>
+        </div>
+        <div class="server" id="ponyville">
+            <h3 class="name">Ponyville</h3>
+            <p>Online for<span class="data-uptime"></span></p>
+            <div class="category-container"></div>
         </div>
     </div>
 </div>