Ajout de styles pour le conteneur de boutons et d'un message d'explication dans la page de détails du projet.

css/pages/style_projet.css

@@ -164,3 +164,16 @@
 .highlight{
   background-color: red;
 }
+
+.middle-place{
+  position: absolute;
+  top: 45%;
+  left: 40%;
+}
+.explaination-text{
+  font-size: 1.5em;
+  color: #ffffff;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}

js/pages/projet_detail.js

@@ -294,14 +294,14 @@ document.addEventListener("DOMContentLoaded", async () => {
       firstInput.max = lastValue;
       lastInput.min = firstValue;
     }
-    if (DataMetrics != 404) {
+    const project = data.find((project) => project.id == projectId);
-      const project = data.find((project) => project.id == projectId);
       if (project) {
         for (obj of document.getElementsByClassName("name_project"))
           obj.innerHTML = project.name;
       } else {
         console.error("Project not found");
       }
+    if (DataMetrics != 404) {
   
       choiceSelect.addEventListener("change", toggleContainers);
 
@@ -318,6 +318,14 @@ document.addEventListener("DOMContentLoaded", async () => {
     for (el of document.querySelectorAll(".box")) {
       el.style.display = "none";
     }
+    document.getElementById("buttons-container").classList.add("middle-place");
+    document.getElementById("toggle-view").style.display = "none";
+    // add an explaination to the user
+    const explaination = document.createElement("p");
+    explaination.innerHTML =
+      "Ce projet est encore vierge, il n'y a pas de données à afficher. <br> Veuillez configurer la caméra pour commencer à prendre des images.";
+    explaination.classList.add("explaination-text");
+    document.getElementById("title-global").appendChild(explaination);
   }
 });
 

pages/projet_detail.html

@@ -132,7 +132,7 @@
   <!-- page classique -->
   <div>
       <div>
-        <div class="buttons-container">
+        <div class="buttons-container" id="buttons-container">
           <button class="default-button" id="projets">Menu Principal</button>
           <div class="box">
             <select name="videos" id="video_selector"></select>