Today Commit

templates/index.html

@@ -69,6 +69,7 @@ body{font-family:system-ui,monospace;background:#0f0f14;color:#e0e0e0;overflow:h
 var POLL_MS = {{ poll_ms }};
 var SHM = "{{ shm_dir }}";
 var DB_PATH = "{{ db_path }}";
+var RUN_DATE = "{{ date }}";
 var cameras = [], activeCam = null, lastUpdate = 0;
 var perCam = {}, lastFramePerCam = {};
 
@@ -114,6 +115,7 @@ function selectCam(id) {
     document.getElementById("waiting-msg").style.display = "none";
     document.getElementById("frame-overlay").style.display = "block";
     document.getElementById("frame-img").style.display = "block";
+    document.getElementById("frame-img").src = "/stream/" + id;
     renderCamList();
     refreshNow();
 }
@@ -124,7 +126,6 @@ function poll() {
     fetch("/shm/" + activeCam + "/stats.json?t=" + t).then(r => r.ok ? r.json() : null).then(s => {
         if (!s) { setOffline(); return; }
         lastUpdate = Date.now();
-        var oldFrame = lastFramePerCam[activeCam] || 0;
         lastFramePerCam[activeCam] = s.frame_index;
         perCam[activeCam] = { total: s.total_entered_count, inside: s.inside_box_count, frame: s.frame_index, tracks: s.track_count, speed: s.smoothed_speed };
         document.getElementById("s-total").textContent = s.total_entered_count;
@@ -137,18 +138,11 @@ function poll() {
         tag.textContent = activeCam + " \u2022 " + status;
         tag.className = "tag " + (s.backward_active ? "off" : "live");
         document.getElementById("cam-count").textContent = s.total_entered_count;
-        // only refresh frame when index changes (every 5 frames with interval_frames=5)
-        if (s.frame_index != oldFrame) {
-            document.getElementById("frame-img").src = "/shm/" + activeCam + "/frame.jpg?t=" + t;
-        }
     });
 }
 
 function refreshNow() {
     poll();
-    // also update the frame immediately
-    var t = Date.now();
-    document.getElementById("frame-img").src = "/shm/" + activeCam + "/frame.jpg?t=" + t;
 }
 
 function showWaiting(msg) {
@@ -163,6 +157,8 @@ function setOffline() {
     document.getElementById("cam-tag").className = "tag off";
 }
 
+function updateSidebar() {}
+
 function renderCamList() {
     var ul = document.getElementById("cam-list");
     ul.innerHTML = cameras.map(function(c) {
@@ -180,15 +176,34 @@ function updateClock() {
 
 function loadHistory() {
     if (!DB_PATH) return;
+    var panel = document.getElementById("db-panel");
+    panel.style.display = "block";
+
+    // per-day totals
     fetch("/api/db/history").then(r => r.json()).then(rows => {
-        var panel = document.getElementById("db-panel");
-        if (!rows.length) { panel.style.display = "none"; return; }
-        panel.style.display = "block";
-        panel.innerHTML = "<h3>&#x1f4ca; History</h3>" + rows.map(function(r) {
-            return '<div class="db-row"><span>' + r.date + ' ' + r.location + '</span>' +
-                '<span class="db-total">' + r.total.toLocaleString() + '</span></div>';
-        }).join("");
+        var html = "<h3>&#x1f4ca; History</h3>";
+        if (rows.length) {
+            html += rows.map(function(r) {
+                return '<div class="db-row"><span>' + r.date + ' ' + r.location + '</span>' +
+                    '<span class="db-total">' + r.total.toLocaleString() + '</span></div>';
+            }).join("");
+        }
+        panel.innerHTML = html;
     });
+
+    // per-camera breakdown for current date
+    if (RUN_DATE && RUN_DATE !== "today") {
+        fetch("/api/db/date/" + RUN_DATE).then(r => r.json()).then(data => {
+            if (!data.cameras || !data.cameras.length) return;
+            var html = panel.innerHTML;
+            html += '<h3 style="margin-top:12px">&#x1f4f9; ' + RUN_DATE + ' (' + (data.total.total || 0).toLocaleString() + ')</h3>';
+            data.cameras.forEach(function(c) {
+                html += '<div class="db-row"><span>' + c.camera_id + '</span>' +
+                    '<span class="db-total">' + c.total_entered.toLocaleString() + '</span></div>';
+            });
+            panel.innerHTML = html;
+        });
+    }
 }
 
 setTimeout(function() { if (activeCam) refreshNow(); }, 500);