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,12 +140,31 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
   }
 
-  function populateImageTable(DataMetrics) {
+  function populateNumberBoard(length) {
+    numberBoard.innerHTML = '';
+    for (let i = 1; i <= length; i++) {
+      const numberButton = document.createElement('button');
+      numberButton.classList.add('number-button');
+      numberButton.textContent = i;
+      numberButton.addEventListener('click', () => highlightNumber(numberButton));
+      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="${measure.image_path}" />`;
+    imageTD.innerHTML = `<img id="${i}" src="${api_url}/image/${measure.image_path}"/>`;
     row.appendChild(imageTD);
 
     if ((i + 1) % 3 === 0 && i !== 0) {
@@ -159,23 +176,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     }
     i++;
   });
-  }
+}
-
-  function populateNumberBoard(length) {
-    numberBoard.innerHTML = '';
-    for (let i = 1; i <= length; i++) {
-      const numberButton = document.createElement('button');
-      numberButton.classList.add('number-button');
-      numberButton.textContent = i;
-      numberButton.addEventListener('click', () => highlightNumber(numberButton));
-      numberBoard.appendChild(numberButton);
-    }
-  }
-
-  function highlightNumber(button) {
-    button.classList.toggle('highlight');
-  }
-});
 
 async function generateViewMetric(projectId) {
   const ctx = document.getElementById("metric_viewer").getContext("2d");
@@ -196,17 +197,22 @@ async function generateViewMetric(projectId) {
   });
 
   const videoId = document.getElementById("video_selector").value;
-
   measurements = await getDataMetrics(projectId);
+  let samples;
+  if(videoId!=-1){
     currentVideoDatas = await getDataVideoFromApi(videoId);
+    samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
+  } else {
+    samples=measurements.map(measurements => measurements.id);
+  }
   
-  let samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
   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();

js/utilities/populate.js

@@ -1,14 +1,16 @@
-async function PopulateSelect(mySelect,id){
+async function PopulateSelect(mySelect, id) {
-    let data=[]
+  let data = [];
-    if(mySelect.name=="videos" && id!=null){
+  if (mySelect.name == "videos" && id != null) {
-        data=await getDataProjectVideosFromApi(id);
+    data = await getDataProjectVideosFromApi(id);
-        for(let i = 0 ; i < data.length ; i++){
+    const selectObjDefault = document.createElement("option");
-            const selectObj=document.createElement("option")
+    selectObjDefault.value = -1;
-            selectObj.value=data[i].id
+    selectObjDefault.innerHTML = "Default";
-            selectObj.innerHTML=data[i].name
+    mySelect.appendChild(selectObjDefault);
-            mySelect.appendChild(selectObj)
+    for (let i = 0; i < data.length; i++) {
+      const selectObj = document.createElement("option");
+      selectObj.value = data[i].id;
+      selectObj.innerHTML = data[i].name;
+      mySelect.appendChild(selectObj);
     }
   }
 }
-  
-  

js/utilities/routes.js

@@ -32,7 +32,7 @@ function getAllProject() {
 
 function getDataMetrics(projectId){
   return $.ajax({
-    url: api_url.concat("/projects/"+projectId+"/measurements"),
+    url: api_url.concat(`/projects/${projectId}/measurements`),
     method: "GET",
     dataType: "json",
   }).then((data) => {