initial commit, should work
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,212 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pool Oscar 2025 - Checklist</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<style>
|
||||
.navbar-custom {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .nav-link {
|
||||
color: white;
|
||||
}
|
||||
.navbar-custom .nav-link:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
.movie-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.ratio {
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
|
||||
<!-- Black banner with buttons and user info -->
|
||||
<nav class="navbar navbar-expand-lg navbar-custom">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex align-items-center">
|
||||
<!-- Logo with max height and width control -->
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="img/logo_w.png" style="max-width: 180px; height: 70px; object-fit: contain;">
|
||||
</a>
|
||||
<a href="movies.html" class="btn btn-outline-light me-2">Films</a>
|
||||
<a href="checklist.html" class="btn btn-outline-light me-2">Checklist</a>
|
||||
<a href="user-stat.html" class="btn btn-outline-light">Statistique</a>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<span id="user-name" class="navbar-text me-3"></span>
|
||||
<button id="log-off" class="btn btn-danger">Déconnexion</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mt-5">
|
||||
<h2>Checklist</h2>
|
||||
<div id="watched-ratio" class="ratio"></div>
|
||||
<h3 class="fs-6">Temps avant les Oscar (2 mars 2025) - <span id="time-left"></span></h3>
|
||||
<div class="progress my-3">
|
||||
<div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%; background-color: red;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
||||
</div>
|
||||
<!-- Table for movies -->
|
||||
<table class="table movie-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Titre</th>
|
||||
<th scope="col">Regardé</th>
|
||||
<th scope="col">Date du visionnage</th> <!-- New column for watched date -->
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="movie-table-body">
|
||||
<!-- Movie rows will be inserted here -->
|
||||
</tbody>
|
||||
</table>
|
||||
<br><br>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
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 {
|
||||
// Decode the token (using a library like jwt-decode or manually)
|
||||
const decoded = JSON.parse(atob(token.split('.')[1])); // Manually decoding JWT
|
||||
|
||||
// Access the user's name from the decoded token
|
||||
const userName = decoded.name;
|
||||
|
||||
// Update the user name in the navbar
|
||||
document.getElementById('user-name').textContent = userName;
|
||||
|
||||
// Verify JWT Token expiration
|
||||
const currentTime = Math.floor(Date.now() / 1000); // Current time in seconds
|
||||
if (decoded.exp && decoded.exp < currentTime) {
|
||||
console.warn("Token is expired");
|
||||
localStorage.removeItem('auth_token'); // Remove the expired token
|
||||
window.location.href = '/'; // Redirect to the login page
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error decoding token:", error);
|
||||
localStorage.removeItem('auth_token'); // Remove invalid token
|
||||
window.location.href = '/'; // Redirect to the login page
|
||||
}
|
||||
} else {
|
||||
// Handle case if no token is available
|
||||
window.location.href = '/'; // Redirect to the login page if no token
|
||||
}
|
||||
|
||||
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();
|
||||
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 = `Regardé: ${watchedMoviesCount} / ${totalMoviesCount} (${((watchedMoviesCount / totalMoviesCount) * 100).toFixed(1)}%)`;
|
||||
|
||||
function updateProgressBar(watchedCount, totalCount) {
|
||||
const progressBar = document.getElementById('progress-bar');
|
||||
const percentage = (watchedCount / totalCount) * 100;
|
||||
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));
|
||||
}
|
||||
|
||||
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>${movie.title}</td>
|
||||
<td>
|
||||
<input type="checkbox" class="form-check-input" id="movie-${movie.imdb_id}" ${watchedMovie ? 'checked' : ''} />
|
||||
</td>
|
||||
<td id="watched-date-${movie.imdb_id}">${watchedDate}</td>
|
||||
`;
|
||||
movieTableBody.appendChild(movieRow);
|
||||
|
||||
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}`);
|
||||
if (isChecked) {
|
||||
watchedDateCell.textContent = new Date().toLocaleString();
|
||||
} else {
|
||||
watchedDateCell.textContent = '';
|
||||
}
|
||||
|
||||
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 = `Regardé: ${updatedWatchedCount} / ${totalMoviesCount} (${((updatedWatchedCount / totalMoviesCount) * 100).toFixed(1)}%)`;
|
||||
updateProgressBar(updatedWatchedCount, totalMoviesCount);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.getElementById('log-off').addEventListener('click', () => {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
});
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 658 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 418 B |
|
After Width: | Height: | Size: 586 B |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 20 KiB |
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pool Oscar 2025</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
|
||||
<div class="container d-flex justify-content-center align-items-center vh-100">
|
||||
<div class="card p-4" style="max-width: 400px;">
|
||||
<div class="text-center mb-4">
|
||||
<img src="img/logo.png" style="width: 80%";>
|
||||
</div>
|
||||
<form id="login-form">
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Courriel</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Mot de passe</label>
|
||||
<input type="password" class="form-control" id="password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Connexion</button>
|
||||
</form>
|
||||
<p class="mt-3 text-center">Pas de compte? <a href="/register.html">Enregistrez-vous</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// 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(`Login failed: ${error.message}`);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,284 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pool Oscar 2025 - Films</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<style>
|
||||
.navbar-custom {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .nav-link {
|
||||
color: white;
|
||||
}
|
||||
.navbar-custom .nav-link:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
|
||||
/* Style for the 'WATCHED' banner */
|
||||
.watched-banner {
|
||||
background-color: green;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Centering checkbox and making card look better */
|
||||
.movie-card {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Style for the filter button */
|
||||
#filter-button {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
/* Style for the ratio display */
|
||||
.ratio {
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
|
||||
<!-- Black banner with buttons and user info -->
|
||||
<nav class="navbar navbar-expand-lg navbar-custom">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex align-items-center">
|
||||
<!-- Logo with max height and width control -->
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="img/logo_w.png" style="max-width: 180px; height: 70px; object-fit: contain;">
|
||||
</a>
|
||||
<a href="movies.html" class="btn btn-outline-light me-2">Films</a>
|
||||
<a href="checklist.html" class="btn btn-outline-light me-2">Checklist</a>
|
||||
<a href="user-stat.html" class="btn btn-outline-light">Statistique</a>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<span id="user-name" class="navbar-text me-3"></span>
|
||||
<button id="log-off" class="btn btn-danger">Déconnexion</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mt-5">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h2>Films</h2>
|
||||
<h3 class="fs-6 mb-0">
|
||||
<img src="/img/filter.png" style="height: 25px;"><button id="filter-button" class="btn btn-primary btn-sm"></button>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<!-- Displaying the ratio of watched movies -->
|
||||
<div id="watched-ratio" class="ratio">
|
||||
<!-- This will display the ratio -->
|
||||
</div>
|
||||
|
||||
<h3 class="fs-6">Temps avant les Oscar (2 mars 2025) - <span id="time-left"></span></h3>
|
||||
<div id="movies-list" class="row">
|
||||
<!-- Movies will be displayed here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
window.onload = async function () {
|
||||
// Calculate the time left until March 2, 2025
|
||||
const targetDate = new Date('March 2, 2025');
|
||||
const currentDate = new Date();
|
||||
|
||||
// Calculate the difference in milliseconds
|
||||
const timeDifference = targetDate - currentDate;
|
||||
|
||||
// Convert milliseconds to days
|
||||
const daysLeft = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
|
||||
|
||||
// Update the "Time Left" text
|
||||
document.getElementById('time-left').textContent = `${daysLeft} jours`;
|
||||
|
||||
// Get token from localStorage (assuming it's set after login)
|
||||
const token = localStorage.getItem('auth_token');
|
||||
// Check if token exists
|
||||
if (token) {
|
||||
try {
|
||||
// Decode the token (using a library like jwt-decode or manually)
|
||||
const decoded = JSON.parse(atob(token.split('.')[1])); // Manually decoding JWT
|
||||
|
||||
// Access the user's name from the decoded token
|
||||
const userName = decoded.name;
|
||||
|
||||
// Update the user name in the navbar
|
||||
document.getElementById('user-name').textContent = userName;
|
||||
|
||||
// Verify JWT Token expiration
|
||||
const currentTime = Math.floor(Date.now() / 1000); // Current time in seconds
|
||||
if (decoded.exp && decoded.exp < currentTime) {
|
||||
console.warn("Token is expired");
|
||||
localStorage.removeItem('auth_token'); // Remove the expired token
|
||||
window.location.href = '/'; // Redirect to the login page
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error decoding token:", error);
|
||||
localStorage.removeItem('auth_token'); // Remove invalid token
|
||||
window.location.href = '/'; // Redirect to the login page
|
||||
}
|
||||
} else {
|
||||
// Handle case if no token is available
|
||||
window.location.href = '/'; // Redirect to the login page if no token
|
||||
}
|
||||
|
||||
// Fetching the movies from your API with Authorization header
|
||||
const res = await fetch('/api/movies', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}` // Send the token in the Authorization header
|
||||
}
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
// If unauthorized or any error, log out the user
|
||||
localStorage.removeItem('auth_token'); // Clear the token
|
||||
window.location.href = '/'; // Redirect to login page
|
||||
return;
|
||||
}
|
||||
|
||||
const movies = await res.json();
|
||||
|
||||
// Fetch watched movies for the logged-in user
|
||||
const watchedRes = await fetch('/api/movies/watchedMovies', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}` // Send the token to verify the user
|
||||
}
|
||||
});
|
||||
|
||||
let watchedMovies = [];
|
||||
if (watchedRes.ok) {
|
||||
watchedMovies = await watchedRes.json(); // Get the list of watched movies from the user's profile
|
||||
}
|
||||
|
||||
const moviesList = document.getElementById('movies-list');
|
||||
|
||||
// Calculate the watched-to-total ratio
|
||||
const totalMoviesCount = movies.length;
|
||||
const watchedMoviesCount = watchedMovies.length;
|
||||
const ratioText = `Regardé: ${watchedMoviesCount} / ${totalMoviesCount} (${((watchedMoviesCount / totalMoviesCount) * 100).toFixed(1)}%)`;
|
||||
|
||||
// Display the ratio below the Movies heading
|
||||
document.getElementById('watched-ratio').innerText = ratioText;
|
||||
|
||||
// Loop through the movies and create cards for them
|
||||
movies.forEach(movie => {
|
||||
const isChecked = watchedMovies.some(watchedMovie => watchedMovie.imdb_id === movie.imdb_id); // Check if the movie is watched
|
||||
const watchedMovie = watchedMovies.find(wm => wm.imdb_id === movie.imdb_id);
|
||||
const watchedDate = watchedMovie ? new Date(watchedMovie.watchedDate).toLocaleString() : ''; // Get the watched date if available
|
||||
|
||||
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">REGARDÉ</div>' : ''}
|
||||
<img src="${movie.poster}" class="card-img-top" alt="${movie.title}" style="width: 75%; display: block; margin: 0 auto; padding: 10px;">
|
||||
<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>` : ''} <!-- Display watched date and time if movie is watched -->
|
||||
<p class="card-text">🎥 ${movie.vod_link}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
moviesList.appendChild(movieDiv);
|
||||
});
|
||||
|
||||
// Log off functionality
|
||||
document.getElementById('log-off').addEventListener('click', function() {
|
||||
localStorage.removeItem('auth_token'); // Remove token from localStorage
|
||||
window.location.href = '/'; // Redirect to login page
|
||||
});
|
||||
|
||||
// Retrieve filter state from localStorage
|
||||
const savedFilterState = localStorage.getItem('filter-checkbox');
|
||||
let isFilterActive = savedFilterState === 'checked';
|
||||
|
||||
// Update button text and color based on the filter state
|
||||
const filterButton = document.getElementById('filter-button');
|
||||
filterButton.textContent = isFilterActive ? 'Tous les films' : 'Films non regardé';
|
||||
|
||||
// Change the button color to red when "Tous les films" is displayed
|
||||
if (isFilterActive) {
|
||||
filterButton.classList.remove('btn-danger');
|
||||
filterButton.classList.add('btn-primary');
|
||||
} else {
|
||||
filterButton.classList.remove('btn-primary');
|
||||
filterButton.classList.add('btn-danger');
|
||||
}
|
||||
|
||||
// Event listener for the button
|
||||
filterButton.addEventListener('click', function () {
|
||||
// Toggle the filter state
|
||||
isFilterActive = !isFilterActive;
|
||||
|
||||
// Update the button text and color based on the new state
|
||||
filterButton.textContent = isFilterActive ? 'Tous les films' : 'Films non regardé';
|
||||
if (isFilterActive) {
|
||||
filterButton.classList.remove('btn-danger');
|
||||
filterButton.classList.add('btn-primary');
|
||||
} else {
|
||||
filterButton.classList.remove('btn-primary');
|
||||
filterButton.classList.add('btn-danger');
|
||||
}
|
||||
|
||||
// Save the filter state to localStorage
|
||||
const filterState = isFilterActive ? 'checked' : 'unchecked';
|
||||
localStorage.setItem('filter-checkbox', filterState);
|
||||
|
||||
// Apply the filter to the movie cards
|
||||
filterMovies();
|
||||
});
|
||||
|
||||
// Function to filter the movies based on the button state
|
||||
function filterMovies() {
|
||||
const showUnwatchedOnly = isFilterActive;
|
||||
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);
|
||||
|
||||
// Hide the movie card if it's watched and the filter is on
|
||||
if (showUnwatchedOnly && isWatched) {
|
||||
card.style.display = 'none';
|
||||
} else {
|
||||
card.style.display = 'block';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Initial filter application
|
||||
filterMovies();
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Pool Oscar 2025 - Enregistrement</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
|
||||
<div class="container d-flex justify-content-center align-items-center vh-100">
|
||||
<div class="card p-4" style="max-width: 400px;">
|
||||
<div class="text-center mb-4">
|
||||
<img src="img/logo.png" style="width: 80%";>
|
||||
</div>
|
||||
<form id="register-form">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Nom</label>
|
||||
<input type="text" class="form-control" id="name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Courriel</label>
|
||||
<input type="email" class="form-control" id="email" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="password" class="form-label">Mot de passe</label>
|
||||
<input type="password" class="form-control" id="password" required>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary w-100">Enregistrer</button>
|
||||
</form>
|
||||
<p class="mt-3 text-center">Déjà un compte? <a href="/">Connectez-vous</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal for displaying registration response -->
|
||||
<div class="modal fade" id="responseModal" tabindex="-1" aria-labelledby="responseModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="responseModalLabel">Statut de l’enregistrement</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" id="response-message">
|
||||
<!-- Response message will be inserted here -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
|
||||
<button type="button" class="btn btn-primary" id="redirect-login">Retourner à la page d'accueil</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// 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 res = await fetch('/api/users/register', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, email, password })
|
||||
});
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
@@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>User Statistics</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/site.webmanifest">
|
||||
<style>
|
||||
.navbar-custom {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
.navbar-custom .navbar-brand,
|
||||
.navbar-custom .nav-link {
|
||||
color: white;
|
||||
}
|
||||
.navbar-custom .nav-link:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
.user-table {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.ratio {
|
||||
font-weight: bold;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
|
||||
<!-- Black banner with buttons and user info -->
|
||||
<nav class="navbar navbar-expand-lg navbar-custom">
|
||||
<div class="container-fluid">
|
||||
<div class="d-flex align-items-center">
|
||||
<!-- Logo with max height and width control -->
|
||||
<a class="navbar-brand" href="#">
|
||||
<img src="img/logo_w.png" style="max-width: 180px; height: 70px; object-fit: contain;">
|
||||
</a>
|
||||
<a href="movies.html" class="btn btn-outline-light me-2">Films</a>
|
||||
<a href="checklist.html" class="btn btn-outline-light me-2">Checklist</a>
|
||||
<a href="user-stat.html" class="btn btn-outline-light">Statistique</a>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<span id="user-name" class="navbar-text me-3"></span>
|
||||
<button id="log-off" class="btn btn-danger">Déconnexion</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container mt-5">
|
||||
<h2>Statistiques des utilisateurs</h2>
|
||||
<!-- Table for users and movies watched -->
|
||||
<table class="table user-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Nom</th>
|
||||
<th scope="col">Total des films regardés</th>
|
||||
<th scope="col"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="user-table-body">
|
||||
<!-- User rows will be inserted here -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Modal for displaying movies watched -->
|
||||
<div class="modal fade" id="moviesModal" tabindex="-1" aria-labelledby="moviesModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="moviesModalLabel">Films regardés</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul id="movie-list" class="list-group">
|
||||
<!-- Movie titles will be inserted here -->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
window.onload = async function () {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
// Check if token exists
|
||||
if (token) {
|
||||
try {
|
||||
// Decode the token (using a library like jwt-decode or manually)
|
||||
const decoded = JSON.parse(atob(token.split('.')[1])); // Manually decoding JWT
|
||||
|
||||
// Access the user's name from the decoded token
|
||||
const userName = decoded.name;
|
||||
|
||||
// Update the user name in the navbar
|
||||
document.getElementById('user-name').textContent = userName;
|
||||
|
||||
// Verify JWT Token expiration
|
||||
const currentTime = Math.floor(Date.now() / 1000); // Current time in seconds
|
||||
if (decoded.exp && decoded.exp < currentTime) {
|
||||
console.warn("Token is expired");
|
||||
localStorage.removeItem('auth_token'); // Remove the expired token
|
||||
window.location.href = '/'; // Redirect to the login page
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error decoding token:", error);
|
||||
localStorage.removeItem('auth_token'); // Remove invalid token
|
||||
window.location.href = '/'; // Redirect to the login page
|
||||
}
|
||||
} else {
|
||||
// Handle case if no token is available
|
||||
window.location.href = '/'; // Redirect to the login page if no token
|
||||
}
|
||||
|
||||
try {
|
||||
// Fetch user stats from the new endpoint
|
||||
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');
|
||||
|
||||
// Populate table rows with user stats
|
||||
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);
|
||||
});
|
||||
|
||||
// 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.movieTitle;
|
||||
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);
|
||||
// localStorage.removeItem('auth_token');
|
||||
// window.location.href = '/';
|
||||
}
|
||||
|
||||
// Log-off functionality
|
||||
document.getElementById('log-off').addEventListener('click', function() {
|
||||
localStorage.removeItem('auth_token');
|
||||
window.location.href = '/';
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||