fix things, speed things up a little (scuffed)
This commit is contained in:
quoije
@@ -0,0 +1,196 @@
|
||||
window.onload = async function () {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
|
||||
const targetDate = new Date('March 2, 2025');
|
||||
const currentDate = new Date();
|
||||
const timeDifference = targetDate - currentDate;
|
||||
const daysLeft = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
||||
document.getElementById('time-left').textContent = `${daysLeft} jours`;
|
||||
|
||||
if (token) {
|
||||
try {
|
||||
const decoded = JSON.parse(atob(token.split('.')[1]));
|
||||
const userName = decoded.name;
|
||||
document.getElementById('user-name').textContent = userName;
|
||||
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 = '/';
|
||||
}
|
||||
|
||||
const res = await fetch('/api/movies', {
|
||||
method: 'GET',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
|
||||
const movies = await res.json();
|
||||
|
||||
// Sort movies alphabetically by title
|
||||
movies.sort((a, b) => a.title.localeCompare(b.title, 'fr', { sensitivity: 'base' }));
|
||||
|
||||
const watchedRes = await fetch('/api/movies/watchedMovies', {
|
||||
method: 'GET',
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
});
|
||||
|
||||
let watchedMovies = [];
|
||||
if (watchedRes.ok) {
|
||||
watchedMovies = await watchedRes.json();
|
||||
}
|
||||
|
||||
const totalMoviesCount = movies.length;
|
||||
const watchedMoviesCount = watchedMovies.length;
|
||||
document.getElementById('watched-ratio').innerText = `Vu: ${watchedMoviesCount} / ${totalMoviesCount} (${((watchedMoviesCount / totalMoviesCount) * 100).toFixed(1)}%)`;
|
||||
|
||||
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) {
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const percentage = (watchedCount / totalCount) * 100;
|
||||
console.log(percentage);
|
||||
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));
|
||||
|
||||
const videoModal = new bootstrap.Modal(document.getElementById("videoModal"));
|
||||
|
||||
if (percentage === 100) {
|
||||
videoModal.show();
|
||||
launchConfetti();
|
||||
document.getElementById("rewardVideo").play();
|
||||
}
|
||||
}
|
||||
|
||||
updateProgressBar(watchedMoviesCount, totalMoviesCount);
|
||||
|
||||
const movieTableBody = document.getElementById('movie-table-body');
|
||||
movies.forEach(movie => {
|
||||
const watchedMovie = watchedMovies.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();
|
||||
const updatedWatchedCount = updatedWatchedMovies.length;
|
||||
document.getElementById('watched-ratio').innerText = `Vu: ${updatedWatchedCount} / ${totalMoviesCount} (${((updatedWatchedCount / totalMoviesCount) * 100).toFixed(1)}%)`;
|
||||
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 () {
|
||||
rewardVideo.pause();
|
||||
rewardVideo.currentTime = 0;
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
// Check if the user is already logged in by looking for auth_token in localStorage
|
||||
if (localStorage.getItem('auth_token')) {
|
||||
// If the token is found, redirect to /movies.html
|
||||
window.location.href = '/movies.html';
|
||||
}
|
||||
|
||||
// Handle login form submission
|
||||
document.getElementById('login-form').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const email = document.getElementById('email').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
const res = await fetch('/api/users/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ email, password })
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
// Save the token to localStorage
|
||||
localStorage.setItem('auth_token', data.token);
|
||||
window.location.href = '/movies.html'; // Redirect to movies page on success
|
||||
} else {
|
||||
const error = await res.json();
|
||||
alert(`${error.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Fetch version information from the API
|
||||
async function fetchVersionInfo() {
|
||||
const res = await fetch('/api/version');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
// Update footer with the fetched version info
|
||||
const footerText = `${data.date} - ${data.version} - ${data.message}`;
|
||||
document.getElementById('footer-text').textContent = footerText;
|
||||
} else {
|
||||
document.getElementById('footer-text').textContent = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Call the function to fetch and display the version info
|
||||
// Doesn't work on prod, will fix later
|
||||
fetchVersionInfo();
|
||||
@@ -0,0 +1,118 @@
|
||||
window.onload = async function () {
|
||||
const targetDate = new Date('March 2, 2025');
|
||||
const currentDate = new Date();
|
||||
const timeDifference = targetDate - currentDate;
|
||||
const daysLeft = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
||||
document.getElementById('time-left').textContent = `${daysLeft} jours`;
|
||||
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (token) {
|
||||
try {
|
||||
const decoded = JSON.parse(atob(token.split('.')[1]));
|
||||
const userName = decoded.name;
|
||||
document.getElementById('user-name').textContent = userName;
|
||||
|
||||
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 = '/';
|
||||
}
|
||||
|
||||
const res = await fetch('/api/movies', {
|
||||
method: 'GET',
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
return;
|
||||
}
|
||||
|
||||
const movies = await res.json();
|
||||
|
||||
// Sort movies alphabetically by title
|
||||
movies.sort((a, b) => a.title.localeCompare(b.title, 'fr', { sensitivity: 'base' }));
|
||||
|
||||
const watchedRes = await fetch('/api/movies/watchedMovies', {
|
||||
method: 'GET',
|
||||
headers: { 'Authorization': `Bearer ${token}` },
|
||||
});
|
||||
|
||||
let watchedMovies = [];
|
||||
if (watchedRes.ok) {
|
||||
watchedMovies = await watchedRes.json();
|
||||
}
|
||||
|
||||
const moviesList = document.getElementById('movies-list');
|
||||
const totalMoviesCount = movies.length;
|
||||
const watchedMoviesCount = watchedMovies.length;
|
||||
const ratioText = `Vu: ${watchedMoviesCount} / ${totalMoviesCount} (${((watchedMoviesCount / totalMoviesCount) * 100).toFixed(1)}%)`;
|
||||
document.getElementById('watched-ratio').innerText = ratioText;
|
||||
|
||||
movies.forEach(movie => {
|
||||
const isChecked = watchedMovies.some(watchedMovie => watchedMovie.imdb_id === movie.imdb_id);
|
||||
const watchedMovie = watchedMovies.find(wm => wm.imdb_id === movie.imdb_id);
|
||||
const watchedDate = watchedMovie ? new Date(watchedMovie.watchedDate).toLocaleString() : '';
|
||||
|
||||
const movieDiv = document.createElement('div');
|
||||
movieDiv.classList.add('col-md-4', 'mb-4', 'movie-card');
|
||||
movieDiv.setAttribute('data-imdb-id', movie.imdb_id);
|
||||
movieDiv.innerHTML = `
|
||||
<div class="card">
|
||||
${isChecked ? '<div class="watched-banner">VISIONNÉ</div>' : ''}
|
||||
<a href="${movie.vod_link}"><img src="${movie.poster}" class="card-img-top" alt="${movie.title}" style="width: 75%; display: block; margin: 0 auto; padding: 10px;"></a>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title d-flex justify-content-between align-items-center">
|
||||
${movie.title}
|
||||
<span>⭐ ${movie.rating} <a href="https://www.imdb.com/title/${movie.imdb_id}/"><img src="/img/imdb.png"></a></span>
|
||||
</h5>
|
||||
<p class="fw-bold fst-italic card-text" style="font-size: 0.75rem;">${movie.category}</p>
|
||||
<p class="card-text">${movie.description}</p>
|
||||
${isChecked ? `<p class="card-text"><strong>Regardé le:</strong> ${watchedDate}</p>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
moviesList.appendChild(movieDiv);
|
||||
});
|
||||
|
||||
document.getElementById('log-off').addEventListener('click', function () {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
});
|
||||
|
||||
const filterSwitch = document.getElementById('flexSwitchCheckDefault');
|
||||
const savedFilterState = localStorage.getItem('filter-checkbox');
|
||||
const isFilterActive = savedFilterState === 'checked';
|
||||
filterSwitch.checked = isFilterActive;
|
||||
|
||||
filterSwitch.addEventListener('change', function () {
|
||||
const filterState = filterSwitch.checked ? 'checked' : 'unchecked';
|
||||
localStorage.setItem('filter-checkbox', filterState);
|
||||
filterMovies();
|
||||
});
|
||||
|
||||
function filterMovies() {
|
||||
const showUnwatchedOnly = filterSwitch.checked;
|
||||
const movieCards = document.querySelectorAll('.movie-card');
|
||||
|
||||
movieCards.forEach(card => {
|
||||
const imdbId = card.getAttribute('data-imdb-id');
|
||||
const isWatched = watchedMovies.some(watchedMovie => watchedMovie.imdb_id === imdbId);
|
||||
|
||||
if (showUnwatchedOnly && isWatched) {
|
||||
card.style.display = 'none';
|
||||
} else {
|
||||
card.style.display = 'block';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
filterMovies();
|
||||
};
|
||||
@@ -0,0 +1,45 @@
|
||||
// Check if the user is already logged in by looking for auth_token in localStorage
|
||||
if (localStorage.getItem('auth_token')) {
|
||||
// If the token is found, redirect to /movies.html
|
||||
window.location.href = '/movies.html';
|
||||
}
|
||||
|
||||
// Handle registration form submission
|
||||
document.getElementById('register-form').addEventListener('submit', async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const name = document.getElementById('name').value;
|
||||
const email = document.getElementById('email').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const verifoof = document.getElementById('verifoof').value;
|
||||
|
||||
const res = await fetch('/api/users/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, email, password, verifoof })
|
||||
});
|
||||
|
||||
const responseMessageElement = document.getElementById('response-message');
|
||||
const modal = new bootstrap.Modal(document.getElementById('responseModal'));
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
// Show success message in the modal
|
||||
responseMessageElement.textContent = data.message;
|
||||
|
||||
// Show the modal
|
||||
modal.show();
|
||||
|
||||
// Redirect to login after the modal is dismissed
|
||||
document.getElementById('redirect-login').addEventListener('click', function () {
|
||||
window.location.href = '/';
|
||||
});
|
||||
} else {
|
||||
const error = await res.json();
|
||||
// Show error message in the modal
|
||||
responseMessageElement.textContent = `Error: ${error.message}`;
|
||||
|
||||
// Show the modal
|
||||
modal.show();
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,99 @@
|
||||
window.onload = async function () {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
|
||||
if (token) {
|
||||
try {
|
||||
const decoded = JSON.parse(atob(token.split('.')[1])); // Manually decoding JWT
|
||||
const userName = decoded.name;
|
||||
document.getElementById('user-name').textContent = userName;
|
||||
|
||||
// Verify JWT expiration
|
||||
const currentTime = Math.floor(Date.now() / 1000);
|
||||
if (decoded.exp && decoded.exp < currentTime) {
|
||||
console.warn("Token is expired");
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error decoding token:", error);
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
}
|
||||
} else {
|
||||
window.location.href = '/';
|
||||
}
|
||||
|
||||
try {
|
||||
const statsRes = await fetch('/api/users/stats', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (!statsRes.ok) {
|
||||
throw new Error('Failed to fetch user stats');
|
||||
}
|
||||
|
||||
const stats = await statsRes.json();
|
||||
const userTableBody = document.getElementById('user-table-body');
|
||||
const table = document.querySelector('.user-table');
|
||||
const spinner = document.getElementById('loading-spinner');
|
||||
|
||||
// Ensure watchedRatio is treated as a number and sort in descending order
|
||||
stats.sort((a, b) => parseFloat(b.watchedRatio) - parseFloat(a.watchedRatio));
|
||||
|
||||
// Clear previous rows to prevent duplication
|
||||
userTableBody.innerHTML = '';
|
||||
|
||||
stats.forEach(userStat => {
|
||||
const userRow = document.createElement('tr');
|
||||
userRow.innerHTML = `
|
||||
<td>
|
||||
<a href="#" class="user-link" data-movies='${JSON.stringify(userStat.watchedMovies)}'>${userStat.name}</a>
|
||||
</td>
|
||||
<td>${userStat.watchedCount}</td>
|
||||
<td>${userStat.watchedRatio}</td>
|
||||
`;
|
||||
userTableBody.appendChild(userRow);
|
||||
});
|
||||
|
||||
// Hide spinner and show table after loading
|
||||
spinner.style.display = 'none';
|
||||
table.style.display = 'table';
|
||||
|
||||
// Add event listener for user links
|
||||
document.querySelectorAll('.user-link').forEach(link => {
|
||||
link.addEventListener('click', function (event) {
|
||||
event.preventDefault();
|
||||
const datasetMovies = this.dataset.movies;
|
||||
console.log(datasetMovies);
|
||||
const movies = JSON.parse(datasetMovies);
|
||||
|
||||
// Clear the current movie list in the modal
|
||||
const movieList = document.getElementById('movie-list');
|
||||
movieList.innerHTML = '';
|
||||
|
||||
// Populate the modal with the movies the user has watched
|
||||
movies.forEach(movie => {
|
||||
const movieItem = document.createElement('li');
|
||||
movieItem.classList.add('list-group-item');
|
||||
movieItem.textContent = movie.title;
|
||||
movieList.appendChild(movieItem);
|
||||
});
|
||||
|
||||
// Show the modal
|
||||
const modal = new bootstrap.Modal(document.getElementById('moviesModal'));
|
||||
modal.show();
|
||||
});
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error loading user statistics:', error);
|
||||
}
|
||||
|
||||
// Log-off functionality
|
||||
document.getElementById('log-off').addEventListener('click', function() {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
});
|
||||
};
|
||||
Reference in New Issue
Block a user