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

ui look

Browse Source
This commit is contained in:
Patrick Haßel 2025-08-29 10:10:56 +02:00
parent 3470681342
commit 5529d26b55
1 changed files with 55 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
index.html
View File

@ -3,35 +3,53 @@
<title id="title"></title> <title id="title"></title>
<link rel="icon" type="image/svg" href="icon.svg"> <link rel="icon" type="image/svg" href="icon.svg">
<style> <style>
.relay { body {
display: flex; font-family: sans-serif;
flex-direction: row; margin: 0;
text-align: center; }
}
.relay > * { .relay {
flex: 1; display: flex;
} flex-direction: row;
text-align: center;
}
.name { .relay > * {
flex: 3; flex: 1;
} margin: 0.25em;
padding: 0.25em;
}
.header { .name {
font-weight: bold;; flex: 2;
} }
input, select, button { .header {
width: 100%; font-weight: bold;;
} }
input[type=number], select { input, select, button {
text-align: right; width: 100%;
} }
#info { input[type=number], select {
display: none; text-align: right;
} }
.state {
}
.stateOn {
background-color: palegreen;
}
.stateOff {
background-color: indianred;
}
#info {
display: none;
}
</style> </style>
</head> </head>
@ -78,6 +96,19 @@
} }
} }
function updateState(relayTag, state) {
const tag = relayTag.getElementsByClassName("state")[0];
if (state) {
tag.innerText = "Ein";
tag.classList.add("stateOn");
tag.classList.remove("stateOff");
} else {
tag.innerText = "Aus";
tag.classList.add("stateOff");
tag.classList.remove("stateOn");
}
}
function request(query = "") { function request(query = "") {
if (timeout) { if (timeout) {
clearTimeout(timeout); clearTimeout(timeout);
@ -94,7 +125,7 @@
const relayData = data.relays[index]; const relayData = data.relays[index];
const relayTag = document.getElementById("relay" + index) || create(index); const relayTag = document.getElementById("relay" + index) || create(index);
updateValue(relayTag, "name", "input", relayData.name); updateValue(relayTag, "name", "input", relayData.name);
relayTag.getElementsByClassName("state")[0].innerText = relayData.state ? "Ein" : "Aus"; updateState(relayTag, relayData.state);
updateValue(relayTag, "onMillis", "input", relayData.onMillis); updateValue(relayTag, "onMillis", "input", relayData.onMillis);
updateValue(relayTag, "offMillis", "input", relayData.offMillis); updateValue(relayTag, "offMillis", "input", relayData.offMillis);
updateValue(relayTag, "initial", "select", relayData.initial); updateValue(relayTag, "initial", "select", relayData.initial);