danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

progress

Browse source
This commit is contained in:
Broque Thomas 2025-08-24 20:18:54 -07:00
parent 628e8b7709
commit 042baf429f
2 changed files with 39 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
webui/static/script.js
View file

@ -1758,17 +1758,16 @@ function updateCardToSyncing(playlistId, percent, progress = null) {
let actualPercent = percent || 0;
if (progress) {
// Use the actual progress percentage from the sync service
actualPercent = progress.progress || 0;
// Create detailed progress text like the GUI
const matched = progress.matched_tracks || 0;
const failed = progress.failed_tracks || 0;
const total = progress.total_tracks || 0;
const currentStep = progress.current_step || 'Processing';
// Calculate actual progress as processed/total, not just successful/total
if (total > 0) {
const processed = matched + failed;
actualPercent = Math.round((processed / total) * 100);
progressText = `${currentStep}: ${processed}/${total} (${matched} matched, ${failed} failed)`;
} else {
progressText = currentStep;
@ -1780,7 +1779,29 @@ function updateCardToSyncing(playlistId, percent, progress = null) {
}
}
// Build live status counter HTML (same as modal)
let statusCounterHTML = '';
if (progress && progress.total_tracks > 0) {
const matched = progress.matched_tracks || 0;
const failed = progress.failed_tracks || 0;
const total = progress.total_tracks || 0;
const processed = matched + failed;
const percentage = total > 0 ? Math.round((processed / total) * 100) : 0;
statusCounterHTML = `
<div class="playlist-card-sync-status">
<span class="sync-stat total-tracks">♪ ${total}</span>
<span class="sync-separator">/</span>
<span class="sync-stat matched-tracks">✓ ${matched}</span>
<span class="sync-separator">/</span>
<span class="sync-stat failed-tracks">✗ ${failed}</span>
<span class="sync-stat percentage">(${percentage}%)</span>
</div>
`;
}
progressBar.innerHTML = `
${statusCounterHTML}
<div class="progress-bar-sync">
<div class="progress-fill-sync" style="width: ${actualPercent}%;"></div>
</div>

15
webui/static/style.css
View file

@ -4534,4 +4534,19 @@ body {
.sync-separator {
color: #666666;
}
/* Playlist card sync status display */
.playlist-card-sync-status {
background: rgba(29, 185, 84, 0.08);
border: 1px solid rgba(29, 185, 84, 0.2);
border-radius: 8px;
padding: 4px 8px;
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 11px;
font-weight: 500;
}