fix(dashcam): use style.display instead of hidden attr (d-flex overrides hidden)

Bootstrap d-flex sets display:flex !important which beats the HTML hidden
attribute. Switch to style.display='none'/'flex' for both status bars.

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-10 00:51:27 -04:00
co-authored by Copilot
parent b064b4f902
commit 5b2854fbec
2 changed files with 7 additions and 10 deletions
+5 -8
View File
@@ -27,14 +27,12 @@ function showImportProgress(msg, total) {
importStartTime = Date.now(); importStartTime = Date.now();
importStatus.textContent = msg; importStatus.textContent = msg;
importEta.textContent = ''; importEta.textContent = '';
importStatusBar.hidden = false; importStatusBar.style.display = 'flex';
importResultBar.hidden = true; importResultBar.style.display = 'none';
// Update ETA every second based on elapsed time vs total
clearInterval(importEtaInterval); clearInterval(importEtaInterval);
if (importTotal > 0) { if (importTotal > 0) {
importEtaInterval = setInterval(() => { importEtaInterval = setInterval(() => {
const elapsed = (Date.now() - importStartTime) / 1000; const elapsed = (Date.now() - importStartTime) / 1000;
// rough heuristic: ~3s per video on average
const estTotal = importTotal * 3; const estTotal = importTotal * 3;
const remaining = Math.max(0, Math.round(estTotal - elapsed)); const remaining = Math.max(0, Math.round(estTotal - elapsed));
importEta.textContent = remaining > 0 ? `~${remaining}s remaining` : ''; importEta.textContent = remaining > 0 ? `~${remaining}s remaining` : '';
@@ -44,11 +42,10 @@ function showImportProgress(msg, total) {
function showImportResult(msg) { function showImportResult(msg) {
clearInterval(importEtaInterval); clearInterval(importEtaInterval);
importStatusBar.hidden = true; importStatusBar.style.display = 'none';
importResult.textContent = msg; importResult.textContent = msg;
importResultBar.hidden = false; importResultBar.style.display = 'block';
// Auto-hide result after 10s setTimeout(() => { importResultBar.style.display = 'none'; }, 10000);
setTimeout(() => { importResultBar.hidden = true; }, 10000);
} }
function fetchJson(url, options) { function fetchJson(url, options) {
+2 -2
View File
@@ -18,12 +18,12 @@
<i class="fas fa-download me-1"></i>Import all <i class="fas fa-download me-1"></i>Import all
</button> </button>
</div> </div>
<div id="dash-import-status-bar" class="card-footer py-2 d-flex align-items-center gap-2" hidden> <div id="dash-import-status-bar" class="card-footer py-2 align-items-center gap-2" style="display:none;">
<div class="spinner-border spinner-border-sm text-primary" role="status"></div> <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
<span id="dash-import-status" class="small text-muted flex-grow-1">Importing…</span> <span id="dash-import-status" class="small text-muted flex-grow-1">Importing…</span>
<span id="dash-import-eta" class="small text-muted text-nowrap"></span> <span id="dash-import-eta" class="small text-muted text-nowrap"></span>
</div> </div>
<div id="dash-import-result-bar" class="card-footer py-2 small text-muted" hidden> <div id="dash-import-result-bar" class="card-footer py-2 small text-muted" style="display:none;">
<span id="dash-import-result"></span> <span id="dash-import-result"></span>
</div> </div>
</div> </div>