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:
+5
-8
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user