Cursor Agentandmathieumoran1
e0ec4760ce
This commit introduces the ability to edit movie details through a modal interface. It includes backend API endpoints for updating movie information and frontend logic to display and manage the edit modal. The changes also refine the year selection and movie loading processes in the admin panel. Co-authored-by: mathieumoran1 <[email protected]>
210 lines
8.5 KiB
HTML
210 lines
8.5 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 2026 - 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 - 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>
|
||
|