Actualiser js/public.js

js/public.js

@@ -2,6 +2,9 @@ let films = [];
 const API_URL = '../api.php';
 let currentPubTab = 'critique';
 let activeRatingFilter = 0;
+let searchQuery = '';
+let currentPage = 1;
+const itemsPerPage = 12;
 
 async function loadPublicData() {
     try {
@@ -16,8 +19,13 @@ async function loadPublicData() {
 function switchPubTab(tabName) {
     currentPubTab = tabName;
     activeRatingFilter = 0;
+    currentPage = 1;
+    searchQuery = '';
+    const searchInput = document.getElementById('pub-search-input');
+    if (searchInput) searchInput.value = '';
+    
     const filterBar = document.getElementById('rating-filter-bar');
-    if(filterBar) filterBar.style.display = (tabName === 'critique') ? 'flex' : 'none';
+    if (filterBar) filterBar.style.display = (tabName === 'critique') ? 'flex' : 'none';
     
     document.querySelectorAll('.rating-filter-btn').forEach(btn => {
         btn.classList.remove('active');
@@ -25,13 +33,15 @@ function switchPubTab(tabName) {
     });
     document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
     const activeBtn = document.getElementById(`tab-pub-${tabName}s`);
-    if(activeBtn) activeBtn.classList.add('active');
+    if (activeBtn) activeBtn.classList.add('active');
     renderPublicGrid();
 }
 
 function filterByRating(stars) {
     if (currentPubTab !== 'critique') return;
     activeRatingFilter = (activeRatingFilter === stars) ? 0 : stars;
+    currentPage = 1;
+    
     document.querySelectorAll('.rating-filter-btn').forEach(btn => {
         const n = parseInt(btn.dataset.stars);
         btn.classList.toggle('active', n === activeRatingFilter);
@@ -48,23 +58,41 @@ function renderPublicGrid() {
     const countLabel = document.getElementById('count-label');
     if (!grid) return;
     grid.innerHTML = '';
-    
+
+    // 1. Filtrage
     let filtered = films.filter(f => f.type === currentPubTab);
+    
     if (currentPubTab === 'critique' && activeRatingFilter > 0) {
-        filtered = filtered.filter(f => parseInt(f.rating) === activeRatingFilter);
+        filtered = filtered.filter(f => Math.round(parseFloat(f.rating)) === activeRatingFilter);
     }
     
+    if (searchQuery) {
+        const q = searchQuery.toLowerCase();
+        filtered = filtered.filter(f => 
+            f.title.toLowerCase().includes(q) || 
+            (f.director && f.director.toLowerCase().includes(q))
+        );
+    }
+
     if (countLabel) {
         countLabel.textContent = `${filtered.length} ${currentPubTab === 'critique' ? 'critique' : 'œuvre'}${filtered.length > 1 ? 's' : ''}`;
     }
-    
+
     if (filtered.length === 0) {
         if (emptyState) emptyState.style.display = 'block';
+        renderPagination(0);
         return;
     }
     if (emptyState) emptyState.style.display = 'none';
-    
+
-    filtered.forEach(f => {
+    // 2. 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);
+
+    // 3. Rendu des cartes
+    pageItems.forEach(f => {
         const card = document.createElement('div');
         card.className = 'card';
         card.onclick = () => openDetail(f.id);
@@ -73,21 +101,39 @@ function renderPublicGrid() {
             ? `<div class="card-poster-wrap"><img class="card-poster" src="${f.poster}" alt="${f.title}" loading="lazy"></div>`
             : `<div class="card-poster-wrap"><div class="card-poster-placeholder"><i class="ti ti-movie"></i><span>Pas d'affiche</span></div></div>`;
 
+        // Badge streaming en haut à droite de l'affiche
+        let streamingBadge = '';
         if (f.type === 'critique') {
-            const starsHTML = '★'.repeat(f.rating) + `<span class="stars-muted">${'☆'.repeat(5 - f.rating)}</span>`;
+            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>`;
+            }
+        }
+
+        if (f.type === 'critique') {
+            const rating = parseFloat(f.rating) || 0;
+            const fullStars = Math.floor(rating);
+            const emptyStars = 5 - Math.ceil(rating);
+            const starsHTML = '★'.repeat(fullStars) + `<span class="stars-muted">${'☆'.repeat(emptyStars)}</span>`;
+            const ratingNum = `<span class="card-rating-badge">${rating.toFixed(1)}</span>`;
+            
             card.innerHTML = `
                 ${posterHTML}
+                ${streamingBadge}
                 <div class="card-body">
                     <h3 class="card-title" title="${f.title}">${f.title}</h3>
-                    <p class="card-meta">${f.year ? f.year + ' &middot; ' : ''}${f.director || 'Réalisateur inconnu'}</p>
+                    <p class="card-director">${f.director || 'Réalisateur inconnu'}</p>
-                    <div class="card-stars">${starsHTML}</div>
+                    <p class="card-meta">${f.year || '-'}</p>
+                    <div class="card-stars">${starsHTML}${ratingNum}</div>
                 </div>`;
         } else {
             card.innerHTML = `
                 ${posterHTML}
                 <div class="card-body">
                     <h3 class="card-title" title="${f.title}">${f.title}</h3>
-                    <p class="card-meta">${f.year ? f.year + ' &middot; ' : ''}${f.director || 'Réalisateur inconnu'}</p>
+                    <p class="card-director">${f.director || 'Réalisateur inconnu'}</p>
+                    <p class="card-meta">${f.year || '-'}</p>
                     <div class="card-video-footer">
                         <span class="badge-format">${f.format || 'Physique'}</span>
                         ${f.length ? `<span class="video-length"><i class="ti ti-clock"></i> ${f.length} min</span>` : ''}
@@ -96,12 +142,79 @@ function renderPublicGrid() {
         }
         grid.appendChild(card);
     });
+
+    renderPagination(totalPages);
 }
 
+// ── PAGINATION PUBLIQUE ──
+function renderPagination(totalPages) {
+    const container = document.getElementById('pub-pagination');
+    if (!container) return;
+    container.innerHTML = '';
+
+    if (totalPages <= 1) return;
+
+    // Info
+    const info = document.createElement('span');
+    info.className = 'pub-pagination-info';
+    info.textContent = `Page ${currentPage} / ${totalPages}`;
+    container.appendChild(info);
+
+    // Prev
+    const prevBtn = document.createElement('button');
+    prevBtn.innerHTML = '<i class="ti ti-chevron-left"></i>';
+    prevBtn.disabled = currentPage === 1;
+    prevBtn.onclick = () => { currentPage--; renderPublicGrid(); window.scrollTo({ top: 0, behavior: 'smooth' }); };
+    container.appendChild(prevBtn);
+
+    // Pages intelligentes
+    const maxButtons = 5;
+    let startPage = Math.max(1, currentPage - Math.floor(maxButtons / 2));
+    let endPage = Math.min(totalPages, startPage + maxButtons - 1);
+    if (endPage - startPage + 1 < maxButtons) {
+        startPage = Math.max(1, endPage - maxButtons + 1);
+    }
+
+    if (startPage > 1) {
+        container.appendChild(createPubPageBtn(1));
+        if (startPage > 2) container.appendChild(createPubEllipsis());
+    }
+    for (let i = startPage; i <= endPage; i++) {
+        container.appendChild(createPubPageBtn(i));
+    }
+    if (endPage < totalPages) {
+        if (endPage < totalPages - 1) container.appendChild(createPubEllipsis());
+        container.appendChild(createPubPageBtn(totalPages));
+    }
+
+    // Next
+    const nextBtn = document.createElement('button');
+    nextBtn.innerHTML = '<i class="ti ti-chevron-right"></i>';
+    nextBtn.disabled = currentPage === totalPages;
+    nextBtn.onclick = () => { currentPage++; renderPublicGrid(); window.scrollTo({ top: 0, behavior: 'smooth' }); };
+    container.appendChild(nextBtn);
+}
+
+function createPubPageBtn(num) {
+    const btn = document.createElement('button');
+    btn.textContent = num;
+    if (num === currentPage) btn.classList.add('active');
+    btn.onclick = () => { currentPage = num; renderPublicGrid(); window.scrollTo({ top: 0, behavior: 'smooth' }); };
+    return btn;
+}
+
+function createPubEllipsis() {
+    const span = document.createElement('span');
+    span.textContent = '...';
+    span.style.color = 'var(--muted)';
+    span.style.padding = '0 0.5rem';
+    return span;
+}
+
+// ── DÉTAIL (inchangé, juste adapté aux nouvelles notes) ──
 function openDetail(id) {
     const f = films.find(item => item.id == id);
     if (!f) return;
-    
     const dPoster = document.getElementById('d-poster');
     const dPosterWrap = document.getElementById('d-poster-wrap');
     const dTitle = document.getElementById('d-title');
@@ -121,16 +234,18 @@ function openDetail(id) {
         if (dPosterWrap) dPosterWrap.style.display = 'none';
         if (detailModalLayout) detailModalLayout.classList.add('no-poster');
     }
-    
+
     if (dTitle) dTitle.textContent = f.title;
     if (dMeta) dMeta.textContent = `${f.year ? f.year + ' | ' : ''}${f.director || 'Réalisateur inconnu'}`;
-    
+
     if (dBody) {
-        // CORRECTION : Les template literals sont maintenant correctement fermés
         if (f.type === 'critique') {
-            const stars = '★'.repeat(f.rating) + `<span class="stars-muted">${'☆'.repeat(5 - f.rating)}</span>`;
+            const rating = parseFloat(f.rating) || 0;
+            const fullStars = Math.floor(rating);
+            const emptyStars = 5 - Math.ceil(rating);
+            const stars = '★'.repeat(fullStars) + `<span class="stars-muted">${'☆'.repeat(emptyStars)}</span>`;
             dBody.innerHTML = `
-                <div class="detail-stars">${stars}</div>
+                <div class="detail-stars">${stars} <span style="font-size:1rem; color:var(--muted); margin-left:0.5rem;">${rating.toFixed(1)}/5</span></div>
                 <div class="pub-review-card">
                     <div class="pub-review-quote-icon"><i class="ti ti-quote"></i></div>
                     <p class="pub-review-text">${f.review ? f.review : 'Aucun texte rédigé pour le moment.'}</p>
@@ -173,4 +288,17 @@ function closeDetail() {
     if (detailOverlay) detailOverlay.classList.remove('open');
 }
 
-document.addEventListener('DOMContentLoaded', loadPublicData);
+// ── INITIALISATION ──
+document.addEventListener('DOMContentLoaded', () => {
+    loadPublicData();
+    
+    // Écouteur de recherche
+    const searchInput = document.getElementById('pub-search-input');
+    if (searchInput) {
+        searchInput.addEventListener('input', (e) => {
+            searchQuery = e.target.value;
+            currentPage = 1;
+            renderPublicGrid();
+        });
+    }
+});