Add Snapshot

templates/dashboard.html

@@ -404,7 +404,56 @@
     display: flex; align-items: center; justify-content: space-between;
     margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
   }
-  .table-toolbar .toolbar-group { display: flex; align-items: center; gap: 8px; }
+  .table-toolbar .toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+
+  /* Snapshot gallery */
+  .snapshot-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 14px;
+  }
+  .snap-card {
+    background: var(--cell-bg);
+    border: 1px solid var(--cell-border); border-radius: 12px;
+    overflow: hidden; cursor: pointer;
+    transition: border-color 0.2s, transform 0.15s;
+  }
+  .snap-card:hover { border-color: var(--accent); transform: translateY(-2px); }
+  .snap-thumb {
+    width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
+    background: #000;
+  }
+  .snap-info { padding: 8px 10px; }
+  .snap-info .si-top {
+    display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
+  }
+  .snap-kind {
+    font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
+    padding: 2px 8px; border-radius: 8px;
+  }
+  .snap-kind.in { background: rgba(0,255,136,0.12); color: var(--accent4); }
+  .snap-kind.out { background: rgba(255,45,120,0.12); color: var(--accent3); }
+  .snap-kind.detect { background: rgba(0,240,255,0.10); color: var(--accent); }
+  .snap-tid {
+    font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700;
+    color: var(--text-primary);
+  }
+  .snap-time { font-size: 9px; color: var(--text-secondary); }
+
+  .snap-lightbox {
+    position: relative;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-glow); border-radius: var(--radius);
+    padding: 14px; max-width: 92vw; max-height: 90vh;
+    display: flex; flex-direction: column; align-items: center;
+  }
+  .snap-lightbox img {
+    max-width: 88vw; max-height: 78vh; border-radius: 10px; display: block;
+  }
+  .snap-modal-meta {
+    margin-top: 10px; font-size: 11px; color: var(--text-secondary); letter-spacing: 1px;
+    text-align: center;
+  }
 
   .table-toolbar input[type="date"] {
     font-family: 'JetBrains Mono', monospace; font-size: 11px;
@@ -769,9 +818,47 @@
     </div>
   </div>
 
+  <!-- Snapshots -->
+  <div class="table-panel">
+    <div class="table-toolbar">
+      <div>
+        <span class="section-title" style="margin-bottom:0;">&#9673; Crossing Snapshots</span>
+        <div style="font-size:10px;color:var(--text-secondary);letter-spacing:1px;">Detected & counted frames — correlate by track ID</div>
+      </div>
+      <div class="toolbar-group">
+        <div class="chart-filters" id="snap-filters">
+          <button class="active" data-kind="all" onclick="loadSnapshots('all')">ALL</button>
+          <button data-kind="in" onclick="loadSnapshots('in')">IN</button>
+          <button data-kind="out" onclick="loadSnapshots('out')">OUT</button>
+          {% if show_detect %}<button data-kind="detect" onclick="loadSnapshots('detect')">DETECT</button>{% endif %}
+        </div>
+        <input type="date" id="snap-date-filter">
+        <button class="btn btn-primary" onclick="applySnapFilter()">FILTER</button>
+        <button class="btn btn-ghost" onclick="resetSnapFilter()">RESET</button>
+      </div>
+    </div>
+    <div id="snapshot-grid" class="snapshot-grid">
+      <!-- Populated by JS -->
+    </div>
+    <div id="snapshot-empty" style="display:none;text-align:center;padding:32px;color:var(--text-secondary);">
+      <div style="font-size:32px;opacity:0.2;margin-bottom:8px;">&#9635;</div>
+      <div style="font-size:10px;letter-spacing:1px;">NO SNAPSHOTS AVAILABLE</div>
+      <div style="font-size:9px;margin-top:6px;opacity:0.7;">Enable SAVE_CROSS_SNAPSHOT{% if show_detect %} / SAVE_DETECT_SNAPSHOT{% endif %} in counter .env</div>
+    </div>
+  </div>
+
   <div class="footer">Edge Nano Counter by ZenAi</div>
 </div>
 
+<!-- Snapshot lightbox -->
+<div class="modal-overlay hidden" id="snap-modal" onclick="closeSnapModal(event)">
+  <div class="snap-lightbox" id="snap-lightbox">
+    <button class="close-btn" onclick="closeSnapModal()" style="position:absolute;top:12px;right:12px;z-index:2;">&times;</button>
+    <img id="snap-modal-img" alt="Snapshot" />
+    <div class="snap-modal-meta" id="snap-modal-meta">--</div>
+  </div>
+</div>
+
 <script>
 // --- Theme ---
 (function() {
@@ -806,6 +893,7 @@ document.addEventListener('DOMContentLoaded', () => {
   loadChartData(7);
   loadRecentDays();
   resetFilter();
+  loadSnapshots('all');
 
   setInterval(() => {
     loadSummary();
@@ -815,6 +903,10 @@ document.addEventListener('DOMContentLoaded', () => {
   setInterval(() => {
     loadCurrentCounter();
   }, 2000);
+
+  setInterval(() => {
+    if (snapCurrentKind && !snapDateFilter) loadSnapshots(snapCurrentKind, true);
+  }, 15000);
 });
 
 async function loadCurrentCounter() {
@@ -1064,9 +1156,81 @@ function formatTime(isoString) {
 }
 
 document.addEventListener('keydown', (e) => {
-  if (e.key === 'Escape') hideVideoError();
+  if (e.key === 'Escape') { hideVideoError(); closeSnapModal(); }
 });
 
+// --- Crossing Snapshots ---
+let snapCurrentKind = 'all';
+let snapDateFilter = '';
+
+async function loadSnapshots(kind, silent) {
+  if (kind !== undefined) snapCurrentKind = kind;
+  document.querySelectorAll('#snap-filters button').forEach(b => {
+    b.classList.toggle('active', b.dataset.kind === snapCurrentKind);
+  });
+
+  try {
+    let url = `/api/snapshots?kind=${snapCurrentKind}&limit=120`;
+    if (snapDateFilter) url += `&date=${snapDateFilter}`;
+    const res = await fetch(url);
+    const data = await res.json();
+    const grid = document.getElementById('snapshot-grid');
+    const empty = document.getElementById('snapshot-empty');
+    const items = (data && data.snapshots) || [];
+
+    if (items.length === 0) {
+      grid.innerHTML = '';
+      empty.style.display = 'block';
+      return;
+    }
+    empty.style.display = 'none';
+    grid.innerHTML = items.map(s => {
+      const url = `/api/snapshot-image/${s.file}`;
+      const t = new Date(s.timestamp);
+      const timeStr = t.toLocaleString('en-US', { hour12: false, month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit' });
+      const kindLabel = s.kind.toUpperCase();
+      return `
+        <div class="snap-card" onclick="openSnapModal('${url}','${kindLabel}',${s.track_id},'${timeStr}',${s.frame})">
+          <img class="snap-thumb" src="${url}" loading="lazy" alt="snapshot" />
+          <div class="snap-info">
+            <div class="si-top">
+              <span class="snap-kind ${s.kind}">${kindLabel}</span>
+              <span class="snap-tid">ID ${s.track_id}</span>
+            </div>
+            <div class="snap-time">${timeStr}</div>
+          </div>
+        </div>`;
+    }).join('');
+  } catch (err) {
+    if (!silent) console.error('Failed to load snapshots:', err);
+  }
+}
+
+function applySnapFilter() {
+  snapDateFilter = document.getElementById('snap-date-filter').value || '';
+  loadSnapshots(snapCurrentKind);
+}
+
+function resetSnapFilter() {
+  snapDateFilter = '';
+  document.getElementById('snap-date-filter').value = '';
+  snapCurrentKind = 'all';
+  loadSnapshots('all');
+}
+
+function openSnapModal(url, kind, tid, timeStr, frame) {
+  document.getElementById('snap-modal-img').src = url;
+  document.getElementById('snap-modal-meta').textContent =
+    `${kind} \u00b7 Track ID ${tid} \u00b7 Frame ${frame} \u00b7 ${timeStr}`;
+  document.getElementById('snap-modal').classList.remove('hidden');
+}
+
+function closeSnapModal(event) {
+  if (event && event.target && event.target.id !== 'snap-modal' && event.type === 'click') return;
+  document.getElementById('snap-modal').classList.add('hidden');
+  document.getElementById('snap-modal-img').src = '';
+}
+
 // --- Live Video Feed ---
 
 function toggleVideo() {