Feature: Add Progress (%) column with sleek mini bar at the end of the qBittorrent table

This commit is contained in:
david
2026-08-17 10:05:59 -04:00
parent 2e02804b74
commit 504d3ef620
+18 -2
View File
@@ -1210,11 +1210,12 @@
<th>AI Detected Performer(s) & Target</th>
<th>Status</th>
<th style="text-align: right;">Action</th>
<th style="width: 120px; text-align: center;">Progress</th>
</tr>
</thead>
<tbody id="torrent-tbody">
<tr>
<td colspan="6">
<td colspan="7">
<div class="empty-state">
<div class="empty-state-icon">📡</div>
<h3>No torrents loaded yet</h3>
@@ -3037,7 +3038,7 @@ Return ONLY valid JSON matching:
if (filtered.length === 0) {
torrentTbody.innerHTML = `
<tr>
<td colspan="6">
<td colspan="7">
<div class="empty-state">
<div class="empty-state-icon">🔍</div>
<h3>No matching torrents found</h3>
@@ -3108,6 +3109,11 @@ Return ONLY valid JSON matching:
`;
}
const progressVal = typeof t.progress === 'number' ? t.progress : 0;
const isComplete = progressVal >= 0.9999;
const pctDisplay = isComplete ? '100%' : `${(progressVal * 100).toFixed(1)}%`;
const pctBarWidth = Math.min(100, Math.max(0, isComplete ? 100 : progressVal * 100));
return `
<tr id="row-${t.hash}" class="${isSelected ? 'selected' : ''}">
<td>
@@ -3146,6 +3152,16 @@ Return ONLY valid JSON matching:
` : ''}
</div>
</td>
<td style="text-align: center; white-space: nowrap; min-width: 105px;">
<div style="display: inline-flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 75px;">
<span style="font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: ${isComplete ? 'var(--accent-green)' : 'var(--accent-cyan)'};">
${pctDisplay}
</span>
<div style="width: 100%; height: 5px; background: var(--bg-tertiary); border-radius: 999px; overflow: hidden; border: 1px solid var(--border-color);">
<div style="width: ${pctBarWidth}%; height: 100%; background: ${isComplete ? 'var(--accent-green)' : 'var(--accent-cyan)'}; border-radius: 999px;"></div>
</div>
</div>
</td>
</tr>
`;
}