Document local server requirement

kort7/RUN.md

@@ -0,0 +1,23 @@
+# Run kort7 locally
+
+Kør ikke appen direkte som `file:///.../kort7.html`.
+
+Brug i stedet en lille lokal webserver:
+
+```bash
+cd /home/user/kort/kort7
+python3 -m http.server 4173
+```
+
+Åbn derefter i browseren:
+
+```text
+http://127.0.0.1:4173/kort7.html
+```
+
+## Hvorfor?
+
+`file://` kan give anderledes eller upålidelig browser-adfærd for denne demo.
+Det gælder især UI-opdateringer, klikadfærd og script-loading.
+
+Hvis noget ser dødt eller mærkeligt ud, så tjek først at du kører via `http://127.0.0.1:4173/...`.

kort7/app.js

@@ -20,11 +20,16 @@ L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
 const statusEl = document.getElementById("status");
 const alertsEl = document.getElementById("presenceAlerts");
 const selectedVehicleInfoEl = document.getElementById("selectedVehicleInfo");
+const runtimeWarningEl = document.getElementById("runtimeWarning");
 const offmapIndicatorsEl = document.getElementById("offmapIndicators");
 const playBtn = document.getElementById("playBtn");
 const pauseBtn = document.getElementById("pauseBtn");
 const resetBtn = document.getElementById("resetBtn");
 
+if (window.location.protocol === "file:") {
+  runtimeWarningEl.hidden = false;
+}
+
 let forcedPopupVehicle = null;
 
 function highlightOffmapIndicator(name) {

kort7/kort7.html

@@ -76,6 +76,20 @@
 
     .alert-item strong { display:block; margin-bottom:2px; }
 
+    .runtime-warning {
+      margin-top: 10px;
+      padding: 8px 10px;
+      border-radius: 8px;
+      border: 1px solid #c2410c;
+      background: rgba(255, 237, 213, 0.96);
+      color: #7c2d12;
+      font: 12px/1.35 system-ui, sans-serif;
+    }
+
+    .runtime-warning[hidden] {
+      display: none;
+    }
+
     .offmap-indicators {
       position: absolute;
       right: 14px;
@@ -179,6 +193,9 @@
     </div>
     <div class="status" id="status"></div>
     <div class="selection" id="selectedVehicleInfo">Klik på et køretøj eller en hjørneindikator for detaljer.</div>
+    <div class="runtime-warning" id="runtimeWarning" hidden>
+      Du kører appen via <code>file://</code>. Brug en lokal webserver i stedet, fx <code>python3 -m http.server 4173</code>, og åbn <code>http://127.0.0.1:4173/kort7.html</code>.
+    </div>
     <div class="alerts" id="presenceAlerts"></div>
   </div>
 

kort7/tests/kort7.spec.js

@@ -13,6 +13,7 @@ test.describe('kort7 vehicle map', () => {
     await expect(page.locator('#map')).toBeVisible();
     await waitForVehicleMarkers(page);
     await expect(page.locator('#status')).toContainText('Simuleret tid');
+    await expect(page.locator('#runtimeWarning')).toBeHidden();
   });
 
   test('shows vehicle popup with details when clicking a marker', async ({ page }) => {