root
4101d98a41
Design system overhaul using DaisyUI v5 on Tailwind CSS v4: - Custom 'ohmstream' dark theme with orange primary (#FF9F1C), magenta secondary, gold accent matching existing palette - Tailwind CSS-first config (input.css source, style.css built output) - DaisyUI components: navbar, drawer, cards, badges, alerts, tables, progress bars, tabs, toggles, stats, form controls, tooltips - Mobile-first responsive layout with drawer navigation - Eliminated ~500+ lines of embedded CSS across 15+ template files - Removed all inline style spam from admin_panel and settings_section - Preserved all HTMX triggers, Alpine.js state, and Jinja2 logic - Updated auth-ui.js for DaisyUI tab-active class compatibility Build: npm run build:css (minified) / npm run watch:css (dev)
76 lines
4.0 KiB
HTML
76 lines
4.0 KiB
HTML
{% if tasks %}
|
|
<div class="flex flex-col gap-3">
|
|
{% for task in tasks %}
|
|
<div class="card bg-base-200 border border-base-300 p-4">
|
|
<!-- Top row: filename + status badge -->
|
|
<div class="flex justify-between items-center mb-3">
|
|
<span class="font-medium truncate mr-2" title="{{ task.filename }}">{{ task.filename }}</span>
|
|
<span class="badge
|
|
{% if task.status == 'downloading' %}badge-info
|
|
{% elif task.status == 'completed' %}badge-success
|
|
{% elif task.status == 'failed' %}badge-error
|
|
{% elif task.status == 'paused' %}badge-warning
|
|
{% else %}badge-ghost{% endif %}">
|
|
{{ task.status | upper }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Progress bar -->
|
|
<progress class="progress progress-primary w-full mb-3" value="{{ task.progress }}" max="100"></progress>
|
|
|
|
<!-- Meta row: speed, percentage, ETA -->
|
|
<div class="flex gap-4 text-xs text-base-content/50 mb-3">
|
|
<span>{{ task.progress | round(1) }}%</span>
|
|
<span>{{ task.speed or '0' }} KB/s</span>
|
|
<span>{{ task.eta or '' }}</span>
|
|
</div>
|
|
|
|
<!-- Action buttons -->
|
|
<div class="flex gap-1 justify-end">
|
|
{% if task.status == 'downloading' or task.status == 'pending' %}
|
|
<button class="btn btn-circle btn-sm btn-ghost" hx-post="/api/downloads/{{ task.id }}/pause" hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Pause">
|
|
<i class="fas fa-pause"></i>
|
|
</button>
|
|
{% elif task.status == 'paused' %}
|
|
<button class="btn btn-circle btn-sm btn-success" hx-post="/api/downloads/{{ task.id }}/resume" hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Reprendre">
|
|
<i class="fas fa-play"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if task.status == 'failed' or task.status == 'cancelled' %}
|
|
<button class="btn btn-circle btn-sm btn-warning" hx-post="/api/downloads/{{ task.id }}/retry" hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')" title="Relancer">
|
|
<i class="fas fa-redo"></i>
|
|
</button>
|
|
{% endif %}
|
|
|
|
{% if task.status == 'completed' %}
|
|
<a href="/api/downloads/video/{{ task.id }}" class="btn btn-circle btn-sm btn-success" title="Streamer">
|
|
<i class="fas fa-play-circle"></i>
|
|
</a>
|
|
<a href="/downloads/{{ task.filename }}" class="btn btn-circle btn-sm btn-ghost" download title="Telecharger">
|
|
<i class="fas fa-file-download"></i>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<button class="btn btn-circle btn-sm btn-error"
|
|
hx-delete="/api/downloads/{{ task.id }}"
|
|
hx-confirm="Supprimer ce telechargement ?"
|
|
hx-swap="none"
|
|
hx-on::after-request="htmx.trigger('#downloads-container-inner', 'refresh')"
|
|
title="Supprimer">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center py-16 text-base-content/30">
|
|
<i class="fas fa-cloud-download-alt text-5xl mb-5 block"></i>
|
|
<p>Aucun telechargement en cours</p>
|
|
</div>
|
|
{% endif %}
|