diff --git a/js/public.js b/js/public.js index 0d77cbf..f4e0244 100644 --- a/js/public.js +++ b/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() { ? `
${f.title}
` : `
Pas d'affiche
`; + // Badge streaming en haut à droite de l'affiche + let streamingBadge = ''; if (f.type === 'critique') { - const starsHTML = '★'.repeat(f.rating) + `${'☆'.repeat(5 - f.rating)}`; + if (f.streaming && f.streaming !== 'Disponible en support physique ou Cinéma') { + streamingBadge = `
📺 ${f.streaming.split(',')[0]}
`; + } else { + streamingBadge = `
🎟️ Physique / Cinéma
`; + } + } + + 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) + `${'☆'.repeat(emptyStars)}`; + const ratingNum = `${rating.toFixed(1)}`; + card.innerHTML = ` ${posterHTML} + ${streamingBadge}

${f.title}

-

${f.year ? f.year + ' · ' : ''}${f.director || 'Réalisateur inconnu'}

-
${starsHTML}
+

${f.director || 'Réalisateur inconnu'}

+

${f.year || '-'}

+
${starsHTML}${ratingNum}
`; } else { card.innerHTML = ` ${posterHTML}

${f.title}

-

${f.year ? f.year + ' · ' : ''}${f.director || 'Réalisateur inconnu'}

+

${f.director || 'Réalisateur inconnu'}

+

${f.year || '-'}

${f.format || 'Physique'} ${f.length ? ` ${f.length} min` : ''} @@ -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 = ''; + 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 = ''; + 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) + `${'☆'.repeat(5 - f.rating)}`; + const rating = parseFloat(f.rating) || 0; + const fullStars = Math.floor(rating); + const emptyStars = 5 - Math.ceil(rating); + const stars = '★'.repeat(fullStars) + `${'☆'.repeat(emptyStars)}`; dBody.innerHTML = ` -
${stars}
+
${stars} ${rating.toFixed(1)}/5

${f.review ? f.review : 'Aucun texte rédigé pour le moment.'}

@@ -173,4 +288,17 @@ function closeDetail() { if (detailOverlay) detailOverlay.classList.remove('open'); } -document.addEventListener('DOMContentLoaded', loadPublicData); \ No newline at end of file +// ── 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(); + }); + } +}); \ No newline at end of file