Refactor admin winners tab UI and functionality

Co-authored-by: mathieumoran1 <[email protected]>
This commit is contained in:
Cursor Agent
2025-12-22 22:04:20 +00:00
co-authored by mathieumoran1
parent d51372dc21
commit c1653b4fe9
+85 -13
View File
@@ -754,44 +754,116 @@
</div>
<div class="tab-pane fade" id="admin-winners" role="tabpanel" aria-labelledby="admin-winners-tab">
<div class="row g-3">
<div class="col-12 col-xxl-8">
<div class="card p-3">
<h4 class="mb-1">Définir les gagnants par année (égalité)</h4>
<div class="text-muted mb-3">
Tu peux ajouter plusieurs gagnants pour la même année (ex: égalité au même nombre de points).
Choisis un utilisateur + des points (optionnel), puis clique <strong>Ajouter</strong>.
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2">
<div>
<h4 class="mb-1">Gagnants</h4>
<div class="text-muted">Définis un ou plusieurs gagnants par année (égalité possible).</div>
</div>
</div>
<ul class="nav nav-pills admin-subtabs mt-3" id="adminWinnersSubTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="admin-winners-subtab-set" data-bs-toggle="tab" data-bs-target="#admin-winners-pane-set" type="button" role="tab" aria-controls="admin-winners-pane-set" aria-selected="true">
Définir
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="admin-winners-subtab-current" data-bs-toggle="tab" data-bs-target="#admin-winners-pane-current" type="button" role="tab" aria-controls="admin-winners-pane-current" aria-selected="false">
Actuels
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="admin-winners-subtab-help" data-bs-toggle="tab" data-bs-target="#admin-winners-pane-help" type="button" role="tab" aria-controls="admin-winners-pane-help" aria-selected="false">
Aide
</button>
</li>
</ul>
<div class="tab-content pt-3">
<!-- Set -->
<div class="tab-pane fade show active" id="admin-winners-pane-set" role="tabpanel" aria-labelledby="admin-winners-subtab-set" tabindex="0">
<div class="row g-3">
<div class="col-12 col-xxl-7">
<div class="border rounded p-3 bg-light">
<div class="fw-semibold mb-1">Ajouter un gagnant</div>
<div class="text-muted small mb-3">
Tu peux ajouter plusieurs gagnants pour une même année (égalité).
</div>
<div class="row g-3">
<div class="col-md-4">
<div class="col-12 col-md-4">
<label for="winner_year" class="form-label">Année</label>
<select id="winner_year" class="form-select"></select>
<div class="form-text">Basé sur les années présentes dans les films.</div>
</div>
<div class="col-md-5">
<div class="col-12 col-md-5">
<label for="winner_user" class="form-label">Utilisateur</label>
<select id="winner_user" class="form-select">
<option value="">—</option>
</select>
<div class="form-text">Pour retirer un gagnant, utilise la liste “Gagnants actuels” ci-dessous.</div>
<div class="form-text">Pour retirer: onglet “Actuels”.</div>
</div>
<div class="col-md-3">
<div class="col-12 col-md-3">
<label for="winner_points" class="form-label">Points (optionnel)</label>
<input id="winner_points" type="number" class="form-control" placeholder="ex: 42" min="0" step="1">
<div class="form-text">Laisse vide si non applicable.</div>
</div>
</div>
<div class="d-flex flex-wrap justify-content-end gap-2 mt-3">
<button type="button" id="winner_reload" class="btn btn-outline-primary">Recharger</button>
<button type="button" id="winner_reload" class="btn btn-outline-secondary">Recharger</button>
<button type="button" id="winner_clear" class="btn btn-outline-danger">Tout supprimer</button>
<button type="button" id="winner_save" class="btn btn-warning">Ajouter</button>
</div>
</div>
</div>
<div class="col-12 col-xxl-5">
<div class="border rounded p-3 bg-white">
<div class="fw-semibold mb-2">Raccourci</div>
<div class="text-muted">
Le bouton “Tout supprimer” efface uniquement les gagnants de l’année sélectionnée.
</div>
</div>
</div>
</div>
</div>
<!-- Current -->
<div class="tab-pane fade" id="admin-winners-pane-current" role="tabpanel" aria-labelledby="admin-winners-subtab-current" tabindex="0">
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-2">
<div>
<div class="fw-semibold">Gagnants actuels</div>
<div class="text-muted small">La liste dépend de l’année sélectionnée.</div>
</div>
</div>
<div class="mt-3">
<div class="text-muted small mb-1">Gagnants actuels</div>
<div id="winner_current" class="border rounded p-2 bg-light">—</div>
</div>
<!-- Help -->
<div class="tab-pane fade" id="admin-winners-pane-help" role="tabpanel" aria-labelledby="admin-winners-subtab-help" tabindex="0">
<div class="row g-3">
<div class="col-12 col-xxl-8">
<div class="border rounded p-3 bg-white">
<div class="fw-semibold mb-2">Comment ça marche</div>
<ul class="mb-0 text-muted">
<li>Une année peut avoir <strong>plusieurs gagnants</strong> (égalité).</li>
<li>Les points sont <strong>optionnels</strong> (affichage uniquement).</li>
<li>Pour retirer un gagnant, utilise le bouton “Retirer” dans l’onglet “Actuels”.</li>
</ul>
</div>
</div>
<div class="col-12 col-xxl-4">
<div class="border rounded p-3 bg-light">
<div class="fw-semibold mb-2">Astuce</div>
<div class="text-muted">
Si tu changes l’année active du site, vérifie aussi les gagnants de cette année.
</div>
</div>
</div>
</div>
</div>
</div>
</div>