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() {
@@ -1128,42 +1173,9 @@ function handleResize(state) {
 
 // --- Bootstrap ---------------------------------------------------------------
 
-// --- Mobile Detection --------------------------------------------------------
-
-function isMobile() {
-    // Check both user agent and viewport width for robust detection
-    const uaMatch =
-        /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-            navigator.userAgent,
-        );
-    const narrowViewport = window.innerWidth <= 768;
-    return uaMatch || narrowViewport;
-}
-
-function buildMobileUI() {
-    const app = document.getElementById("app");
-    app.innerHTML = `
-    <div class="mx-auto px-[5%] py-8">
-      <header class="mb-8">
-        <h1 class="text-3xl font-bold text-white"><a href="https://git.eeqj.de/sneak/netwatch" target="_blank" rel="noopener" class="underline decoration-dashed decoration-gray-500 underline-offset-4">NetWatch</a> by <a href="https://sneak.berlin" target="_blank" rel="noopener" class="text-blue-400 underline hover:text-blue-300">@sneak</a></h1>
-        <p class="text-gray-400 text-sm mt-2">Real-time network latency monitor</p>
-      </header>
-      <div style="margin: 2rem auto; max-width: 500px; padding: 3rem 2rem; background: rgba(31, 41, 55, 0.7); border: 1px solid rgba(75, 85, 99, 0.5); border-radius: 1rem; text-align: center;">
-        <p style="font-size: 1.5rem; font-weight: 600; color: #d1d5db;">Not yet available on mobile.</p>
-        <p style="font-size: 0.875rem; color: #6b7280; margin-top: 1rem;">Please visit on a desktop browser for the full experience.</p>
-      </div>
-    </div>`;
-}
-
 async function init() {
     log.info("NetWatch starting");
 
-    if (isMobile()) {
-        log.info("Mobile device detected — showing placeholder");
-        buildMobileUI();
-        return;
-    }
-
     // Probe common gateway IPs to find the local router
     const gateway = await detectGateway();
     const localHosts = [LOCAL_CPE];
@@ -1173,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");
 
@@ -1227,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) => {