Added fancy settings menu

routes.js

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

static/main.js

@@ -1,3 +1,23 @@
+
+(function (){
+	ensureSetting("Display offline slaves", "boolean", false);
+}())
+
+function ensureSetting(setting, type, defaultSetting) {
+	let settings
+	try {
+		settings = JSON.parse(localStorage.settings);
+	} catch (e) {
+		
+	}
+	if(!settings) settings = {};
+	if(typeof settings[setting] != type) {
+		settings[setting] = defaultSetting;
+		console.log("Fixed setting: " + setting + " | " + defaultSetting)
+	}
+	localStorage.settings = JSON.stringify(settings)
+}
+
 var g = {}
 contents = {
 	"iron-plate":100,

static/settings.ejs

@@ -0,0 +1,13 @@
+<!doctype HTML>
+<head>
+	<%- include("head.html") %>
+	
+</head>
+
+<body>
+	<%- include("sidebar.html") %>
+	<div id="body">
+		<h1>Settings</h1>
+	</div>
+	<script src="settings.js"></script>
+</body>

static/settings.js

@@ -0,0 +1,46 @@
+
+if(localStorage.settings) {
+	let settings = JSON.parse(localStorage.settings);
+
+	let HTML = "";
+	for(let key in settings) {
+		HTML += drawSetting(key, settings[key]);
+	}
+	document.querySelector("#body").innerHTML = document.querySelector("#body").innerHTML + HTML;
+}
+
+window.onload = function(){
+	// loop through all settings and add onclick events for them
+	let thingies = document.querySelectorAll(".settingsBox .switch .slider");
+	for(let i = 0; i < thingies.length; i++) {
+		thingies[i].onclick = function() {
+			let settings = JSON.parse(localStorage.settings);
+			
+			// walk through DOM structure created by drawSetting and update localstorage from that
+			console.log(this.parentElement.parentElement.childNodes[0].innerHTML + " = " + !this.parentElement.childNodes[0].checked);
+			settings[this.parentElement.parentElement.childNodes[0].innerHTML] = !this.parentElement.childNodes[0].checked;
+			
+			localStorage.settings = JSON.stringify(settings);
+		}
+	}
+}
+
+function drawSetting(settingText, checked) {
+	// please don't change these without fixing what it will break in window.onload
+	let boxPart1 = '<div class="settingsBox"><span class="settingsText">'; // setting text
+	let boxPart2 = '</span><label class="switch"><input type="checkbox"'; // either checked or nothing
+	let boxPart3 = '><div class="slider"></div></label></div>';          // comment for balance and looks
+	
+	let HTML = boxPart1;
+	if(settingText && typeof settingText == "string") {
+		HTML += settingText;
+	} else {
+		HTML += "unknown";
+	}
+	HTML += boxPart2;
+	if(checked && typeof checked == "boolean") {
+		HTML += " checked";
+	}
+	HTML += boxPart3;
+	return HTML;
+}

static/sidebar.html

@@ -8,10 +8,10 @@
 	<a href="/"><div id="storage-menu" class="button-black menuItem">
 		<p>Storage</p>
 	</div></a>
-	<!--<div id="production-menu" onclick="display('production');" class="button-black menuItem">
-		<p>Production</p>
-	</div>-->
 	<a href="nodes"><div id="slaves-menu" class="button-black menuItem">
 		<p>Slaves</p>
 	</div></a>
+	<a href="settings"><div id="settings-menu" class="button-black menuItem">
+		<p>Settings</p>
+	</div></a>
 </div>

static/style.css

@@ -75,4 +75,68 @@
 
 .canvasjs-chart-credit {
 	display:none;
+}
+
+
+/* Styling for settings page */
+.settingsText {
+	margin-left: 10px;
+	margin-right:10px;
+	margin-top: -10px;
+	font-size: 18px;
+}
+.settingsBox .switch {
+	position:relative;
+	top:10px;
+}
+
+/* Fancy togglle switch for toggly things  stolen from https://www.w3schools.com/howto/howto_css_switch.asp */
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {display:none;}
+
+/* The slider */
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
 }