add ui, new config opts

2026-07-16 16:32:44 -04:00
parent 8effff311b
commit df01e060e4
33 changed files with 1104 additions and 37 deletions
@@ -0,0 +1,57 @@
+{{define "layout"}}<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>EcoNet Admin</title>
+  <link rel="stylesheet" href="/static/pico.classless.min.css">
+  <link rel="stylesheet" href="/static/app.css">
+  <script src="/static/htmx.min.js" defer></script>
+  <script>
+    // Set the theme before first paint to avoid a flash.
+    (function () {
+      var saved = localStorage.getItem("theme");
+      var theme = saved || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");
+      document.documentElement.setAttribute("data-theme", theme);
+    })();
+  </script>
+</head>
+<body>
+  <header class="app-header">
+    <hgroup>
+      <h1>EcoNet Admin</h1>
+      <p>Rheem water heater status &amp; control</p>
+    </hgroup>
+    <button id="theme-toggle" class="secondary theme-toggle" aria-label="Toggle dark mode" onclick="toggleTheme()"></button>
+  </header>
+
+  <main>
+    <div id="devices" class="device-grid" hx-get="/ui/devices" hx-trigger="every 30s" hx-swap="innerHTML">
+      {{template "devices" .}}
+    </div>
+  </main>
+
+  <dialog id="debug-modal" class="debug-modal">
+    <article>
+      <header>
+        <button aria-label="Close" rel="prev" onclick="document.getElementById('debug-modal').close()"></button>
+        <strong>Raw device JSON</strong>
+      </header>
+      <pre><code id="debug-modal-body">Loading…</code></pre>
+    </article>
+  </dialog>
+
+  <script>
+    function themeIcon(t) { return t === "dark" ? "☀️" : "🌙"; } // sun / moon
+    function toggleTheme() {
+      var cur = document.documentElement.getAttribute("data-theme");
+      var next = cur === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", next);
+      localStorage.setItem("theme", next);
+      document.getElementById("theme-toggle").textContent = themeIcon(next);
+    }
+    document.getElementById("theme-toggle").textContent =
+      themeIcon(document.documentElement.getAttribute("data-theme"));
+  </script>
+</body>
+</html>{{end}}