ui responsive
This commit is contained in:
parent
518473b5a4
commit
85d43231f5
155
index.html
155
index.html
@ -6,40 +6,58 @@
|
||||
<style>
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 4.5vw;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.relay {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
text-align: center;
|
||||
* {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.relay > * {
|
||||
flex: 1;
|
||||
.relayBox {
|
||||
margin: 0.25em;
|
||||
}
|
||||
|
||||
.relay {
|
||||
padding: 0.25em;
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
.relay div {
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.header {
|
||||
font-weight: bold;;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
input, select {
|
||||
all: unset;
|
||||
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;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.state {
|
||||
}
|
||||
|
||||
.countdown {
|
||||
}
|
||||
|
||||
.stateOn {
|
||||
background-color: palegreen;
|
||||
}
|
||||
@ -60,33 +78,32 @@
|
||||
background-color: lightskyblue;
|
||||
}
|
||||
|
||||
#info {
|
||||
display: none;
|
||||
.config {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.switch {
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
body {
|
||||
font-size: 16px;
|
||||
}
|
||||
.relayBox {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
</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>
|
||||
<div id="relayList"></div>
|
||||
|
||||
<script>
|
||||
const title = document.getElementById("title");
|
||||
const info = document.getElementById("info");
|
||||
const relayList = document.getElementById("relayList");
|
||||
|
||||
function getUrl(path) {
|
||||
@ -131,7 +148,7 @@
|
||||
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 "-";
|
||||
return "";
|
||||
}
|
||||
const days = rest / DAY;
|
||||
const hours = rest / HOUR;
|
||||
@ -180,29 +197,28 @@
|
||||
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);
|
||||
const relay = document.getElementById("relay" + index) || create(index);
|
||||
updateValue(relay, "name", "input", relayData.name);
|
||||
updateState(relay, relayData.state);
|
||||
updateCountdown(relay, relayData);
|
||||
updateValue(relay, "onMillis", "input", relayData.onMillis);
|
||||
updateValue(relay, "offMillis", "input", relayData.offMillis);
|
||||
updateValue(relay, "initial", "select", relayData.initial);
|
||||
}
|
||||
info.innerText = JSON.stringify(data, null, 2);
|
||||
}
|
||||
}
|
||||
r.send();
|
||||
}
|
||||
|
||||
function newDiv(relayIndex, relayTag, name) {
|
||||
function newDiv(parent, name) {
|
||||
const div = document.createElement("div")
|
||||
div.className = name;
|
||||
relayTag.append(div);
|
||||
parent.append(div);
|
||||
return div;
|
||||
}
|
||||
|
||||
function newInput(relayIndex, relayTag, name, type) {
|
||||
const div = newDiv(relayIndex, relayTag, name);
|
||||
function newInput(relayIndex, parent, clazz, name, type) {
|
||||
const div = newDiv(parent, clazz);
|
||||
|
||||
const input = document.createElement("input")
|
||||
input.type = type;
|
||||
@ -212,8 +228,8 @@
|
||||
return input;
|
||||
}
|
||||
|
||||
function newButton(relayIndex, relayTag, clazz, key, value, text) {
|
||||
const div = newDiv(relayIndex, relayTag, clazz);
|
||||
function newButton(relayIndex, parent, clazz, key, value, text) {
|
||||
const div = newDiv(parent, clazz);
|
||||
|
||||
const button = document.createElement("div")
|
||||
button.innerText = text;
|
||||
@ -223,8 +239,8 @@
|
||||
return button;
|
||||
}
|
||||
|
||||
function newSelect(relayIndex, relayTag, name, options) {
|
||||
const div = newDiv(relayIndex, relayTag, name);
|
||||
function newSelect(relayIndex, parent, clazz, name, options) {
|
||||
const div = newDiv(parent, clazz);
|
||||
|
||||
const select = document.createElement("select")
|
||||
select.onchange = () => set(name, relayIndex, select.value);
|
||||
@ -241,21 +257,30 @@
|
||||
}
|
||||
|
||||
function create(relayIndex) {
|
||||
const relayTag = document.createElement("div");
|
||||
relayTag.id = "relay" + relayIndex;
|
||||
relayTag.className = "relay";
|
||||
relayList.append(relayTag);
|
||||
const relayBox = document.createElement("div");
|
||||
relayBox.className = "relayBox";
|
||||
relayList.append(relayBox);
|
||||
|
||||
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;
|
||||
const relay = document.createElement("div");
|
||||
relay.id = "relay" + relayIndex;
|
||||
relay.className = "relay";
|
||||
relayBox.append(relay);
|
||||
|
||||
const header = newDiv(relay, "flex");
|
||||
newInput(relayIndex, header, "name", "name", "text");
|
||||
newDiv(header, "countdown");
|
||||
newDiv(header, "state");
|
||||
|
||||
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();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user