280 lines
9.9 KiB
HTML
280 lines
9.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pool Oscars 2025 - Films</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<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">
|
|
<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">Statistiques</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 Oscars (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>' : ''}
|
|
<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>` : ''} <!-- Display watched date and time if movie is watched -->
|
|
</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>
|