slaveDetails prod chart, playerCount, last online date

static/head.html

@@ -1,5 +1,6 @@
 <title>Clusterio</title>
 <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="http://momentjs.com/downloads/moment.min.js" type="text/javascript"></script>
 <script src="main.js"></script>
 <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

static/nodeDetails.css

@@ -31,6 +31,12 @@
 	display:inline-block;
 	border-radius:16px;
 }
+.productionGraph {
+	background-color:black;
+}
+#leftHeroContainer {
+	float:left;
+}
 ul {
 	width:300px;
 	list-style:none;

static/nodeDetails.js

@@ -26,6 +26,13 @@ function getJSON(url, callback) {
     };
     xhr.send();
 };
+// function to sort arrays of objects after a keys value
+function sortByKey(array, key) {
+    return array.sort(function(a, b) {
+        var x = Number(a[key]); var y = Number(b[key]);
+        return ((x < y) ? 1 : ((x > y) ? -1 : 0));
+    });
+}
 function getParameterByName(name, url) {
     if (!url) url = window.location.href;
     name = name.replace(/[\[\]]/g, "\\$&");
@@ -68,20 +75,122 @@ function populateSlaveInfo(){
 		*/
 		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 class='subbar'><h6>Host: "+slave.mac+" </h6><h6>Unique: "+slave.unique+" </h6>"
+		if(slave.publicIP != "localhost"){
+			HTML += "<h6>IP: "+slave.publicIP+":"+slave.serverPort+"</h6>";
+		} else {
+			HTML += "<h6>This server is not configured for incoming connections</h6>"
+		}
+		HTML += "</div></div>" // end of header
+		// left container
+		HTML += "<div id='leftHeroContainer'>"
+		HTML += "<div id='displayBody'><p>Last seen: <span id='lastSeenDate'>"+moment(Number(slave.time)).fromNow()+"</span></p>"
+		HTML += "<p>Online players: "+slave.playerCount+"</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>"
 		}
+		HTML += "</ul>"
+		
+		HTML += "</div>" // end of left container
+		
+		// chart
+		HTML += '<div id="' + slave.unique + '" class="productionGraph" style="width: calc(100% - 300px);"></div>'
 		
 		document.querySelector("#hero").innerHTML = HTML;
-		
+		makeGraph(slave.unique, slave.unique)
 		
 	});
 }
 
 populateSlaveInfo();
+
+// ID of slave, ID of canvasjs div without #
+function makeGraph(slaveID, selector) {
+	post("api/getStats", {slaveID: slaveID}, function(data){
+		//console.log("Building chart " + slaveID + " with this data:")
+		//console.log(data)
+		if(data.length > 0) {
+			// find keys
+			let itemNames = [];
+			for(let key in data[data.length - 1].data) {
+				itemNames[itemNames.length] = key
+			}
+			let chartData = [];
+			for(let o = 0; o < itemNames.length; o++) {
+				if(itemNames[o] != "water"){
+					chartData[chartData.length] = generateLineChartArray(data, itemNames[o]);
+				}
+			}
+			//console.log(chartData)
+			drawChart(selector, chartData)
+		}
+		// callback(data);
+	})
+}
+
+function generateLineChartArray(data, nameKey) {
+	let chartData = [];
+	for(let i = 0; i < data.length; i++) {
+		// only show recent data
+		if(data[i].timestamp > Date.now() - (24*60*60*1000)){
+			let y = data[i].data[nameKey]
+			if(!data[i].data[nameKey]) {
+				y = 0;
+			} else if(y < 0) {
+				y = 0;
+			}
+			chartData[chartData.length] = {
+				x: new Date(data[i].timestamp),
+				y: Number(y)
+			}
+		}
+	}
+	chartData = sortByKey(chartData, "x");
+	let xyz = {};
+	xyz.name = nameKey;
+	xyz.type = "line";
+	if(nameKey == "copper-wire"||nameKey == "iron-plate"||nameKey == "copper-plate"||nameKey == "electronic-circuit"||nameKey == "steel-plate"||nameKey == "advanced-circuit"||nameKey == "crude-oil"||nameKey == "petroleum-gas"){
+		xyz.showInLegend = true;
+	}
+	xyz.dataPoints = chartData;
+	return xyz;
+}
+
+var chartsByID = {};
+function drawChart(selector, chartData) {
+	// selector is ID of element, ex "chartContainer" or "-123199123"
+	console.log(chartData)
+	chartsByID[selector] = new CanvasJS.Chart(selector, {
+		title:{
+			text: "Production graph"
+		},
+		toolTip:{   
+			content: "{name}: {y}"	  
+		},
+		zoomEnabled: true,
+		axisY:{
+			includeZero: true,
+		},
+		legend: {
+			cursor: "pointer",
+			itemclick: function (e) {
+				//console.log("legend click: " + e.dataPointIndex);
+				//console.log(e);
+				if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
+					e.dataSeries.visible = false;
+				} else {
+					e.dataSeries.visible = true;
+				}	
+				e.chart.render();
+			}
+		},
+		data: chartData
+	});
+	chart = chartsByID[selector];
+	// console.log(chart)
+	chart.render();
+}

static/style.css

@@ -5,6 +5,13 @@
 body {
 	background-color: #242B30;
 }
+button {
+	border-radius: 0;
+	border: 1px solid transparent;
+	border-color: #FF7200;
+	border-width:1px;
+	cursor: pointer;
+}
 #logo {
 	/* using same colors as factorios official ones, taken from
 	http://www.lua-api.factorio.com */