WIP: report buffer — add client geolocation fetch and telemetry report builder in main.js

src/main.js

@@ -140,6 +140,50 @@ const GATEWAY_CANDIDATES = [
     "http://10.0.0.1",
 ];
 
+// --- Geolocation via API -----------------------------------------------------
+
+async function fetchGeoInfo() {
+    try {
+        const res = await fetch("https://freeipapi.com/api/json/");
+        if (!res.ok) return null;
+        return await res.json();
+    } catch {
+        return null;
+    }
+}
+
+// --- Telemetry Report --------------------------------------------------------
+
+function getClientId() {
+    const key = "netwatch_client_id";
+    let id = localStorage.getItem(key);
+    if (!id) {
+        id = crypto.randomUUID();
+        localStorage.setItem(key, id);
+    }
+    return id;
+}
+
+const clientId = getClientId();
+
+function buildReport(state) {
+    return {
+        clientId,
+        timestamp: new Date().toISOString(),
+        geo: state.geoInfo,
+        hosts: state.wan.map((h) => ({
+            name: h.name,
+            url: h.url,
+            status: h.status,
+            history: h.history.map((s) => ({
+                t: s.timestamp,
+                latency: s.latency,
+                error: s.error || null,
+            })),
+        })),
+    };
+}
+
 // --- Formatting Helpers ------------------------------------------------------
 
 function formatUTCTimestamp(date) {
@@ -269,6 +313,7 @@ class AppState {
         this.local = localHosts.map((h) => new HostState(h));
         this.paused = false;
         this.tickCount = 0;
+        this.geoInfo = null;
     }
 
     get allHosts() {
@@ -1140,6 +1185,9 @@ async function init() {
     }
 
     const state = new AppState(localHosts);
+    fetchGeoInfo().then((geo) => {
+        state.geoInfo = geo;
+    });
     buildUI(state);
     log.info("UI built, starting tick loop");
 
@@ -1194,6 +1242,11 @@ async function init() {
     doTick();
     let tickIntervalId = setInterval(doTick, CONFIG.updateInterval);
 
+    setInterval(() => {
+        if (state.tickCount > 1)
+            console.log("NetWatch report:", buildReport(state));
+    }, 60000);
+
     document
         .getElementById("interval-select")
         .addEventListener("change", (e) => {

src/styles.css

@@ -21,96 +21,3 @@ body {
         rgba(255, 255, 255, 0) 100%
     );
 }
-
-/* ---- Mobile responsive layout (portrait / narrow viewports) ---- */
-@media (max-width: 768px) {
-    /* Header: stack title and controls vertically */
-    header .flex.items-center.justify-between {
-        flex-direction: column;
-        align-items: flex-start !important;
-        gap: 1rem;
-    }
-
-    header .flex.flex-col.items-end {
-        align-items: flex-start !important;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 0.75rem;
-    }
-
-    /* Pause button: smaller on mobile */
-    #pause-btn {
-        padding: 0.5rem 1rem;
-    }
-
-    #pause-btn svg {
-        width: 1.25rem;
-        height: 1.25rem;
-    }
-
-    #pause-text {
-        font-size: 0.875rem;
-    }
-
-    /* Summary box: wrap into a grid for readability */
-    #summary {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.25rem 0.5rem;
-        justify-content: center;
-        line-height: 1.6;
-    }
-
-    /* Hide the pipe separators on mobile */
-    #summary .text-gray-600.mx-3 {
-        display: none;
-    }
-
-    /* Host row: stack vertically */
-    .host-row .flex.items-center.gap-4 {
-        flex-direction: column;
-        align-items: stretch !important;
-        gap: 0.5rem;
-    }
-
-    /* Info section: full width, remove fixed width */
-    .host-row .w-\[420px\] {
-        width: 100% !important;
-        display: grid;
-        grid-template-columns: 1fr auto;
-        align-items: center;
-    }
-
-    /* Host name row with dot */
-    .host-row .flex.items-center.gap-2.min-w-\[200px\] {
-        min-width: 0;
-    }
-
-    /* Latency value: slightly smaller on mobile */
-    .host-row .latency-value {
-        font-size: 1.875rem;
-        line-height: 2.25rem;
-    }
-
-    /* Sparkline: full width below the info */
-    .host-row .sparkline-container {
-        width: 100%;
-        flex-shrink: 0;
-    }
-
-    /* Pin button: inline with the host info */
-    .host-row .pin-btn {
-        position: absolute;
-        right: 0.5rem;
-        top: 0.5rem;
-    }
-
-    .host-row {
-        position: relative;
-    }
-
-    /* Footer legend: wrap nicely */
-    footer p {
-        line-height: 1.8;
-    }
-}