Cursor Agentandmathieumoran1
7ff02207f6
This commit introduces the ability to select and manage the active Oscar year. This change affects page titles, API requests, and data filtering across the application, ensuring that all views and statistics are relevant to the chosen year. Co-authored-by: mathieumoran1 <[email protected]>
228 lines
9.2 KiB
HTML
228 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pool Oscars - Admin</title>
|
||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="./css/app.css" rel="stylesheet">
|
||
<style>
|
||
.navbar-custom {
|
||
background-color: black;
|
||
color: white;
|
||
}
|
||
.navbar-custom .navbar-brand,
|
||
.navbar-custom .nav-link {
|
||
color: white;
|
||
}
|
||
.navbar-custom .nav-link:hover {
|
||
color: #ddd;
|
||
}
|
||
.navbar-toggler {
|
||
border-color: white;
|
||
}
|
||
.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");
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-light">
|
||
|
||
<nav class="navbar navbar-expand-lg navbar-custom">
|
||
<div class="container">
|
||
<a class="navbar-brand" style="margin-left: -7px;">
|
||
<img src="img/logo_w.png" style="max-width: 220px; height: 70px; object-fit: contain;">
|
||
</a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarNav">
|
||
<div class="navbar-nav">
|
||
<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="control.html" class="nav-link btn btn-warning me-2">Admin</a>
|
||
</div>
|
||
<div class="d-flex ms-auto mt-2 mt-lg-0 align-items-center">
|
||
<span id="user-name" class="navbar-text me-3"></span>
|
||
<button id="log-off" class="btn btn-danger">Déconnexion</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container mt-5" style="max-width: 720px;">
|
||
<h2>Admin - Année active</h2>
|
||
<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>
|
||
<input type="number" class="form-control" id="active_oscar_year" placeholder="2026" min="1900" max="3000">
|
||
<div class="form-text">Ex: mets 2025 → tout le monde voit les stats/films 2025.</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<button type="button" id="save-active-year" class="btn btn-warning w-100">Appliquer l’année</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h2>Admin - Ajouter un film</h2>
|
||
<p class="text-muted mb-4">
|
||
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">
|
||
<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>
|
||
<div class="form-text">Permet de séparer les films et les stats par année.</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="imdb_id" class="form-label">IMDB ID (ex: tt1234567)</label>
|
||
<input type="text" class="form-control" id="imdb_id" placeholder="tt..." required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="category" class="form-label">Catégorie</label>
|
||
<input type="text" class="form-control" id="category" placeholder="Best Picture, etc." required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label for="vod_link" class="form-label">Lien VOD</label>
|
||
<input type="url" class="form-control" id="vod_link" placeholder="https://..." required>
|
||
</div>
|
||
<div class="d-flex gap-2">
|
||
<button type="submit" class="btn btn-primary">Ajouter</button>
|
||
<button type="button" id="reset-form" class="btn btn-outline-secondary">Reset</button>
|
||
</div>
|
||
</form>
|
||
|
||
<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="card p-3">
|
||
<div class="row g-2 align-items-end">
|
||
<div class="col-md-6">
|
||
<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">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3">
|
||
<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">
|
||
<label class="form-check-label" for="select-all-movies">Tout sélectionner</label>
|
||
</div>
|
||
<small class="text-muted"><span id="selected-count">0</span> sélectionné(s)</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="table-responsive mt-2">
|
||
<table class="table table-sm align-middle mb-0">
|
||
<thead>
|
||
<tr>
|
||
<th style="width: 1%;">Sel.</th>
|
||
<th>Titre</th>
|
||
<th style="width: 20%;">Catégorie</th>
|
||
<th style="width: 12%;">Année</th>
|
||
<th style="width: 1%;">Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="admin-movies-body">
|
||
<tr><td colspan="5" class="text-muted">Charge la liste…</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Edit movie modal -->
|
||
<div class="modal fade" id="editMovieModal" tabindex="-1" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg modal-dialog-scrollable">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title" id="editMovieModalTitle">Modifier le film</h5>
|
||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<input type="hidden" id="edit_movie_id">
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<label for="edit_imdb_id" class="form-label">IMDB ID (ex: tt1234567)</label>
|
||
<input type="text" class="form-control" id="edit_imdb_id" placeholder="tt..." required>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="edit_year" class="form-label">Oscar year</label>
|
||
<input type="number" class="form-control" id="edit_year" placeholder="2026" min="1900" max="3000">
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label for="edit_category" class="form-label">Catégorie</label>
|
||
<input type="text" class="form-control" id="edit_category" placeholder="Best Picture, etc." required>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="edit_vod_link" class="form-label">Lien VOD</label>
|
||
<input type="url" class="form-control" id="edit_vod_link" placeholder="https://..." required>
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="checkbox" id="edit_refresh_omdb">
|
||
<label class="form-check-label" for="edit_refresh_omdb">
|
||
Recharger depuis OMDb (écrase titre / plot / rating / poster)
|
||
</label>
|
||
</div>
|
||
<div class="form-text">Si coché, le serveur refait un appel OMDb via l’IMDB ID au moment de l’enregistrement.</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<label for="edit_title" class="form-label">Titre</label>
|
||
<input type="text" class="form-control" id="edit_title" placeholder="Title">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="edit_rating" class="form-label">Rating (imdbRating)</label>
|
||
<input type="text" class="form-control" id="edit_rating" placeholder="7.9">
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<label for="edit_poster" class="form-label">Poster URL</label>
|
||
<input type="url" class="form-control" id="edit_poster" placeholder="https://...">
|
||
</div>
|
||
|
||
<div class="col-12">
|
||
<label for="edit_description" class="form-label">Description (Plot)</label>
|
||
<textarea class="form-control" id="edit_description" rows="4" placeholder="Plot..."></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Annuler</button>
|
||
<button type="button" class="btn btn-primary" id="save-movie-changes">Enregistrer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="./js/app_control.js"></script>
|
||
|
||
</body>
|
||
</html>
|
||
|