277 lines
7.1 KiB
HTML
277 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<title id="title"></title>
|
|
<link rel="icon" type="image/svg" href="icon.svg">
|
|
<style>
|
|
body {
|
|
font-family: sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
.relay {
|
|
display: flex;
|
|
flex-direction: row;
|
|
text-align: center;
|
|
}
|
|
|
|
.relay > * {
|
|
flex: 1;
|
|
margin: 0.25em;
|
|
padding: 0.25em;
|
|
}
|
|
|
|
.name {
|
|
flex: 3;
|
|
}
|
|
|
|
.header {
|
|
font-weight: bold;;
|
|
}
|
|
|
|
input, select, button {
|
|
width: 100%;
|
|
}
|
|
|
|
input[type=number], select {
|
|
text-align: right;
|
|
}
|
|
|
|
.state {
|
|
}
|
|
|
|
.stateOn {
|
|
background-color: palegreen;
|
|
}
|
|
|
|
.stateOff {
|
|
background-color: indianred;
|
|
}
|
|
|
|
.switchOn {
|
|
background-color: palegreen;
|
|
}
|
|
|
|
.switchOff {
|
|
background-color: indianred;
|
|
}
|
|
|
|
.switchCycle {
|
|
background-color: lightskyblue;
|
|
}
|
|
|
|
#info {
|
|
display: none;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="relayList">
|
|
<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>
|
|
const title = document.getElementById("title");
|
|
const info = document.getElementById("info");
|
|
const relayList = document.getElementById("relayList");
|
|
|
|
function getUrl(path) {
|
|
return `http://10.42.0.204/${path}`;
|
|
}
|
|
|
|
function setState(index, value) {
|
|
set("state", index, value ? 'true' : 'false');
|
|
}
|
|
|
|
function set(key, index, value) {
|
|
request(`${key}${index}=${encodeURIComponent(value)}`);
|
|
}
|
|
|
|
let timeout;
|
|
|
|
function updateValue(tag, clazz, innerTag, value) {
|
|
const input = tag.getElementsByClassName(clazz)[0].getElementsByTagName(innerTag)[0];
|
|
if (document.activeElement !== input) {
|
|
input.value = value;
|
|
}
|
|
}
|
|
|
|
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");
|
|
}
|
|
}
|
|
|
|
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 = "") {
|
|
if (timeout) {
|
|
clearTimeout(timeout);
|
|
}
|
|
timeout = setTimeout(() => request(), 2000);
|
|
|
|
const r = new XMLHttpRequest();
|
|
r.open("GET", getUrl(`set?${query}`));
|
|
r.onreadystatechange = () => {
|
|
if (r.readyState === 4 && r.status === 200) {
|
|
data = JSON.parse(r.response);
|
|
dataAge = Date.now();
|
|
title.innerText = data.hostname;
|
|
for (let index = 0; index < data.relays.length; index++) {
|
|
const relayData = data.relays[index];
|
|
const relayTag = document.getElementById("relay" + index) || create(index);
|
|
updateValue(relayTag, "name", "input", relayData.name);
|
|
updateState(relayTag, relayData.state);
|
|
updateCountdown(relayTag, relayData);
|
|
updateValue(relayTag, "onMillis", "input", relayData.onMillis);
|
|
updateValue(relayTag, "offMillis", "input", relayData.offMillis);
|
|
updateValue(relayTag, "initial", "select", relayData.initial);
|
|
}
|
|
info.innerText = JSON.stringify(data, null, 2);
|
|
}
|
|
}
|
|
r.send();
|
|
}
|
|
|
|
function newDiv(relayIndex, relayTag, name) {
|
|
const div = document.createElement("div")
|
|
div.className = name;
|
|
relayTag.append(div);
|
|
return div;
|
|
}
|
|
|
|
function newInput(relayIndex, relayTag, name, type) {
|
|
const div = newDiv(relayIndex, relayTag, name);
|
|
|
|
const input = document.createElement("input")
|
|
input.type = type;
|
|
input.onchange = () => set(name, relayIndex, input.value);
|
|
div.append(input);
|
|
|
|
return input;
|
|
}
|
|
|
|
function newButton(relayIndex, relayTag, clazz, key, value, text) {
|
|
const div = newDiv(relayIndex, relayTag, clazz);
|
|
|
|
const button = document.createElement("div")
|
|
button.innerText = text;
|
|
button.onclick = () => set(key, relayIndex, value);
|
|
div.append(button);
|
|
|
|
return button;
|
|
}
|
|
|
|
function newSelect(relayIndex, relayTag, name, options) {
|
|
const div = newDiv(relayIndex, relayTag, name);
|
|
|
|
const select = document.createElement("select")
|
|
select.onchange = () => set(name, relayIndex, select.value);
|
|
div.append(select);
|
|
|
|
for (const [value, text] of options) {
|
|
const option = document.createElement("option");
|
|
option.value = value;
|
|
option.innerText = text;
|
|
select.appendChild(option);
|
|
}
|
|
|
|
return select;
|
|
}
|
|
|
|
function create(relayIndex) {
|
|
const relayTag = document.createElement("div");
|
|
relayTag.id = "relay" + relayIndex;
|
|
relayTag.className = "relay";
|
|
relayList.append(relayTag);
|
|
|
|
newInput(relayIndex, relayTag, "name", "text");
|
|
newDiv(relayIndex, relayTag, "state");
|
|
newDiv(relayIndex, relayTag, "countdown");
|
|
newInput(relayIndex, relayTag, "onMillis", "number");
|
|
newInput(relayIndex, relayTag, "offMillis", "number");
|
|
newButton(relayIndex, relayTag, "switchOn", "state", "true", "Ein");
|
|
newButton(relayIndex, relayTag, "switchOff", "state", "false", "Aus");
|
|
newButton(relayIndex, relayTag, "switchCycle", "onCount", -1, "Zyklus");
|
|
newSelect(relayIndex, relayTag, "initial", [["OFF", "Aus"], ["ON", "Ein"], ["CYCLE", "Zyklus"]]);
|
|
return relayTag;
|
|
}
|
|
|
|
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>
|
|
</body>
|
|
</html> |