/nodeDetails?slaveID=xxx page for detailed info about a single slave

and massive UI overhaul which looks like shit.

routes.js

@@ -8,4 +8,7 @@ module.exports = function(app) {
 	app.get("/settings", function(req, res) {
 		res.render("settings");
 	});
+	app.get("/nodeDetails", function(req, res) {
+		res.render("nodeDetails");
+	});
 };

static/head.html

@@ -2,3 +2,4 @@
 <link rel="stylesheet" type="text/css" href="style.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.js" type="text/javascript"></script>
 <script src="main.js"></script>
+<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

static/nodeDetails.css

@@ -0,0 +1,59 @@
+*{
+	color: #FFF;
+}
+
+#header .subbar h6 {
+	display:inline;
+	font-weight:normal;
+	color: #BBB
+}
+#header {
+	background-color: #222;
+	color: #DDD;
+	font-family: 'Roboto', sans-serif;
+	padding-left:16px;
+}
+#displayBody {
+	margin-left: 16px;
+}
+a {
+	color: #FF7200;
+	text-decoration: none;
+}
+a:hover {
+	color: #FFF;
+}
+#hero {
+	background-color: #444;
+	height:400px;
+}
+
+#header h1 {
+	margin-left: 10px;
+	display:inline-block;
+}
+#header .subbar h6 {
+	margin-right: 16px;
+}
+#onlineIndicator {
+	background-color:red;
+	height:20px;
+	width:20px;
+	display:inline-block;
+	border-radius:16px;
+}
+ul {
+	width:300px;
+	list-style:none;
+	max-height:100px;
+	margin:0;
+	overflow:auto;
+	padding:0;
+	text-indent:10px;
+}
+li{
+  line-height:25px;
+}
+li:nth-child(even){
+  background:#ccc;
+}

static/nodeDetails.ejs

@@ -0,0 +1,21 @@
+<!doctype HTML>
+<head>
+	<%- include("head.html") %>
+	<script src="nodeDetails.js"></script>
+	<link rel="stylesheet" type="text/css" href="nodeDetails.css">
+</head>
+
+<body>
+	<%- include("sidebar.html") %>
+	<div id="body">
+		<div id="hero">
+			<h2>Slave details</h2>
+			<div id="display">
+				  
+			</div>
+		</div>
+		<div id="details">
+			
+		</div>
+	</div>
+</body>

static/nodeDetails.js

@@ -0,0 +1,87 @@
+// string, object, function(object)
+function post(url, data, callback) {
+	console.log("POST " + url + JSON.stringify(data))
+	var xhr = new XMLHttpRequest();
+	xhr.open("POST", url, true);
+	xhr.setRequestHeader("Content-type", "application/json");
+	xhr.onreadystatechange = function () {
+		if (xhr.readyState == 4 && xhr.status == 200) {
+			var json = JSON.parse(xhr.responseText);
+			callback(json);
+		}
+	}
+	xhr.send(JSON.stringify(data));
+}
+function getJSON(url, callback) {
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.responseType = 'json';
+    xhr.onload = function() {
+      var status = xhr.status;
+      if (status == 200) {
+        callback(null, xhr.response);
+      } else {
+        callback(status);
+      }
+    };
+    xhr.send();
+};
+function getParameterByName(name, url) {
+    if (!url) url = window.location.href;
+    name = name.replace(/[\[\]]/g, "\\$&");
+    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
+        results = regex.exec(url);
+    if (!results) return null;
+    if (!results[2]) return '';
+    return decodeURIComponent(results[2].replace(/\+/g, " "));
+}
+
+function populateSlaveInfo(){
+	let slaveID = getParameterByName("slaveID");
+	if(!slaveID){
+		throw "We need slaveID! GIVE US SLAVEID! ALL HAIL OUR NEW OVERLORDS!"
+	}
+	getJSON("/api/slaves", function(err, slaveData){
+		/*
+		{"-1530507550":{
+			"time":"1495475926375",
+			"rconPort":"8714",
+			"rconPassword":"hidden",
+			"serverPort":"14345",
+			"unique":"-1530507550",
+			"publicIP":"localhost",
+			"mods":[
+				{
+					"modName":"clusterio_1.0.0.zip",
+					"hash":"341feb6c60918c83f7f3a6a14a4a308aef18dda6"
+				},{
+					"modName":"clusterio_1.0.1.zip",
+					"hash":"aee7a4b67ece19bddf236312fe408a5d4b67248d"
+				},{
+					"modName":"clusterio_1.1.0.zip",
+					"hash":"18e2f7e402d716e3dd1c1458b7fab2d0bb29eccf"
+				}],
+			"playerCount":"0",
+			"instanceName":"t",
+			"mac":"44-85-00-D2-7E-D6"}
+		}
+		*/
+		let slave = slaveData[slaveID];
+		let HTML = "<div id='header'><div id='onlineIndicator'></div><h1>Name: " + slave.instanceName+"</h1>"
+		HTML += "<div class='subbar'><h6>Host: "+slave.mac+" </h6><h6>Unique: "+slave.unique+" </h6></div>"
+		HTML += "</div>" // end of header
+		HTML += "<div id='displayBody'><p>Last seen: <span id='lastSeenDate'>"+slave.time+"</span></p>"
+		HTML += "</div>" // end of displayBody
+		// list mods and other metadata
+		HTML += "<h2>Mods</h2><ul id='modlist'>"
+		for(let i = 0; i < slave.mods.length; i++){
+			HTML += "<li>"+slave.mods[i].modName+"</li>"
+		}
+		
+		document.querySelector("#hero").innerHTML = HTML;
+		
+		
+	});
+}
+
+populateSlaveInfo();

static/sidebar.html

@@ -11,6 +11,9 @@
 	<a href="nodes"><div id="slaves-menu" class="button-black menuItem">
 		<p>Slaves</p>
 	</div></a>
+	<a href="nodeDetails"><div id="temp-menu" class="button-black menuItem">
+		<p>temp Details</p>
+	</div></a>
 	<a href="settings"><div id="settings-menu" class="button-black menuItem">
 		<p>Settings</p>
 	</div></a>

static/style.css

@@ -3,8 +3,11 @@
 }
 
 #logo {
-	background-color: yellow;
-}
+	/* using same colors as factorios official ones, taken from
+	http://www.lua-api.factorio.com */
+	background-color: #262626;
+	color: 	#C8C8C8;
+}	
 
 #sidenav {
 	position:fixed;
@@ -13,6 +16,13 @@
 	background-color:darkgrey;
 	height:100%;
 }
+#sidenav a p {
+	color: #FF7200;
+	transition:0.5s;
+}
+#sidenav a:hover p {
+	color: #FFF;
+}
 #body {
 	margin-left:200px;
 }