add list
This commit is contained in:
+1
-49
@@ -20,55 +20,7 @@
|
||||
|
||||
<div id="resultsGrid" class="grid grid-cols-2 md:grid-cols-4 gap-6"></div>
|
||||
</div>
|
||||
<div id="movieModal" class="fixed inset-0 bg-black/95 z-50 hidden overflow-y-auto">
|
||||
<div class="relative w-full max-w-5xl mx-auto min-h-screen bg-slate-900 shadow-2xl border-x border-white/10">
|
||||
|
||||
<button onclick="closeModal()" class="absolute top-6 right-6 z-50 bg-black/50 text-white p-2 rounded-full hover:bg-red-600 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id="modalBanner" class="w-full h-[300px] md:h-[450px] bg-cover bg-center relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent"></div>
|
||||
<div class="absolute bottom-10 left-6 md:left-10 right-6">
|
||||
<h2 id="modalTitle" class="text-4xl md:text-6xl font-black text-white drop-shadow-lg"></h2>
|
||||
<p id="modalMeta" class="text-lg text-blue-400 font-semibold mt-2"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 md:p-10 grid md:grid-cols-3 gap-10">
|
||||
<div class="md:col-span-2">
|
||||
<h3 class="text-xl font-bold mb-3 text-white border-b border-white/10 pb-2">Synopsis</h3>
|
||||
<p id="modalOverview" class="text-gray-300 leading-relaxed text-lg mb-8"></p>
|
||||
|
||||
<h3 class="text-xl font-bold mb-4 text-white border-b border-white/10 pb-2">Casting principal</h3>
|
||||
<div id="modalCast" class="flex gap-4 overflow-x-auto pb-6 scrollbar-hide">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-slate-800/80 p-6 rounded-2xl border border-white/5">
|
||||
<div class="mb-4">
|
||||
<span class="text-gray-400 text-xs uppercase tracking-widest block mb-1">Note TMDB</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span id="modalVote" class="text-4xl font-black text-yellow-500"></span>
|
||||
<span class="text-gray-500 font-bold">/ 10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<span class="text-gray-400 text-xs uppercase tracking-widest block mb-1">Réalisateur</span>
|
||||
<span id="modalDirector" class="text-xl font-bold text-white"></span>
|
||||
</div>
|
||||
<button id="modalAddBtn" class="w-full bg-green-600 hover:bg-green-500 text-white py-4 rounded-xl font-black text-lg shadow-lg shadow-green-900/20 transition-all active:scale-95">
|
||||
+ AJOUTER À LA LISTE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include '../modal_template.php';?>
|
||||
<script src="js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,92 @@
|
||||
let allMovies = []; // Stockage local de la liste entière
|
||||
|
||||
async function loadList() {
|
||||
const response = await fetch('RequestHandler.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'getMyList' })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
allMovies = data.movies;
|
||||
renderList();
|
||||
}
|
||||
}
|
||||
|
||||
function renderList() {
|
||||
const grid = document.getElementById('myListGrid');
|
||||
const sort = document.getElementById('sortOrder').value;
|
||||
const type = document.getElementById('filterType').value;
|
||||
const status = document.getElementById('filterStatus').value;
|
||||
|
||||
// 1. Filtrage
|
||||
let filtered = allMovies.filter(m => {
|
||||
const matchType = (type === 'all' || m.type === type);
|
||||
const matchStatus = (status === 'all' || m.vu == status);
|
||||
return matchType && matchStatus;
|
||||
});
|
||||
|
||||
// 2. Tri
|
||||
filtered.sort((a, b) => {
|
||||
if (sort === 'titre_asc') return a.titre.localeCompare(b.titre);
|
||||
if (sort === 'date_ajout_asc') return new Date(a.date_ajout) - new Date(b.date_ajout);
|
||||
if (sort === 'date_ajout_desc') return new Date(b.date_ajout) - new Date(a.date_ajout);
|
||||
});
|
||||
|
||||
// 3. Affichage
|
||||
grid.innerHTML = '';
|
||||
document.getElementById('movieCount').innerText = filtered.length;
|
||||
|
||||
filtered.forEach(m => {
|
||||
const card = document.createElement('div');
|
||||
card.className = `relative group bg-slate-800 rounded-xl overflow-hidden border ${m.vu == 1 ? 'border-green-500/50' : 'border-slate-700'}`;
|
||||
card.innerHTML = `
|
||||
<img src="https://image.tmdb.org/t/p/w500${m.affiche_path}" class="w-full h-auto ${m.vu == 1 ? 'opacity-40 grayscale' : ''}">
|
||||
<div class="p-3">
|
||||
<h3 class="font-bold text-sm truncate">${m.titre}</h3>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<button onclick="toggleVu(${m.id})" class="flex-grow py-1 rounded text-[10px] font-bold ${m.vu == 1 ? 'bg-green-600' : 'bg-slate-700 hover:bg-slate-600'}">
|
||||
${m.vu == 1 ? 'VU' : 'À VOIR'}
|
||||
</button>
|
||||
<button onclick="deleteMovie(${m.id})" class="bg-red-900/50 hover:bg-red-600 px-2 py-1 rounded text-[10px]">
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Actions rapides
|
||||
async function toggleVu(id) {
|
||||
const res = await fetch('RequestHandler.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'toggleViewed', params: { movie_id: id } })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
// On met à jour localement pour ne pas recharger toute l'API
|
||||
const movie = allMovies.find(m => m.id == id);
|
||||
movie.vu = movie.vu == 1 ? 0 : 1;
|
||||
renderList();
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteMovie(id) {
|
||||
if(!confirm("Supprimer ce film de ta liste ?")) return;
|
||||
const res = await fetch('RequestHandler.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'deleteMovie', params: { movie_id: id } })
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.success) {
|
||||
allMovies = allMovies.filter(m => m.id != id);
|
||||
renderList();
|
||||
}
|
||||
}
|
||||
|
||||
loadList();
|
||||
@@ -50,8 +50,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php include 'modal_template.php'; // Conseil : mets le code de la modal dans un fichier à part pour l'inclure partout ?>
|
||||
<?php include '../modal_template.php'; // Conseil : mets le code de la modal dans un fichier à part pour l'inclure partout ?>
|
||||
|
||||
<script src="js/list.js"></script>
|
||||
<script src="../js/list.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<div id="movieModal" class="fixed inset-0 bg-black/95 z-50 hidden overflow-y-auto">
|
||||
<div class="relative w-full max-w-5xl mx-auto min-h-screen bg-slate-900 shadow-2xl border-x border-white/10">
|
||||
|
||||
<button onclick="closeModal()" class="absolute top-6 right-6 z-50 bg-black/50 text-white p-2 rounded-full hover:bg-red-600 transition">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id="modalBanner" class="w-full h-[300px] md:h-[450px] bg-cover bg-center relative">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/20 to-transparent"></div>
|
||||
<div class="absolute bottom-10 left-6 md:left-10 right-6">
|
||||
<h2 id="modalTitle" class="text-4xl md:text-6xl font-black text-white drop-shadow-lg"></h2>
|
||||
<p id="modalMeta" class="text-lg text-blue-400 font-semibold mt-2"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 md:p-10 grid md:grid-cols-3 gap-10">
|
||||
<div class="md:col-span-2">
|
||||
<h3 class="text-xl font-bold mb-3 text-white border-b border-white/10 pb-2">Synopsis</h3>
|
||||
<p id="modalOverview" class="text-gray-300 leading-relaxed text-lg mb-8"></p>
|
||||
|
||||
<h3 class="text-xl font-bold mb-4 text-white border-b border-white/10 pb-2">Casting principal</h3>
|
||||
<div id="modalCast" class="flex gap-4 overflow-x-auto pb-6 scrollbar-hide">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-slate-800/80 p-6 rounded-2xl border border-white/5">
|
||||
<div class="mb-4">
|
||||
<span class="text-gray-400 text-xs uppercase tracking-widest block mb-1">Note TMDB</span>
|
||||
<div class="flex items-baseline gap-1">
|
||||
<span id="modalVote" class="text-4xl font-black text-yellow-500"></span>
|
||||
<span class="text-gray-500 font-bold">/ 10</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<span class="text-gray-400 text-xs uppercase tracking-widest block mb-1">Réalisateur</span>
|
||||
<span id="modalDirector" class="text-xl font-bold text-white"></span>
|
||||
</div>
|
||||
<button id="modalAddBtn" class="w-full bg-green-600 hover:bg-green-500 text-white py-4 rounded-xl font-black text-lg shadow-lg shadow-green-900/20 transition-all active:scale-95">
|
||||
+ AJOUTER À LA LISTE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user