update giao diện web

orangepi-server/static/app.js

@@ -52,6 +52,19 @@ const I18N = {
         edit_zone_y1: "Y1",
         edit_zone_x2: "X2",
         edit_zone_y2: "Y2",
+
+        tab_radar:   "Radar",
+        tab_history: "Lịch sử",
+        history_title: "Lịch sử phát hiện",
+        history_summary_empty: "Chưa có dữ liệu — hãy vẫy tay trước radar để tạo bản ghi đầu tiên.",
+        history_summary_with: "Tổng {total} lần detect · {uniq} slot khác nhau trong ngày.",
+        history_date: "Ngày",
+        history_hour: "Giờ",
+        history_refresh: "Tải lại",
+        history_hour_bucket: "{hh}h — {n} lần detect",
+        history_no_data: "Không có bản ghi nào trong khoảng thời gian đã chọn",
+        history_detected: "Phát hiện",
+        history_xy: "Tọa độ",
     },
     en: {
         page_title: "ESP32 LD2453 — Radar Web Visualizer",
@@ -100,6 +113,19 @@ const I18N = {
         edit_zone_y1: "Y1",
         edit_zone_x2: "X2",
         edit_zone_y2: "Y2",
+
+        tab_radar:   "Radar",
+        tab_history: "History",
+        history_title: "Detection history",
+        history_summary_empty: "No records yet — wave in front of the radar to create the first row.",
+        history_summary_with: "Total {total} detections · {uniq} different slots for the day.",
+        history_date: "Date",
+        history_hour: "Hour",
+        history_refresh: "Refresh",
+        history_hour_bucket: "{hh}:00 — {n} detections",
+        history_no_data: "No detections in the selected window",
+        history_detected: "Detected",
+        history_xy: "Coordinates",
     },
 };
 
@@ -803,6 +829,139 @@ function loop() {
     requestAnimationFrame(loop);
 }
 
+/* ---------- Tab wiring + History tab ---------- */
+function switchTab(tabName) {
+    if (!["radar", "history"].includes(tabName)) tabName = "radar";
+    State.activeTab = tabName;
+    localStorage.setItem("activeTab", tabName);
+
+    $$(".tab-btn").forEach(b => {
+        const active = (b.dataset.tab === tabName);
+        b.classList.toggle("tab-active", active);
+        b.setAttribute("aria-selected", String(active));
+    });
+    $$("[data-tab-panel]").forEach(p => {
+        p.hidden = (p.dataset.tabPanel !== tabName);
+    });
+
+    if (tabName === "history") refreshHistory();
+}
+
+function pad2(n) { return String(n).padStart(2, "0"); }
+function todayIso() {
+    const d = new Date();
+    return `${d.getFullYear()}-${pad2(d.getMonth()+1)}-${pad2(d.getDate())}`;
+}
+
+function getHistoryFilters() {
+    const dateEl = $("#historyDate");
+    const hs = $("#hourStart").value;
+    const he = $("#hourEnd").value;
+    return {
+        date: dateEl && dateEl.value ? dateEl.value : todayIso(),
+        hour_start: hs === "" || Number.isNaN(+hs) ? null : Math.min(23, Math.max(0, +hs | 0)),
+        hour_end:   he === "" || Number.isNaN(+he) ? null : Math.min(23, Math.max(0, +he | 0)),
+    };
+}
+
+async function refreshHistory() {
+    const summary = $("#historySummary");
+    const listEl = $("#historyList");
+    const hourlyEl = $("#historyHourly");
+    if (!listEl || !summary) return;
+
+    const f = getHistoryFilters();
+    const params = new URLSearchParams();
+    params.set("date", f.date);
+    if (f.hour_start != null) params.set("hour_start", String(f.hour_start));
+    if (f.hour_end   != null) params.set("hour_end",   String(f.hour_end));
+    params.set("limit", "500");
+
+    try {
+        listEl.innerHTML = "";
+        hourlyEl.innerHTML = "";
+        summary.textContent = i18n("history_summary_empty");
+        const res = await fetch("/api/history?" + params.toString());
+        if (!res.ok) throw new Error("HTTP " + res.status);
+        const data = await res.json();
+        renderHistory(data);
+    } catch (err) {
+        console.error(err);
+        listEl.innerHTML = `<div class="history-empty">${err.message || err}</div>`;
+    }
+}
+
+function renderHistory(data) {
+    const summary = $("#historySummary");
+    const listEl = $("#historyList");
+    const hourlyEl = $("#historyHourly");
+    if (!summary || !listEl || !hourlyEl) return;
+
+    const total = (data.total_detections | 0);
+    const uniq  = (data.unique_slots | 0);
+    if (total <= 0) {
+        summary.textContent = i18n("history_summary_empty");
+    } else {
+        summary.textContent = i18n("history_summary_with")
+            .replace("{total}", String(total))
+            .replace("{uniq}", String(uniq));
+    }
+
+    /* 24-hour bars */
+    hourlyEl.innerHTML = "";
+    const hourly = Array.isArray(data.hourly) ? data.hourly : [];
+    const maxCount = hourly.reduce((m, h) => Math.max(m, h.count | 0), 0);
+    hourly.forEach(h => {
+        const hh = pad2(h.hour | 0);
+        const count = h.count | 0;
+        const pct = maxCount > 0 ? Math.max(4, Math.round((count / maxCount) * 100)) : 0;
+        const el = document.createElement("div");
+        el.className = "hour-bar";
+        el.dataset.count = String(count);
+        el.style.height = (count > 0 ? pct : 2) + "%";
+        el.title = i18n("history_hour_bucket")
+            .replace("{hh}", hh)
+            .replace("{n}", String(count));
+        hourlyEl.appendChild(el);
+    });
+
+    /* Row list */
+    const rows = Array.isArray(data.rows) ? data.rows : [];
+    if (!rows.length) {
+        listEl.innerHTML = `<div class="history-empty">${i18n("history_no_data")}</div>`;
+        return;
+    }
+    const frag = document.createDocumentFragment();
+    rows.forEach(r => {
+        const iso = String(r.ts_local || "");
+        const dt = new Date(iso.includes("T") ? iso : new Date((r.unixtime|0) * 1000).toISOString());
+        const hh = pad2(dt.getHours());
+        const mm = pad2(dt.getMinutes());
+        const ss = pad2(dt.getSeconds());
+        const slot = (r.slot | 0);
+        const x = (r.x_mm | 0);
+        const y = (r.y_mm | 0);
+        const dist = Number(r.distance_mm) || 0;
+        const ang  = Number(r.angle_deg) || 0;
+        const spd  = (r.speed_cm_s | 0);
+
+        const row = document.createElement("div");
+        row.className = "detect";
+        row.innerHTML = `
+            <div class="detect-time">${hh}:${mm}:${ss}</div>
+            <div class="detect-slot s${Math.min(3, Math.max(1, slot))}">T${slot}</div>
+            <div class="detect-meta">
+                <span class="kv"><span>${i18n("history_xy")}:</span><b>(${x}, ${y})mm</b></span>
+                <span class="kv"><span>${i18n("angle")}:</span><b>${ang.toFixed(1)}°</b></span>
+                <span class="kv"><span>${i18n("speed")}:</span><b>${spd > 0 ? "+" : ""}${spd} cm/s</b></span>
+            </div>
+            <div class="detect-dist">${(dist/1000).toFixed(2)} m</div>
+        `;
+        frag.appendChild(row);
+    });
+    listEl.appendChild(frag);
+}
+
 /* ---------- Wiring up ---------- */
 function initUI() {
     /* Theme toggle */
@@ -818,7 +977,6 @@ function initUI() {
         localStorage.setItem("lang", State.lang);
         applyI18n();
         refreshPanels();
-        buildEditorInputs();
     });
 
     /* Tool toggles */
@@ -826,38 +984,22 @@ function initUI() {
     $("#chkTrails").addEventListener("change", e => State.options.trails = e.target.checked);
     $("#chkLabels").addEventListener("change", e => State.options.labels = e.target.checked);
 
-    /* Zone editor */
-    $("#btnEditZones").addEventListener("click", () => {
-        buildEditorInputs();
-        $("#zoneEditor").hidden = false;
-    });
-    $("#btnCancelZones").addEventListener("click", () => {
-        $("#zoneEditor").hidden = true;
-    });
-    $("#btnResetZones").addEventListener("click", () => {
-        DEFAULT_ZONES.forEach((def, idx) => {
-            const z = State.radar.zones[idx];
-            z.x1 = def.x1; z.y1 = def.y1; z.x2 = def.x2; z.y2 = def.y2;
-        });
-        buildEditorInputs();
-    });
-    $("#zoneEditor").addEventListener("submit", async (e) => {
-        e.preventDefault();
-        const payload = collectEditorPayload();
-        try {
-            const res = await fetch("/api/zones", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify(payload),
-            });
-            if (!res.ok) throw new Error("HTTP " + res.status);
-            toast(i18n("zone_saved"), "success");
-            $("#zoneEditor").hidden = true;
-        } catch (err) {
-            console.error(err);
-            toast(i18n("zone_save_error") + ": " + err.message, "error");
-        }
+    /* Tabs: Radar / History */
+    $$(".tab-btn").forEach(btn => {
+        btn.addEventListener("click", () => switchTab(btn.dataset.tab));
     });
+    State.activeTab = localStorage.getItem("activeTab") || "radar";
+    switchTab(State.activeTab);
+
+    /* History filters */
+    const dateEl = $("#historyDate");
+    if (dateEl) dateEl.value = todayIso();
+    if (dateEl) dateEl.addEventListener("change", () => refreshHistory());
+    const hs = $("#hourStart"), he = $("#hourEnd");
+    if (hs) hs.addEventListener("change", () => refreshHistory());
+    if (he) he.addEventListener("change", () => refreshHistory());
+    const btnRef = $("#btnRefreshHistory");
+    if (btnRef) btnRef.addEventListener("click", () => refreshHistory());
 
     /* Canvas resize */
     window.addEventListener("resize", resizeCanvas);

orangepi-server/static/style.css

@@ -184,6 +184,7 @@ input, button { font-family: inherit; color: inherit; }
     .app-main { padding: 12px; gap: 14px; }
     .status-chip span:last-child { display: none; }
     .status-chip { padding: 6px 8px; }
+    .legend { display: none !important; }
 }
 
 /* ---------- Panels ---------- */
@@ -460,6 +461,140 @@ input, button { font-family: inherit; color: inherit; }
     box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-blue) 30%, transparent);
 }
 .btn-primary:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-blue) 40%, transparent); }
+.btn-sm { padding: 6px 10px; font-size: 11px; border-radius: 8px; }
+
+/* Tabs (Radar / History) */
+.tabs-row {
+    display: flex; gap: 6px; padding: 6px;
+    background: var(--bg-elev-1);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    margin-bottom: 12px;
+}
+.tab-btn {
+    flex: 1 1 0;
+    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+    padding: 8px 12px;
+    background: transparent; color: var(--text-muted);
+    border: none; border-radius: 10px;
+    font-size: 13px; font-weight: 600; cursor: pointer;
+    transition: all .2s;
+}
+.tab-btn:hover { color: var(--text); }
+.tab-btn.tab-active {
+    background: var(--surface); color: var(--text);
+    border: 1px solid var(--border);
+    box-shadow: var(--shadow-sm);
+}
+.tab-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.tab-panel { display: flex; flex-direction: column; gap: 16px; }
+
+/* History card + filters */
+.history-toolbar {
+    display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
+    margin-bottom: 16px;
+}
+.history-toolbar-title h3 { margin-bottom: 4px; }
+.history-summary { font-size: 12px; color: var(--text-muted); }
+.history-filters {
+    display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
+    justify-content: flex-end;
+}
+.field { display: inline-flex; flex-direction: column; gap: 4px; }
+.field > span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
+.field input {
+    height: 34px; padding: 0 10px;
+    border-radius: 8px; border: 1px solid var(--border);
+    background: var(--bg-elev-1); color: var(--text);
+    font-size: 12px; font-family: "JetBrains Mono", monospace;
+}
+.field-range .range { display: inline-flex; align-items: center; gap: 6px; }
+.field-range .range input { width: 68px; }
+.field-range .sep { color: var(--text-dim); font-size: 12px; }
+
+/* 24-hour bar summary */
+.history-hourly {
+    display: grid; grid-template-columns: repeat(24, 1fr);
+    gap: 3px; align-items: end;
+    height: 90px; margin-bottom: 18px;
+    padding: 8px 6px;
+    background: var(--bg-elev-1);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+}
+.hour-bar {
+    position: relative;
+    width: 100%;
+    background: linear-gradient(180deg, var(--accent-blue), color-mix(in srgb, var(--accent-mauve) 60%, var(--accent-blue)));
+    border-radius: 3px 3px 0 0;
+    min-height: 2px;
+    max-height: 100%;
+    transition: transform .2s;
+    cursor: help;
+}
+.hour-bar:hover { transform: scaleY(1.1); }
+.hour-bar[data-count="0"] { background: var(--bg-elev-2); opacity: .6; }
+.hour-bar[title]::after {
+    content: attr(title);
+    position: absolute; bottom: calc(100% + 6px); left: 50%;
+    transform: translateX(-50%);
+    background: var(--surface); border: 1px solid var(--border);
+    color: var(--text); font-size: 11px; padding: 2px 6px; border-radius: 6px;
+    white-space: nowrap; display: none; box-shadow: var(--shadow-sm);
+}
+.hour-bar:hover[title]::after { display: block; }
+
+/* Detection list items */
+.history-list {
+    display: flex; flex-direction: column; gap: 8px;
+    max-height: 560px; overflow: auto;
+    padding-right: 4px;
+}
+.history-empty {
+    padding: 22px 14px; text-align: center;
+    color: var(--text-muted); font-size: 13px;
+    border: 1px dashed var(--border); border-radius: 10px;
+}
+.detect {
+    display: grid; grid-template-columns: auto auto 1fr auto;
+    gap: 10px 14px; align-items: center;
+    padding: 10px 12px;
+    background: var(--bg-elev-1);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    transition: background .2s;
+}
+.detect:hover { background: var(--bg-elev-2); }
+.detect-time {
+    font-family: "JetBrains Mono", monospace;
+    font-size: 12px; color: var(--accent-blue); font-weight: 700;
+}
+.detect-slot {
+    width: 36px; height: 36px; border-radius: 10px;
+    display: inline-flex; align-items: center; justify-content: center;
+    font-weight: 800; font-size: 14px;
+    border: 1px solid;
+}
+.detect-slot.s1 { background: color-mix(in srgb, var(--z1) 30%, transparent); color: var(--z1); border-color: color-mix(in srgb, var(--z1) 60%, transparent); }
+.detect-slot.s2 { background: color-mix(in srgb, var(--z2) 30%, transparent); color: var(--z2); border-color: color-mix(in srgb, var(--z2) 60%, transparent); }
+.detect-slot.s3 { background: color-mix(in srgb, var(--z3) 30%, transparent); color: var(--z3); border-color: color-mix(in srgb, var(--z3) 60%, transparent); }
+.detect-meta {
+    display: flex; flex-wrap: wrap; gap: 10px 14px;
+    font-size: 12px; color: var(--text-muted);
+}
+.detect-meta .kv { display: inline-flex; gap: 4px; align-items: baseline; }
+.detect-meta .kv b { color: var(--text); font-weight: 600; font-family: "JetBrains Mono", monospace; }
+.detect-dist {
+    font-weight: 700; color: var(--text); font-size: 14px;
+    font-family: "JetBrains Mono", monospace;
+}
+
+@media (max-width: 600px) {
+    .history-toolbar { grid-template-columns: 1fr; }
+    .history-filters { justify-content: flex-start; }
+    .detect { grid-template-columns: auto 1fr auto; row-gap: 6px; }
+    .detect-time { grid-column: 1 / -1; }
+}
 
 /* Toast */
 .toast-container {