Show watchlist refresh progress as a single bar

This commit is contained in:
Dymas
2026-08-18 08:48:13 +02:00
parent d663318f27
commit ba8e55bd97
5 changed files with 89 additions and 7 deletions
+74 -5
View File
@@ -254,6 +254,44 @@ WATCHLIST_HTML = r"""<!doctype html>
color: #ddd0ff;
font-size: 13px;
}
.refresh-progress {
display: none;
gap: 7px;
min-width: 0;
}
.refresh-progress.visible {
display: grid;
}
.refresh-progress-header {
align-items: center;
color: var(--muted);
display: flex;
font-size: 12px;
font-weight: 700;
justify-content: space-between;
gap: 10px;
text-transform: uppercase;
}
.refresh-progress-track {
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--line);
border-radius: 999px;
height: 11px;
overflow: hidden;
}
.refresh-progress-fill {
background: linear-gradient(90deg, var(--accent), var(--accent-2));
border-radius: inherit;
height: 100%;
transition: width 0.2s ease;
width: 0%;
}
.refresh-progress-current {
color: #ddd0ff;
font-size: 13px;
min-height: 20px;
overflow-wrap: anywhere;
}
.field-hint {
color: var(--muted);
font-size: 12px;
@@ -716,6 +754,16 @@ WATCHLIST_HTML = r"""<!doctype html>
<button class="ghost" id="refreshAllWatchlistBtn" type="button">Refresh All</button>
</div>
<div class="notice" id="notice"></div>
<div class="refresh-progress" id="refreshJobStatus">
<div class="refresh-progress-header">
<span>Refresh progress</span>
<span id="refreshJobCount">0 / 0</span>
</div>
<div class="refresh-progress-track" aria-hidden="true">
<div class="refresh-progress-fill" id="refreshJobFill"></div>
</div>
<div class="refresh-progress-current" id="refreshJobCurrent"></div>
</div>
<div class="summary-grid" id="watchlist-summary">
<div class="summary-card">
<span class="summary-value">0</span>
@@ -737,7 +785,6 @@ WATCHLIST_HTML = r"""<!doctype html>
<div>
<h2>Watchlist library</h2>
<p class="muted" id="watchlist-meta">Compact poster grid for faster scanning.</p>
<p class="muted" id="refreshJobStatus"></p>
</div>
</div>
<div class="category-tabs" id="watchlistTabs"></div>
@@ -867,18 +914,40 @@ WATCHLIST_HTML = r"""<!doctype html>
button.textContent = running ? "Refreshing..." : "Refresh All";
}
function refreshJobPercent(job) {
const total = Number((job || {}).total || 0);
if (total <= 0) return 0;
const completed = Math.max(0, Math.min(total, Number((job || {}).completed || 0)));
return Math.round((completed / total) * 100);
}
function setRefreshJobStatus(job) {
const el = $("refreshJobStatus");
if (!el) return;
if (!job) {
el.textContent = "";
el.classList.remove("visible");
$("refreshJobFill").style.width = "0%";
$("refreshJobCount").textContent = "0 / 0";
$("refreshJobCurrent").textContent = "";
return;
}
const completed = Number(job.completed || 0);
const total = Number(job.total || 0);
const percent = refreshJobPercent(job);
el.classList.toggle("visible", job.status === "running" || job.status === "pending");
$("refreshJobFill").style.width = `${percent}%`;
$("refreshJobCount").textContent = `${completed} / ${total}`;
if (job.status === "pending") {
$("refreshJobCurrent").textContent = job.message || "Waiting to start refresh.";
return;
}
if (job.status === "running") {
el.textContent = `${job.completed || 0}/${job.total || 0} refreshed${job.current_title ? ` · ${job.current_title}` : ""}`;
$("refreshJobCurrent").textContent = job.current_title
? `Refreshing ${job.current_title}`
: "Refreshing watchlist entries";
return;
}
el.textContent = job.message || "";
$("refreshJobCurrent").textContent = "";
}
function coverInitials(title) {
@@ -1497,7 +1566,7 @@ WATCHLIST_HTML = r"""<!doctype html>
setRefreshAllButton(running);
setRefreshJobStatus(job);
if (running) {
setNotice(job.message || "Refreshing all watchlist entries...");
setNotice("");
} else if (job && wasRunning && refreshOnComplete) {
const message = job.message || "Watchlist refreshed.";
await fetchWatchlist();