From a4154fd9204002352a819627763ae19e784b94f7 Mon Sep 17 00:00:00 2001
From: arussac <antoninrussac1@gmail.com>
Date: Sat, 15 Feb 2025 18:16:03 +0100
Subject: [PATCH] manager de projet (create_delete)

---
 html/projet_detail.html |  15 +++++-
 js/projet_detail.js     | 108 +++++++++++++++++++++++++++++++---------
 js/utilities/routes.js  |  13 +++++
 3 files changed, 111 insertions(+), 25 deletions(-)
diff --git a/html/projet_detail.html b/html/projet_detail.html
index bc1d554..839311a 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -22,6 +22,15 @@
     />
   </head>
   <body>
+    <div id="customAlert" class="modal">
+      <div class="modal-content">
+          <p id="alertMessage">This is a custom alert!</p>
+          <div class="modal-buttons">
+              <button class="btn btn-primary"id="cancelBtn">Cancel</button>
+              <button class="btn btn-primary"id="okBtn">OK</button>
+          </div>
+      </div>
+  </div>
     <!-- formulaire -->
     <div id="form-container" class="form-container" style="display: none">
       <div class="form-content">
@@ -91,15 +100,17 @@
     <div id="section" class="container mt-5">
       <div class="row">
         <div class="col-md-12">
-          <div class="buttons-container" style="float: left; width: 20%">
+          <div class="buttons-container" style="float: left; width: 10%">
             <button class="btn btn-primary" id="projets">
               <span> Home </span>
             </button>
           </div>
+          <div class="buttons-container" id="delete-placeholder" style="float: left; width: 20%">
+          </div>
           <h3
             id="name_project"
             class="text-black"
-            style="float: left; width: 50%"
+            style="float: right; width: 50%"
           ></h3>
         </div>
       </div>
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 8d11c18..3323c2e 100644
--- a/js/projet_detail.js
+++ b/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) {
         },
       },
     },
-  })
+  });
 }
diff --git a/js/utilities/routes.js b/js/utilities/routes.js
index 4457ce0..b4782d3 100644
--- a/js/utilities/routes.js
+++ b/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;
+  }
 }
\ No newline at end of file
