patrick/Sonoff4ChPro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gridPowerDelta UI

Browse Source
This commit is contained in:
Patrick Haßel 2025-09-03 12:38:22 +02:00
parent 1336d3103f
commit 465d4e0624
1 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="de">
<meta charset="UTF-8">
<head>
<title id="title"></title>
<link rel="icon" type="image/svg" href="icon.svg">
@ -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");