initial commit, should work

This commit is contained in:
quoije
2025-01-26 16:03:25 -05:00
commit 85ff5d08a0
27 changed files with 3066 additions and 0 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

+212
View File
@@ -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>
Binary file not shown.

After

Width:  |  Height:  |  Size: 658 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 418 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 586 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

+69
View File
@@ -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>
+284
View File
@@ -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>
+107
View File
@@ -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>
+1
View File
@@ -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"}
+192
View File
@@ -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>