maj

js/projet_detail.js

@@ -3,15 +3,16 @@ document.addEventListener("DOMContentLoaded", async () => {
   const urlParams = new URLSearchParams(window.location.search);
   const projectId = urlParams.get("id");
   const data = await getAllProject();
-  const DataMetrics = await getDataMetrics(projectId);
-
-  const project = data.find((project) => project.id == projectId);
-  if (project) {
-    for (obj of document.getElementsByClassName("name_project"))
-      obj.innerHTML = project.name;
-  } else {
-    console.error("Project not found");
+  let DataMetrics;
+  try {
+    DataMetrics = await getDataMetrics(projectId);
+  } catch (error) {
+    if (error.status !== 404) {
+      console.error(error);
     }
+    DataMetrics = 404; // Assign a fallback value
+  }
+  const start_timelapse_button = document.getElementById("start-timelapse");
   const videoSelector = document.getElementById("video_selector");
   const numberPicker = document.getElementById("number-picker");
   const choiceSelect = document.getElementById("choice");
@@ -28,13 +29,11 @@ document.addEventListener("DOMContentLoaded", async () => {
   // Add event listeners for the "Début" and "Fin" input fields
   const firstInput = document.getElementById("first");
   const lastInput = document.getElementById("last");
-  const start_timelapse_button = document.getElementById("start-timelapse");
 
   let selectedNumbers = [];
 
   populateTimelapseLogic(start_timelapse_button, projectId).then(() => {
-    if(document
-      .getElementById("show-form-button-project") != null){
+    if (document.getElementById("show-form-button-project") != null) {
       document
         .getElementById("show-form-button-project")
         .addEventListener("click", showFormCamera);
@@ -51,9 +50,14 @@ document.addEventListener("DOMContentLoaded", async () => {
           const hours = document.getElementById("hours").value;
           const minutes = document.getElementById("minutes").value;
           const frequency = days * 1440 + hours * 60 + minutes;
-          start_timelapse(projectId, frequency).then(() => {
+          if(frequency >= 3) {
+          const nbrimages = document.getElementById("totalImages").value;
+            start_timelapse(projectId, frequency, nbrimages).then(() => {
               location.reload();
             });
+          } else {
+            alert("La fréquence doit être supérieure à 3 minutes !");
+          }
         });
     }
     if (document.getElementById("stop-camera") != null) {
@@ -66,12 +70,13 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
   });
   
-  choiceSelect.addEventListener("change", toggleContainers);
 
     if (addNumberButton) {
       addNumberButton.addEventListener("click", addSelectedNumber);
     }
-  videoSelector.addEventListener("change", () => generateViewMetric(projectId));
+    videoSelector.addEventListener("change", () =>
+      generateViewMetric(projectId)
+    );
     document
       .getElementById("show-form-button-camera")
       .addEventListener("click", showFormProject);
@@ -85,18 +90,19 @@ document.addEventListener("DOMContentLoaded", async () => {
     document
       .getElementById("decrement-button")
       .addEventListener("click", decrementDuration);
-  document.getElementById("submit").addEventListener("click", handleFormSubmit);
+    document
+      .getElementById("submit")
+      .addEventListener("click", handleFormSubmit);
     document
       .getElementById("projets")
       .addEventListener("click", navigateToProjects);
-  document.getElementById("toggle-view").addEventListener("click", toggleView);
+    document
+      .getElementById("toggle-view")
+      .addEventListener("click", toggleView);
 
     firstInput.addEventListener("input", updateRange);
     lastInput.addEventListener("input", updateRange);
 
-  generateViewMetric(projectId);
-  PopulateSelect(videoSelector, projectId);
-
     function toggleContainers() {
       if (choiceSelect.value === "oneByOne") {
         oneByOneContainer.style.display = "block";
@@ -254,6 +260,31 @@ document.addEventListener("DOMContentLoaded", async () => {
       firstInput.max = lastValue;
       lastInput.min = firstValue;
     }
+    if (DataMetrics != 404) {
+      const project = data.find((project) => project.id == projectId);
+      if (project) {
+        for (obj of document.getElementsByClassName("name_project"))
+          obj.innerHTML = project.name;
+      } else {
+        console.error("Project not found");
+      }
+  
+      choiceSelect.addEventListener("change", toggleContainers);
+
+      generateViewMetric(projectId);
+      PopulateSelect(videoSelector, projectId);
+  } else {
+    document.getElementById("metric_viewer").style.display = "none";
+    document.getElementById("video-container").style.display = "none";
+    document.getElementById("delete-placeholder").style.display = "none";
+    document.getElementById("content1").style.display = "none";
+    document.getElementById("form-container-project").style.display = "none";
+    document.getElementById("form-container-camera").style.display = "none";
+    document.getElementById("show-form-button-camera").style.display = "none";
+    for (el of document.querySelectorAll(".box")) {
+      el.style.display = "none";
+    }
+  }
 });
 
 function populateImageTable(DataMetrics) {
@@ -303,6 +334,7 @@ async function generateViewMetric(projectId) {
   const videoId = document.getElementById("video_selector").value;
 
   measurements = await getDataMetrics(projectId);
+  if (measurements != 404) {
     let samples;
     if (videoId != -1) {
       currentVideoDatas = await getDataVideoFromApi(videoId);
@@ -370,19 +402,19 @@ async function generateViewMetric(projectId) {
             beginAtZero: true,
             position: "left",
             ticks: {
-            color: 'white', // Set y-axis labels to white
+              color: "white", // Set y-axis labels to white
             },
             grid: {
-            color: 'white', // Set grid line color to white
+              color: "white", // Set grid line color to white
             },
           },
           x: {
             ticks: {
-            color: 'white', // Set x-axis labels to white
+              color: "white", // Set x-axis labels to white
             },
             grid: {
               drawOnChartArea: true,
-            color: 'white', // Set grid line color to white
+              color: "white", // Set grid line color to white
             },
           },
           y1: {
@@ -392,8 +424,8 @@ async function generateViewMetric(projectId) {
               drawOnChartArea: false, // Only want the grid lines for one axis to show up
             },
             ticks: {
-            color: 'white', // Set y-axis labels to white
-          }
+              color: "white", // Set y-axis labels to white
+            },
           },
         },
         plugins: {
@@ -401,10 +433,13 @@ async function generateViewMetric(projectId) {
             labels: {
               color: "white", // Set legend labels to white
             },
-        }
-      }
+          },
+        },
       },
     });
+  } else {
+    document.getElementById("metric_viewer").style.display = "none";
+  }
 }
 function showConfirmationAlert(videoId) {
   const customAlert = document.getElementById("customAlert");
@@ -516,6 +551,14 @@ function decrement(id) {
   updateFrequencyText();
 }
 
+function decrementImage(id) {
+  const input = document.getElementById(id);
+  if (parseInt(input.value) > 1) {
+    input.value = parseInt(input.value) - 1;
+  }
+  updateFrequencyText();
+}
+
 function updateFrequencyText() {
   const days = document.getElementById("days").value;
   const hours = document.getElementById("hours").value;