dsutanto/bytetrack-counter-dashboard
1
0 Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Live Counter get total count per batch 2

Browse Source
This commit is contained in:
proitlab committed 2026-07-29 14:32:56 +07:00
1 parent e3ae89de3d
commit cc807d3b8b
1 file changed
+35 -66
Download Patch File Download Diff File Expand all files Collapse all files
templates/recounting.html
+35 -66
View File
@@ -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...
</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>
no file selected
</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;
document.getElementById('br-count').textContent = data.count.toLocaleString();
document.getElementById('br-date').textContent = data.date;
el.style.display = 'block';
batchResultLoaded = true;
document.getElementById('live-title').innerHTML = '&#9673; Batch Result';
document.getElementById('live-count').textContent = data.count.toLocaleString();
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() {