Change block layout, add time visualization

Block layout is now flex.

1 files changed, 14 insertions, 4 deletions

diff --git a/static/script.js b/static/script.js
index 1cc3e44..f81f9ef 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,3 +1,5 @@
+import { initTimeVisualizer } from './timeVisualizer.js';
+
 let polling = true
 const blocks = {
   time: { interval: 30 * 1000, lastUpdate: 0, update: updateTime },        // 30s
@@ -9,7 +11,9 @@ let lastPoll = 0;
 function updateTime() {
   fetch("/time")
     .then(res => res.json())
-    .then(data => document.getElementById("time").innerText = data.time);
+    .then(data => {
+        document.getElementById("weatherSummary").innerText = data.time;
+    });
 }
 
 function updateWeather() {
@@ -17,9 +21,12 @@ function updateWeather() {
   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}`;
+      if (!data) {
+        document.getElementById("weather-summary").innerText = `Error, "${city}" city not found`;
+        return
+      }
+        document.getElementById("weather-summary").innerText = data.summary;
+        document.getElementById("weather-icon").src = data.icon_url;
     });
 }
 
@@ -54,3 +61,6 @@ 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);
+
+// timeVisualizer
+initTimeVisualizer('timeVisualizer');