quoije/oscars-pool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update checklist, update filter

Browse Source
This commit is contained in:
quoije
2025-01-26 23:18:13 -05:00
parent 232c14736d
commit 7dcdd1b6fb
2 changed files with 74 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/checklist.html
+37 -22
View File
@@ -20,16 +20,32 @@
.movie-table {
margin-top: 20px;
}
/* New styles for the first column */
.movie-table th:first-child,
.movie-table td:first-child {
width: 1%; /* Shrink to fit the content */
white-space: nowrap; /* Prevent wrapping */
}
.movie-table {
table-layout: auto; /* Allow the browser to size columns automatically */
}
.ratio {
font-weight: bold;
margin-top: 10px;
}
.navbar-toggler {
border-color: white; /* Make the border white */
border-color: white;
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
/* New styles for table */
.table-hover tbody tr:hover {
background-color: #f1f1f1;
cursor: pointer;
}
</style>
</head>
<body class="bg-light">
@@ -65,12 +81,12 @@
<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">
<table class="table table-hover 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 -->
<th scope="col">Titre</th>
<th scope="col">Date du visionnage</th>
</tr>
</thead>
<tbody id="movie-table-body">
@@ -93,30 +109,20 @@
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 decoded = JSON.parse(atob(token.split('.')[1]));
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
const currentTime = Math.floor(Date.now() / 1000);
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
localStorage.removeItem('auth_token');
window.location.href = '/';
}
} catch (error) {
console.error("Error decoding token:", error);
localStorage.removeItem('auth_token'); // Remove invalid token
window.location.href = '/'; // Redirect to the login page
localStorage.removeItem('auth_token');
window.location.href = '/';
}
} else {
// Handle case if no token is available
window.location.href = '/'; // Redirect to the login page if no token
window.location.href = '/';
}
const res = await fetch('/api/movies', {
@@ -167,14 +173,23 @@
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>${movie.title}</td>
<td id="watched-date-${movie.imdb_id}">${watchedDate}</td>
`;
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;
public/movies.html
+32 -92
View File
@@ -87,9 +87,6 @@
<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 -->
@@ -98,6 +95,13 @@
</div>
<h3 class="fs-6">Temps avant les Oscars (2 mars 2025) - <span id="time-left"></span></h3>
<h3 class="fs-6 mb-0">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Films non regardés seulement</label>
</div>
</h3>
<br>
<div id="movies-list" class="row">
<!-- Movies will be displayed here -->
</div>
@@ -106,95 +110,65 @@
<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 decoded = JSON.parse(atob(token.split('.')[1]));
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
const currentTime = Math.floor(Date.now() / 1000);
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
localStorage.removeItem('auth_token');
window.location.href = '/';
}
} catch (error) {
console.error("Error decoding token:", error);
localStorage.removeItem('auth_token'); // Remove invalid token
window.location.href = '/'; // Redirect to the login page
localStorage.removeItem('auth_token');
window.location.href = '/';
}
} else {
// Handle case if no token is available
window.location.href = '/'; // Redirect to the login page if no token
window.location.href = '/';
}
// 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
}
headers: { 'Authorization': `Bearer ${token}` },
});
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
localStorage.removeItem('auth_token');
window.location.href = '/';
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
}
headers: { 'Authorization': `Bearer ${token}` },
});
let watchedMovies = [];
if (watchedRes.ok) {
watchedMovies = await watchedRes.json(); // Get the list of watched movies from the user's profile
watchedMovies = await watchedRes.json();
}
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 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() : ''; // Get the watched date if available
const watchedDate = watchedMovie ? new Date(watchedMovie.watchedDate).toLocaleString() : '';
const movieDiv = document.createElement('div');
movieDiv.classList.add('col-md-4', 'mb-4', 'movie-card');
@@ -210,69 +184,36 @@
</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 -->
${isChecked ? `<p class="card-text"><strong>Regardé le:</strong> ${watchedDate}</p>` : ''}
</div>
</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
document.getElementById('log-off').addEventListener('click', function () {
localStorage.removeItem('auth_token');
window.location.href = '/';
});
// Retrieve filter state from localStorage
const filterSwitch = document.getElementById('flexSwitchCheckDefault');
const savedFilterState = localStorage.getItem('filter-checkbox');
let isFilterActive = savedFilterState === 'checked';
const isFilterActive = savedFilterState === 'checked';
filterSwitch.checked = isFilterActive;
// 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';
filterSwitch.addEventListener('change', function () {
const filterState = filterSwitch.checked ? '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 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);
// Hide the movie card if it's watched and the filter is on
if (showUnwatchedOnly && isWatched) {
card.style.display = 'none';
} else {
@@ -281,7 +222,6 @@
});
}
// Initial filter application
filterMovies();
};
</script>