anto

js/projet_detail.js

@@ -6,7 +6,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   const DataMetrics = await getDataMetrics(projectId);
 
   document.getElementById("name_project").innerHTML = data[projectId].name;
-
   const videoSelector = document.getElementById("video_selector");
   const numberPicker = document.getElementById('number-picker');
   const resultContainer = document.getElementById('result-container');
@@ -16,7 +15,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   const addNumberButton = document.getElementById('add-number-button');
   const formContainer = document.getElementById('form-container');
   const durationInput = document.getElementById('duration');
-  const tableBody = document.getElementById("imageSource");
   const tableImage = document.getElementById("content1");
   const numberBoard = document.getElementById('number-board');
 
@@ -142,25 +140,6 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
   }
 
-  function populateImageTable(DataMetrics) {
-    let row = document.createElement("tr");
-    let i = 0;
-    DataMetrics.forEach((measure) => {
-      let imageTD = document.createElement("td");
-      imageTD.innerHTML = `<img id="${i}" src="${measure.image_path}" />`;
-      row.appendChild(imageTD);
-
-      if ((i + 1) % 3 === 0 && i !== 0) {
-        tableBody.appendChild(row);
-        row = document.createElement("tr");
-      }
-      if (row.childNodes.length > 0) {
-        tableBody.appendChild(row);
-      }
-      i++;
-    });
-  }
-
   function populateNumberBoard(length) {
     numberBoard.innerHTML = '';
     for (let i = 1; i <= length; i++) {
@@ -171,12 +150,34 @@ document.addEventListener("DOMContentLoaded", async () => {
       numberBoard.appendChild(numberButton);
     }
   }
-
   function highlightNumber(button) {
     button.classList.toggle('highlight');
   }
 });
 
+function populateImageTable(DataMetrics) {
+  const tableBody = document.getElementById("imageSource");
+  while (tableBody.rows.length > 0) {
+    tableBody.deleteRow(0);
+}
+  let row = document.createElement("tr");
+  let i = 0;
+  DataMetrics.forEach((measure) => {
+    let imageTD = document.createElement("td");
+    imageTD.innerHTML = `<img id="${i}" src="${api_url}/image/${measure.image_path}"/>`;
+    row.appendChild(imageTD);
+
+    if ((i + 1) % 3 === 0 && i !== 0) {
+      tableBody.appendChild(row);
+      row = document.createElement("tr");
+    }
+    if (row.childNodes.length > 0) {
+      tableBody.appendChild(row);
+    }
+    i++;
+  });
+}
+
 async function generateViewMetric(projectId) {
   const ctx = document.getElementById("metric_viewer").getContext("2d");
   let Hygrometrie = [];
@@ -196,17 +197,22 @@ async function generateViewMetric(projectId) {
   });
 
   const videoId = document.getElementById("video_selector").value;
-
   measurements = await getDataMetrics(projectId);
-  currentVideoDatas = await getDataVideoFromApi(videoId);
-
-  let samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
+  let samples;
+  if(videoId!=-1){
+    currentVideoDatas = await getDataVideoFromApi(videoId);
+    samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
+  } else {
+    samples=measurements.map(measurements => measurements.id);
+  }
+  
   tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
   tempoMeasure.forEach((measure) => {
     datesMeasurement.push(measure.timestamp);
     Temperature.push(measure.temperature);
     Hygrometrie.push(measure.humidity);
   });
+  populateImageTable(tempoMeasure)
 
   if (myChart) {
     myChart.destroy();