Actualiser js/public.js

js/public.js

@@ -11,46 +11,49 @@ async function loadPublicData() {
     try {
         const response = await fetch(`${API_URL}?action=get_films`);
         films = await response.json();
-        generateStreamingFilters(); // Génère les filtres AU CHARGEMENT
+        generateStreamingSelect(); // Remplit le menu déroulant
         renderPublicGrid();
     } catch (error) {
         console.error("Erreur de récupération :", error);
     }
 }
 
-// ── GÉNÉRATION SIMPLE DES FILTRES STREAMING ──
+// ── GÉNÉRATION DU MENU DÉROULANT STREAMING ──
-function generateStreamingFilters() {
+function generateStreamingSelect() {
-    const container = document.getElementById('streaming-filter-buttons');
+    const select = document.getElementById('pub-streaming-select');
-    const filterBar = document.getElementById('streaming-filter-bar');
+    if (!select) return;
-    if (!container || !filterBar) return;
     
     // Extraire toutes les plateformes uniques
     const platforms = new Set();
     films.forEach(f => {
-        if (f.type === 'critique' && f.streaming && f.streaming !== 'Disponible en support physique ou Cinéma') {
+        if (f.type === 'critique' && f.streaming && 
+            f.streaming !== 'Disponible en support physique ou Cinéma' &&
+            f.streaming.trim() !== '') {
+            // Séparer par virgule si plusieurs plateformes
             f.streaming.split(',').forEach(p => {
                 const platform = p.trim();
-                if (platform) platforms.add(platform);
+                if (platform.length > 0) platforms.add(platform);
             });
         }
     });
     
+    // Trier alphabétiquement
     const sortedPlatforms = Array.from(platforms).sort();
     
-    // Bouton "Toutes"
+    // Conserver l'option "Toutes" et ajouter les plateformes
-    const allBtn = document.createElement('button');
+    select.innerHTML = '<option value="">Toutes les plateformes</option>';
-    allBtn.className = 'streaming-filter-btn active';
-    allBtn.textContent = 'Toutes';
-    allBtn.onclick = () => filterByStreaming('');
-    container.appendChild(allBtn);
-    
-    // Boutons pour chaque plateforme
     sortedPlatforms.forEach(platform => {
-        const btn = document.createElement('button');
+        const option = document.createElement('option');
-        btn.className = 'streaming-filter-btn';
+        option.value = platform;
-        btn.textContent = platform;
+        option.textContent = platform;
-        btn.onclick = () => filterByStreaming(platform);
+        select.appendChild(option);
-        container.appendChild(btn);
+    });
+    
+    // Écouteur d'événement
+    select.addEventListener('change', (e) => {
+        activeStreamingFilter = e.target.value;
+        currentPage = 1;
+        renderPublicGrid();
     });
 }
 
@@ -60,30 +63,21 @@ function switchPubTab(tabName) {
     activeStreamingFilter = '';
     currentPage = 1;
     
-    // Affiche/cache les barres de filtre SELON l'onglet
+    // Reset le select
+    const select = document.getElementById('pub-streaming-select');
+    if (select) select.value = '';
+    
     const ratingBar = document.getElementById('rating-filter-bar');
-    const streamingBar = document.getElementById('streaming-filter-bar');
+    if(ratingBar) ratingBar.style.display = (tabName === 'critique') ? 'flex' : 'none';
     
-    if (tabName === 'critique') {
+    // Cacher le select sur l'onglet vidéothèque
-        if(ratingBar) ratingBar.style.display = 'flex';
+    if (select) select.style.display = (tabName === 'critique') ? 'block' : 'none';
-        if(streamingBar) streamingBar.style.display = 'flex';
-    } else {
-        if(ratingBar) ratingBar.style.display = 'none';
-        if(streamingBar) streamingBar.style.display = 'none';
-    }
     
-    // Reset visuel des filtres
     document.querySelectorAll('.rating-filter-btn').forEach(btn => {
         btn.classList.remove('active');
         btn.querySelectorAll('.rf-star').forEach(s => s.classList.remove('filled'));
     });
     
-    document.querySelectorAll('.streaming-filter-btn').forEach(btn => {
-        btn.classList.remove('active');
-    });
-    const allBtn = document.querySelector('.streaming-filter-btn');
-    if(allBtn) allBtn.classList.add('active');
-    
     document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
     const activeBtn = document.getElementById(`tab-pub-${tabName}s`);
     if(activeBtn) activeBtn.classList.add('active');
@@ -105,17 +99,6 @@ function filterByRating(stars) {
     renderPublicGrid();
 }
 
-function filterByStreaming(platform) {
-    if (currentPubTab !== 'critique') return;
-    activeStreamingFilter = platform;
-    
-    document.querySelectorAll('.streaming-filter-btn').forEach(btn => {
-        btn.classList.toggle('active', btn.textContent === (platform || 'Toutes'));
-    });
-    
-    renderPublicGrid();
-}
-
 function renderPublicGrid() {
     const grid = document.getElementById('grid');
     const emptyState = document.getElementById('empty-state');
@@ -123,19 +106,26 @@ function renderPublicGrid() {
     if (!grid) return;
     grid.innerHTML = '';
 
+    // 1. Filtrage par type
     let filtered = films.filter(f => f.type === currentPubTab);
     
+    // 2. Filtre par note
     if (currentPubTab === 'critique' && activeRatingFilter > 0) {
         filtered = filtered.filter(f => Math.round(parseFloat(f.rating)) === activeRatingFilter);
     }
     
+    // 3. Filtre par plateforme (avec normalisation)
     if (currentPubTab === 'critique' && activeStreamingFilter) {
+        const filterLower = activeStreamingFilter.toLowerCase();
         filtered = filtered.filter(f => {
             if (!f.streaming || f.streaming === 'Disponible en support physique ou Cinéma') return false;
-            return f.streaming.split(',').map(p => p.trim()).includes(activeStreamingFilter);
+            // On vérifie si la plateforme sélectionnée est présente dans le champ streaming
+            const platforms = f.streaming.split(',').map(p => p.trim().toLowerCase());
+            return platforms.includes(filterLower);
         });
     }
     
+    // 4. Recherche textuelle
     if (searchQuery) {
         const q = searchQuery.toLowerCase();
         filtered = filtered.filter(f => 
@@ -155,11 +145,13 @@ function renderPublicGrid() {
     }
     if (emptyState) emptyState.style.display = 'none';
 
+    // 5. Pagination
     const totalPages = Math.ceil(filtered.length / itemsPerPage) || 1;
     if (currentPage > totalPages) currentPage = totalPages;
     const startIdx = (currentPage - 1) * itemsPerPage;
     const pageItems = filtered.slice(startIdx, startIdx + itemsPerPage);
 
+    // 6. Rendu
     pageItems.forEach(f => {
         const card = document.createElement('div');
         card.className = 'card';
@@ -174,7 +166,7 @@ function renderPublicGrid() {
             if (f.streaming && f.streaming !== 'Disponible en support physique ou Cinéma') {
                 streamingBadge = `<div class="card-streaming-badge" title="${f.streaming}">📺 ${f.streaming.split(',')[0]}</div>`;
             } else {
-                streamingBadge = `<div class="card-physical-badge">🎟️ Physique / Cinéma</div>`;
+                streamingBadge = `<div class="card-physical-badge">️ Physique / Cinéma</div>`;
             }
         }
 
@@ -349,4 +341,15 @@ function closeDetail() {
     if (detailOverlay) detailOverlay.classList.remove('open');
 }
 
-document.addEventListener('DOMContentLoaded', loadPublicData);
+document.addEventListener('DOMContentLoaded', () => {
+    loadPublicData();
+    
+    const searchInput = document.getElementById('pub-search-input');
+    if (searchInput) {
+        searchInput.addEventListener('input', (e) => {
+            searchQuery = e.target.value;
+            currentPage = 1;
+            renderPublicGrid();
+        });
+    }
+});