update giao diện web

2026-09-13 17:24:03 +07:00
1 parent 1682808956
commit 4b5e95500f
@@ -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);