Cursor Agentandmathieumoran1
34852ce931
This change fetches movie counts and watched status in a separate, faster API call. This allows the UI to update header information (like movie counts and last updated time) much sooner, improving perceived performance. The `watchedMovies` array is now fetched as part of this summary endpoint. Co-authored-by: mathieumoran1 <[email protected]>
437 lines
17 KiB
JavaScript
437 lines
17 KiB
JavaScript
window.onload = async function () {
|
|
const token = localStorage.getItem('auth_token');
|
|
const movieTableBody = document.getElementById('movie-table-body');
|
|
const watchedRatioEl = document.getElementById('watched-ratio');
|
|
|
|
function showTableLoading() {
|
|
if (!movieTableBody) return;
|
|
movieTableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="3" class="text-center py-4" aria-live="polite" aria-busy="true">
|
|
<div class="d-inline-flex align-items-center gap-2">
|
|
<div class="spinner-border text-secondary" role="status" aria-label="Chargement">
|
|
<span class="visually-hidden">Chargement...</span>
|
|
</div>
|
|
<span>Chargement…</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
function setInlineLoading(el, label = 'Chargement…') {
|
|
if (!el) return;
|
|
el.innerHTML = `
|
|
<span class="d-inline-flex align-items-center gap-2" aria-live="polite" aria-busy="true">
|
|
<span class="spinner-border spinner-border-sm text-secondary" role="status" aria-label="Chargement">
|
|
<span class="visually-hidden">Chargement...</span>
|
|
</span>
|
|
<span>${label}</span>
|
|
</span>
|
|
`;
|
|
}
|
|
|
|
function showTableError(message) {
|
|
if (!movieTableBody) return;
|
|
movieTableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="3">
|
|
<div class="alert alert-danger my-2" role="alert">
|
|
${message || 'Erreur lors du chargement.'}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
|
|
const DEFAULT_COMPLETION_MODAL = Object.freeze({
|
|
title: 'Félicitations! very nice 🎉🎉🎉',
|
|
bodyText: '',
|
|
videoSrc: 'video/reward.mp4',
|
|
bodyHtml: ''
|
|
});
|
|
|
|
function sanitizeHtml(raw) {
|
|
const html = String(raw || '');
|
|
const withoutScripts = html.replace(/<script\b[\s\S]*?<\/script>/gi, '');
|
|
const withoutOnAttrs = withoutScripts
|
|
.replace(/\son\w+="[^"]*"/gi, '')
|
|
.replace(/\son\w+='[^']*'/gi, '')
|
|
.replace(/\son\w+=\S+/gi, '');
|
|
return withoutOnAttrs.trim();
|
|
}
|
|
|
|
async function fetchCompletionModalContent() {
|
|
try {
|
|
const res = await fetch('/api/settings/completion-modal', { method: 'GET' });
|
|
if (!res.ok) throw new Error('Failed to fetch completion modal');
|
|
const data = await res.json();
|
|
return {
|
|
title: typeof data?.title === 'string' ? data.title : DEFAULT_COMPLETION_MODAL.title,
|
|
bodyText: typeof data?.bodyText === 'string' ? data.bodyText : DEFAULT_COMPLETION_MODAL.bodyText,
|
|
videoSrc: typeof data?.videoSrc === 'string' ? data.videoSrc : DEFAULT_COMPLETION_MODAL.videoSrc,
|
|
bodyHtml: typeof data?.bodyHtml === 'string' ? data.bodyHtml : DEFAULT_COMPLETION_MODAL.bodyHtml,
|
|
};
|
|
} catch (_) {
|
|
return DEFAULT_COMPLETION_MODAL;
|
|
}
|
|
}
|
|
|
|
function applyCompletionModalContent(content) {
|
|
const titleEl = document.getElementById('videoModalLabel');
|
|
const bodyTextEl = document.getElementById('completion-modal-text');
|
|
const bodyCustomEl = document.getElementById('completion-modal-custom');
|
|
const videoEl = document.getElementById('rewardVideo');
|
|
const videoSourceEl = document.getElementById('rewardVideoSource');
|
|
|
|
const title = String(content?.title || '').trim() || DEFAULT_COMPLETION_MODAL.title;
|
|
const bodyText = String(content?.bodyText || '');
|
|
const bodyHtml = sanitizeHtml(String(content?.bodyHtml || ''));
|
|
const videoSrc = String(content?.videoSrc || '').trim();
|
|
|
|
if (titleEl) titleEl.textContent = title;
|
|
|
|
if (bodyCustomEl) {
|
|
if (bodyHtml) {
|
|
bodyCustomEl.innerHTML = bodyHtml;
|
|
bodyCustomEl.classList.remove('d-none');
|
|
} else {
|
|
bodyCustomEl.innerHTML = '';
|
|
bodyCustomEl.classList.add('d-none');
|
|
}
|
|
}
|
|
|
|
if (bodyTextEl) {
|
|
bodyTextEl.textContent = bodyText || '';
|
|
bodyTextEl.classList.toggle('d-none', !bodyText);
|
|
}
|
|
|
|
if (videoEl && videoSourceEl) {
|
|
if (videoSrc) {
|
|
videoSourceEl.setAttribute('src', videoSrc);
|
|
// reload source (so updated src is used)
|
|
try { videoEl.load(); } catch (_) {}
|
|
videoEl.classList.remove('d-none');
|
|
} else {
|
|
try { videoEl.pause(); } catch (_) {}
|
|
videoEl.classList.add('d-none');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function fetchActiveYear() {
|
|
try {
|
|
const res = await fetch('/api/settings/year', { method: 'GET' });
|
|
if (!res.ok) throw new Error('Failed to fetch active year');
|
|
const data = await res.json();
|
|
const year = Number(data?.year);
|
|
return Number.isInteger(year) ? year : new Date().getFullYear();
|
|
} catch (_) {
|
|
return new Date().getFullYear();
|
|
}
|
|
}
|
|
|
|
async function fetchOscarEffectiveDate(year) {
|
|
try {
|
|
const res = await fetch(`/api/settings/oscar-date?year=${encodeURIComponent(String(year))}`, { method: 'GET' });
|
|
if (!res.ok) throw new Error('Failed to fetch oscar date');
|
|
const data = await res.json();
|
|
const effectiveDate = typeof data?.effectiveDate === 'string' ? data.effectiveDate : null;
|
|
return effectiveDate && /^\d{4}-\d{2}-\d{2}$/.test(effectiveDate) ? effectiveDate : `${year}-03-15`;
|
|
} catch (_) {
|
|
return `${year}-03-15`;
|
|
}
|
|
}
|
|
|
|
function parseLocalNoonFromIsoDate(dateStr) {
|
|
const d = new Date(`${dateStr}T12:00:00`);
|
|
return Number.isNaN(d.getTime()) ? null : d;
|
|
}
|
|
|
|
async function fetchMoviesSummary(year) {
|
|
const res = await fetch(`/api/movies/summary?year=${encodeURIComponent(String(year))}`, {
|
|
method: 'GET',
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
});
|
|
if (!res.ok) throw new Error('Failed to fetch movies summary');
|
|
return await res.json();
|
|
}
|
|
|
|
const activeYear = await fetchActiveYear();
|
|
document.title = `Pool Oscars ${activeYear} - Checklist`;
|
|
const oscarYearEl = document.getElementById('oscar-year');
|
|
if (oscarYearEl) oscarYearEl.textContent = String(activeYear);
|
|
|
|
// Render countdown immediately with a deterministic fallback (then refine from settings).
|
|
const oscarDayMonthEl = document.getElementById('oscar-date-day-month');
|
|
const timeLeftEl = document.getElementById('time-left');
|
|
const fallbackDate = parseLocalNoonFromIsoDate(`${activeYear}-03-15`) || new Date(`March 15, ${activeYear} 12:00:00`);
|
|
if (oscarDayMonthEl) {
|
|
try {
|
|
oscarDayMonthEl.textContent = fallbackDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' });
|
|
} catch (_) {
|
|
oscarDayMonthEl.textContent = '15 mars';
|
|
}
|
|
}
|
|
|
|
const currentDate = new Date();
|
|
let timeDifference = fallbackDate - currentDate;
|
|
let daysLeft = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
|
if (timeLeftEl) timeLeftEl.textContent = `${daysLeft} jours`;
|
|
|
|
fetchOscarEffectiveDate(activeYear).then((oscarEffectiveDate) => {
|
|
const targetDate =
|
|
parseLocalNoonFromIsoDate(oscarEffectiveDate) ||
|
|
fallbackDate;
|
|
|
|
if (oscarDayMonthEl) {
|
|
try {
|
|
oscarDayMonthEl.textContent = targetDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' });
|
|
} catch (_) {}
|
|
}
|
|
const now = new Date();
|
|
timeDifference = targetDate - now;
|
|
daysLeft = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
|
if (timeLeftEl) timeLeftEl.textContent = `${daysLeft} jours`;
|
|
}).catch(() => {});
|
|
|
|
if (token) {
|
|
try {
|
|
const decoded = JSON.parse(atob(token.split('.')[1]));
|
|
if (decoded.mustChangePassword) {
|
|
window.location.href = '/change-password.html';
|
|
return;
|
|
}
|
|
const userName = decoded.name;
|
|
document.getElementById('user-name').textContent = userName;
|
|
if (decoded.admin) {
|
|
const adminLink = document.getElementById('admin-control-link');
|
|
if (adminLink) adminLink.classList.remove('d-none');
|
|
}
|
|
const currentTime = Math.floor(Date.now() / 1000);
|
|
if (decoded.exp && decoded.exp < currentTime) {
|
|
localStorage.removeItem('auth_token');
|
|
window.location.href = '/';
|
|
}
|
|
} catch (error) {
|
|
localStorage.removeItem('auth_token');
|
|
window.location.href = '/';
|
|
}
|
|
} else {
|
|
window.location.href = '/';
|
|
}
|
|
|
|
showTableLoading();
|
|
setInlineLoading(watchedRatioEl);
|
|
const progressBarEl = document.getElementById('progress-bar');
|
|
if (progressBarEl) {
|
|
progressBarEl.classList.add('progress-bar-striped', 'progress-bar-animated');
|
|
}
|
|
|
|
let movies = [];
|
|
let watchedMovies = [];
|
|
let watchedMoviesInYear = [];
|
|
let movieImdbIds = new Set();
|
|
try {
|
|
// Start summary fetch immediately so the header can update without waiting for the full list.
|
|
const summaryPromise = fetchMoviesSummary(activeYear)
|
|
.then((summary) => {
|
|
const totalCount = Number(summary?.totalMoviesCount) || 0;
|
|
const watchedCount = Number(summary?.watchedMoviesCount) || 0;
|
|
const ratioPct = totalCount > 0 ? ((watchedCount / totalCount) * 100).toFixed(1) : '0.0';
|
|
if (watchedRatioEl) watchedRatioEl.innerText = `Vu: ${watchedCount} / ${totalCount} (${ratioPct}%)`;
|
|
updateProgressBar(watchedCount, totalCount, false);
|
|
return summary;
|
|
})
|
|
.catch(() => null);
|
|
|
|
// Fetch remaining data in parallel.
|
|
const [completionModalContent, moviesRes] = await Promise.all([
|
|
fetchCompletionModalContent(),
|
|
fetch(`/api/movies?year=${encodeURIComponent(String(activeYear))}&view=checklist`, {
|
|
method: 'GET',
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
})
|
|
]);
|
|
|
|
applyCompletionModalContent(completionModalContent);
|
|
|
|
if (!moviesRes.ok) {
|
|
localStorage.removeItem('auth_token');
|
|
window.location.href = '/';
|
|
return;
|
|
}
|
|
|
|
movies = await moviesRes.json();
|
|
|
|
// Sort movies alphabetically by title
|
|
movies.sort((a, b) => a.title.localeCompare(b.title, 'fr', { sensitivity: 'base' }));
|
|
|
|
const summary = await summaryPromise;
|
|
watchedMovies = Array.isArray(summary?.watchedMovies) ? summary.watchedMovies : [];
|
|
|
|
if (progressBarEl) {
|
|
progressBarEl.classList.remove('progress-bar-striped', 'progress-bar-animated');
|
|
}
|
|
} catch (e) {
|
|
showTableError('Impossible de charger la checklist. Réessaie dans quelques instants.');
|
|
return;
|
|
}
|
|
|
|
movieImdbIds = new Set(movies.map((m) => m.imdb_id).filter(Boolean));
|
|
watchedMoviesInYear = watchedMovies.filter((wm) => movieImdbIds.has(wm.imdb_id));
|
|
|
|
const totalMoviesCount = movies.length;
|
|
const watchedMoviesCount = watchedMoviesInYear.length;
|
|
const ratioPct = totalMoviesCount > 0 ? ((watchedMoviesCount / totalMoviesCount) * 100).toFixed(1) : '0.0';
|
|
document.getElementById('watched-ratio').innerText = `Vu: ${watchedMoviesCount} / ${totalMoviesCount} (${ratioPct}%)`;
|
|
|
|
function launchConfetti() {
|
|
const duration = 3 * 1000; // 3 seconds
|
|
const animationEnd = Date.now() + duration;
|
|
const colors = ['#bb0000', '#ffffff', '#FFD700'];
|
|
|
|
function frame() {
|
|
const timeLeft = animationEnd - Date.now();
|
|
if (timeLeft <= 0) return;
|
|
confetti({
|
|
particleCount: 5,
|
|
angle: 60,
|
|
spread: 55,
|
|
origin: { x: 0 }
|
|
});
|
|
confetti({
|
|
particleCount: 5,
|
|
angle: 120,
|
|
spread: 55,
|
|
origin: { x: 1 }
|
|
});
|
|
requestAnimationFrame(frame);
|
|
}
|
|
frame();
|
|
}
|
|
|
|
function updateProgressBar(watchedCount, totalCount, celebrate = true) {
|
|
const progressBar = document.getElementById('progress-bar');
|
|
if (!progressBar) return;
|
|
const safeTotal = Number(totalCount);
|
|
const safeWatched = Number(watchedCount);
|
|
const percentage = safeTotal > 0 && Number.isFinite(safeWatched) ? (safeWatched / safeTotal) * 100 : 0;
|
|
progressBar.style.width = `${percentage}%`;
|
|
|
|
if (percentage <= 50) {
|
|
progressBar.style.backgroundColor = `rgb(${255}, ${Math.floor((percentage / 50) * 255)}, 0)`;
|
|
} else {
|
|
progressBar.style.backgroundColor = `rgb(${Math.floor(255 - ((percentage - 50) / 50) * 255)}, 255, 0)`;
|
|
}
|
|
|
|
progressBar.setAttribute('aria-valuenow', Math.round(percentage));
|
|
|
|
if (celebrate) {
|
|
const videoModal = new bootstrap.Modal(document.getElementById("videoModal"));
|
|
if (percentage === 100) {
|
|
videoModal.show();
|
|
launchConfetti();
|
|
const rewardVideo = document.getElementById("rewardVideo");
|
|
// Only attempt autoplay if we actually have a visible <video>.
|
|
if (rewardVideo && !rewardVideo.classList.contains('d-none')) {
|
|
rewardVideo.play().catch(() => {});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
updateProgressBar(watchedMoviesCount, totalMoviesCount);
|
|
|
|
if (movieTableBody) movieTableBody.innerHTML = '';
|
|
movies.forEach(movie => {
|
|
const watchedMovie = watchedMoviesInYear.find(wm => wm.imdb_id === movie.imdb_id);
|
|
const watchedDate = watchedMovie ? new Date(watchedMovie.watchedDate).toLocaleString() : '';
|
|
const movieRow = document.createElement('tr');
|
|
movieRow.innerHTML = `
|
|
<td>
|
|
<input type="checkbox" class="form-check-input" id="movie-${movie.imdb_id}" ${watchedMovie ? 'checked' : ''} />
|
|
</td>
|
|
<td>${movie.title}</td>
|
|
<td id="watched-date-${movie.imdb_id}">${watchedDate}</td>
|
|
`;
|
|
|
|
// Set initial row color based on watched state
|
|
if (watchedMovie) {
|
|
movieRow.style.backgroundColor = 'rgba(144, 238, 144, 0.6)'; // Lighter light green with transparency
|
|
} else {
|
|
movieRow.style.backgroundColor = 'rgba(255, 99, 71, 0.6)'; // Lighter light red with transparency
|
|
}
|
|
|
|
movieTableBody.appendChild(movieRow);
|
|
|
|
movieRow.addEventListener('click', (event) => {
|
|
const checkbox = document.getElementById(`movie-${movie.imdb_id}`);
|
|
if (event.target.tagName !== 'INPUT') {
|
|
checkbox.checked = !checkbox.checked;
|
|
checkbox.dispatchEvent(new Event('change'));
|
|
}
|
|
});
|
|
|
|
const checkbox = document.getElementById(`movie-${movie.imdb_id}`);
|
|
checkbox.addEventListener('change', async (event) => {
|
|
const isChecked = event.target.checked;
|
|
const watchedDateCell = document.getElementById(`watched-date-${movie.imdb_id}`);
|
|
const row = event.target.closest('tr'); // Get the parent row
|
|
|
|
if (isChecked) {
|
|
watchedDateCell.textContent = new Date().toLocaleString();
|
|
row.style.backgroundColor = 'rgba(144, 238, 144, 0.6)'; // Apply light green with transparency
|
|
} else {
|
|
watchedDateCell.textContent = '';
|
|
row.style.backgroundColor = 'rgba(255, 99, 71, 0.6)'; // Apply light red with transparency
|
|
}
|
|
|
|
await fetch('/api/movies/users/updateWatchedMovies', {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify({ imdb_id: movie.imdb_id, isChecked })
|
|
});
|
|
|
|
const updatedWatchedMoviesRes = await fetch('/api/movies/watchedMovies', {
|
|
method: 'GET',
|
|
headers: { 'Authorization': `Bearer ${token}` }
|
|
});
|
|
|
|
if (updatedWatchedMoviesRes.ok) {
|
|
const updatedWatchedMovies = await updatedWatchedMoviesRes.json();
|
|
watchedMoviesInYear = updatedWatchedMovies.filter((wm) => movieImdbIds.has(wm.imdb_id));
|
|
const updatedWatchedCount = watchedMoviesInYear.length;
|
|
const updatedPct = totalMoviesCount > 0 ? ((updatedWatchedCount / totalMoviesCount) * 100).toFixed(1) : '0.0';
|
|
document.getElementById('watched-ratio').innerText = `Vu: ${updatedWatchedCount} / ${totalMoviesCount} (${updatedPct}%)`;
|
|
updateProgressBar(updatedWatchedCount, totalMoviesCount);
|
|
|
|
// Recalculate and update movies per day
|
|
const moviesLeft = totalMoviesCount - updatedWatchedCount;
|
|
const moviesPerDay = daysLeft > 0 ? (moviesLeft / daysLeft).toFixed(2) : moviesLeft;
|
|
document.getElementById('movies-per-day').textContent = `À voir par jour: ${moviesPerDay} films`;
|
|
}
|
|
});
|
|
});
|
|
|
|
const moviesLeft = totalMoviesCount - watchedMoviesCount;
|
|
const moviesPerDay = daysLeft > 0 ? (moviesLeft / daysLeft).toFixed(2) : moviesLeft;
|
|
document.getElementById('movies-per-day').textContent = `À voir par jour: ${moviesPerDay} films`;
|
|
|
|
document.getElementById('log-off').addEventListener('click', () => {
|
|
localStorage.removeItem('auth_token');
|
|
window.location.href = '/';
|
|
});
|
|
|
|
// Stop the video when the modal is closed
|
|
const videoModal = document.getElementById("videoModal");
|
|
const rewardVideo = document.getElementById("rewardVideo");
|
|
videoModal.addEventListener("hidden.bs.modal", function () {
|
|
if (!rewardVideo) return;
|
|
rewardVideo.pause();
|
|
rewardVideo.currentTime = 0;
|
|
});
|
|
}; |