chore: update code structure for improved readability and maintainability

css/base/style.css

@@ -5,7 +5,7 @@ body::before {
   left: 0;
   width: 100%;
   height: 100%;
-  background-image: url("../image/camera-image");
+  background-image: url("../image/camera-image.png");
   background-position: center;
   background-size: cover;
   filter: blur(1px) brightness(0.3);
@@ -444,3 +444,29 @@ footer {
   color: white;
   font-size: 10vh;
 }
+
+/* Styles pour les statuts des projets dans le carrousel */
+.status-draft {
+  color: #6B8E23; /* Vert haricot/marron pour les brouillons */
+  font-weight: bold;
+}
+
+.status-capturing {
+  color: #87CEEB; /* Bleu ciel pour les projets en capture/en cours */
+  font-weight: bold;
+}
+
+.status-idle {
+  color: #32CD32; /* Vert vif pour les projets terminés */
+  font-weight: bold;
+}
+
+.status-stopping {
+  color: #FF4500; /* Orange rougeâtre pour les projets arrêtés */
+  font-weight: bold;
+}
+
+.status-unknown {
+  color: #cccccc; /* Gris pour les statuts inconnus */
+  font-style: italic;
+}

js/core/routes.js

@@ -222,3 +222,29 @@ async function stopCamera(id){
     throw error;
   }
 }
+
+async function manualUpload(imageFile, projectId, timestamp, temperature, humidity) {
+  try {
+    // Create FormData to send the file and metadata
+    const formData = new FormData();
+    formData.append('image', imageFile);
+    formData.append('projectId', projectId);
+    formData.append('timestamp', timestamp);
+    formData.append('temperature', temperature);
+    formData.append('humidity', humidity);
+
+    const response = await $.ajax({
+      url: api_url.concat("/camera/upload"),
+      method: "POST",
+      data: formData,
+      processData: false,  // Prevents jQuery from converting FormData to string
+      contentType: false,  // Lets browser set the content type with boundary
+    });
+
+    alert("Image uploaded successfully");
+    return response;
+  } catch (error) {
+    alert("Error uploading image: " + error);
+    throw error;
+  }
+}

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 = ``;
   }

pages/projet_detail.html

@@ -108,6 +108,27 @@
       <button id="commencer" class="default-access-button">Lancer</button>
     </div>
   </div>
+  <!-- Formulaire pour l'upload manuel d'une image -->
+  <div id="form-container-upload" class="form-container" style="display: none">
+    <div class="form-content">
+      <div class="form-header">
+        <button id="close-form-button-upload" class="default-delete-button">&#x2715;</button>
+      </div>
+      <h1>Upload Manuel</h1>
+      <form id="manual-upload-form">
+        <label for="imageFile">Fichier image :</label>
+        <input type="file" id="imageFile" name="imageFile" accept="image/*" required />
+        <br /><br />
+        <label for="temperature">Température :</label>
+        <input type="number" id="temperature" name="temperature" step="0.1" required />
+        <br /><br />
+        <label for="humidity">Humidité :</label>
+        <input type="number" id="humidity" name="humidity" step="0.1" required />
+        <br /><br />
+        <button type="submit" class="default-access-button">Uploader</button>
+      </form>
+    </div>
+  </div>
   <!-- page classique -->
   <div>
       <div>
@@ -118,6 +139,7 @@
           </div>
           <div id="start-timelapse"></div>
           <button class="default-access-button" id="show-form-button-camera">+</button>
+          <button class="default-access-button" id="show-form-button-upload">Upload Manuel</button>
           <div id="delete-placeholder"></div>
         </div>
       </div>