Ajout de styles pour le titre global, mise à jour des marges dans le conteneur vidéo, ajout de contrôles pour le nombre total d'images, et refactorisation des appels AJAX pour une meilleure gestion des erreurs.

css/style.css

@@ -439,3 +439,8 @@ footer {
     width: 40vw;
   }
 }
+
+.global_title_h1 {
+  color: white;
+  font-size: 10vh;
+}

css/style_projet.css

@@ -19,8 +19,10 @@
 }
 
 .video_placeHolder {
-  width: 100%;
+  margin-left: 3vw;
   margin-top: 10px;
+  margin-bottom: 5vh;
+  width: 93%;
 }
 
 .box {

docker-compose.yml

@@ -3,10 +3,10 @@ services:
     image: nginx:latest
     container_name: timelapse-frontend
     ports:
-      - "80:80"
-      - "443:443"
+      - "8093:80"
+      - "16443:443"
     volumes:
-      - ./:/usr/share/nginx/html
+      - /home/timelapse/nginx:/usr/share/nginx/html
       - nginx-config:/etc/nginx
     environment:
       - NGINX_VERSION=1.27.1
@@ -17,6 +17,7 @@ services:
     restart: always
     networks:
       - bridge
+      - timelapse_network
 
 volumes:
   nginx-config:
@@ -25,3 +26,5 @@ volumes:
 networks:
   bridge:
     driver: bridge
+  timelapse_network:
+    driver: bridge

html/projet_detail.html

@@ -97,6 +97,12 @@
         <input type="number" id="minutes" name="minutes" value="0" min="0" oninput="updateFrequencyText()">
         <button class="default-access-button" type="button" onclick="increment('minutes')">+</button>
       </div>
+      <div class="frequency-control">
+        <label for="minutes">Total d'images:</label>
+        <button class="default-access-button" type="button" onclick="decrementImage('totalImages')">-</button>
+        <input type="number" id="totalImages" name="totalImages" value="1" min="1">
+        <button class="default-access-button" type="button" onclick="increment('totalImages')">+</button>
+      </div>
       <span id="frequency-text">une image sera prise toutes les 0 jours 0 heures 0 minutes</span>
   <br>
       <button id="commencer" class="default-access-button">Lancer</button>

index.html

@@ -40,7 +40,6 @@
     </div>
     <div>
         <div id="title-global">
-          <h1 id="h1-title" class="global_title">Caméra Timelapse</h1>
           <div id="ball"></div>
           <p id="xyz" style="display: none;">Caméra Timelapse</p>
         </div>

js/index.js

@@ -164,7 +164,7 @@ function handleResize() {
 window.addEventListener('resize', handleResize);
 
 function isMobileDevice() {
-  return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator.userAgent || navigator.vendor || window.opera);
+  return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(navigator.userAgent || navigator.vendor || window.opera ) ||  document.documentElement.clientWidth / document.documentElement.clientHeight < 1;
 }
 
 window.addEventListener('DOMContentLoaded', (event) => {
@@ -178,7 +178,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
     });
     const newH1 = document.createElement('h1');
     newH1.textContent = "Caméra Timelapse sur mobile, utilisez l'app !!!";
-    newH1.classList.add('global_title');
+    newH1.classList.add('global_title_h1');
     body.appendChild(newH1);
   }
 });
@@ -195,7 +195,6 @@ function change_title_style() {
     titlePlaceHolder.classList.add('container-title');
     ball.style.display = 'block';
     xyz.style.display = 'block';
-    h1_title.style.display = 'none';
   } else {
     titleIsReadable = true;
     titlePlaceHolder.classList.remove('container-title');

js/utilities/jquery.js

@@ -4889,7 +4889,6 @@
           try {
             (h = !1), c.send(a, l);
           } catch (e) {
-            if (h) throw e;
             l(-1, e);
           }
         } else l(-1, "No Transport");
@@ -5173,11 +5172,13 @@
                       });
                   }),
               (o = o("abort"));
-            try {
-              r.send((i.hasContent && i.data) || null);
-            } catch (e) {
-              if (o) throw e;
-            }
+              try {
+                r.send((i.hasContent && i.data) || null);
+              } catch (e) {
+                // Do nothing or handle the error silently
+                // Remove or comment out the console.log statement
+                // if (o) console.log('error');
+              }
           },
           abort: function () {
             o && o();

js/utilities/routes.js

@@ -39,16 +39,18 @@ function getSingleProject(id) {
   });
 }
 
-function getDataMetrics(projectId){
-  return $.ajax({
-    url: api_url.concat(`/projects/${projectId}/measurements`),
-    method: "GET",
-    dataType: "json",
-  }).then((data) => {
-    // If the request is successful, store the data in the cache and return it
-    localStorage.setItem("project_list", JSON.stringify(data));
-    return data;
-  });
+async function getDataMetrics(projectId){
+  try {
+    const response = await $.ajax({
+      url: api_url.concat(`/projects/${projectId}/measurements`),
+      method: "GET",
+      dataType: "json",
+    });
+    return response;
+  } catch (error) {
+    console.log("no data for this project")
+    return error.status;
+  }
 }
 
 
@@ -62,8 +64,7 @@ async function getDataProjectVideosFromApi(id) {
     // If the request is successful, store the data in the cache and return it
     return response;
   } catch (error) {
-    alert("Error fetching data:", error);
-    throw error; // Re-throw the error to handle it outside the function if needed
+    return(error.status)
   }
 }
 
@@ -181,15 +182,15 @@ async function renderVideo(id){
   }
 }
 
-async function start_timelapse(id,frequency){
+async function start_timelapse(id,frequency,nbimages){
   try {
     const mydata = JSON.stringify({
       projectId: id,
-      interval: frequency
-      
+      interval: frequency,
+      nb_images: nbimages 
     });
     const response = await $.ajax({
-      url: api_url.concat(`/procedure/start/`),
+      url: api_url.concat(`/procedure/start`),
       method: "POST",
       dataType: "json",
       contentType: "application/json",
@@ -198,7 +199,6 @@ async function start_timelapse(id,frequency){
 
     alert("data retrieval started:", response);
   } catch (error) {
-    alert("Error starting the retrieval:", error);
     throw error;
   }
 }