From 29dfda3aab0d42a29d62da1f15357dc7ce8609bd Mon Sep 17 00:00:00 2001 From: Ewoud Date: Sun, 11 Aug 2024 12:46:57 +0200 Subject: [PATCH] NewUI: sort vars, module type names, button and check, var class reorg modules.js - modules.createHTML: sort module variables - modules.addModule: rename type to human readable - varJsonToClass: add ButtonVariable and CheckboxVariable - Variable class: only common denominator. Add defaults which can be changed in subclasses SysModSystem - timeBase and Now both numbers --- data/modules.js | 99 +- data/newui.htm | 2 +- data/newui.js | 13 +- data/theme.js | 2 +- misc/model.json | 2 +- src/Sys/SysModSystem.cpp | 10 +- src/html_newui.h | 776 +++++++------- src/html_ui.h | 2080 ++++++++++++++++++++++++++------------ 8 files changed, 1957 insertions(+), 1027 deletions(-) diff --git a/data/modules.js b/data/modules.js index ff36a816..3e0e3db2 100644 --- a/data/modules.js +++ b/data/modules.js @@ -17,6 +17,12 @@ class Modules { let code = "" controller.modules.test("ew") // this.test("ew") //this.otherMethodInThisClass: [Error] Unhandled Promise Rejection: TypeError: this.test is not a function. (In 'this.test("ew")', 'this.test' is undefined) + + // sort module variables + moduleJson.n.sort(function(a,b) { + return Math.abs(a.o) - Math.abs(b.o); //o is order nr (ignore negatives for the time being) + }); + for (let variable of moduleJson.n) { let variableClass = varJsonToClass(variable); @@ -43,6 +49,7 @@ class Modules { //used by fetchModel and by makeWS addModule(moduleJson) { + moduleJson.type = moduleJson.type=="appmod"?appName():moduleJson.type=="usermod"?"User":"System"; this.model.push(moduleJson); //updateUI is made after all modules have been fetched, how to adapt to add one module? @@ -89,12 +96,16 @@ class Modules { //creates the right class based on variable.type function varJsonToClass(variable) { switch (variable.type) { + case "button": + return new ButtonVariable(variable); case "progress": return new ProgressVariable(variable); case "text": return new TextVariable(variable); case "select": return new SelectVariable(variable); + case "checkbox": + return new CheckboxVariable(variable); default: return new Variable(variable); } @@ -107,43 +118,85 @@ class Variable { this.node = document.getElementById(variable.id); } - createHTML() { //base + createHTML(node = ``) { //base return `

- - + + ${node}

` - } //sets the value of the node to value of properties receiveData(properties) { //base - if (this.node && properties.value) - this.node.value = properties.value; + if (this.node) { + if (properties.label) { + let labelNode = this.node.parentNode.querySelector("label") + if (labelNode) + labelNode.innerText = properties.label; + else + this.node.parentNode.innerHTML = `` + this.node.parentNode.innerHTML + } + if (properties.value != null && this.node.value != null) { + this.node.value = properties.value; + } + if (properties.comment) { + let commentNode = this.node.parentNode.querySelector("comment") + if (commentNode) + commentNode.innerText = properties.comment + else + this.node.parentNode.innerHTML += `${properties.comment}` + } + } } - generateData() { - controller.receiveData(JSON.parse(`{"${this.variable.id}":{"value":${Math.random() * 1000}}}`)); + generateData(custom = `"value":${Math.random() * 1000}`) { + if (custom != "") custom += ", " + controller.receiveData(JSON.parse(`{"${this.variable.id}":{${custom}"comment":"${Math.random().toString(36).slice(2)}"}}`)); } } //class Variable -class ProgressVariable extends Variable { +class TextVariable extends Variable { + + createHTML() { //base + return super.createHTML(``); + } + + generateData() { + super.generateData(`"value":"${Math.random().toString(36).slice(2)}"`) + } + +} //class TextVariable + +class CheckboxVariable extends Variable { + + receiveData(properties) { //base + super.receiveData(properties) + if (this.node && properties.value != null) + this.node.checked = properties.value + } + + generateData() { + super.generateData(`"value":${(Math.random()<0.5)?1:0}`) + } + +} //class CheckboxVariable + +class ButtonVariable extends Variable { createHTML() { //override - return `

- - -

` + return super.createHTML(``) + } + + generateData() { + super.generateData("") //no value update } -} //class ProgressVariable + +} //class ButtonVariable class SelectVariable extends Variable { createHTML() { //override - return `

- - -

` + return super.createHTML(``) } generateData() { @@ -151,15 +204,15 @@ class SelectVariable extends Variable { if (this.node && this.node.childNodes.length == 0) this.node.innerHTML+='' - controller.receiveData(JSON.parse(`{"${this.variable.id}":{"value":${Math.random() <.33?0:Math.random() <.66?1:2}}}`)); + super.generateData(`"value":${Math.random() <.33?0:Math.random() <.66?1:2}`) } } //class SelectVariable -class TextVariable extends Variable { +class ProgressVariable extends Variable { - generateData() { - controller.receiveData(JSON.parse(`{"${this.variable.id}":{"value":"${Math.random().toString(36).slice(2)}"}}`)); + createHTML() { //override + return super.createHTML(``) } -} //class TextVariable \ No newline at end of file +} //class ProgressVariable \ No newline at end of file diff --git a/data/newui.htm b/data/newui.htm index a38f4ea5..c98e438e 100644 --- a/data/newui.htm +++ b/data/newui.htm @@ -18,7 +18,6 @@ StarBase💫 by MoonModules 🌔 - @@ -26,6 +25,7 @@ + \ No newline at end of file diff --git a/data/newui.js b/data/newui.js index 9bd21e10..a1c26da3 100644 --- a/data/newui.js +++ b/data/newui.js @@ -90,7 +90,7 @@ class Controller { found = true; } if (!found) { - this.addModule(json); + this.modules.addModule(json); } else console.log("html of module already generated", json); @@ -130,7 +130,7 @@ class Controller { } receiveData(json) { - // console.log("re", json) + // console.log("receiveData", json) if (isObject(json)) { for (let key of Object.keys(json)) { let value = json[key] @@ -158,7 +158,14 @@ window.controller = new Controller() -// Utility function +// Utility functions + +function initCap(s) { + if (typeof s !== 'string') return ''; + // https://www.freecodecamp.org/news/how-to-capitalize-words-in-javascript/ + return s.replace(/[\W_]/g,' ').replace(/(^\w{1})|(\s+\w{1})/g, l=>l.toUpperCase()); // replace - and _ with space, capitalize every 1st letter +} + //https://stackoverflow.com/questions/8511281/check-if-a-value-is-an-object-in-javascript function isObject(val) { if (Array.isArray(val)) return false; diff --git a/data/theme.js b/data/theme.js index 03d25a17..23cdfd84 100644 --- a/data/theme.js +++ b/data/theme.js @@ -13,7 +13,7 @@ class Theme { createHTML() { let body = document.getElementById("body");//gId("body"); - body.innerHTML+= ` + body.innerHTML += `