Add visibility toggle for picks features and rename Mes choix to Mes picks
- Renamed 'Mes choix' to 'Mes picks' across all pages and JavaScript files - Added visibility toggle in control panel (Réglages > Visibilité) to control: - Display of 'Mes picks' button in navigation - Display of 'Bon picks' column in user statistics - Combined both visibility options into single toggle for simplicity - Added backend API endpoints for visibility configuration - Implemented localStorage caching for instant visibility updates - Fixed flash of content issues when navigating between pages - Updated stats endpoint to calculate correct picks on-the-fly from current winners - Renamed 'Bonnes réponses' to 'Bon picks' in user statistics table
This commit is contained in:
Mathieu Moran
+45
-87
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pool Oscars - Mes choix</title>
|
||||
<title>Pool Oscars - Mes picks</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="./css/app.css" rel="stylesheet">
|
||||
<link rel="preload" as="image" href="img/logo_w.png">
|
||||
@@ -26,22 +26,21 @@
|
||||
.navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
|
||||
}
|
||||
.category-card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.nominee-option {
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.nominee-option:hover {
|
||||
background-color: #f8f9fa;
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.nominee-option.selected {
|
||||
background-color: #0d6efd;
|
||||
color: white;
|
||||
.table-sm td {
|
||||
padding: 0.5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.nominee-option.selected:hover {
|
||||
background-color: #0b5ed7;
|
||||
.table-sm th {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.user-picks-card {
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -76,7 +75,7 @@
|
||||
<a href="movies.html" class="nav-link btn btn-outline-light me-2">Films</a>
|
||||
<a href="checklist.html" class="nav-link btn btn-outline-light me-2">Checklist</a>
|
||||
<a href="user-stat.html" class="nav-link btn btn-outline-light me-2">Statistiques</a>
|
||||
<a href="picks.html" class="nav-link btn btn-outline-light me-2">Mes choix</a>
|
||||
<a href="picks.html" class="nav-link btn btn-outline-light me-2" id="nav-link-picks" style="display: none;">Mes picks</a>
|
||||
<a id="admin-control-link" href="control.html" class="nav-link btn btn-warning me-2 d-none">Admin</a>
|
||||
</div>
|
||||
<div class="d-flex ms-auto mt-2 mt-lg-0 align-items-center">
|
||||
@@ -88,7 +87,7 @@
|
||||
</nav>
|
||||
|
||||
<div class="container mt-5 pb-5">
|
||||
<h2>Mes choix Oscars</h2>
|
||||
<h2>Mes picks Oscars</h2>
|
||||
|
||||
<div id="alert-container"></div>
|
||||
|
||||
@@ -96,18 +95,17 @@
|
||||
<ul class="nav nav-tabs mt-3" id="picksTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="tab-my-picks" data-bs-toggle="tab" data-bs-target="#pane-my-picks" type="button" role="tab" aria-controls="pane-my-picks" aria-selected="true">
|
||||
Mes choix
|
||||
Mes picks
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link d-none" id="tab-all-picks" data-bs-toggle="tab" data-bs-target="#pane-all-picks" type="button" role="tab" aria-controls="pane-all-picks" aria-selected="false">
|
||||
Voir tous les choix
|
||||
<span class="badge bg-warning text-dark ms-1">Admin</span>
|
||||
<button class="nav-link" id="tab-scores" data-bs-toggle="tab" data-bs-target="#pane-scores" type="button" role="tab" aria-controls="pane-scores" aria-selected="false">
|
||||
Scores
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link d-none" id="tab-winners" data-bs-toggle="tab" data-bs-target="#pane-winners" type="button" role="tab" aria-controls="pane-winners" aria-selected="false">
|
||||
Gagnants & Scores
|
||||
Gagnants
|
||||
<span class="badge bg-warning text-dark ms-1">Admin</span>
|
||||
</button>
|
||||
</li>
|
||||
@@ -116,93 +114,53 @@
|
||||
<div class="tab-content pt-3" id="picksTabsContent">
|
||||
<!-- My Picks Tab -->
|
||||
<div class="tab-pane fade show active" id="pane-my-picks" role="tabpanel" aria-labelledby="tab-my-picks" tabindex="0">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2">
|
||||
<div>
|
||||
<div class="fw-semibold">Année: <span id="current-year">—</span></div>
|
||||
<div class="text-muted small">Sélectionne tes choix pour chaque catégorie</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" id="load-my-picks" class="btn btn-outline-secondary">Recharger mes choix</button>
|
||||
<button type="button" id="submit-picks" class="btn btn-primary">Enregistrer mes choix</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<div class="text-muted small">
|
||||
Progression: <span id="picks-progress">0 / 0</span> catégories complétées
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
|
||||
<div>
|
||||
<span class="fw-semibold">Année: <span id="current-year">—</span></span>
|
||||
<span class="text-muted small ms-2">Progression: <span id="picks-progress">0 / 0</span></span>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" id="load-my-picks" class="btn btn-sm btn-outline-secondary">Recharger</button>
|
||||
<button type="button" id="submit-picks" class="btn btn-sm btn-primary">Enregistrer</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="categories-container">
|
||||
<div class="text-center py-4 text-muted">Chargement des catégories…</div>
|
||||
<div class="text-center py-3 text-muted small">Chargement des catégories…</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- All Picks Tab (Admin only) -->
|
||||
<div class="tab-pane fade" id="pane-all-picks" role="tabpanel" aria-labelledby="tab-all-picks" tabindex="0">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2">
|
||||
<div>
|
||||
<div class="fw-semibold">Année: <span id="all-picks-year">—</span></div>
|
||||
<div class="text-muted small">Vue d'ensemble de tous les choix des utilisateurs</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" id="refresh-all-picks" class="btn btn-outline-secondary">Rafraîchir</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<div class="text-muted small">
|
||||
<span id="users-count">0</span> utilisateur(s) ont soumis leurs choix
|
||||
</div>
|
||||
</div>
|
||||
<!-- Scores Tab -->
|
||||
<div class="tab-pane fade" id="pane-scores" role="tabpanel" aria-labelledby="tab-scores" tabindex="0">
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
|
||||
<div>
|
||||
<span class="fw-semibold">Année: <span id="scores-year">—</span></span>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" id="refresh-scores" class="btn btn-sm btn-outline-secondary">Rafraîchir</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="all-picks-container">
|
||||
<div class="text-center py-4 text-muted">Chargement des choix…</div>
|
||||
<div id="scores-container">
|
||||
<div class="text-center py-3 text-muted small">Les scores seront calculés après avoir marqué les gagnants.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Winners & Scores Tab (Admin only) -->
|
||||
<!-- Gagnants Tab (Admin only) -->
|
||||
<div class="tab-pane fade" id="pane-winners" role="tabpanel" aria-labelledby="tab-winners" tabindex="0">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between gap-2">
|
||||
<div>
|
||||
<div class="fw-semibold">Année: <span id="winners-year">—</span></div>
|
||||
<div class="text-muted small">Marquez les gagnants et calculez les scores</div>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" id="calculate-scores" class="btn btn-success">Calculer les scores</button>
|
||||
<button type="button" id="refresh-winners" class="btn btn-outline-secondary">Rafraîchir</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<div class="text-muted small">
|
||||
<span id="winners-progress">0 / 0</span> catégories avec gagnants marqués
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
|
||||
<div>
|
||||
<span class="fw-semibold">Année: <span id="winners-year">—</span></span>
|
||||
<span class="text-muted small ms-2"><span id="winners-progress">0 / 0</span> gagnants marqués</span>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button type="button" id="calculate-scores" class="btn btn-sm btn-success">Calculer</button>
|
||||
<button type="button" id="refresh-winners" class="btn btn-sm btn-outline-secondary">Rafraîchir</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="winners-container">
|
||||
<div class="text-center py-4 text-muted">Chargement des catégories…</div>
|
||||
</div>
|
||||
|
||||
<!-- Scores Table -->
|
||||
<div class="card shadow-sm mt-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">Scores des utilisateurs</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div id="scores-container">
|
||||
<div class="text-center py-4 text-muted">Les scores seront calculés après avoir marqué les gagnants.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center py-3 text-muted small">Chargement des catégories…</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user