Add live UTC clock to map control panel

assets/js/app.js

@@ -31,11 +31,27 @@ import topbar from "../vendor/topbar"
 
 import {PropagationMap} from "./propagation_map_hook"
 
+const UtcClock = {
+  mounted() {
+    this.tick()
+    this.timer = setInterval(() => this.tick(), 10_000)
+  },
+  tick() {
+    const now = new Date()
+    const h = now.getUTCHours().toString().padStart(2, "0")
+    const m = now.getUTCMinutes().toString().padStart(2, "0")
+    this.el.textContent = `${h}:${m} UTC`
+  },
+  destroyed() {
+    clearInterval(this.timer)
+  }
+}
+
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  hooks: {...colocatedHooks, PropagationMap},
+  hooks: {...colocatedHooks, PropagationMap, UtcClock},
 })
 
 // Show progress bar on live navigation and form submits

lib/microwaveprop_web/live/map_live.ex

@@ -271,9 +271,13 @@ defmodule MicrowavepropWeb.MapLive do
       <%!-- Top-left control panel --%>
       <div id="map-controls" class="absolute top-3 left-14 z-[1000] flex flex-col gap-2">
         <div class="bg-base-100/90 shadow rounded-box border border-base-300 p-3 flex flex-col gap-2">
-          <div class="font-bold text-sm leading-tight px-1">
-            North Texas Microwave Society
-            <div class="font-normal text-xs opacity-70">Propagation Map</div>
+          <div class="font-bold text-sm leading-tight px-1 flex items-baseline justify-between gap-3">
+            <div>
+              North Texas Microwave Society
+              <div class="font-normal text-xs opacity-70">Propagation Map</div>
+            </div>
+            <div id="utc-clock" phx-hook="UtcClock" class="font-mono text-xs opacity-70 tabular-nums">
+            </div>
           </div>
 
           <%!-- Band selector --%>