diff --git a/routes.js b/routes.js index 4199ba46..45f05954 100644 --- a/routes.js +++ b/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"); + }); }; \ No newline at end of file diff --git a/static/main.js b/static/main.js index 0876029d..58b31ce5 100644 --- a/static/main.js +++ b/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, diff --git a/static/settings.ejs b/static/settings.ejs new file mode 100644 index 00000000..6b45d585 --- /dev/null +++ b/static/settings.ejs @@ -0,0 +1,13 @@ + + + <%- include("head.html") %> + + + + + <%- include("sidebar.html") %> +
+

Settings

+
+ + \ No newline at end of file diff --git a/static/settings.js b/static/settings.js new file mode 100644 index 00000000..c87ecce3 --- /dev/null +++ b/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 = '
'; // setting text + let boxPart2 = '
\ No newline at end of file diff --git a/static/style.css b/static/style.css index cc8211d9..42d8de37 100644 --- a/static/style.css +++ b/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); } \ No newline at end of file