Actualiser admin/dashboard.html
This commit is contained in:
+46
-207
@@ -3,259 +3,98 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Administration — Mon Cinéma</title>
|
<title>Dashboard - Cinémathèque</title>
|
||||||
<link rel="stylesheet" href="../css/public.css">
|
<link rel="stylesheet" href="admin.css">
|
||||||
<link rel="stylesheet" href="../css/admin.css">
|
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="admin-wrap">
|
<div class="dashboard-header">
|
||||||
<div id="security-banner" class="security-banner" style="display: none;">
|
|
||||||
<div class="sec-text">
|
|
||||||
<i class="ti ti-alert-triangle"></i>
|
|
||||||
<span>Attention : Aucun mot de passe défini pour protéger l'administration.</span>
|
|
||||||
</div>
|
|
||||||
<button class="btn-action danger-solid btn-small" onclick="openPasswordModal()">
|
|
||||||
<i class="ti ti-lock"></i> Sécuriser le compte
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<header class="admin-header">
|
|
||||||
<div class="header-titles">
|
<div class="header-titles">
|
||||||
<h1>Espace <span>Admin</span></h1>
|
<h1>Gestion <span>Cinémathèque</span></h1>
|
||||||
<p>Gestion centralisée de la cinémathèque</p>
|
<p>Administrez vos critiques et votre vidéothèque</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-actions">
|
<div class="header-actions">
|
||||||
<a href="../index.html" class="btn-action outline">
|
<button class="btn-action" onclick="openAddModal()"><i class="ti ti-plus"></i> Ajouter</button>
|
||||||
<i class="ti ti-external-link"></i> Voir le site
|
<button class="btn-action" onclick="executeBulkDelete()"><i class="ti ti-trash"></i> Supprimer</button>
|
||||||
</a>
|
<button class="btn-action secondary" onclick="openConfigModal()"><i class="ti ti-settings"></i> Config</button>
|
||||||
<button class="btn-action outline" onclick="openConfigModal()" title="Configuration globale">
|
<button class="btn-action outline" onclick="logout()"><i class="ti ti-logout"></i></button>
|
||||||
<i class="ti ti-settings"></i>
|
</div>
|
||||||
</button>
|
|
||||||
<button class="btn-action outline" onclick="openPasswordModal()" title="Sécurité">
|
|
||||||
<i class="ti ti-lock"></i>
|
|
||||||
</button>
|
|
||||||
<button class="btn-action outline text-danger" onclick="logout()" title="Déconnexion">
|
|
||||||
<i class="ti ti-logout"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="admin-controls-bar">
|
<!-- ONGLETS CENTRÉS -->
|
||||||
<div class="pub-tabs">
|
<div class="tabs-container">
|
||||||
|
<div class="tab-btns">
|
||||||
<button class="tab-btn active" id="btn-tab-critique" onclick="switchAdminTab('critique')">
|
<button class="tab-btn active" id="btn-tab-critique" onclick="switchAdminTab('critique')">
|
||||||
<i class="ti ti-star"></i> Critiques
|
<i class="ti ti-star"></i> Critiques
|
||||||
</button>
|
</button>
|
||||||
<button class="tab-btn" id="btn-tab-videotheque" onclick="switchAdminTab('videotheque')">
|
<button class="tab-btn" id="btn-tab-videotheque" onclick="switchAdminTab('videotheque')">
|
||||||
<i class="ti ti-disc"></i> Vidéothèque
|
<i class="ti ti-video"></i> Vidéothèque
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- BARRE D'OUTILS -->
|
||||||
|
<div class="admin-toolbar">
|
||||||
<div class="search-box">
|
<div class="search-box">
|
||||||
<i class="ti ti-search"></i>
|
<i class="ti ti-search"></i>
|
||||||
<input type="text" id="search-input" placeholder="Rechercher un titre, un réalisateur...">
|
<input type="text" id="search-input" placeholder="Rechercher un titre, un réalisateur...">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="admin-count">
|
||||||
<div class="action-add">
|
<span id="admin-count-label">0 élément(s)</span>
|
||||||
<button class="btn-action primary" onclick="openAddModal()">
|
|
||||||
<i class="ti ti-plus"></i> Ajouter une œuvre
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="admin-sub-toolbar">
|
|
||||||
<span class="count" id="admin-count-label">0 élément(s)</span>
|
|
||||||
|
|
||||||
<div id="bulk-actions-bar" class="bulk-actions-bar" style="display: none;">
|
|
||||||
<span><i class="ti ti-check"></i> <strong id="bulk-count">0</strong> sélectionné(s)</span>
|
|
||||||
<button class="btn-action danger-solid btn-small" onclick="executeBulkDelete()">
|
|
||||||
<i class="ti ti-trash"></i> Supprimer
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- TABLEAU SANS AFFICHE (Évite le scroll horizontal) -->
|
||||||
<div class="table-container">
|
<div class="table-container">
|
||||||
<table class="admin-table">
|
<table class="admin-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="text-align:center; width: 50px;">
|
<th><input type="checkbox" id="select-all-checkbox"></th>
|
||||||
<input type="checkbox" id="select-all-checkbox" title="Tout sélectionner">
|
<th>Titre</th>
|
||||||
</th>
|
<th>Année</th>
|
||||||
<th style="width: 80px;">Affiche</th>
|
<th>Réalisateur</th>
|
||||||
<th style="width: 30%;">Titre</th>
|
<th>Informations</th>
|
||||||
<th style="width: 80px;">Année</th>
|
<th>Actions</th>
|
||||||
<th style="width: 20%;">Réalisateur</th>
|
|
||||||
<th style="width: 25%;">Informations</th>
|
|
||||||
<th style="text-align:right; width: 120px;">Actions</th>
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="admin-table-body">
|
<tbody id="admin-table-body"></tbody>
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- PAGINATION -->
|
||||||
<div id="pagination-container" class="pagination"></div>
|
<div id="pagination-container" class="pagination"></div>
|
||||||
|
|
||||||
<footer style="text-align: center; margin-top: 2rem; color: var(--muted); font-size: 0.9rem;">
|
<!-- MODALES (Structure simplifiée) -->
|
||||||
<p>Mon Cinéma — Administration</p>
|
<div class="overlay" id="admin-modal">
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="admin-modal" class="overlay">
|
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<button class="modal-close" onclick="closeAdminModal()"><i class="ti ti-x"></i></button>
|
<button class="modal-close"><i class="ti ti-x"></i></button>
|
||||||
<h2 class="modal-h"><i class="ti ti-movie"></i> Éditer l'œuvre</h2>
|
<h2>Formulaire</h2>
|
||||||
<form id="film-form">
|
<form id="film-form">
|
||||||
|
<div class="form-grid">
|
||||||
<input type="hidden" id="f-id">
|
<input type="hidden" id="f-id">
|
||||||
<div class="form-grid">
|
<input type="text" id="f-title" placeholder="Titre" required>
|
||||||
<div class="form-group" style="grid-column: span 2;">
|
<input type="number" id="f-year" placeholder="Année">
|
||||||
<label>Titre *</label>
|
<input type="text" id="f-director" placeholder="Réalisateur">
|
||||||
<input type="text" id="f-title" required>
|
<input type="text" id="f-poster" placeholder="URL Affiche">
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Année</label>
|
|
||||||
<input type="number" id="f-year">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Réalisateur</label>
|
|
||||||
<input type="text" id="f-director">
|
|
||||||
</div>
|
|
||||||
<div class="form-group" style="grid-column: span 2;">
|
|
||||||
<label>URL de l'Affiche</label>
|
|
||||||
<input type="url" id="f-poster">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="form-critique-fields">
|
<div id="form-critique-fields">
|
||||||
<div class="divider">Champs Critiques</div>
|
<input type="number" id="f-rating" placeholder="Note (1-5)" step="0.1">
|
||||||
<div class="form-grid">
|
<textarea id="f-review" placeholder="Avis..."></textarea>
|
||||||
<div class="form-group">
|
|
||||||
<label>Note (sur 5)</label>
|
|
||||||
<input type="number" step="0.5" min="0" max="5" id="f-rating">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Lien Streaming</label>
|
|
||||||
<input type="url" id="f-streaming">
|
|
||||||
</div>
|
|
||||||
<div class="form-group" style="grid-column: span 2;">
|
|
||||||
<label>Critique / Avis</label>
|
|
||||||
<textarea id="f-review" rows="4"></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<button type="submit" class="btn-action secondary" style="width:100%; margin-top:1rem;">Sauvegarder</button>
|
||||||
|
|
||||||
<div id="form-videotheque-fields" style="display: none;">
|
|
||||||
<div class="divider">Champs Vidéothèque (Physique)</div>
|
|
||||||
<div class="form-grid">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Format</label>
|
|
||||||
<select id="f-format">
|
|
||||||
<option value="Blu-ray 4K">Blu-ray 4K</option>
|
|
||||||
<option value="Blu-ray">Blu-ray</option>
|
|
||||||
<option value="DVD">DVD</option>
|
|
||||||
<option value="VHS">VHS</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Éditeur</label>
|
|
||||||
<input type="text" id="f-publisher">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Durée (min)</label>
|
|
||||||
<input type="number" id="f-length">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Ratio Image</label>
|
|
||||||
<input type="text" id="f-aspect" placeholder="ex: 2.39:1">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Code Barre (EAN/ISBN)</label>
|
|
||||||
<input type="text" id="f-ean">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Nombre de disques</label>
|
|
||||||
<input type="number" id="f-discs" value="1">
|
|
||||||
</div>
|
|
||||||
<div class="form-group" style="grid-column: span 2;">
|
|
||||||
<label>Description / État</label>
|
|
||||||
<textarea id="f-description" rows="3"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div style="margin-top: 2rem; display: flex; justify-content: flex-end; gap: 1rem;">
|
|
||||||
<button type="button" class="btn-action outline" onclick="closeAdminModal()">Annuler</button>
|
|
||||||
<button type="submit" class="btn-action primary">Enregistrer</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="config-modal" class="overlay">
|
<div class="overlay" id="confirm-modal">
|
||||||
<div class="modal">
|
<div class="modal">
|
||||||
<button class="modal-close" onclick="closeConfigModal()"><i class="ti ti-x"></i></button>
|
<button class="modal-close"><i class="ti ti-x"></i></button>
|
||||||
<h2 class="modal-h"><i class="ti ti-settings"></i> Configuration globale</h2>
|
<h3>Confirmation</h3>
|
||||||
|
<p>Êtes-vous sûr de vouloir supprimer cet élément ?</p>
|
||||||
<div class="form-group" style="margin-bottom: 2rem;">
|
<button id="confirm-btn" class="btn-action secondary">Confirmer</button>
|
||||||
<label>Clé API TMDB (The Movie Database)</label>
|
|
||||||
<div style="display: flex; gap: 0.5rem; margin-top: 0.5rem;">
|
|
||||||
<input type="text" id="tmdb-key-input" placeholder="Entrez votre clé v3 auth...">
|
|
||||||
<button class="btn-action primary" onclick="saveTmdbKey()">Sauvegarder</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="divider">Importer un fichier CSV</div>
|
<script src="admin.js"></script>
|
||||||
<div class="import-box" onclick="document.getElementById('csv-file').click()">
|
|
||||||
<i class="ti ti-file-upload"></i>
|
|
||||||
<p style="margin:0; font-weight: 600;">Cliquez pour parcourir ou déposez votre CSV</p>
|
|
||||||
<p style="margin: 0.5rem 0 0 0; font-size: 0.85rem; color: var(--muted);">Les données seront ajoutées dans l'onglet actuel.</p>
|
|
||||||
<input type="file" id="csv-file" accept=".csv">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="password-modal" class="overlay">
|
|
||||||
<div class="modal" style="max-width: 450px;">
|
|
||||||
<button class="modal-close" onclick="closePasswordModal()"><i class="ti ti-x"></i></button>
|
|
||||||
<h2 class="modal-h"><i class="ti ti-lock"></i> Sécurité du compte</h2>
|
|
||||||
<div class="form-group" style="margin-bottom: 1rem;">
|
|
||||||
<label>Nouveau mot de passe</label>
|
|
||||||
<input type="password" id="new-password-input">
|
|
||||||
</div>
|
|
||||||
<div class="form-group" style="margin-bottom: 1.5rem;">
|
|
||||||
<label>Confirmer le mot de passe</label>
|
|
||||||
<input type="password" id="new-password-confirm">
|
|
||||||
</div>
|
|
||||||
<div id="pwd-error" style="color: #ff4757; font-size: 0.85rem; margin-bottom: 1rem; display: none;"></div>
|
|
||||||
<button class="btn-action primary" style="width: 100%; justify-content: center;" onclick="saveNewPassword()">Mettre à jour</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="confirm-modal" class="overlay">
|
|
||||||
<div class="modal" style="max-width: 400px; text-align: center;">
|
|
||||||
<div style="font-size: 3rem; color: #ff6b6b; margin-bottom: 1rem;">
|
|
||||||
<i class="ti ti-alert-circle"></i>
|
|
||||||
</div>
|
|
||||||
<h3 style="color:var(--text); margin-bottom: 1rem; font-size: 1.2rem;">Suppression définitive</h3>
|
|
||||||
<p style="margin-bottom: 2rem; color:var(--muted); font-size: 0.95rem;">Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible.</p>
|
|
||||||
<div style="display: flex; gap: 1rem; justify-content: center;">
|
|
||||||
<button class="btn-action outline" onclick="closeConfirmModal()">Annuler</button>
|
|
||||||
<button class="btn-action danger-solid" id="confirm-btn">Oui, supprimer</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="progress-overlay" class="overlay">
|
|
||||||
<div class="modal" style="max-width: 500px; text-align: center;">
|
|
||||||
<h3 class="modal-h" style="justify-content: center;"><i class="ti ti-download"></i> Import en cours...</h3>
|
|
||||||
<p id="progress-text" style="margin-bottom: 1.5rem; color: var(--muted);">Préparation et récupération TMDB...</p>
|
|
||||||
<div style="background: var(--surface); border-radius: 8px; height: 12px; overflow: hidden; border: 1px solid var(--border);">
|
|
||||||
<div id="progress-bar" style="width: 0%; height: 100%; background: var(--gold); transition: width 0.3s ease;"></div>
|
|
||||||
</div>
|
|
||||||
<p id="progress-count" style="margin-top: 0.5rem; font-size: 0.85rem; font-weight: bold; color: var(--text);">0 / 0</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../js/admin.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user