241 lines
11 KiB
HTML
241 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="../css/admin.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
|
|
<title>Dashboard</title>
|
|
<style>
|
|
/* Styles pour le système d'onglets */
|
|
.admin-tabs {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border, #333);
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
.tab-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--muted, #888);
|
|
padding: 0.6rem 1.2rem;
|
|
font-family: 'DM Sans', sans-serif;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.tab-btn:hover {
|
|
color: var(--text, #fff);
|
|
background: rgba(255,255,255,0.03);
|
|
}
|
|
.tab-btn.active {
|
|
color: #000;
|
|
background: var(--gold, #C9A84C);
|
|
}
|
|
/* Style pour le badge de format dans le tableau */
|
|
.badge-format {
|
|
background: rgba(255,255,255,0.1);
|
|
color: var(--text, #fff);
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 3px;
|
|
font-size: 0.75rem;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="page-admin" class="page active">
|
|
<div class="admin-wrap">
|
|
<div class="admin-header">
|
|
<h1 class="admin-title">Back<span>office</span></h1>
|
|
<div class="admin-actions" style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
|
|
<button class="btn btn-gold" onclick="openAddModal()"><i class="ti ti-plus" aria-hidden="true"></i> Ajouter un film</button>
|
|
|
|
<!-- GROUPE CRITIQUES (Affiché par défaut) -->
|
|
<button id="actions-critiques-export" class="btn btn-outline" onclick="exportToCSV()" title="Exporter mes critiques en CSV"><i class="ti ti-download" aria-hidden="true"></i> Exporter mes Critiques</button>
|
|
<button id="actions-critiques-import" class="btn btn-outline" onclick="document.getElementById('csv-import-file').click()" title="Importer un fichier CSV de critiques"><i class="ti ti-upload" aria-hidden="true"></i> Importer mes Critiques</button>
|
|
<input type="file" id="csv-import-file" accept=".csv" style="display: none;" onchange="importFromCSV(this)">
|
|
|
|
<!-- GROUPE VIDÉOTHÈQUE (Masqué par défaut au démarrage) -->
|
|
<button id="actions-video-export" class="btn btn-outline" style="display: none;" onclick="exportVideothequeToCSV()" title="Exporter ma vidéothèque en CSV"><i class="ti ti-download" aria-hidden="true"></i> Exporter ma Vidéothèque</button>
|
|
<button id="actions-video-import" class="btn btn-outline" style="display: none;" onclick="document.getElementById('csv-video-file').click()" title="Importer l'inventaire de ma vidéothèque (.csv)"><i class="ti ti-upload" aria-hidden="true"></i> Importer ma Vidéothèque</button>
|
|
<input type="file" id="csv-video-file" accept=".csv" style="display: none;" onchange="importVideothequeFromInput(this)">
|
|
|
|
<!-- BOUTON SUPPRESSION EN MASSE -->
|
|
<button id="btn-bulk-delete" class="btn" style="background: var(--red, #e54e4e); color: #fff; border: none; display: none;" onclick="deleteSelectedFilms()">
|
|
<i class="ti ti-trash-x" aria-hidden="true"></i> Supprimer la sélection (<span id="bulk-select-count">0</span>)
|
|
</button>
|
|
|
|
<button class="btn btn-outline" onclick="goPublic()"><i class="ti ti-eye" aria-hidden="true"></i> Voir le site</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-tabs">
|
|
<button class="tab-btn active" id="tab-critiques" onclick="switchTab('critique')">
|
|
<i class="ti ti-blockquote"></i> Mes Critiques
|
|
</button>
|
|
<button class="tab-btn" id="tab-videotheque" onclick="switchTab('videotheque')">
|
|
<i class="ti ti-disc"></i> Ma Vidéothèque
|
|
</button>
|
|
</div>
|
|
|
|
<div class="api-notice" id="api-notice">
|
|
<strong>Clé API TMDB requise pour la recherche d'affiches.</strong><br>
|
|
Gratuit sur <a href="https://www.themoviedb.org/settings/api" target="_blank">themoviedb.org/settings/api</a> (inscription gratuite, clé disponible immédiatement).<br>
|
|
<div style="display:flex;gap:0.6rem;margin-top:0.7rem;align-items:center;">
|
|
<input id="tmdb-key-input" type="text" placeholder="Colle ta clé TMDB ici" style="flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:'DM Sans',sans-serif;font-size:0.82rem;padding:0.5rem 0.7rem;border-radius:3px;outline:none;" />
|
|
<button class="btn btn-gold" style="white-space:nowrap;" onclick="saveTmdbKey()">Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-table-wrap">
|
|
<table class="admin-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:40px; text-align:center;">
|
|
<input type="checkbox" id="th-select-all" onclick="toggleSelectAll(this)" style="cursor:pointer; transform: scale(1.2);">
|
|
</th>
|
|
<th style="width:50px">Affiche</th>
|
|
<th>Titre</th>
|
|
<th>Année</th>
|
|
<th>Réalisateur</th>
|
|
<th id="th-dynamic-col">Note</th>
|
|
<th style="width:170px">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="admin-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
<div class="empty-state" id="admin-empty" style="display:none">
|
|
<i class="ti ti-clapperboard-open" aria-hidden="true"></i>
|
|
<p id="empty-message">Aucun film pour l'instant. Ajoutez votre première critique !</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay" id="form-overlay" role="dialog" aria-modal="true">
|
|
<div class="modal">
|
|
<button class="modal-close" onclick="closeModal()" aria-label="Fermer"><i class="ti ti-x"></i></button>
|
|
<h2 class="modal-h" id="modal-title">Nouvelle entrée</h2>
|
|
|
|
<p style="font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin-bottom:0.4rem;">Recherche automatique d'affiche</p>
|
|
<div class="search-row">
|
|
<input id="search-input" type="text" placeholder="Nom du film à rechercher…" onkeydown="if(event.key==='Enter'){event.preventDefault();searchTMDB();}" />
|
|
<button class="btn-search" onclick="searchTMDB()" aria-label="Rechercher"><i class="ti ti-search"></i></button>
|
|
</div>
|
|
<div id="search-results-wrap"></div>
|
|
|
|
<hr class="divider" />
|
|
|
|
<div class="form-group">
|
|
<label for="f-type">Type d'ajout</label>
|
|
<select id="f-type" onchange="handleTypeChange(this.value)" style="width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); padding:0.6rem; border-radius:3px; font-family:inherit;">
|
|
<option value="critique">Écrire une critique (Journal)</option>
|
|
<option value="videotheque">Ajouter à ma vidéothèque physique</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="f-title">Titre</label>
|
|
<input id="f-title" type="text" placeholder="ex : Mulholland Drive" />
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="f-year">Année</label>
|
|
<input id="f-year" type="text" placeholder="ex : 2001" maxlength="4" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="f-director">Réalisateur</label>
|
|
<input id="f-director" type="text" placeholder="ex : David Lynch" />
|
|
</div>
|
|
|
|
<div id="form-group-videotheque-fields" style="display: none;">
|
|
<div class="form-row" style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
|
|
<div class="form-group" style="flex: 1;">
|
|
<label for="f-format">Format physique</label>
|
|
<select id="f-format" style="width:100%; background:var(--surface); border:1px solid var(--border); color:var(--text); padding:0.6rem; border-radius:3px; font-family:inherit;">
|
|
<option value="dvd">DVD</option>
|
|
<option value="bluray">Blu-ray</option>
|
|
<option value="bluray_4k">Blu-ray 4K Ultra HD</option>
|
|
<option value="vhs">VHS</option>
|
|
<option value="collector">Édition Collector / Coffret</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group" style="flex: 1;">
|
|
<label for="f-length">Durée (minutes)</label>
|
|
<input id="f-length" type="number" placeholder="ex : 107" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row" style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
|
|
<div class="form-group" style="flex: 1;">
|
|
<label for="f-publisher">Éditeur / Studio</label>
|
|
<input id="f-publisher" type="text" placeholder="ex : Universal Pictures" />
|
|
</div>
|
|
<div class="form-group" style="flex: 1;">
|
|
<label for="f-ean">Code-barres (EAN13)</label>
|
|
<input id="f-ean" type="text" placeholder="ex : 7321950374984" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row" style="display: flex; gap: 0.5rem; margin-bottom: 1rem;">
|
|
<div class="form-group" style="flex: 1;">
|
|
<label for="f-discs">Nombre de disques</label>
|
|
<input id="f-discs" type="number" placeholder="ex : 2" defaultValue="1" />
|
|
</div>
|
|
<div class="form-group" style="flex: 1;">
|
|
<label for="f-aspect">Format d'image (Aspect Ratio)</label>
|
|
<input id="f-aspect" type="text" placeholder="ex : 2.35:1 ou 1.66:1" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group" style="margin-bottom: 1rem;">
|
|
<label for="f-description">Description / Synopsis complet</label>
|
|
<textarea id="f-description" placeholder="Description extraite du catalogue..." style="height: 100px;"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="poster-preview" id="poster-preview-wrap">
|
|
<div class="poster-preview-none" id="poster-preview-none"><i class="ti ti-photo-off"></i></div>
|
|
<img id="poster-preview-img" src="" alt="" style="display:none" />
|
|
<div class="poster-preview-info" id="poster-preview-info">Aucune affiche sélectionnée.<br>Faites une recherche ou collez une URL.</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="f-poster">URL de l'affiche (optionnel)</label>
|
|
<input id="f-poster" type="url" placeholder="https://…" oninput="updatePosterPreview(this.value)" />
|
|
</div>
|
|
|
|
<div id="form-group-critique-fields">
|
|
<div class="form-group">
|
|
<label>Note</label>
|
|
<div class="star-select" id="star-select">
|
|
<button type="button" onclick="setRating(1)" aria-label="1 étoile">★</button>
|
|
<button type="button" onclick="setRating(2)" aria-label="2 étoiles">★</button>
|
|
<button type="button" onclick="setRating(3)" aria-label="3 étoiles">★</button>
|
|
<button type="button" onclick="setRating(4)" aria-label="4 étoiles">★</button>
|
|
<button type="button" onclick="setRating(5)" aria-label="5 étoiles">★</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="f-review">Ma critique</label>
|
|
<textarea id="f-review" placeholder="Écris ta critique ici…"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="btn-save" onclick="saveFilm()">Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../js/admin.js?v=4"></script>
|
|
</body>
|
|
</html> |