redesign avec edmée, super déçue car pas bouboule orange

js/projet_detail.js

@@ -163,12 +163,6 @@ document.addEventListener("DOMContentLoaded", async () => {
         alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
           '\nRésolution : ' + videoResolution +
           '\nDurée : ' + videoDuration + ' secondes');
-      }).then(()=>{
-        getDataProjectVideosFromApi(projectId).then((data)=>{
-          idVideo = data[data.length-1].id
-          console.log(idVideo)
-          renderVideo(idVideo)
-        })
       })
     
   }
@@ -181,11 +175,9 @@ document.addEventListener("DOMContentLoaded", async () => {
     if (tableImage.classList.contains("hiddenTable")) {
       tableImage.classList.remove("hiddenTable");
       tableImage.classList.add("full-view");
-      document.getElementById("toggle-view").innerHTML = "See first images";
     } else {
       tableImage.classList.remove("full-view");
       tableImage.classList.add("hiddenTable");
-      document.getElementById("toggle-view").innerHTML = "See all images";
     }
   }
 
@@ -230,7 +222,7 @@ function populateImageTable(DataMetrics) {
   let i = 0;
   DataMetrics.forEach((measure) => {
     let imageTD = document.createElement("td");
-    imageTD.innerHTML = `<a href="${api_url}/images/${measure.project_id}/${measure.order_id}" target="_blank"><img id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
+    imageTD.innerHTML = `<a href="${api_url}/images/${measure.project_id}/${measure.order_id}" target="_blank"><img class="picture_placeHolder"id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
     row.appendChild(imageTD);
 
     if ((i + 1) % 3 === 0 && i !== 0) {
@@ -274,7 +266,7 @@ async function generateViewMetric(projectId) {
     samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
     if(currentVideoDatas[0].status != 0){
     videoPlaceHolder.innerHTML=`
-    <video width="600" controls>
+    <video class="video" controls>
     <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
     Your browser does not support the video tag.
   </video>`
@@ -282,13 +274,15 @@ async function generateViewMetric(projectId) {
       videoPlaceHolder.innerHTML=`<h2>La vidéo n'a pas été rendered</h2>`
     }
   deletePlaceHolder.innerHTML=`
-    <button id="delete-video" class="btn btn-danger delete-video-button" data-video-id="${videoId}">Delete Video</button>
+    <button id="delete-video" class="default-delete-button" data-video-id="${videoId}">Delete Video</button>
   `
   document.getElementById("delete-video").addEventListener("click", ()=>{
     showConfirmationAlert(videoId)
   })
   tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
   } else {
+    deletePlaceHolder.innerHTML=''
+    videoPlaceHolder.innerHTML=''
     samples=measurements.map(measurements => measurements.id);
     tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
   }
@@ -309,7 +303,7 @@ async function generateViewMetric(projectId) {
       labels: datesMeasurement,
       datasets: [
         {
-          label: "Température (F°)",
+          label: "Température (C°)",
           data: Temperature,
           fill: false,
           borderColor: "rgba(75, 192, 192, 1)",
@@ -420,7 +414,7 @@ function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
 async function populateTimelapseLogic(placeholder,id) {
   const data = await getSingleProject(id);
   if(data.status == 0){
-    placeholder.innerHTML = `<button class="btn btn-primary" id="show-form-button-camera">
+    placeholder.innerHTML = `<button class="default-button" id="show-form-button-camera">
               <span> Configurer la caméra </span>
             </button>`
   } else if (data.status == 1) {
@@ -455,4 +449,6 @@ function updateFrequencyText() {
   document.getElementById('frequency-text').innerHTML = frequencyText;
 }
 
-
+$( ".arrow-icon" ).click(function() {
+  $(this).toggleClass("open");
+});