Initial commit

Only 2 blocks: time and weather.  Currently data is passed in formatted
strings made server-side (python) just for testing, later the formatting
should be client-side (html).

Also the "time" API might be redundant, ideally it should pass the city
names, and offsets (time zone), and then just use the system time
(otherwise DST jumps would need to be taken into account).

2 files changed, 74 insertions, 0 deletions

diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..1cc3e44
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,56 @@
+let polling = true
+const blocks = {
+  time: { interval: 30 * 1000, lastUpdate: 0, update: updateTime },        // 30s
+  weather: { interval: 30 * 60000, lastUpdate: 0, update: updateWeather } // 30min
+  // Add more: { interval: X, lastUpdate: 0, update: updateFunction }
+};
+let lastPoll = 0;
+
+function updateTime() {
+  fetch("/time")
+    .then(res => res.json())
+    .then(data => document.getElementById("time").innerText = data.time);
+}
+
+function updateWeather() {
+  const city = document.getElementById("city").value;
+  fetch(`/weather?city=${encodeURIComponent(city)}`)
+    .then(res => res.json())
+    .then(data => {
+      const weatherBlock = document.getElementById("weather");
+      if (!data) weatherBlock.innerText = "Error: Bad city";
+      else weatherBlock.innerText = `${data.summary}`;
+    });
+}
+
+function pollUpdates() {
+  if (!polling) return;
+  const now = Date.now();
+  Object.keys(blocks).forEach(key => {
+    const block = blocks[key];
+    if (now - block.lastUpdate >= block.interval) {
+      block.update();
+      block.lastUpdate = now;
+    }
+  });
+  lastPoll = now;
+}
+
+function reloadAll() {
+  Object.keys(blocks).forEach(key => {
+    blocks[key].update();
+    blocks[key].lastUpdate = Date.now();
+  });
+}
+
+// Header controls
+document.getElementById("reload").addEventListener("click", reloadAll);
+document.getElementById("pause").addEventListener("change", (e) => {
+  polling = e.target.checked;
+});
+
+// Initial load
+reloadAll();
+// Poll every 500ms to check intervals (fast enough for 1s updates, light on CPU)
+// maybe the 1s updates should be special case, but for now let's keep it simple
+setInterval(pollUpdates, 500);
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..ff01a13
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,18 @@
+body { margin: 0 }
+
+header { padding: 10px; text-align: center; }
+header button, header label { margin: 0 10px; }
+
+.grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 5px;
+}
+
+.block {
+    aspect-ratio: 1;
+    border: 1px solid #000;
+    background: #fff;
+    padding: 10px;
+    text-align: left;
+}