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