Actualiser admin/dashboard.html
This commit is contained in:
+110
-151
@@ -4,15 +4,15 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Administration — Mon Cinéma</title>
|
||||
<link rel="stylesheet" href="../css/admin.css">
|
||||
<link rel="stylesheet" href="../css/public.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
||||
<link rel="stylesheet" href="../style.css"> <!-- Votre thème global -->
|
||||
<link rel="stylesheet" href="admin.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="admin-wrap">
|
||||
<div class="security-banner" id="security-banner" style="display: none;">
|
||||
<div class="sec-text"><i class="ti ti-alert-triangle"></i> Attention : Aucun mot de passe défini. Sécuriser le compte.</div>
|
||||
<button class="btn-action btn-small" onclick="openPasswordModal()">Sécuriser</button>
|
||||
<div id="security-banner" class="security-banner" style="display:none;">
|
||||
<span><i class="ti ti-alert-triangle"></i> Attention : Aucun mot de passe défini. Sécuriser le compte.</span>
|
||||
<button class="btn-action danger-solid btn-small" onclick="openPasswordModal()">Sécuriser</button>
|
||||
</div>
|
||||
|
||||
<header class="admin-header">
|
||||
@@ -21,60 +21,37 @@
|
||||
<p>Gestion centralisée de votre cinémathèque</p>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<a href="../index.html" class="btn-action outline">
|
||||
<i class="ti ti-external-link"></i> Voir le site
|
||||
</a>
|
||||
|
||||
<button class="btn-action outline" onclick="openConfigModal()">
|
||||
<i class="ti ti-settings"></i> Configuration
|
||||
</button>
|
||||
|
||||
<button class="btn-action outline" onclick="openPasswordModal()">
|
||||
<i class="ti ti-lock"></i> Sécurité
|
||||
</button>
|
||||
|
||||
<button class="btn-action outline" onclick="logout()">
|
||||
<i class="ti ti-logout"></i> Quitter
|
||||
</button>
|
||||
</div>
|
||||
<a href="../index.html" class="btn-action outline"><i class="ti ti-eye"></i> Voir le site</a>
|
||||
<button class="btn-action" onclick="openConfigModal()"><i class="ti ti-settings"></i> Configuration</button>
|
||||
<button class="btn-action" onclick="openPasswordModal()"><i class="ti ti-shield-lock"></i> Sécurité</button>
|
||||
<button class="btn-action outline" onclick="logout()"><i class="ti ti-logout"></i> Quitter</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="pub-tabs-container">
|
||||
<div class="pub-tabs">
|
||||
<button class="tab-btn active" id="btn-tab-critique" onclick="switchAdminTab('critique')">
|
||||
<i class="ti ti-star"></i> Mes Critiques
|
||||
</button>
|
||||
<button class="tab-btn" id="btn-tab-videotheque" onclick="switchAdminTab('videotheque')">
|
||||
<i class="ti ti-video"></i> Ma Vidéothèque
|
||||
</button>
|
||||
<button id="btn-tab-critique" class="tab-btn active" onclick="switchAdminTab('critique')"><i class="ti ti-star"></i> Mes Critiques</button>
|
||||
<button id="btn-tab-videotheque" class="tab-btn" onclick="switchAdminTab('videotheque')"><i class="ti ti-video"></i> Ma Vidéothèque</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-toolbar">
|
||||
<label style="display:flex; align-items:center; gap:0.5rem; color:var(--muted); font-size:0.9rem; cursor:pointer;">
|
||||
<input type="checkbox" id="admin-physical-checkbox"> Uniquement support physique / Cinéma
|
||||
</label>
|
||||
<button class="btn-action primary" onclick="openAddModal()"><i class="ti ti-plus"></i> Ajouter une œuvre</button>
|
||||
</div>
|
||||
|
||||
<div class="admin-toolbar">
|
||||
<span class="count" id="admin-count-label">0 élément(s)</span>
|
||||
<div class="search-box">
|
||||
<i class="ti ti-search"></i>
|
||||
<input type="text" id="search-input" placeholder="Rechercher un titre, un réalisateur...">
|
||||
</div>
|
||||
|
||||
<div class="physical-filter-admin">
|
||||
<label class="physical-filter-label">
|
||||
<input type="checkbox" id="admin-physical-checkbox">
|
||||
<span class="checkmark"></span>
|
||||
<span class="filter-text">Uniquement support physique / Cinéma</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button class="btn-action primary" onclick="openAddModal()">
|
||||
<i class="ti ti-plus"></i> Ajouter une œuvre
|
||||
</button>
|
||||
|
||||
<div class="count">
|
||||
<span id="admin-count-label">0 élément(s)</span>
|
||||
<input type="text" id="search-input" placeholder="Rechercher par titre ou réalisateur...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bulk-actions-bar" id="bulk-actions-bar" style="display: none;">
|
||||
<span><i class="ti ti-check"></i> <span id="bulk-count">0</span> élément(s) sélectionné(s)</span>
|
||||
<div id="bulk-actions-bar" class="bulk-actions-bar" style="display:none;">
|
||||
<span><strong id="bulk-count">0</strong> élément(s) sélectionné(s)</span>
|
||||
<button class="btn-action danger-solid btn-small" onclick="executeBulkDelete()"><i class="ti ti-trash"></i> Supprimer la sélection</button>
|
||||
</div>
|
||||
|
||||
@@ -82,145 +59,127 @@
|
||||
<table class="admin-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 40px; text-align: center;"><input type="checkbox" id="select-all-checkbox"></th>
|
||||
<th style="width: 70px; text-align: center;">Affiche</th>
|
||||
<th style="width:40px; text-align:center;"><input type="checkbox" id="select-all-checkbox"></th>
|
||||
<th style="width:60px;">Affiche</th>
|
||||
<th>Titre</th>
|
||||
<th style="width: 80px;">Année</th>
|
||||
<th style="width: 20%;">Réalisateur</th>
|
||||
<th style="width: 15%;">Informations</th>
|
||||
<th style="width: 100px; text-align: right;">Actions</th>
|
||||
<th style="width:80px;">Année</th>
|
||||
<th>Réalisateur</th>
|
||||
<th style="width:150px;">Informations</th>
|
||||
<th style="width:100px;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="admin-table-body"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="pagination" id="pagination-container"></div>
|
||||
|
||||
<div id="pagination-container" class="pagination"></div>
|
||||
<!-- ZONE D'IMPORT -->
|
||||
<div class="import-section">
|
||||
<h3><i class="ti ti-database-import"></i> <span id="import-title">Importer des données</span></h3>
|
||||
<p id="import-desc">Sélectionnez vos fichiers CSV pour commencer l'importation.</p>
|
||||
<label class="import-box" for="csv-file">
|
||||
<i class="ti ti-cloud-upload"></i>
|
||||
<p><strong>Cliquez pour sélectionner vos fichiers CSV</strong></p>
|
||||
<p>Le système détectera automatiquement le format selon l'onglet actif.</p>
|
||||
<input type="file" id="csv-file" accept=".csv" multiple hidden>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODALE CONFIGURATION -->
|
||||
<div class="overlay" id="config-modal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeConfigModal()">
|
||||
<i class="ti ti-x"></i>
|
||||
</button>
|
||||
|
||||
<h2 class="modal-h">
|
||||
<i class="ti ti-settings"></i>
|
||||
Configuration
|
||||
</h2>
|
||||
|
||||
<!-- Clés API -->
|
||||
<div class="form-grid">
|
||||
<div class="form-group" style="grid-column: span 2;">
|
||||
<!-- MODALES -->
|
||||
<div class="overlay" id="config-modal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeConfigModal()"><i class="ti ti-x"></i></button>
|
||||
<h3 class="modal-h"><i class="ti ti-settings"></i> Configuration</h3>
|
||||
<div class="form-group">
|
||||
<label>Clé API TMDB</label>
|
||||
<input type="text" id="tmdb-key-input" placeholder="Pour les critiques (réalisateur, streaming)">
|
||||
</div>
|
||||
<div class="import-section" id="import-zone">
|
||||
<label class="import-box" for="csv-file">
|
||||
<i class="ti ti-file-upload"></i>
|
||||
<div id="import-text-container">
|
||||
<p id="import-title"><strong>Importer des données</strong></p>
|
||||
<p id="import-desc" style="color: var(--muted); font-size: 0.85rem;">
|
||||
Sélectionnez vos fichiers CSV pour commencer l'importation.
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
<input type="file" id="csv-file" accept=".csv" multiple style="display: none;">
|
||||
<div style="display:flex; gap:1rem; margin-top:1.5rem; justify-content:flex-end;">
|
||||
<button class="btn-action outline" onclick="closeConfigModal()">Annuler</button>
|
||||
<button class="btn-action primary" onclick="saveConfigKeys()">Sauvegarder</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1.5rem; display: flex; gap: 1rem; justify-content: flex-end;">
|
||||
<button class="btn-action outline" onclick="closeConfigModal()">Annuler</button>
|
||||
<button class="btn-action primary" onclick="saveConfigKeys()">Sauvegarder</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overlay" id="password-modal">
|
||||
<div class="modal" style="max-width:450px;">
|
||||
<div class="modal">
|
||||
<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é</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</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>
|
||||
<h3 class="modal-h"><i class="ti ti-shield-lock"></i> Sécurité</h3>
|
||||
<div id="pwd-error" style="color:#ff4757; display:none; margin-bottom:1rem;"></div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label>Nouveau mot de passe</label><input type="password" id="new-password-input"></div>
|
||||
<div class="form-group"><label>Confirmer</label><input type="password" id="new-password-confirm"></div>
|
||||
</div>
|
||||
<div style="display:flex; gap:1rem; margin-top:1.5rem; justify-content:flex-end;">
|
||||
<button class="btn-action primary" onclick="saveNewPassword()">Mettre à jour</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overlay" id="confirm-modal">
|
||||
<div class="modal" style="max-width:450px; text-align:center;">
|
||||
<h2 class="modal-h" style="justify-content:center;"><i class="ti ti-alert-triangle" style="color:#ff4757;"></i> Suppression définitive</h2>
|
||||
<div class="modal" style="max-width:400px; text-align:center;">
|
||||
<h3 class="modal-h" style="justify-content:center;"><i class="ti ti-alert-triangle" style="color:#ff4757;"></i> Suppression définitive</h3>
|
||||
<p>Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible.</p>
|
||||
<div style="display:flex; gap:1rem; margin-top:2rem; justify-content:center;">
|
||||
<div style="display:flex; gap:1rem; margin-top:1.5rem; 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 class="overlay" id="progress-overlay">
|
||||
<div class="overlay" id="import-progress-modal">
|
||||
<div class="modal" style="max-width:450px; text-align:center;">
|
||||
<h2 class="modal-h" style="justify-content:center;"><i class="ti ti-loader"></i> Import en cours...</h2>
|
||||
<p id="progress-text">Préparation et récupération TMDB...</p>
|
||||
<div style="background:var(--border); border-radius:6px; overflow:hidden; margin:1.5rem 0; height:12px;">
|
||||
<div id="progress-bar" style="height:100%; background:var(--gold); width:0%; transition:width 0.3s;"></div>
|
||||
</div>
|
||||
<p id="progress-count" style="font-weight:bold;">0 / 0</p>
|
||||
<h3 class="modal-h" id="import-modal-title" style="justify-content:center;"></h3>
|
||||
<p id="import-modal-desc">Préparation de vos fichiers...</p>
|
||||
<div class="progress-container"><div class="progress-bar" id="import-progress-bar"></div></div>
|
||||
<p style="font-size:1.2rem; font-weight:bold; color:var(--gold);" id="import-modal-counter">0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overlay" id="admin-modal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeAdminModal()"><i class="ti ti-x"></i></button>
|
||||
<h2 class="modal-h"><i class="ti ti-movie"></i> Éditer / Ajouter</h2>
|
||||
<form id="film-form">
|
||||
<input type="hidden" id="f-id">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label>Titre</label><input type="text" id="f-title" required></div>
|
||||
<div class="form-group"><label>Réalisateur</label><input type="text" id="f-director"></div>
|
||||
<div class="form-group"><label>Année</label><input type="number" id="f-year"></div>
|
||||
<div class="form-group"><label>Affiche (URL)</label><input type="text" id="f-poster"></div>
|
||||
</div>
|
||||
|
||||
<div id="form-critique-fields" style="display:none; margin-top: 1rem;">
|
||||
<div class="form-group"><label>Note (sur 5)</label><input type="number" step="0.5" id="f-rating"></div>
|
||||
<div class="form-group" style="margin-top: 1rem;"><label>Critique</label><textarea id="f-review" rows="4"></textarea></div>
|
||||
<div class="form-group" style="margin-top: 1rem;"><label>Plateforme de Streaming</label><input type="text" id="f-streaming"></div>
|
||||
</div>
|
||||
|
||||
<div id="form-videotheque-fields" style="display:none; margin-top: 1rem;">
|
||||
|
||||
<div class="overlay" id="admin-modal">
|
||||
<div class="modal">
|
||||
<button class="modal-close" onclick="closeAdminModal()"><i class="ti ti-x"></i></button>
|
||||
<h3 class="modal-h"><i class="ti ti-edit"></i> Éditer / Ajouter</h3>
|
||||
<form id="film-form">
|
||||
<input type="hidden" id="f-id">
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label>Format</label><input type="text" id="f-format"></div>
|
||||
<div class="form-group"><label>Durée</label><input type="text" id="f-length"></div>
|
||||
<div class="form-group"><label>Éditeur</label><input type="text" id="f-publisher"></div>
|
||||
<div class="form-group">
|
||||
<label>Code EAN</label>
|
||||
<input type="text" id="f-ean">
|
||||
</div>
|
||||
<div class="form-group"><label>Nombre de disques</label><input type="number" id="f-discs"></div>
|
||||
<div class="form-group"><label>Aspect Ratio</label><input type="text" id="f-aspect"></div>
|
||||
<div class="form-group" style="grid-column: span 2;"><label>Titre</label><input type="text" id="f-title" required></div>
|
||||
<div class="form-group"><label>Réalisateur</label><input type="text" id="f-director"></div>
|
||||
<div class="form-group"><label>Année</label><input type="text" id="f-year"></div>
|
||||
<div class="form-group" style="grid-column: span 2;"><label>Affiche (URL)</label><input type="text" id="f-poster"></div>
|
||||
</div>
|
||||
<div class="form-group" style="margin-top: 1rem;"><label>Description</label><textarea id="f-description" rows="3"></textarea></div>
|
||||
</div>
|
||||
<button type="submit" class="btn-action primary" style="margin-top: 1.5rem; width: 100%; justify-content: center;">Enregistrer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- MODALE D'IMPORT PROGRESSIVE -->
|
||||
<div class="overlay" id="import-progress-modal">
|
||||
<div class="modal" style="max-width: 400px; text-align: center;">
|
||||
<h2 class="modal-h" style="justify-content: center;" id="import-modal-title">
|
||||
<i class="ti ti-database-import"></i> Importation
|
||||
</h2>
|
||||
<p id="import-modal-desc">Préparation de vos fichiers...</p>
|
||||
|
||||
<!-- Barre de progression stylisée -->
|
||||
<div class="progress-container">
|
||||
<div class="progress-bar" id="import-progress-bar"></div>
|
||||
|
||||
<div id="form-critique-fields">
|
||||
<div class="divider">Données Critique</div>
|
||||
<div class="form-grid">
|
||||
<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>Plateforme de Streaming</label><input type="text" id="f-streaming"></div>
|
||||
<div class="form-group" style="grid-column: span 2;"><label>Critique</label><textarea id="f-review" rows="4"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="form-videotheque-fields" style="display:none;">
|
||||
<div class="divider">Données Vidéothèque</div>
|
||||
<div class="form-grid">
|
||||
<div class="form-group"><label>Format</label><input type="text" id="f-format"></div>
|
||||
<div class="form-group"><label>Durée</label><input type="text" id="f-length"></div>
|
||||
<div class="form-group"><label>Éditeur</label><input type="text" id="f-publisher"></div>
|
||||
<div class="form-group"><label>Code EAN</label><input type="text" id="f-ean"></div>
|
||||
<div class="form-group"><label>Nombre de disques</label><input type="number" id="f-discs"></div>
|
||||
<div class="form-group"><label>Aspect Ratio</label><input type="text" id="f-aspect"></div>
|
||||
<div class="form-group" style="grid-column: span 2;"><label>Description</label><textarea id="f-description" rows="3"></textarea></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; gap:1rem; margin-top:1.5rem; justify-content:flex-end;">
|
||||
<button type="button" class="btn-action outline" onclick="closeAdminModal()">Annuler</button>
|
||||
<button type="submit" class="btn-action primary">Enregistrer</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p id="import-modal-counter" style="margin-top: 10px; font-weight: 600; font-size: 0.9rem;">0%</p>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../js/admin.js"></script>
|
||||
|
||||
<script src="admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user