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

ui responsive

Browse Source
This commit is contained in:
Patrick Haßel 2025-08-29 14:15:52 +02:00
parent 518473b5a4
commit 85d43231f5
1 changed files with 90 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
index.html
View File

@ -6,40 +6,58 @@
<style> <style>
body { body {
font-family: sans-serif; font-family: sans-serif;
font-size: 4.5vw;
margin: 0; margin: 0;
} }
.relay { * {
display: flex; font-size: inherit;
flex-direction: row;
text-align: center;
} }
.relay > * { .relayBox {
flex: 1;
margin: 0.25em; margin: 0.25em;
}
.relay {
padding: 0.25em;
background-color: lightgray;
}
.relay div {
padding: 0.25em; padding: 0.25em;
} }
.name { input, select {
flex: 3; all: unset;
}
.header {
font-weight: bold;;
}
input, select, button {
width: 100%; width: 100%;
} }
input[type=number], select { input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
text-align: right; text-align: right;
} }
.flex {
display: flex;
}
.name {
flex: 1;
padding: 0;
}
.state { .state {
} }
.countdown {
}
.stateOn { .stateOn {
background-color: palegreen; background-color: palegreen;
} }
@ -60,33 +78,32 @@
background-color: lightskyblue; background-color: lightskyblue;
} }
#info { .config {
display: none; flex: 1;
}
.switch {
text-align: center;
flex: 1;
}
@media (min-width: 1000px) {
body {
font-size: 16px;
}
.relayBox {
width: 400px;
}
} }
</style> </style>
</head> </head>
<body> <body>
<div id="relayList"> <div id="relayList"></div>
<div class="relay">
<div class="header name">Name</div>
<div class="header state">Status</div>
<div class="header countdown">Countdown</div>
<div class="header onMillis">Auto Aus</div>
<div class="header offMillis">Auto An</div>
<div class="header"></div>
<div class="header"></div>
<div class="header"></div>
<div class="header initial">Initial</div>
</div>
</div>
<pre id="info"></pre>
<script> <script>
const title = document.getElementById("title"); const title = document.getElementById("title");
const info = document.getElementById("info");
const relayList = document.getElementById("relayList"); const relayList = document.getElementById("relayList");
function getUrl(path) { function getUrl(path) {
@ -131,7 +148,7 @@
function countdownString(relayData, millis) { function countdownString(relayData, millis) {
const rest = Math.ceil((millis - relayData.stateMillis - (Date.now() - dataAge)) / SECOND) * SECOND; const rest = Math.ceil((millis - relayData.stateMillis - (Date.now() - dataAge)) / SECOND) * SECOND;
if (millis <= 0 || (relayData.onCount === 0 && !relayData.state)) { if (millis <= 0 || (relayData.onCount === 0 && !relayData.state)) {
return "-"; return "";
} }
const days = rest / DAY; const days = rest / DAY;
const hours = rest / HOUR; const hours = rest / HOUR;
@ -180,29 +197,28 @@
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 relay = document.getElementById("relay" + index) || create(index);
updateValue(relayTag, "name", "input", relayData.name); updateValue(relay, "name", "input", relayData.name);
updateState(relayTag, relayData.state); updateState(relay, relayData.state);
updateCountdown(relayTag, relayData); updateCountdown(relay, relayData);
updateValue(relayTag, "onMillis", "input", relayData.onMillis); updateValue(relay, "onMillis", "input", relayData.onMillis);
updateValue(relayTag, "offMillis", "input", relayData.offMillis); updateValue(relay, "offMillis", "input", relayData.offMillis);
updateValue(relayTag, "initial", "select", relayData.initial); updateValue(relay, "initial", "select", relayData.initial);
} }
info.innerText = JSON.stringify(data, null, 2);
} }
} }
r.send(); r.send();
} }
function newDiv(relayIndex, relayTag, name) { function newDiv(parent, name) {
const div = document.createElement("div") const div = document.createElement("div")
div.className = name; div.className = name;
relayTag.append(div); parent.append(div);
return div; return div;
} }
function newInput(relayIndex, relayTag, name, type) { function newInput(relayIndex, parent, clazz, name, type) {
const div = newDiv(relayIndex, relayTag, name); const div = newDiv(parent, clazz);
const input = document.createElement("input") const input = document.createElement("input")
input.type = type; input.type = type;
@ -212,8 +228,8 @@
return input; return input;
} }
function newButton(relayIndex, relayTag, clazz, key, value, text) { function newButton(relayIndex, parent, clazz, key, value, text) {
const div = newDiv(relayIndex, relayTag, clazz); const div = newDiv(parent, clazz);
const button = document.createElement("div") const button = document.createElement("div")
button.innerText = text; button.innerText = text;
@ -223,8 +239,8 @@
return button; return button;
} }
function newSelect(relayIndex, relayTag, name, options) { function newSelect(relayIndex, parent, clazz, name, options) {
const div = newDiv(relayIndex, relayTag, name); const div = newDiv(parent, clazz);
const select = document.createElement("select") const select = document.createElement("select")
select.onchange = () => set(name, relayIndex, select.value); select.onchange = () => set(name, relayIndex, select.value);
@ -241,21 +257,30 @@
} }
function create(relayIndex) { function create(relayIndex) {
const relayTag = document.createElement("div"); const relayBox = document.createElement("div");
relayTag.id = "relay" + relayIndex; relayBox.className = "relayBox";
relayTag.className = "relay"; relayList.append(relayBox);
relayList.append(relayTag);
newInput(relayIndex, relayTag, "name", "text"); const relay = document.createElement("div");
newDiv(relayIndex, relayTag, "state"); relay.id = "relay" + relayIndex;
newDiv(relayIndex, relayTag, "countdown"); relay.className = "relay";
newInput(relayIndex, relayTag, "onMillis", "number"); relayBox.append(relay);
newInput(relayIndex, relayTag, "offMillis", "number");
newButton(relayIndex, relayTag, "switchOn", "state", "true", "Ein"); const header = newDiv(relay, "flex");
newButton(relayIndex, relayTag, "switchOff", "state", "false", "Aus"); newInput(relayIndex, header, "name", "name", "text");
newButton(relayIndex, relayTag, "switchCycle", "onCount", -1, "Zyklus"); newDiv(header, "countdown");
newSelect(relayIndex, relayTag, "initial", [["OFF", "Aus"], ["ON", "Ein"], ["CYCLE", "Zyklus"]]); newDiv(header, "state");
return relayTag;
const config = newDiv(relay, "flex");
newInput(relayIndex, config, "config onMillis", "onMillis", "number");
newInput(relayIndex, config, "config offMillis", "offMillis", "number");
newSelect(relayIndex, config, "config initial", "initial", [["OFF", "Init: Aus"], ["ON", "Init: Ein"], ["CYCLE", "Init: Zyklus"]]);
const switches = newDiv(relay, "flex");
newButton(relayIndex, switches, "switch switchOn", "state", "true", "Ein");
newButton(relayIndex, switches, "switch switchOff", "state", "false", "Aus");
newButton(relayIndex, switches, "switch switchCycle", "onCount", -1, "Zyklus");
return relay;
} }
request(); request();