Actualiser admin/dashboard.html
This commit is contained in:
+24
-183
@@ -8,237 +8,78 @@
|
|||||||
<link rel="stylesheet" href="../css/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 class="admin-body">
|
||||||
|
|
||||||
<div class="admin-wrap">
|
<div class="admin-wrap">
|
||||||
|
|
||||||
<!-- BANNIÈRE SÉCURITÉ (premier lancement) -->
|
|
||||||
<div class="security-banner" id="security-banner" style="display:none;">
|
<div class="security-banner" id="security-banner" style="display:none;">
|
||||||
<span><i class="ti ti-alert-triangle"></i> <strong>Attention :</strong> Aucun mot de passe n'est défini. Votre espace admin est accessible à tous !</span>
|
<span><i class="ti ti-alert-triangle"></i> <strong>Attention :</strong> Aucun mot de passe défini.</span>
|
||||||
<button onclick="openPasswordModal()">Définir un mot de passe</button>
|
<button onclick="openPasswordModal()">Sécuriser le compte</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- EN-TÊTE ADMIN -->
|
<header class="admin-header">
|
||||||
<div class="admin-header">
|
|
||||||
<div>
|
<div>
|
||||||
<h1 class="admin-title">Espace <span>Admin</span></h1>
|
<h1 class="admin-title">Espace <span>Admin</span></h1>
|
||||||
<p id="admin-subtitle" style="color:var(--muted); font-size:0.82rem; margin-top:0.3rem;">Gestion de vos critiques de films</p>
|
<p id="admin-subtitle">Gestion centralisée de votre cinémathèque</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="admin-actions">
|
<div class="admin-actions">
|
||||||
<button class="btn btn-outline" onclick="openConfigModal()"><i class="ti ti-key"></i> Clé TMDB</button>
|
<button class="btn btn-outline" onclick="openConfigModal()"><i class="ti ti-key"></i> Clé TMDB</button>
|
||||||
<button class="btn btn-outline" onclick="openPasswordModal()"><i class="ti ti-lock"></i> Mot de passe</button>
|
<button class="btn btn-outline" onclick="openPasswordModal()"><i class="ti ti-lock"></i> Sécurité</button>
|
||||||
<button class="btn btn-danger" onclick="logout()"><i class="ti ti-logout"></i> Quitter</button>
|
<button class="btn btn-danger" onclick="logout()"><i class="ti ti-logout"></i> Quitter</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
|
|
||||||
<!-- ONGLETS -->
|
<nav class="admin-tabs">
|
||||||
<div class="admin-tabs">
|
|
||||||
<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-message-star"></i> Critiques
|
<i class="ti ti-message-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-device-tv"></i> Vidéothèque
|
<i class="ti ti-device-tv"></i> Vidéothèque
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
<!-- IMPORT CSV (Letterboxd) -->
|
<section id="import-section" class="import-box">
|
||||||
<div id="import-section" style="background:var(--surface2); border:2px dashed var(--border); border-radius:8px; padding:1.8rem; text-align:center; margin-bottom:1.8rem;">
|
<i class="ti ti-file-upload"></i>
|
||||||
<i class="ti ti-file-upload" style="font-size:2.2rem; color:var(--gold); display:block; margin-bottom:0.6rem;"></i>
|
<p>Importez vos exports <strong>Letterboxd</strong> (.csv)</p>
|
||||||
<p style="margin-bottom:1rem; font-size:0.9rem; color:var(--muted);">Importez vos exports <strong style="color:var(--text);">Letterboxd</strong> (.csv)</p>
|
|
||||||
<input type="file" id="csv-file-input" accept=".csv" style="display:none;" onchange="handleCsvUpload(this)">
|
<input type="file" id="csv-file-input" accept=".csv" style="display:none;" onchange="handleCsvUpload(this)">
|
||||||
<button class="btn btn-outline" onclick="document.getElementById('csv-file-input').click()">
|
<button class="btn btn-outline" onclick="document.getElementById('csv-file-input').click()">
|
||||||
<i class="ti ti-file-spreadsheet"></i> Choisir un fichier .csv
|
<i class="ti ti-file-spreadsheet"></i> Choisir un fichier
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<!-- BARRE D'ACTIONS EN MASSE -->
|
<div class="toolbar-container">
|
||||||
<div class="bulk-actions-bar" id="bulk-actions-bar" style="display:none;">
|
<div class="bulk-actions-bar" id="bulk-actions-bar" style="display:none;">
|
||||||
<span style="font-size:0.88rem; color:var(--gold); font-weight:500;">
|
<span><i class="ti ti-checkbox"></i> <span id="bulk-count">0</span> élément(s) sélectionné(s)</span>
|
||||||
<i class="ti ti-checkbox"></i> <span id="bulk-count">0</span> élément(s) sélectionné(s)
|
<button class="btn btn-danger" onclick="executeBulkDelete()"><i class="ti ti-trash"></i> Supprimer la sélection</button>
|
||||||
</span>
|
|
||||||
<button class="btn btn-danger" onclick="executeBulkDelete()">
|
|
||||||
<i class="ti ti-trash"></i> Supprimer la sélection
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- TOOLBAR -->
|
<div class="toolbar-actions">
|
||||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
|
|
||||||
<span class="count" id="admin-count-label">Chargement…</span>
|
<span class="count" id="admin-count-label">Chargement…</span>
|
||||||
<button class="btn btn-gold" onclick="openAddModal()"><i class="ti ti-plus"></i> Ajouter</button>
|
<button class="btn btn-gold" onclick="openAddModal()"><i class="ti ti-plus"></i> Ajouter une œuvre</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- TABLEAU -->
|
|
||||||
<div class="admin-table-wrap">
|
<div class="admin-table-wrap">
|
||||||
<table class="admin-table">
|
<table class="admin-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th style="width:42px; text-align:center;">
|
<th style="width:48px; text-align:center;">
|
||||||
<input type="checkbox" id="select-all-checkbox" onclick="toggleSelectAll(this)">
|
<input type="checkbox" id="select-all-checkbox" class="film-checkbox" onclick="toggleSelectAll(this)">
|
||||||
</th>
|
</th>
|
||||||
<th style="width:56px; text-align:center;">Affiche</th>
|
<th style="width:60px; text-align:center;">Affiche</th>
|
||||||
<th>Titre</th>
|
<th>Titre</th>
|
||||||
<th>Année</th>
|
<th>Année</th>
|
||||||
<th>Réalisateur</th>
|
<th>Réalisateur</th>
|
||||||
<th id="th-dynamic">Note</th>
|
<th id="th-dynamic">Note</th>
|
||||||
<th style="width:110px; text-align:center;">Actions</th>
|
<th style="width:120px; text-align:center;">Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="admin-table-body"></tbody>
|
<tbody id="admin-table-body"></tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div><!-- /.admin-wrap -->
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ══════════════════════════════════════════
|
|
||||||
MODALE : AJOUTER / MODIFIER UN FILM
|
|
||||||
══════════════════════════════════════════ -->
|
|
||||||
<div class="overlay" id="admin-modal" onclick="if(event.target===this) closeAdminModal()">
|
|
||||||
<div class="modal" style="max-width:600px;">
|
|
||||||
<button class="modal-close" onclick="closeAdminModal()"><i class="ti ti-x"></i></button>
|
|
||||||
<h3 class="modal-h" id="modal-form-title">Ajouter une œuvre</h3>
|
|
||||||
|
|
||||||
<form id="film-form" onsubmit="saveFilmForm(event)">
|
|
||||||
<input type="hidden" id="f-id">
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Titre du film *</label>
|
|
||||||
<input type="text" id="f-title" required autocomplete="off">
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Année</label>
|
|
||||||
<input type="number" id="f-year" min="1800" max="2100">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Réalisateur</label>
|
|
||||||
<input type="text" id="f-director">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>URL de l'affiche</label>
|
|
||||||
<input type="url" id="f-poster" placeholder="https://image.tmdb.org/…">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Champs spécifiques CRITIQUE -->
|
|
||||||
<div id="form-critique-fields">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Note (1 à 5 étoiles)</label>
|
|
||||||
<select id="f-rating">
|
|
||||||
<option value="5">★★★★★ (5/5)</option>
|
|
||||||
<option value="4">★★★★☆ (4/5)</option>
|
|
||||||
<option value="3" selected>★★★☆☆ (3/5)</option>
|
|
||||||
<option value="2">★★☆☆☆ (2/5)</option>
|
|
||||||
<option value="1">★☆☆☆☆ (1/5)</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Critique</label>
|
|
||||||
<textarea id="f-review" rows="5"></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Plateforme / Mode de visionnage</label>
|
|
||||||
<input type="text" id="f-streaming" placeholder="Ex : Canal+, Cinéma, Blu-ray…">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Champs spécifiques VIDÉOTHÈQUE -->
|
|
||||||
<div id="form-videotheque-fields" style="display:none;">
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Format physique</label>
|
|
||||||
<input type="text" id="f-format" placeholder="4K Ultra HD, Blu-ray, DVD…">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Durée (minutes)</label>
|
|
||||||
<input type="number" id="f-length">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Éditeur</label>
|
|
||||||
<input type="text" id="f-publisher">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Format image</label>
|
|
||||||
<input type="text" id="f-aspect" placeholder="2.39:1, 1.85:1…">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Code barre (EAN)</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" min="1">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Synopsis / Notes d'édition</label>
|
|
||||||
<textarea id="f-description" rows="4"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button type="submit" class="btn-save"><i class="ti ti-device-floppy"></i> Enregistrer</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ══════════════════════════════════════════
|
|
||||||
MODALE : CLÉ API TMDB
|
|
||||||
══════════════════════════════════════════ -->
|
|
||||||
<div class="overlay" id="config-modal" onclick="if(event.target===this) closeConfigModal()">
|
|
||||||
<div class="modal" style="max-width:440px;">
|
|
||||||
<button class="modal-close" onclick="closeConfigModal()"><i class="ti ti-x"></i></button>
|
|
||||||
<h3 class="modal-h"><i class="ti ti-key"></i> Clé API TMDB</h3>
|
|
||||||
<div class="api-notice">
|
|
||||||
Obtenez votre clé gratuite sur <a href="https://www.themoviedb.org/settings/api" target="_blank">themoviedb.org</a>.
|
|
||||||
Elle sera chiffrée en base de données.
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Clé API (v3)</label>
|
|
||||||
<input type="password" id="tmdb-key-input" placeholder="Saisir la clé…">
|
|
||||||
</div>
|
|
||||||
<button class="btn-save" onclick="saveTmdbKey()">Sauvegarder</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<!-- ══════════════════════════════════════════
|
|
||||||
MODALE : MOT DE PASSE
|
|
||||||
══════════════════════════════════════════ -->
|
|
||||||
<div class="overlay" id="password-modal" onclick="if(event.target===this) closePasswordModal()">
|
|
||||||
<div class="modal" style="max-width:400px;">
|
|
||||||
<button class="modal-close" onclick="closePasswordModal()"><i class="ti ti-x"></i></button>
|
|
||||||
<h3 class="modal-h"><i class="ti ti-lock"></i> Changer le mot de passe</h3>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Nouveau mot de passe</label>
|
|
||||||
<input type="password" id="new-password-input" placeholder="Minimum 4 caractères">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Confirmation</label>
|
|
||||||
<input type="password" id="new-password-confirm" placeholder="Répétez le mot de passe">
|
|
||||||
</div>
|
|
||||||
<p id="pwd-error" style="color:#c0392b; font-size:0.82rem; display:none; margin-bottom:0.8rem;"></p>
|
|
||||||
<button class="btn-save" onclick="saveNewPassword()">Mettre à jour</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../js/admin.js"></script>
|
<script src="../js/admin.js"></script>
|
||||||
<div class="overlay" id="confirm-modal">
|
|
||||||
<div class="modal" style="max-width:350px; text-align:center;">
|
|
||||||
<h3 class="modal-h" style="color:var(--red);">Suppression</h3>
|
|
||||||
<p style="margin-bottom: 2rem; color:var(--text-secondary);">Êtes-vous sûr de vouloir supprimer ces éléments ? Cette action est irréversible.</p>
|
|
||||||
<div style="display:flex; gap:1rem;">
|
|
||||||
<button class="btn btn-outline" style="flex:1;" onclick="closeConfirmModal()">Annuler</button>
|
|
||||||
<button class="btn btn-danger" style="flex:1;" id="confirm-btn">Supprimer</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user