root
9f9df600c1
- Route GET /api/downloads/video/{task_id} pour streamer les videos
- Route POST /api/downloads/{task_id}/retry pour relancer les failed
- Route POST /api/downloads/cancel-all pour annuler tous les actifs
- Barre de progression animee (shimmer + pulse)
- Indicateurs visuels par status (bordures colorees)
- Bouton Retry pour telechargements echoues/annules
- Actions groupees (Nettoyer termines, Tout annuler)
- Compteur de telechargements actifs
- hx-on::after-request pour refresh auto
Closes #17, Closes #8
45 lines
1.7 KiB
HTML
45 lines
1.7 KiB
HTML
<div class="section-container">
|
|
<div class="section-header">
|
|
<h2>Telechargements <span id="activeDownloadsCount" class="active-downloads-counter" style="display:none;">(0 actif)</span></h2>
|
|
<div class="header-actions">
|
|
<button class="btn btn-sm btn-secondary"
|
|
hx-post="/api/downloads/cleanup"
|
|
hx-swap="none"
|
|
hx-confirm="Nettoyer tous les telechargements termines ?"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')">
|
|
<i class="fas fa-broom"></i> Nettoyer termines
|
|
</button>
|
|
<button class="btn btn-sm btn-danger"
|
|
hx-post="/api/downloads/cancel-all"
|
|
hx-swap="none"
|
|
hx-confirm="Annuler tous les telechargements actifs ?"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')">
|
|
<i class="fas fa-stop-circle"></i> Tout annuler
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container that loads content via HTMX -->
|
|
<div id="downloads-container-inner"
|
|
hx-get="/api/downloads?html=1"
|
|
hx-trigger="load, refresh, every 3s"
|
|
hx-swap="innerHTML">
|
|
<div class="loading-placeholder">
|
|
<div class="spinner"></div> Chargement des telechargements...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.section-container { margin-bottom: 40px; }
|
|
.active-downloads-counter {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
background: rgba(0, 217, 255, 0.1);
|
|
padding: 2px 10px;
|
|
border-radius: 12px;
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|