quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #10 from quoije/cursor/admin-panel-layout-redesign-7a39

Browse Source 
Admin panel layout redesign
This commit was merged in pull request #10.
This commit is contained in:
Mathieu Moran
2025-12-20 18:24:10 -05:00
committed by GitHub
parent ff289c38da bc017088f7
commit 35da8274b0
1 changed files with 160 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/control.html
+74 -25
View File
@@ -29,7 +29,7 @@
<body class="bg-light">
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container">
<div class="container-fluid px-3 px-lg-4">
<a class="navbar-brand" style="margin-left: -7px;">
<img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
</a>
@@ -51,13 +51,43 @@
</div>
</nav>
<div class="container mt-5" style="max-width: 720px;">
<h2>Admin - Année active</h2>
<div class="container-fluid px-3 px-lg-4 py-4">
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-3">
<div>
<h2 class="mb-0">Admin</h2>
<div class="text-muted">Paramètres, utilisateurs et gestion des films.</div>
</div>
</div>
<div id="response" class="alert d-none" role="alert"></div>
<ul class="nav nav-tabs" id="adminTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="admin-settings-tab" data-bs-toggle="tab" data-bs-target="#admin-settings" type="button" role="tab" aria-controls="admin-settings" aria-selected="true">
Réglages
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="admin-users-tab" data-bs-toggle="tab" data-bs-target="#admin-users" type="button" role="tab" aria-controls="admin-users" aria-selected="false">
Utilisateurs
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="admin-movies-tab" data-bs-toggle="tab" data-bs-target="#admin-movies" type="button" role="tab" aria-controls="admin-movies" aria-selected="false">
Films
</button>
</li>
</ul>
<div class="tab-content pt-3">
<div class="tab-pane fade show active" id="admin-settings" role="tabpanel" aria-labelledby="admin-settings-tab">
<div class="row g-3">
<div class="col-12 col-xl-8">
<div class="card p-3">
<h4 class="mb-1">Année active</h4>
<p class="text-muted mb-3">
Cette année pilote tout le site (films affichés, checklist et statistiques).
</p>
<div class="card p-3 mb-4">
<div class="row g-2 align-items-end">
<div class="col-md-6">
<label for="active_oscar_year" class="form-label">Année active</label>
@@ -69,15 +99,22 @@
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Admin - Réinitialiser mot de passe utilisateur</h2>
<div class="tab-pane fade" id="admin-users" role="tabpanel" aria-labelledby="admin-users-tab">
<div class="row g-3">
<div class="col-12 col-xl-8">
<div class="card p-3">
<h4 class="mb-1">Réinitialiser mot de passe utilisateur</h4>
<p class="text-muted mb-3">
Génère un mot de passe temporaire aléatoire. L'utilisateur devra choisir un nouveau mot de passe à sa prochaine connexion.
</p>
<div id="user-reset-response" class="alert d-none" role="alert"></div>
<form id="reset-user-password-form" class="card p-3 mb-4">
<form id="reset-user-password-form">
<div class="row g-2 align-items-end">
<div class="col-md-8">
<label for="reset_user_email" class="form-label">Email utilisateur</label>
@@ -93,15 +130,21 @@
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h2>Admin - Ajouter un film</h2>
<p class="text-muted mb-4">
<div class="tab-pane fade" id="admin-movies" role="tabpanel" aria-labelledby="admin-movies-tab">
<div class="row g-3">
<div class="col-12 col-xxl-4">
<div class="card p-3">
<h4 class="mb-1">Ajouter un film</h4>
<p class="text-muted mb-3">
Ajoute un film via l’API (<code>/api/movies/add</code>). Le serveur récupère automatiquement le titre/plot/affiche depuis OMDb avec l’<code>imdb_id</code>.
</p>
<div id="response" class="alert d-none" role="alert"></div>
<form id="add-movie-form" class="card p-3">
<form id="add-movie-form">
<div class="mb-3">
<label for="oscar_year" class="form-label">Oscar year</label>
<input type="number" class="form-control" id="oscar_year" placeholder="2026" min="1900" max="3000" required>
@@ -124,29 +167,30 @@
<button type="button" id="reset-form" class="btn btn-outline-secondary">Reset</button>
</div>
</form>
</div>
</div>
<hr class="my-4">
<h2>Admin - Gérer les films</h2>
<p class="text-muted mb-3">
Sélectionne une année, puis coche les films à supprimer.
</p>
<div class="col-12 col-xxl-8">
<div class="card p-3">
<div class="d-flex flex-wrap align-items-end justify-content-between gap-2 mb-2">
<div>
<h4 class="mb-1">Gérer les films</h4>
<div class="text-muted">Sélectionne une année, puis coche les films à supprimer.</div>
</div>
</div>
<div class="row g-2 align-items-end">
<div class="col-md-6">
<div class="col-md-6 col-xl-4">
<label for="manage_year" class="form-label">Oscar year</label>
<select id="manage_year" class="form-select">
<option value="">Toutes</option>
</select>
</div>
<div class="col-md-6 d-flex gap-2">
<div class="col-md-6 col-xl-4 d-flex gap-2">
<button type="button" id="refresh-movies" class="btn btn-outline-primary w-100">Rafraîchir</button>
<button type="button" id="delete-selected" class="btn btn-danger w-100" disabled>Supprimer la sélection</button>
<button type="button" id="delete-selected" class="btn btn-danger w-100" disabled>Supprimer</button>
</div>
</div>
<div class="mt-3">
<div class="col-12 col-xl-4">
<div class="d-flex justify-content-between align-items-center">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="select-all-movies">
@@ -155,6 +199,7 @@
<small class="text-muted"><span id="selected-count">0</span> sélectionné(s)</small>
</div>
</div>
</div>
<div class="table-responsive mt-2">
<table class="table table-sm align-middle mb-0">
@@ -173,6 +218,10 @@
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Edit movie modal -->