Actualiser js/public.js
This commit is contained in:
+141
-153
@@ -4,185 +4,173 @@ let currentPubTab = 'critique';
|
||||
let activeRatingFilter = 0;
|
||||
|
||||
async function loadPublicData() {
|
||||
try {
|
||||
const response = await fetch(`${API_URL}?action=get_films`);
|
||||
films = await response.json();
|
||||
renderPublicGrid();
|
||||
} catch (error) {
|
||||
console.error("Erreur de récupération :", error);
|
||||
}
|
||||
try {
|
||||
const response = await fetch(`${API_URL}?action=get_films`);
|
||||
films = await response.json();
|
||||
renderPublicGrid();
|
||||
} catch (error) {
|
||||
console.error("Erreur de récupération :", error);
|
||||
}
|
||||
}
|
||||
|
||||
function switchPubTab(tabName) {
|
||||
currentPubTab = tabName;
|
||||
activeRatingFilter = 0;
|
||||
currentPubTab = tabName;
|
||||
activeRatingFilter = 0;
|
||||
const filterBar = document.getElementById('rating-filter-bar');
|
||||
if(filterBar) filterBar.style.display = (tabName === 'critique') ? 'flex' : 'none';
|
||||
|
||||
const filterBar = document.getElementById('rating-filter-bar');
|
||||
if(filterBar) {
|
||||
filterBar.style.display = (tabName === 'critique') ? 'flex' : 'none';
|
||||
}
|
||||
|
||||
document.querySelectorAll('.rating-filter-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
btn.querySelectorAll('.rf-star').forEach(s => s.classList.remove('filled'));
|
||||
});
|
||||
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||||
const activeBtn = document.getElementById(`tab-pub-${tabName}s`);
|
||||
if(activeBtn) activeBtn.classList.add('active');
|
||||
|
||||
renderPublicGrid();
|
||||
document.querySelectorAll('.rating-filter-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
btn.querySelectorAll('.rf-star').forEach(s => s.classList.remove('filled'));
|
||||
});
|
||||
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
|
||||
const activeBtn = document.getElementById(`tab-pub-${tabName}s`);
|
||||
if(activeBtn) activeBtn.classList.add('active');
|
||||
renderPublicGrid();
|
||||
}
|
||||
|
||||
function filterByRating(stars) {
|
||||
if (currentPubTab !== 'critique') return;
|
||||
activeRatingFilter = (activeRatingFilter === stars) ? 0 : stars;
|
||||
|
||||
document.querySelectorAll('.rating-filter-btn').forEach(btn => {
|
||||
const n = parseInt(btn.dataset.stars);
|
||||
btn.classList.toggle('active', n === activeRatingFilter);
|
||||
btn.querySelectorAll('.rf-star').forEach((s, i) => {
|
||||
s.classList.toggle('filled', i < activeRatingFilter);
|
||||
if (currentPubTab !== 'critique') return;
|
||||
activeRatingFilter = (activeRatingFilter === stars) ? 0 : stars;
|
||||
document.querySelectorAll('.rating-filter-btn').forEach(btn => {
|
||||
const n = parseInt(btn.dataset.stars);
|
||||
btn.classList.toggle('active', n === activeRatingFilter);
|
||||
btn.querySelectorAll('.rf-star').forEach((s, i) => {
|
||||
s.classList.toggle('filled', i < activeRatingFilter);
|
||||
});
|
||||
});
|
||||
});
|
||||
renderPublicGrid();
|
||||
renderPublicGrid();
|
||||
}
|
||||
|
||||
function renderPublicGrid() {
|
||||
const grid = document.getElementById('grid');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const countLabel = document.getElementById('count-label');
|
||||
if (!grid) return;
|
||||
const grid = document.getElementById('grid');
|
||||
const emptyState = document.getElementById('empty-state');
|
||||
const countLabel = document.getElementById('count-label');
|
||||
if (!grid) return;
|
||||
grid.innerHTML = '';
|
||||
|
||||
grid.innerHTML = '';
|
||||
|
||||
let filtered = films.filter(f => f.type === currentPubTab);
|
||||
|
||||
if (currentPubTab === 'critique' && activeRatingFilter > 0) {
|
||||
filtered = filtered.filter(f => parseInt(f.rating) === activeRatingFilter);
|
||||
}
|
||||
|
||||
if (countLabel) {
|
||||
countLabel.textContent = `${filtered.length} ${currentPubTab === 'critique' ? 'critique' : 'œuvre'}${filtered.length > 1 ? 's' : ''}`;
|
||||
}
|
||||
|
||||
if (filtered.length === 0) {
|
||||
if (emptyState) emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
if (emptyState) emptyState.style.display = 'none';
|
||||
|
||||
filtered.forEach(f => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card';
|
||||
card.onclick = () => openDetail(f.id);
|
||||
|
||||
// Rendu de l'affiche ou du placeholder si absente
|
||||
let posterHTML = '';
|
||||
if (f.poster) {
|
||||
posterHTML = `<div class="card-poster-wrap"><img class="card-poster" src="${f.poster}" alt="${f.title}" loading="lazy"></div>`;
|
||||
} else {
|
||||
posterHTML = `
|
||||
<div class="card-poster-wrap">
|
||||
<div class="card-poster-placeholder">
|
||||
<i class="ti ti-movie"></i>
|
||||
<span>Pas d'affiche</span>
|
||||
</div>
|
||||
</div>`;
|
||||
let filtered = films.filter(f => f.type === currentPubTab);
|
||||
if (currentPubTab === 'critique' && activeRatingFilter > 0) {
|
||||
filtered = filtered.filter(f => parseInt(f.rating) === activeRatingFilter);
|
||||
}
|
||||
|
||||
if (f.type === 'critique') {
|
||||
const starsHTML = '★'.repeat(f.rating) + `<span class="stars-muted">${'☆'.repeat(5 - f.rating)}</span>`;
|
||||
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 + ' · ' : ''}${f.director || 'Réalisateur inconnu'}</p>
|
||||
<div class="card-stars">${starsHTML}</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 + ' · ' : ''}${f.director || 'Réalisateur inconnu'}</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>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
if (countLabel) {
|
||||
countLabel.textContent = `${filtered.length} ${currentPubTab === 'critique' ? 'critique' : 'œuvre'}${filtered.length > 1 ? 's' : ''}`;
|
||||
}
|
||||
grid.appendChild(card);
|
||||
});
|
||||
|
||||
if (filtered.length === 0) {
|
||||
if (emptyState) emptyState.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
if (emptyState) emptyState.style.display = 'none';
|
||||
|
||||
filtered.forEach(f => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card';
|
||||
card.onclick = () => openDetail(f.id);
|
||||
|
||||
let posterHTML = f.poster
|
||||
? `<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>`;
|
||||
|
||||
if (f.type === 'critique') {
|
||||
const starsHTML = '★'.repeat(f.rating) + `<span class="stars-muted">${'☆'.repeat(5 - f.rating)}</span>`;
|
||||
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 + ' · ' : ''}${f.director || 'Réalisateur inconnu'}</p>
|
||||
<div class="card-stars">${starsHTML}</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 + ' · ' : ''}${f.director || 'Réalisateur inconnu'}</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>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
grid.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
function openDetail(id) {
|
||||
const f = films.find(item => item.id == id);
|
||||
if (!f) return;
|
||||
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');
|
||||
const dMeta = document.getElementById('d-meta');
|
||||
const dBody = document.getElementById('d-body');
|
||||
const detailModalLayout = document.getElementById('detail-modal-layout');
|
||||
const detailOverlay = document.getElementById('detail-overlay');
|
||||
const dPoster = document.getElementById('d-poster');
|
||||
const dPosterWrap = document.getElementById('d-poster-wrap');
|
||||
const dTitle = document.getElementById('d-title');
|
||||
const dMeta = document.getElementById('d-meta');
|
||||
const dBody = document.getElementById('d-body');
|
||||
const detailModalLayout = document.getElementById('detail-modal-layout');
|
||||
const detailOverlay = document.getElementById('detail-overlay');
|
||||
|
||||
// Gestion de la visibilité globale de l'affiche dans la modale
|
||||
if (f.poster) {
|
||||
if (dPoster) dPoster.src = f.poster;
|
||||
if (dPosterWrap) {
|
||||
dPosterWrap.style.display = 'block';
|
||||
dPosterWrap.className = `detail-poster poster-${f.type}`;
|
||||
}
|
||||
if (detailModalLayout) detailModalLayout.classList.remove('no-poster');
|
||||
} else {
|
||||
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) {
|
||||
if (f.type === 'critique') {
|
||||
const stars = '★'.repeat(f.rating) + `<span class="stars-muted">${'☆'.repeat(5 - f.rating)}</span>`;
|
||||
dBody.innerHTML = `
|
||||
<div class="detail-stars">${stars}</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>
|
||||
</div>
|
||||
${f.streaming ? `<div class="tech-pill" style="margin-top:1.5rem; width:fit-content;"><i class="ti ti-device-tv"></i> Visionnage : ${f.streaming}</div>` : ''}
|
||||
`;
|
||||
if (f.poster) {
|
||||
if (dPoster) dPoster.src = f.poster;
|
||||
if (dPosterWrap) {
|
||||
dPosterWrap.style.display = 'block';
|
||||
dPosterWrap.className = `detail-poster poster-${f.type}`;
|
||||
}
|
||||
if (detailModalLayout) detailModalLayout.classList.remove('no-poster');
|
||||
} else {
|
||||
dBody.innerHTML = `
|
||||
<div class="pub-tech-badges">
|
||||
${f.format ? `<span class="tech-pill format-gold"><i class="ti ti-disc"></i> ${f.format}</span>` : ''}
|
||||
${f.length ? `<span class="tech-pill"><i class="ti ti-clock"></i> ${f.length} Min</span>` : ''}
|
||||
${f.number_of_discs ? `<span class="tech-pill"><i class="ti ti-layers-intersect"></i> ${f.number_of_discs} Disque(s)</span>` : ''}
|
||||
</div>
|
||||
<div class="pub-tech-grid">
|
||||
<div class="tech-meta-item"><span class="tech-meta-label">Éditeur</span><span class="tech-meta-value">${f.publisher || '—'}</span></div>
|
||||
<div class="tech-meta-item"><span class="tech-meta-label">Format Image</span><span class="tech-meta-value">${f.aspect_ratio || '—'}</span></div>
|
||||
<div class="tech-meta-item" style="grid-column: span 2;"><span class="tech-meta-label">Code Barre (EAN)</span><span class="tech-meta-value">${f.ean_isbn13 || '—'}</span></div>
|
||||
</div>
|
||||
<div class="pub-synopsis-box">
|
||||
<h4>Synopsis / Notes</h4>
|
||||
<p>${f.description ? f.description : 'Aucune description fournie.'}</p>
|
||||
</div>
|
||||
`;
|
||||
if (dPosterWrap) dPosterWrap.style.display = 'none';
|
||||
if (detailModalLayout) detailModalLayout.classList.add('no-poster');
|
||||
}
|
||||
}
|
||||
|
||||
if (detailOverlay) detailOverlay.classList.add('open');
|
||||
if (dTitle) dTitle.textContent = f.title;
|
||||
if (dMeta) dMeta.textContent = `${f.year ? f.year + ' | ' : ''}${f.director || 'Réalisateur inconnu'}`;
|
||||
|
||||
if (dBody) {
|
||||
// BUG CORRIGÉ : Réécriture complète des template literals qui étaient syntaxiquement cassés
|
||||
if (f.type === 'critique') {
|
||||
const stars = '★'.repeat(f.rating) + `<span class="stars-muted">${'☆'.repeat(5 - f.rating)}</span>`;
|
||||
dBody.innerHTML = `
|
||||
<div class="detail-stars">${stars}</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>
|
||||
</div>
|
||||
${f.streaming ? `<div class="tech-pill" style="margin-top:1.5rem; width:fit-content;"><i class="ti ti-device-tv"></i> Visionnage : ${f.streaming}</div>` : ''}
|
||||
`;
|
||||
} else {
|
||||
dBody.innerHTML = `
|
||||
<div class="pub-tech-badges">
|
||||
${f.format ? `<span class="tech-pill format-gold"><i class="ti ti-disc"></i> ${f.format}</span>` : ''}
|
||||
${f.length ? `<span class="tech-pill"><i class="ti ti-clock"></i> ${f.length} Min</span>` : ''}
|
||||
${f.number_of_discs ? `<span class="tech-pill"><i class="ti ti-layers-intersect"></i> ${f.number_of_discs} Disque(s)</span>` : ''}
|
||||
</div>
|
||||
<div class="pub-tech-grid">
|
||||
<div class="tech-meta-item">
|
||||
<span class="tech-meta-label">Éditeur</span>
|
||||
<span class="tech-meta-value">${f.publisher || '—'}</span>
|
||||
</div>
|
||||
<div class="tech-meta-item">
|
||||
<span class="tech-meta-label">Format Image</span>
|
||||
<span class="tech-meta-value">${f.aspect_ratio || '—'}</span>
|
||||
</div>
|
||||
<div class="tech-meta-item" style="grid-column: span 2;">
|
||||
<span class="tech-meta-label">Code Barre (EAN)</span>
|
||||
<span class="tech-meta-value">${f.ean_isbn13 || '—'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pub-synopsis-box">
|
||||
<h4>Synopsis / Notes</h4>
|
||||
<p>${f.description ? f.description : 'Aucune description fournie.'}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
if (detailOverlay) detailOverlay.classList.add('open');
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
const detailOverlay = document.getElementById('detail-overlay');
|
||||
if (detailOverlay) detailOverlay.classList.remove('open');
|
||||
const detailOverlay = document.getElementById('detail-overlay');
|
||||
if (detailOverlay) detailOverlay.classList.remove('open');
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadPublicData);
|
||||
Reference in New Issue
Block a user