oscars-pool/public/movies.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;
      width: 100%;
      z-index: 1;
    }

    /* Centering checkbox and making card look better */
    .movie-card {
      position: relative;
      margin-bottom: 20px;
    }
    .card-body {
      position: relative;
    }

    #movies-list {
      margin-top: 10px;
    }

    /* Style for the filter button */
    #filter-button {
      margin-left: 15px;
    }

    /* Style for the ratio display */
    .ratio {
      font-weight: bold;
      margin-top: 10px;
    }
    .navbar-toggler {
      border-color: white; /* Make the border 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");
    }
  </style>
</head>
<body class="bg-light">

<!-- Black banner with buttons and user info -->
<nav class="navbar navbar-expand-lg navbar-custom">
  <div class="container">
    <a class="navbar-brand">
      <img src="img/logo_w.png" style="max-width: 180px; height: 70px; object-fit: contain;">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <div class="navbar-nav">
        <a href="movies.html" class="nav-link btn btn-outline-light me-2">Films</a>
        <a href="checklist.html" class="nav-link btn btn-outline-light me-2">Checklist</a>
        <a href="user-stat.html" class="nav-link btn btn-outline-light">Statistiques</a>
      </div>
    </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>
  </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>
  <h3 class="fs-6 mb-0">

  </h3>
  <br>
  <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>
  <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 () {
    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();

    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();
  };
</script>

</body>
</html>