Actualiser js/public.js
This commit is contained in:
+54
-51
@@ -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 ──
|
||||
function generateStreamingFilters() {
|
||||
const container = document.getElementById('streaming-filter-buttons');
|
||||
const filterBar = document.getElementById('streaming-filter-bar');
|
||||
if (!container || !filterBar) return;
|
||||
// ── GÉNÉRATION DU MENU DÉROULANT STREAMING ──
|
||||
function generateStreamingSelect() {
|
||||
const select = document.getElementById('pub-streaming-select');
|
||||
if (!select) 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"
|
||||
const allBtn = document.createElement('button');
|
||||
allBtn.className = 'streaming-filter-btn active';
|
||||
allBtn.textContent = 'Toutes';
|
||||
allBtn.onclick = () => filterByStreaming('');
|
||||
container.appendChild(allBtn);
|
||||
|
||||
// Boutons pour chaque plateforme
|
||||
// Conserver l'option "Toutes" et ajouter les plateformes
|
||||
select.innerHTML = '<option value="">Toutes les plateformes</option>';
|
||||
sortedPlatforms.forEach(platform => {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'streaming-filter-btn';
|
||||
btn.textContent = platform;
|
||||
btn.onclick = () => filterByStreaming(platform);
|
||||
container.appendChild(btn);
|
||||
const option = document.createElement('option');
|
||||
option.value = platform;
|
||||
option.textContent = platform;
|
||||
select.appendChild(option);
|
||||
});
|
||||
|
||||
// É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') {
|
||||
if(ratingBar) ratingBar.style.display = 'flex';
|
||||
if(streamingBar) streamingBar.style.display = 'flex';
|
||||
} else {
|
||||
if(ratingBar) ratingBar.style.display = 'none';
|
||||
if(streamingBar) streamingBar.style.display = 'none';
|
||||
}
|
||||
// Cacher le select sur l'onglet vidéothèque
|
||||
if (select) select.style.display = (tabName === 'critique') ? 'block' : '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();
|
||||
});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user