Feature: Add Progress (%) column with sleek mini bar at the end of the qBittorrent table
This commit is contained in:
@@ -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>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user