From b86c822010a4adae008e82f9c4a01a5d310db60d Mon Sep 17 00:00:00 2001
From: Graham McIntire <graham@mcintire.me>
Date: Wed, 1 Apr 2026 10:38:02 -0500
Subject: [PATCH] Add live UTC clock to map control panel

---
 assets/js/app.js                       | 18 +++++++++++++++++-
 lib/microwaveprop_web/live/map_live.ex | 10 +++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 3d380a4f..7afaf312 100644
--- a/assets/js/app.js
+++ b/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
diff --git a/lib/microwaveprop_web/live/map_live.ex b/lib/microwaveprop_web/live/map_live.ex
index 9e6df334..8e32d205 100644
--- a/lib/microwaveprop_web/live/map_live.ex
+++ b/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 --%>