redesign avec edmée, super déçue car pas bouboule orange

js/index.js

@@ -1,7 +1,30 @@
-// Function to display projects in a table
-function display_projects() {
-  // Get data from API and then generate HTML code to display the data in a table
-  const table = document.getElementById("table-projects");
+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');
 
   function showForm() {
@@ -20,13 +43,13 @@ function display_projects() {
     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' +
+      alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
         'veuillez en trouver un autre');
-      return 0;
+      return;
     }
     PostNewProject(nameProject, description).then(() => {
-      location.reload();})
-
+      location.reload();
+    });
   }
 
   function checkName(Projects, name) {
@@ -39,70 +62,83 @@ function display_projects() {
     return res;
   }
 
-  let datas = `<tr>
-                <th>Id</th>
-                <th>Name</th>
-                <th>Date</th>
-                <th>Status</th>
-                <th>Actions</th>
-                <th>Delete Project</th>
-                </tr> `;
-  for (let i = 0; i < global_project_list.length; i++) {
-    datas += `<tr>
-                <th>${global_project_list[i].id}</th>
-                <th>${global_project_list[i].name}</th>
-                <th>${formatDate(global_project_list[i].start_date)}</th>
-                <th>${global_project_list[i].status}</th>
-                <th><button class="project_detail btn btn-primary">détails de ${
-      global_project_list[i].name
-    }</button></th>
-                <th><button name="${i}" class="project_delete btn btn-danger">Delete</button></th>
-                </tr>`;
-  }
-  table.innerHTML = datas;
+  const carousel = document.getElementById('carousel');
+  let currentIndex = 0;
 
-  // Select all the buttons_access with the class button_project
-  const buttons_access = document.getElementsByClassName("project_detail");
-  const buttons_delete = document.getElementsByClassName("project_delete");
-  // Add an event listener to each button
-  for (let i = 0; i < buttons_access.length; i++) {
-    buttons_access[i].addEventListener("click", (event) => {
-      // Send data to API and then navigate to projet_detail.html page
-      window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
-    });
-    buttons_access[i].addEventListener("click", (event) => {
-      // Send data to API and then navigate to projet_detail.html page
-      current_project = change_current_project(i);
-    });
+  function updateCarousel() {
+    const projectWidth = document.querySelector('.project').clientWidth;
+    carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
   }
 
-  for (let i = 0; i < buttons_delete.length; i++) {
-    buttons_delete[i].addEventListener("click", (event) => {
-      const projectName = global_project_list[i].name;
+  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
+  global_project_list.forEach(project => {
+    const projectDiv = document.createElement('div');
+    projectDiv.classList.add('project');
+    projectDiv.innerHTML = `
+      <h2>Nom : ${project.name}</h2>
+      <p>Date : ${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);
+
+    // 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(global_project_list[i].id).then(()=>{
+        deleteProject(project.id).then(() => {
           location.reload();
-        })
+        });
       };
 
       document.getElementById('cancelBtn').onclick = function() {
         document.getElementById('customAlert').style.display = 'none';
       };
     });
-  }
-}
-
-getAllProject()
-  .then((project_list) => {
-    global_project_list = project_list;
-    // Call the next function here
-    display_projects();
-  })
-  .catch((error) => {
-    console.error(error);
   });
+
+  // Initial update to set the correct position
+  updateCarousel();
+}