manager de projet (create_delete)

js/projet_detail.js

@@ -11,6 +11,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   } else {
     console.error("Project not found");
   }
+
   const videoSelector = document.getElementById("video_selector");
   const numberPicker = document.getElementById('number-picker');
   const choiceSelect = document.getElementById('choice');
@@ -21,11 +22,41 @@ document.addEventListener("DOMContentLoaded", async () => {
   const durationInput = document.getElementById('duration');
   const tableImage = document.getElementById("content1");
   const numberBoard = document.getElementById('number-board');
+  const deletePlaceHolder = document.getElementById('delete-placeholder');
+
+  // Populate the video selector and then get the initial videoId
+  await PopulateSelect(videoSelector, projectId);
+  const videoId = videoSelector.value;
+  const videoName = videoSelector.options[videoSelector.selectedIndex].innerHTML;
+
+  if (videoId != -1) {
+    deletePlaceHolder.innerHTML = `
+      <button class="btn btn-primary" id="delete_current">
+        <span> Delete </span>
+      </button>
+    `;
+
+    // Ensure the delete button event listener is added after the button is created
+    document.getElementById('delete_current').addEventListener("click", (event) => {
+      document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer la vidéo : ${videoName} ?`;
+      document.getElementById('customAlert').style.display = 'block';
+
+      document.getElementById('okBtn').onclick = function() {
+        document.getElementById('customAlert').style.display = 'none';
+        // Call your delete function here
+        deleteVideo(videoId);
+      };
+
+      document.getElementById('cancelBtn').onclick = function() {
+        document.getElementById('customAlert').style.display = 'none';
+      };
+    });
+  }
+
   // Add event listeners for the "Début" and "Fin" input fields
   const firstInput = document.getElementById('first');
   const lastInput = document.getElementById('last');
 
-  
   let selectedNumbers = [];
 
   choiceSelect.addEventListener('change', toggleContainers);
@@ -33,7 +64,38 @@ document.addEventListener("DOMContentLoaded", async () => {
   if (addNumberButton) {
     addNumberButton.addEventListener('click', addSelectedNumber);
   }
-  videoSelector.addEventListener("change", () => generateViewMetric(projectId));
+
+  videoSelector.addEventListener("change", () => {
+    const newVideoId = videoSelector.value;
+    const newVideoName = videoSelector.options[videoSelector.selectedIndex].innerHTML;
+    generateViewMetric(projectId);
+    if (newVideoId != -1) {
+      deletePlaceHolder.innerHTML = `
+        <button class="btn btn-primary" id="delete_current">
+          <span> Delete </span>
+        </button>
+      `;
+
+      // Re-add the event listener for the new delete button
+      document.getElementById('delete_current').addEventListener("click", (event) => {
+        document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer la vidéo : ${newVideoName} ?`;
+        document.getElementById('customAlert').style.display = 'block';
+
+        document.getElementById('okBtn').onclick = function() {
+          document.getElementById('customAlert').style.display = 'none';
+          // Call your delete function here
+          deleteVideo(videoId)
+        };
+
+        document.getElementById('cancelBtn').onclick = function() {
+          document.getElementById('customAlert').style.display = 'none';
+        };
+      });
+    } else {
+      deletePlaceHolder.innerHTML = '';
+    }
+  });
+
   document.getElementById('show-form-button').addEventListener('click', showForm);
   document.getElementById('close-form-button').addEventListener('click', hideForm);
   document.getElementById('increment-button').addEventListener('click', incrementDuration);
@@ -42,12 +104,10 @@ document.addEventListener("DOMContentLoaded", async () => {
   document.getElementById("projets").addEventListener("click", navigateToProjects);
   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') {
@@ -65,6 +125,7 @@ document.addEventListener("DOMContentLoaded", async () => {
       setRequiredAttributes();
     }
   }
+
   toggleContainers();
 
   function setRequiredAttributes() {
@@ -98,6 +159,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   function hideForm() {
     formContainer.style.display = 'none';
   }
+
   function incrementDuration() {
     durationInput.value = parseInt(durationInput.value) + 1;
   }
@@ -119,19 +181,19 @@ document.addEventListener("DOMContentLoaded", async () => {
       alert('La durée de la vidéo doit être supérieur à 0');
       return 0;
     }
-    if (!checkVideoPath(data, nameVideo) || !nameVideo.length>0) {
+    if (!checkVideoPath(data, nameVideo) || !nameVideo.length > 0) {
       alert('Le nom : " ' + nameVideo + ' " est déjà pris ou vide ! \n' +
         'veuillez en trouver un autre');
-        return 0;
+      return 0;
     }
-    const choice = choiceSelect.value
-    const measurementIds = getMeasurementsIdsFromForm(choice,firstInput,lastInput);
+    const choice = choiceSelect.value;
+    const measurementIds = getMeasurementsIdsFromForm(choice, firstInput, lastInput);
     postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
-      .then(()=>{
+      .then(() => {
         alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
           '\nRésolution : ' + videoResolution +
           '\nDurée : ' + videoDuration + ' secondes');
-      })
+      });
   }
 
   function navigateToProjects() {
@@ -186,7 +248,7 @@ 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) => {
@@ -207,7 +269,7 @@ function populateImageTable(DataMetrics) {
 
 async function generateViewMetric(projectId) {
   const ctx = document.getElementById("metric_viewer").getContext("2d");
-  const videoPlaceHolder = document.getElementById('video-container')
+  const videoPlaceHolder = document.getElementById('video-container');
 
   let Hygrometrie = [];
   let Temperature = [];
@@ -226,20 +288,20 @@ async function generateViewMetric(projectId) {
   });
 
   const videoId = document.getElementById("video_selector").value;
-  
+
   measurements = await getDataMetrics(projectId);
   let samples;
-  if(videoId!=-1){
+  if (videoId != -1) {
     currentVideoDatas = await getDataVideoFromApi(videoId);
     samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
-    videoPlaceHolder.innerHTML=`
-    <video width="600" controls>
-    <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
-    Your browser does not support the video tag.
-  </video>`
-  tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
+    videoPlaceHolder.innerHTML = `
+      <video width="600" controls>
+        <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
+        Your browser does not support the video tag.
+      </video>`;
+    tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples);
   } else {
-    samples=measurements.map(measurements => measurements.id);
+    samples = measurements.map(measurements => measurements.id);
     tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
   }
   tempoMeasure.forEach((measure) => {
@@ -247,7 +309,7 @@ async function generateViewMetric(projectId) {
     Temperature.push(measure.temperature);
     Hygrometrie.push(measure.humidity);
   });
-  populateImageTable(tempoMeasure)
+  populateImageTable(tempoMeasure);
 
   if (myChart) {
     myChart.destroy();
@@ -291,5 +353,5 @@ async function generateViewMetric(projectId) {
         },
       },
     },
-  })
+  });
 }

js/utilities/routes.js

@@ -133,4 +133,17 @@ async function deleteProject(id){
     console.error("Error deleting project, project id :"+ id+"\n error :"+error);
     throw error;
   }
+}
+async function deleteVideo(id){
+  try {
+      const response = await $.ajax({
+        url: api_url.concat(`/videos/${id}`),
+        method: "DELETE",
+      }).then(()=>{
+        alert("Video supprimé avec succès")
+      })
+  } catch (error) {
+    console.error("Error deleting video, video id :"+ id+"\n error :"+error);
+    throw error;
+  }
 }