timelapse-frontend/js/index.js

document.addEventListener("DOMContentLoaded", () => {
  getAllProject()
    .then((project_list) => {
      global_project_list = project_list;
      setupCarousel(global_project_list);
    })
    .catch((error) => {
      console.error(error);
    });
});

function formatStatus(status) {
  switch (status) {
    case 0:
      return "brouillon";
    case 1:
      return "en cours";
    case 2:
      return "terminé";
    case 3:
      return "En cours de génération";
    default:
      return "inconnu";
  }
}

function setupCarousel(global_project_list) {
  const formContainer = document.getElementById('form-container');
  const carousel = document.getElementById('carousel');
  const carouselDots = document.getElementById('carousel-dots');
  let currentIndex = 0;

  function showForm() {
      formContainer.style.display = 'flex';
  }

  function hideForm() {
      formContainer.style.display = 'none';
  }

  document.getElementById('show-form-button').addEventListener('click', showForm);
  document.getElementById('close-form-button').addEventListener('click', hideForm);
  document.getElementById('submit').addEventListener('click', handleFormSubmit);

  async function handleFormSubmit() {
      const nameProject = document.getElementById('name').value;
      const description = document.getElementById('description').value;
      if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
          alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
              'veuillez en trouver un autre');
          return;
      }
      PostNewProject(nameProject, description).then(() => {
          location.reload();
      });
  }

  function checkName(Projects, name) {
      let res = true;
      Projects.forEach(project => {
          const ProjectName = project.name;
          if (ProjectName === name)
              res = false;
      });
      return res;
  }

  function updateCarousel() {
      const projectWidth = document.querySelector('.project').clientWidth;
      carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
      updateDots();
  }

  function updateDots() {
      const dots = document.querySelectorAll('.dot');
      dots.forEach((dot, index) => {
          dot.classList.toggle('active', index === currentIndex);
      });
  }

  function showPrevProject() {
      if (currentIndex > 0) {
          currentIndex--;
          updateCarousel();
      } else {
          currentIndex = global_project_list.length - 1;
          updateCarousel();
      }
  }

  function showNextProject() {
      if (currentIndex < global_project_list.length - 1) {
          currentIndex++;
          updateCarousel();
      } else {
          currentIndex = 0;
          updateCarousel();
      }
  }  


  document.getElementById('prev-button').addEventListener('click', showPrevProject);
  document.getElementById('next-button').addEventListener('click', showNextProject);

  // Populate the carousel with project data
  const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
  const degGlobal = 360 / global_project_list.length;

  let carousel_css = $(".carousel"),
    currdeg  = 0

  let width = window.innerWidth;

  global_project_list.forEach((project, index) => {
      const projectDiv = document.createElement('div');
      projectDiv.classList.add('project');
      projectDiv.classList.add('item');
      projectDiv.classList.add(letter[index]);
      projectDiv.innerHTML = `
      <h2>${project.name}</h2>
      <p>${formatDate(project.start_date)}</p>
      <p>Status : ${formatStatus(parseInt(project.status))}</p>
      <div class="project_buttons">
      <button class="default-access-button">détails de ${project.name}</button>
      <button class="default-delete-button">Supprimer</button>
      </div>
      `;
      carousel.appendChild(projectDiv);
      document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(${width/6}px);`;

      // Add event listener for project details button
      const detailButton = projectDiv.querySelector('.default-access-button');
      detailButton.addEventListener('click', (event) => {
          event.stopPropagation();
          window.location.href = `html/projet_detail.html?id=${project.id}`;
          change_current_project(global_project_list.indexOf(project));
      });

      // Add event listener for project delete button
      const deleteButton = projectDiv.querySelector('.default-delete-button');
      deleteButton.addEventListener('click', (event) => {
          event.stopPropagation();
          const projectName = project.name;

          document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
          document.getElementById('customAlert').style.display = 'block';

          document.getElementById('okBtn').onclick = function () {
              document.getElementById('customAlert').style.display = 'none';
              // Call your delete function here
              deleteProject(project.id).then(() => {
                  location.reload();
              });
          };

          document.getElementById('cancelBtn').onclick = function () {
              document.getElementById('customAlert').style.display = 'none';
          };
      });

      // Create a dot for each project
      const dot = document.createElement('div');
      dot.classList.add('dot');
      dot.addEventListener('click', () => {
        const targetDeg = index * degGlobal;
        const diff = targetDeg - currdeg;
        currdeg +=diff;
        currdeg=-currdeg;
        currentIndex = index;
        carousel_css.css({
            "-webkit-transform": `rotateY(${currdeg}deg)`,
            "-moz-transform": `rotateY(${currdeg}deg)`,
            "-o-transform": `rotateY(${currdeg}deg)`,
            "transform": `rotateY(${currdeg}deg)`
        });
        updateDots(); // Update active dot styles
      });
      carouselDots.appendChild(dot);
  });

  // Initial update to set the correct position
  updateCarousel();


  

$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);

function rotate(e){
  if(e.data.d=="n"){
    currdeg = currdeg - degGlobal;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + degGlobal;
  }
  if(currdeg > 360){
    currdeg = currdeg%360;
  }
  carousel_css.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
}

}

function handleResize() {
  window.location.reload();
}

window.addEventListener('resize', handleResize);

function isMobileDevice() {
  return /Mobi|Android/i.test(navigator.userAgent);
}

if (isMobileDevice()) {
  console.log("You are on a mobile device.");
}