maj

js/projet_detail.js

@@ -1,39 +1,28 @@
 let myChart; // Declare a global variable to hold the chart instance
 
 document.addEventListener("DOMContentLoaded", () => {
-
   // Objects / variables
-
-  const metric_selector = document.getElementById("metric_selector")
+  const video_selector = document.getElementById("video_selector");
   const urlParams = new URLSearchParams(window.location.search);
   const projectId = urlParams.get("id");
 
   // Initialisation
+  generateViewMetric(projectId);
 
-  generateViewMetric();
+  PopulateSelect(video_selector, projectId);
 
-  PopulateSelect(metric_selector,projectId);
-
-  metric_selector.addEventListener("change", () => {
-    generateViewMetric();
+  video_selector.addEventListener("change", () => {
+    generateViewMetric(projectId);
   });
 
-
-  // getDataProjectMetricsFromApi(projectId)
-  //   .then((project_metrics) => {
-  //     display_metrics(project_metrics);
-  //   })
-  //   .catch((error) => {
-  //     console.error(error);
-  //   });
   document.getElementById("projets").addEventListener("click", () => {
     window.location.href = "../index.html";
     current_project = "";
   });
+
   global_project_list = JSON.parse(localStorage.getItem("project_list"));
   document.getElementById("name_project").innerHTML =
-    global_project_list[projectId - 1].titre;
-
+    global_project_list[projectId - 1].name;
 
   fetch("https://timelapse.kerboul.me/api/smile")
     .then((response) => response.blob())
@@ -74,8 +63,37 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
-function generateViewMetric() {
+async function generateViewMetric(projectId) {
   const ctx = document.getElementById("metric_viewer").getContext("2d");
+  let Hygrometrie = [];
+  let Temperature = [];
+  let datesMeasurement = [];
+
+  let measurements;
+  let current_video_datas;
+
+  // Wait for the video_selector to be populated
+  await new Promise((resolve) => {
+    const checkExist = setInterval(() => {
+      if (document.getElementById("video_selector").options.length > 0) {
+        clearInterval(checkExist);
+        resolve();
+      }
+    }, 100); // check every 100ms
+  });
+
+  const videoId = document.getElementById("video_selector").value;
+
+  measurements = await getDataMetrics(projectId);
+  current_video_datas = await getDataVideoFromApi(videoId);
+
+  let samples = convertStringToArray(current_video_datas[0]["measurement_ids"]);
+  tempoMeasure = filterAndSortMeasurementsByIds(measurements,samples)
+  tempoMeasure.forEach((measure) => {
+    datesMeasurement.push(measure.timestamp)
+    Temperature.push(measure.temperature)
+    Hygrometrie.push(measure.hydrometrie)
+  });
 
   // Destroy the existing chart instance if it exists
   if (myChart) {
@@ -86,11 +104,11 @@ function generateViewMetric() {
   myChart = new Chart(ctx, {
     type: "line",
     data: {
-      labels: ["January", "February", "March", "April", "May", "June", "July"],
+      labels: datesMeasurement,
       datasets: [
         {
           label: "Température (F°)",
-          data: [65, 59, 80, 81, 56, 55, 40],
+          data: Temperature,
           fill: false,
           borderColor: "rgba(75, 192, 192, 1)",
           tension: 0.1,
@@ -98,7 +116,7 @@ function generateViewMetric() {
         },
         {
           label: "Hygrometrie (%)",
-          data: [28, 48, 40, 19, 86, 27, 90],
+          data: Hygrometrie,
           fill: false,
           borderColor: "rgba(153, 102, 255, 1)",
           tension: 0.1,
@@ -122,4 +140,4 @@ function generateViewMetric() {
       },
     },
   });
-}
+}