From 85d43231f54b7af73a458a6fac57c8defa0dac0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= <git@patrick-hassel.de>
Date: Fri, 29 Aug 2025 14:15:52 +0200
Subject: [PATCH] ui responsive

---
 index.html | 155 +++++++++++++++++++++++++++++++----------------------
 1 file changed, 90 insertions(+), 65 deletions(-)
diff --git a/index.html b/index.html
index 90c7445..cffcb6a 100644
--- a/index.html
+++ b/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();
