chore: update code structure for improved readability and maintainability

js/pages/index.js

@@ -9,18 +9,56 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 });
 
+function formatDateToFrench(dateString) {
+  const options = { 
+    year: 'numeric', 
+    month: 'long', 
+    day: 'numeric'
+  };
+  const date = new Date(dateString);
+  return date.toLocaleDateString('fr-FR', options);
+}
+
+function formatStatusWithColor(status) {
+  let statusText = "";
+  let colorClass = "";
+
+  switch (status) {
+    case 0:
+      statusText = "Brouillon";
+      colorClass = "status-draft";
+      break;
+    case 1:
+      statusText = "En capture";
+      colorClass = "status-capturing";
+      break;
+    case 2:
+      statusText = "Terminé";
+      colorClass = "status-idle";
+      break;
+    case 3:
+      statusText = "En cours d'arrêt";
+      colorClass = "status-stopping";
+    default:
+      statusText = "Inconnu";
+      colorClass = "status-unknown";
+  }
+
+  return `<span class="${colorClass}">${statusText}</span>`;
+}
+
 function formatStatus(status) {
   switch (status) {
     case 0:
-      return "brouillon";
+      return "Brouillon"; // Projet à peine créé, vide sans config
     case 1:
-      return "en cours";
+      return "En capture"; // Projet en cours de capture
     case 2:
-      return "terminé";
+      return "En pause"; // Projet en pause ou inactif
     case 3:
-      return "En cours de génération";
+      return "En cours d\'arrêt"; // Projet en cours d'arrêt
     default:
-      return "inconnu";
+      return "Inconnu";
   }
 }
 
@@ -91,10 +129,10 @@ function setupCarousel(global_project_list) {
     projectDiv.classList.add(letter[index]);
     projectDiv.innerHTML = `
       <h2>${project.name}</h2>
-      <p>${formatDate(project.start_date)}</p>
-      <p>Status : ${formatStatus(parseInt(project.status))}</p>
+      <p><strong>Date de début :</strong> ${formatDateToFrench(project.start_date)}</p>
+      <p><strong>Statut :</strong> ${formatStatusWithColor(parseInt(project.status))}</p>
       <div class="project_buttons">
-        <button class="default-access-button">détails de ${project.name}</button>
+        <button class="default-access-button">Voir les détails</button>
         <button class="default-delete-button">Supprimer</button>
       </div>
     `;

js/pages/projet_detail.js

@@ -30,6 +30,40 @@ document.addEventListener("DOMContentLoaded", async () => {
   const firstInput = document.getElementById("first");
   const lastInput = document.getElementById("last");
 
+  const formContainerUpload = document.getElementById("form-container-upload");
+  const showFormButtonUpload = document.getElementById("show-form-button-upload");
+  const closeFormButtonUpload = document.getElementById("close-form-button-upload");
+  const manualUploadForm = document.getElementById("manual-upload-form");
+
+  if (formContainerUpload && showFormButtonUpload && closeFormButtonUpload && manualUploadForm) {
+    showFormButtonUpload.addEventListener("click", () => {
+      formContainerUpload.style.display = "flex";
+    });
+
+    closeFormButtonUpload.addEventListener("click", () => {
+      formContainerUpload.style.display = "none";
+    });
+
+    manualUploadForm.addEventListener("submit", async (event) => {
+      event.preventDefault();
+
+      const imageFile = document.getElementById("imageFile").files[0];
+      const temperature = document.getElementById("temperature").value;
+      const humidity = document.getElementById("humidity").value;
+      const timestamp = new Date().toISOString();
+
+      try {
+        await manualUpload(imageFile, projectId, timestamp, temperature, humidity);
+        alert("Image uploadée avec succès !");
+        formContainerUpload.style.display = "none";
+      } catch (error) {
+        alert("Erreur lors de l'upload de l'image : " + error);
+      }
+    });
+  } else {
+    console.error("Un ou plusieurs éléments du formulaire d'upload manuel sont introuvables.");
+  }
+
   let selectedNumbers = [];
 
   populateTimelapseLogic(start_timelapse_button, projectId).then(() => {
@@ -532,6 +566,11 @@ async function populateTimelapseLogic(placeholder, id) {
     placeholder.innerHTML = `<button class="default-delete-button" id="stop-camera">
               <span> Stopper la prise d'images </span>
             </button>`;
+  } else if (data.status == 2) {
+    // Ajout de la possibilité de configurer la caméra pour un projet avec statut "terminé"
+    placeholder.innerHTML = `<button class="default-button" id="show-form-button-project">
+              <span> Reconfigurer la caméra </span>
+            </button>`;
   } else {
     placeholder.innerHTML = ``;
   }