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>AI Detected Performer(s) & Target</th>
<th>Status</th> <th>Status</th>
<th style="text-align: right;">Action</th> <th style="text-align: right;">Action</th>
<th style="width: 120px; text-align: center;">Progress</th>
</tr> </tr>
</thead> </thead>
<tbody id="torrent-tbody"> <tbody id="torrent-tbody">
<tr> <tr>
<td colspan="6"> <td colspan="7">
<div class="empty-state"> <div class="empty-state">
<div class="empty-state-icon">📡</div> <div class="empty-state-icon">📡</div>
<h3>No torrents loaded yet</h3> <h3>No torrents loaded yet</h3>
@@ -3037,7 +3038,7 @@ Return ONLY valid JSON matching:
if (filtered.length === 0) { if (filtered.length === 0) {
torrentTbody.innerHTML = ` torrentTbody.innerHTML = `
<tr> <tr>
<td colspan="6"> <td colspan="7">
<div class="empty-state"> <div class="empty-state">
<div class="empty-state-icon">🔍</div> <div class="empty-state-icon">🔍</div>
<h3>No matching torrents found</h3> <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 ` return `
<tr id="row-${t.hash}" class="${isSelected ? 'selected' : ''}"> <tr id="row-${t.hash}" class="${isSelected ? 'selected' : ''}">
<td> <td>
@@ -3146,6 +3152,16 @@ Return ONLY valid JSON matching:
` : ''} ` : ''}
</div> </div>
</td> </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> </tr>
`; `;
} }