New version
This commit is contained in:
177
templates/history.html
Normal file
177
templates/history.html
Normal file
@@ -0,0 +1,177 @@
|
||||
{% extends "layout.html" %}
|
||||
|
||||
{% block title %}Historique - Spotify Downloader{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h4 class="mb-0"><i class="bi bi-clock-history me-2"></i>Historique des téléchargements</h4>
|
||||
<span class="badge bg-secondary">{{ downloads|length }} téléchargement(s)</span>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
{% if downloads %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-dark table-hover mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 80px;">Statut</th>
|
||||
<th>URL</th>
|
||||
<th style="width: 80px;">Format</th>
|
||||
<th style="width: 100px;">Progression</th>
|
||||
<th style="width: 150px;">Date</th>
|
||||
<th style="width: 120px;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for dl in downloads %}
|
||||
<tr data-download-id="{{ dl.id }}">
|
||||
<td class="text-center">
|
||||
{% if dl.status == 'completed' %}
|
||||
<span class="badge bg-success" title="Terminé">
|
||||
<i class="bi bi-check-circle"></i>
|
||||
</span>
|
||||
{% elif dl.status == 'running' %}
|
||||
<span class="badge bg-warning" title="En cours">
|
||||
<i class="bi bi-arrow-repeat spin"></i>
|
||||
</span>
|
||||
{% elif dl.status == 'error' %}
|
||||
<span class="badge bg-danger" title="Erreur">
|
||||
<i class="bi bi-x-circle"></i>
|
||||
</span>
|
||||
{% elif dl.status == 'cancelled' %}
|
||||
<span class="badge bg-secondary" title="Annulé">
|
||||
<i class="bi bi-slash-circle"></i>
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="badge bg-info" title="En attente">
|
||||
<i class="bi bi-clock"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<small class="text-break" style="max-width: 400px; display: inline-block;">
|
||||
{{ dl.url[:80] }}{% if dl.url|length > 80 %}...{% endif %}
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<span class="badge bg-dark">{{ dl.format_type|upper }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="progress" style="height: 20px;">
|
||||
<div class="progress-bar {{ 'bg-success' if dl.status == 'completed' else 'bg-warning' }}"
|
||||
style="width: {{ dl.progress }}%">
|
||||
{{ dl.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<small>
|
||||
{{ dl.created_at.strftime('%d/%m/%Y') }}<br>
|
||||
<span class="text-muted">{{ dl.created_at.strftime('%H:%M') }}</span>
|
||||
</small>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm">
|
||||
<button class="btn btn-outline-light view-log" data-id="{{ dl.id }}" title="Voir les logs">
|
||||
<i class="bi bi-file-text"></i>
|
||||
</button>
|
||||
{% if dl.status != 'running' %}
|
||||
<button class="btn btn-outline-danger delete-download" data-id="{{ dl.id }}" title="Supprimer">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-5">
|
||||
<i class="bi bi-inbox fs-1 text-muted"></i>
|
||||
<p class="text-muted mt-2">Aucun téléchargement pour le moment</p>
|
||||
<a href="{{ url_for('index') }}" class="btn btn-spotify">
|
||||
<i class="bi bi-download me-1"></i>Télécharger
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="logModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||||
<div class="modal-content bg-dark">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title"><i class="bi bi-terminal me-2"></i>Logs du téléchargement</h5>
|
||||
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<pre id="logContent" class="output-box p-3 mb-0" style="white-space: pre-wrap; max-height: 500px; overflow-y: auto;"></pre>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-light" data-bs-dismiss="modal">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const logModal = new bootstrap.Modal(document.getElementById('logModal'));
|
||||
const logContent = document.getElementById('logContent');
|
||||
|
||||
document.querySelectorAll('.view-log').forEach(btn => {
|
||||
btn.addEventListener('click', async function() {
|
||||
const id = this.dataset.id;
|
||||
try {
|
||||
const response = await fetch(`/api/download/${id}`);
|
||||
const data = await response.json();
|
||||
logContent.textContent = data.log || 'Aucun log disponible';
|
||||
logModal.show();
|
||||
} catch (err) {
|
||||
showToast('Erreur lors du chargement des logs', 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.delete-download').forEach(btn => {
|
||||
btn.addEventListener('click', async function() {
|
||||
const id = this.dataset.id;
|
||||
const row = this.closest('tr');
|
||||
|
||||
if (!confirm('Supprimer ce téléchargement de l\'historique ?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/download/${id}`, { method: 'DELETE' });
|
||||
if (response.ok) {
|
||||
row.remove();
|
||||
showToast('Supprimé de l\'historique', 'success');
|
||||
} else {
|
||||
const data = await response.json();
|
||||
showToast(data.error || 'Erreur', 'error');
|
||||
}
|
||||
} catch (err) {
|
||||
showToast('Erreur réseau', 'error');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user