From ba4710b2433bee54bd2f82a44a254232b8391df9 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Tue, 11 Aug 2026 15:58:28 +0700
Subject: [PATCH] feat: 'Last N' labels on history ranges; dropdown mirrors
 into date pickers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Quick-range options read 'Last 24 hours' … 'Last 90 days'; choosing one
fills the from/to date inputs with today and today-N (All time clears
them). Dropdown-driven loads still fetch the precise trailing-hours
window; hand-edited dates take over via state.useDates.
---
 src/static/dashboard.html | 22 +++++++++++++++++-----
 tests/test_dashboard.py   |  2 ++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/static/dashboard.html b/src/static/dashboard.html
index b8cf5a2..72befea 100644
--- a/src/static/dashboard.html
+++ b/src/static/dashboard.html
@@ -263,7 +263,7 @@
         <div style="display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap">
             <div><h2 id="history-title" style="margin:0;font-size:1rem">Station history</h2><p id="history-status" class="subtitle">Select a station to load the last 7 days</p></div>
             <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
-                <select id="history-range" style="padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:white"><option value="24">24 hours</option><option value="168" selected>7 days</option><option value="720">30 days</option><option value="2160">90 days</option><option value="876000">All time</option></select>
+                <select id="history-range" style="padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:white"><option value="24">Last 24 hours</option><option value="168" selected>Last 7 days</option><option value="720">Last 30 days</option><option value="2160">Last 90 days</option><option value="876000">All time</option></select>
                 <input type="date" id="history-start" title="From date" style="padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:white">
                 <span style="color:var(--muted)">–</span>
                 <input type="date" id="history-end" title="To date" style="padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:white">
@@ -286,7 +286,7 @@
 <script>
 (function () {
     'use strict';
-    const state = { map: null, layers: [], markers: new Map(), hasFit: false, historyChart: null, selectedStation: null, historyRequestId: 0, p1Stages: null, p1Now: null, rainLayer: null };
+    const state = { map: null, layers: [], markers: new Map(), hasFit: false, historyChart: null, selectedStation: null, historyRequestId: 0, p1Stages: null, p1Now: null, rainLayer: null, useDates: false, forecastExpanded: false };
     const $ = (id) => document.getElementById(id);
 
     function flowColor(flow) {
@@ -532,9 +532,10 @@
         $('history-title').textContent = `${stationCode} · station history`;
         $('history-status').textContent = 'Loading historical measurements…';
         try {
-            // Explicit dates win over the quick-range dropdown
+            // Hand-edited dates win; dropdown-driven loads use the precise
+            // trailing-hours window (the pickers just mirror it as dates).
             const startDate = $('history-start').value, endDate = $('history-end').value;
-            const query = startDate || endDate
+            const query = state.useDates && (startDate || endDate)
                 ? [startDate && `start=${startDate}`, endDate && `end=${endDate}`].filter(Boolean).join('&')
                 : `hours=${$('history-range').value}`;
             const response = await fetch(`/measurements/history/${encodeURIComponent(stationCode)}?${query}`);
@@ -1160,10 +1161,21 @@
     });
     $('replay-2024').addEventListener('click', replayFlood2024);
     $('history-range').addEventListener('change', () => {
-        $('history-start').value = ''; $('history-end').value = '';
+        state.useDates = false;
+        const hours = Number($('history-range').value);
+        if (hours >= 876000) {
+            $('history-start').value = ''; $('history-end').value = '';
+        } else {
+            // Mirror the chosen range into the date pickers (local dates)
+            const isoLocal = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+            const now = new Date();
+            $('history-end').value = isoLocal(now);
+            $('history-start').value = isoLocal(new Date(now.getTime() - hours * 3600 * 1000));
+        }
         if (state.selectedStation) loadHistory(state.selectedStation);
     });
     ['history-start', 'history-end'].forEach((id) => $(id).addEventListener('change', () => {
+        state.useDates = true;
         if (state.selectedStation) loadHistory(state.selectedStation);
     }));
     loadDashboard();
diff --git a/tests/test_dashboard.py b/tests/test_dashboard.py
index 9b5f1c4..6d9dc74 100644
--- a/tests/test_dashboard.py
+++ b/tests/test_dashboard.py
@@ -61,3 +61,5 @@ def test_dashboard_loads_station_history_chart():
     # Date-range picker alongside the quick-range dropdown
     assert 'id="history-start"' in html
     assert 'id="history-end"' in html
+    assert "Last 7 days" in html
+    assert "Last 90 days" in html