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

ui countdown

Browse Source
This commit is contained in:
Patrick Haßel 2025-08-29 11:11:04 +02:00
parent 5529d26b55
commit 518473b5a4
1 changed files with 80 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
index.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<title id="title"></title> <title id="title"></title>
@ -21,7 +22,7 @@
} }
.name { .name {
flex: 2; flex: 3;
} }
.header { .header {
@ -47,6 +48,18 @@
background-color: indianred; background-color: indianred;
} }
.switchOn {
background-color: palegreen;
}
.switchOff {
background-color: indianred;
}
.switchCycle {
background-color: lightskyblue;
}
#info { #info {
display: none; display: none;
} }
@ -59,12 +72,13 @@
<div class="relay"> <div class="relay">
<div class="header name">Name</div> <div class="header name">Name</div>
<div class="header state">Status</div> <div class="header state">Status</div>
<div class="header initial">Initial</div> <div class="header countdown">Countdown</div>
<div class="header onMillis">Auto Aus</div> <div class="header onMillis">Auto Aus</div>
<div class="header offMillis">Auto An</div> <div class="header offMillis">Auto An</div>
<div class="header switchOn">Ein</div> <div class="header"></div>
<div class="header switchOff">Aus</div> <div class="header"></div>
<div class="header switchCycle">Zyklus</div> <div class="header"></div>
<div class="header initial">Initial</div>
</div> </div>
</div> </div>
@ -109,6 +123,48 @@
} }
} }
const SECOND = 1000;
const MINUTE = (60 * SECOND);
const HOUR = (60 * MINUTE);
const DAY = (24 * HOUR);
function countdownString(relayData, millis) {
const rest = Math.ceil((millis - relayData.stateMillis - (Date.now() - dataAge)) / SECOND) * SECOND;
if (millis <= 0 || (relayData.onCount === 0 && !relayData.state)) {
return "-";
}
const days = rest / DAY;
const hours = rest / HOUR;
const minutes = rest / MINUTE;
const seconds = rest / SECOND;
if (days >= 1) {
return Math.floor(days) + "d " + Math.floor(hours % 24) + "h " + Math.ceil(minutes % 60) + "m " + Math.ceil(seconds % 60) + "s";
}
if (hours >= 1) {
return Math.floor(hours) + "h " + Math.floor(minutes % 60) + "m " + Math.ceil(seconds % 60) + "s";
}
if (minutes >= 1) {
return Math.floor(minutes) + "m " + Math.ceil(seconds % 60) + "s";
}
if (seconds >= 1) {
return Math.ceil(rest / SECOND) + "s";
}
return "Warte...";
}
function updateCountdown(relayTag, relayData) {
const tag = relayTag.getElementsByClassName("countdown")[0];
if (relayData.state) {
tag.innerText = countdownString(relayData, relayData.onMillis);
} else {
tag.innerText = countdownString(relayData, relayData.offMillis);
}
}
let data;
let dataAge;
function request(query = "") { function request(query = "") {
if (timeout) { if (timeout) {
clearTimeout(timeout); clearTimeout(timeout);
@ -119,13 +175,15 @@
r.open("GET", getUrl(`set?${query}`)); r.open("GET", getUrl(`set?${query}`));
r.onreadystatechange = () => { r.onreadystatechange = () => {
if (r.readyState === 4 && r.status === 200) { if (r.readyState === 4 && r.status === 200) {
const data = JSON.parse(r.response); data = JSON.parse(r.response);
dataAge = Date.now();
title.innerText = data.hostname; title.innerText = data.hostname;
for (let index = 0; index < data.relays.length; index++) { for (let index = 0; index < data.relays.length; index++) {
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);
updateState(relayTag, relayData.state); updateState(relayTag, relayData.state);
updateCountdown(relayTag, relayData);
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);
@ -157,7 +215,7 @@
function newButton(relayIndex, relayTag, clazz, key, value, text) { function newButton(relayIndex, relayTag, clazz, key, value, text) {
const div = newDiv(relayIndex, relayTag, clazz); const div = newDiv(relayIndex, relayTag, clazz);
const button = document.createElement("button") const button = document.createElement("div")
button.innerText = text; button.innerText = text;
button.onclick = () => set(key, relayIndex, value); button.onclick = () => set(key, relayIndex, value);
div.append(button); div.append(button);
@ -190,16 +248,30 @@
newInput(relayIndex, relayTag, "name", "text"); newInput(relayIndex, relayTag, "name", "text");
newDiv(relayIndex, relayTag, "state"); newDiv(relayIndex, relayTag, "state");
newSelect(relayIndex, relayTag, "initial", [["OFF", "Aus"], ["ON", "Ein"], ["CYCLE", "Zyklus"]]); newDiv(relayIndex, relayTag, "countdown");
newInput(relayIndex, relayTag, "onMillis", "number"); newInput(relayIndex, relayTag, "onMillis", "number");
newInput(relayIndex, relayTag, "offMillis", "number"); newInput(relayIndex, relayTag, "offMillis", "number");
newButton(relayIndex, relayTag, "switchOn", "state", "true", "Ein"); newButton(relayIndex, relayTag, "switchOn", "state", "true", "Ein");
newButton(relayIndex, relayTag, "switchOff", "state", "false", "Aus"); newButton(relayIndex, relayTag, "switchOff", "state", "false", "Aus");
newButton(relayIndex, relayTag, "switchCycle", "onCount", -1, "Zyklus"); newButton(relayIndex, relayTag, "switchCycle", "onCount", -1, "Zyklus");
newSelect(relayIndex, relayTag, "initial", [["OFF", "Aus"], ["ON", "Ein"], ["CYCLE", "Zyklus"]]);
return relayTag; return relayTag;
} }
request(); request();
function update() {
if (!data) {
return;
}
for (let index = 0; index < data.relays.length; index++) {
const relayData = data.relays[index];
const relayTag = document.getElementById("relay" + index) || create(index);
updateCountdown(relayTag, relayData);
}
}
setInterval(() => update(), 500);
</script> </script>
</body> </body>
</html> </html>