From 465d4e06245b9dfe77b465e8359759d98a81102a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= Date: Wed, 3 Sep 2025 12:38:22 +0200 Subject: [PATCH] gridPowerDelta UI --- index.html | 47 +++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 02b189d..ffdab20 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -27,7 +28,7 @@ padding: 0.25em; } - input, select { + input[type=text], input[type=number], select { all: unset; width: 100%; } @@ -60,6 +61,10 @@ padding: 0; } + label { + white-space: nowrap; + } + .stateOn { background-color: #7aca7a; } @@ -162,7 +167,9 @@ function updateValue(tag, clazz, innerTag, value) { const input = tag.getElementsByClassName(clazz)[0].getElementsByTagName(innerTag)[0]; - if (document.activeElement !== input) { + if (input.type === "checkbox") { + input.checked = value; + } else if (document.activeElement !== input) { input.value = value; } } @@ -244,6 +251,12 @@ updateValue(relayTag, "onMillis", "input", relayData.onMillis); updateValue(relayTag, "offMillis", "input", relayData.offMillis); updateValue(relayTag, "initial", "select", relayData.initial); + updateValue(relayTag, "gridPowerDeltaOnEnabled", "input", relayData.gridPowerDeltaOnEnabled); + updateValue(relayTag, "gridPowerDeltaOnThreshold", "input", relayData.gridPowerDeltaOnThreshold); + updateValue(relayTag, "gridPowerDeltaOnDelay", "input", relayData.gridPowerDeltaOnDelay); + updateValue(relayTag, "gridPowerDeltaOffEnabled", "input", relayData.gridPowerDeltaOffEnabled); + updateValue(relayTag, "gridPowerDeltaOffThreshold", "input", relayData.gridPowerDeltaOffThreshold); + updateValue(relayTag, "gridPowerDeltaOffDelay", "input", relayData.gridPowerDeltaOffDelay); const cycle = relayData.onCount !== 0 && relayData.onMillis > 0 && relayData.offMillis > 0; @@ -273,9 +286,9 @@ r.send(); } - function newDiv(parent, name) { + function newDiv(parent, clazz) { const div = document.createElement("div") - div.className = name; + div.className = clazz; parent.append(div); return div; } @@ -291,6 +304,22 @@ return input; } + function newCheckbox(relayIndex, parent, clazz, name, text) { + const div = newDiv(parent, clazz); + + const label = document.createElement("label") + label.onchange = () => set(name, relayIndex, input.checked); + div.append(label); + + const input = document.createElement("input") + input.type = "checkbox"; + input.onchange = () => set(name, relayIndex, input.value); + label.append(input); + label.append(text); + + return input; + } + function newButton(relayIndex, parent, clazz, key, value, text) { const div = newDiv(parent, clazz); @@ -341,6 +370,16 @@ newInput(relayIndex, config, "config offMillis", "offMillis", "number"); newSelect(relayIndex, config, "config initial", "initial", [["OFF", "Init: Aus"], ["ON", "Init: Ein"], ["CYCLE", "Init: Zyklus"]]); + const gridPowerDeltaOn = newDiv(relay, "flex admin adminHidden"); + newCheckbox(relayIndex, gridPowerDeltaOn, "config gridPowerDeltaOnEnabled", "gridPowerDeltaOnEnabled", "Überschuss EIN"); + newInput(relayIndex, gridPowerDeltaOn, "config gridPowerDeltaOnThreshold", "gridPowerDeltaOnThreshold", "number"); + newInput(relayIndex, gridPowerDeltaOn, "config gridPowerDeltaOnDelay", "gridPowerDeltaOnDelay", "number"); + + const gridPowerDeltaOff = newDiv(relay, "flex admin adminHidden"); + newCheckbox(relayIndex, gridPowerDeltaOff, "config gridPowerDeltaOffEnabled", "gridPowerDeltaOffEnabled", "Defizit AUS"); + newInput(relayIndex, gridPowerDeltaOff, "config gridPowerDeltaOffThreshold", "gridPowerDeltaOffThreshold", "number"); + newInput(relayIndex, gridPowerDeltaOff, "config gridPowerDeltaOffDelay", "gridPowerDeltaOffDelay", "number"); + const switches = newDiv(relay, "flex"); newButton(relayIndex, switches, "switch switchCycle", "onCount", -1, "Zyklus"); newButton(relayIndex, switches, "switch switchOn", "state", "true", "Ein");