Live Counter get total count per batch 2

templates/recounting.html

@@ -348,29 +348,13 @@
   <!-- Counter panels -->
   <div class="counters-row">
     <div class="panel">
-      <span class="section-title">&#9673; Live Counter</span>
+      <span class="section-title" id="live-title">&#9673; Live Counter</span>
       <div class="counter-card">
         <div class="counter-val" id="live-count">--</div>
-        <div class="counter-label">Objects Counted</div>
+        <div class="counter-label" id="live-label">Objects Counted</div>
         <div class="counter-sub">Batch #<span id="live-batch">--</span> &middot; <span id="live-time">--</span></div>
         <div class="counter-status disconnected" id="live-status">
-          waiting...
+          no file selected
-        </div>
-        <div class="batch-result" id="batch-result" style="display:none;margin-top:16px;padding:12px;border-top:1px solid var(--divider);">
-          <div style="font-size:9px;color:var(--text-secondary);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;">
-            Selected Batch Result
-          </div>
-          <div style="display:flex;align-items:center;justify-content:center;gap:32px;">
-            <div>
-              <div style="font-size:8px;color:var(--text-secondary);letter-spacing:1px;">BATCH</div>
-              <div style="font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:var(--accent);" id="br-batch">--</div>
-            </div>
-            <div>
-              <div style="font-size:8px;color:var(--text-secondary);letter-spacing:1px;">COUNT</div>
-              <div style="font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;color:var(--accent4);" id="br-count">--</div>
-            </div>
-          </div>
-          <div style="font-size:9px;color:var(--text-secondary);margin-top:6px;" id="br-date">--</div>
         </div>
       </div>
     </div>
@@ -441,11 +425,9 @@ let streaming = false;
 let streamUrl = '';
 
 document.addEventListener('DOMContentLoaded', () => {
-  loadLiveProgress();
   loadRecountProgress();
   loadFiles();
 
-  setInterval(loadLiveProgress, 200);
   setInterval(loadRecountProgress, 500);
   setInterval(loadFiles, 30000);
 });
@@ -480,6 +462,20 @@ async function loadFiles() {
 }
 
 function selectFile(path, name) {
+  if (selectedFile === path) {
+    selectedFile = null;
+    batchResultLoaded = false;
+    document.getElementById('btn-start').disabled = true;
+    document.getElementById('live-title').innerHTML = '&#9673; Live Counter';
+    document.getElementById('live-count').textContent = '--';
+    document.getElementById('live-label').textContent = 'Objects Counted';
+    document.getElementById('live-batch').textContent = '--';
+    document.getElementById('live-time').textContent = '--';
+    document.getElementById('live-status').textContent = 'no file selected';
+    document.getElementById('live-status').className = 'counter-status disconnected';
+    loadFiles();
+    return;
+  }
   selectedFile = path;
   document.getElementById('btn-start').disabled = false;
   document.getElementById('stream-file-name').textContent = name;
@@ -487,26 +483,36 @@ function selectFile(path, name) {
   loadBatchResult(path);
 }
 
+let batchResultLoaded = false;
+
 async function loadBatchResult(filePath) {
-  const el = document.getElementById('batch-result');
   if (!filePath) {
-    el.style.display = 'none';
+    batchResultLoaded = false;
+    document.getElementById('live-title').innerHTML = '&#9673; Live Counter';
+    document.getElementById('live-label').textContent = 'Objects Counted';
+    document.getElementById('live-status').textContent = 'waiting...';
+    document.getElementById('live-status').className = 'counter-status disconnected';
+    loadLiveProgress();
     return;
   }
   try {
     const res = await fetch('/api/batch-result?file=' + encodeURIComponent(filePath));
     const data = await res.json();
     if (!data.success) {
-      el.style.display = 'none';
+      batchResultLoaded = false;
       return;
     }
-    document.getElementById('br-batch').textContent = '#' + data.batch_number;
+    batchResultLoaded = true;
-    document.getElementById('br-count').textContent = data.count.toLocaleString();
+    document.getElementById('live-title').innerHTML = '&#9673; Batch Result';
-    document.getElementById('br-date').textContent = data.date;
+    document.getElementById('live-count').textContent = data.count.toLocaleString();
-    el.style.display = 'block';
+    document.getElementById('live-label').textContent = 'Batch #' + data.batch_number;
+    document.getElementById('live-batch').textContent = data.batch_number;
+    document.getElementById('live-time').textContent = data.date;
+    document.getElementById('live-status').textContent = 'recorded \u00b7 ' + (data.start_time ? new Date(data.start_time).toLocaleTimeString('en-US', {hour12: false, hour:'2-digit', minute:'2-digit'}) : '--') + ' \u2013 ' + (data.end_time ? new Date(data.end_time).toLocaleTimeString('en-US', {hour12: false, hour:'2-digit', minute:'2-digit'}) : '--');
+    document.getElementById('live-status').className = 'counter-status connected';
   } catch (err) {
     console.error('Failed to load batch result:', err);
-    el.style.display = 'none';
+    batchResultLoaded = false;
   }
 }
 
@@ -591,43 +597,6 @@ async function stopRecount() {
   loadFiles();
 }
 
-// --- Live counter ---
-
-async function loadLiveProgress() {
-  const countEl = document.getElementById('live-count');
-  const batchEl = document.getElementById('live-batch');
-  const timeEl = document.getElementById('live-time');
-  const statusEl = document.getElementById('live-status');
-  try {
-    const res = await fetch('/api/live-progress');
-    const data = await res.json();
-    if (!data.success) {
-      countEl.textContent = '--';
-      batchEl.textContent = '--';
-      timeEl.textContent = data.error || 'unreachable';
-      statusEl.className = 'counter-status disconnected';
-      statusEl.textContent = 'no connection';
-      return;
-    }
-    countEl.textContent = data.count.toLocaleString();
-    batchEl.textContent = data.batch_number || '--';
-    if (data.last_detection_time) {
-      const d = new Date(data.last_detection_time);
-      timeEl.textContent = d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' });
-    } else {
-      timeEl.textContent = 'waiting...';
-    }
-    statusEl.className = 'counter-status connected';
-    statusEl.textContent = 'connected';
-  } catch (err) {
-    countEl.textContent = '--';
-    batchEl.textContent = '--';
-    timeEl.textContent = 'unreachable';
-    statusEl.className = 'counter-status disconnected';
-    statusEl.textContent = 'no connection';
-  }
-}
-
 // --- Recount counter ---
 
 async function loadRecountProgress() {