ui look

index.html

@@ -3,35 +3,53 @@
   <title id="title"></title>
   <link rel="icon" type="image/svg" href="icon.svg">
   <style>
-      .relay {
-          display: flex;
-          flex-direction: row;
-          text-align: center;
-      }
+    body {
+      font-family: sans-serif;
+      margin: 0;
+    }
 
-      .relay > * {
-          flex: 1;
-      }
+    .relay {
+      display: flex;
+      flex-direction: row;
+      text-align: center;
+    }
 
-      .name {
-          flex: 3;
-      }
+    .relay > * {
+      flex: 1;
+      margin: 0.25em;
+      padding: 0.25em;
+    }
 
-      .header {
-          font-weight: bold;;
-      }
+    .name {
+      flex: 2;
+    }
 
-      input, select, button {
-          width: 100%;
-      }
+    .header {
+      font-weight: bold;;
+    }
 
-      input[type=number], select {
-          text-align: right;
-      }
+    input, select, button {
+      width: 100%;
+    }
 
-      #info {
-          display: none;
-      }
+    input[type=number], select {
+      text-align: right;
+    }
+
+    .state {
+    }
+
+    .stateOn {
+      background-color: palegreen;
+    }
+
+    .stateOff {
+      background-color: indianred;
+    }
+
+    #info {
+      display: none;
+    }
 
   </style>
 </head>
@@ -78,6 +96,19 @@
     }
   }
 
+  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");
+    }
+  }
+
   function request(query = "") {
     if (timeout) {
       clearTimeout(timeout);
@@ -94,7 +125,7 @@
           const relayData = data.relays[index];
           const relayTag = document.getElementById("relay" + index) || create(index);
           updateValue(relayTag, "name", "input", relayData.name);
-          relayTag.getElementsByClassName("state")[0].innerText = relayData.state ? "Ein" : "Aus";
+          updateState(relayTag, relayData.state);
           updateValue(relayTag, "onMillis", "input", relayData.onMillis);
           updateValue(relayTag, "offMillis", "input", relayData.offMillis);
           updateValue(relayTag, "initial", "select", relayData.initial);