From 20bbafc9e99d9c6d41ff4b142c82e749e8cd33bf Mon Sep 17 00:00:00 2001
From: arussac <antoninrussac1@gmail.com>
Date: Thu, 3 Apr 2025 19:11:23 +0200
Subject: [PATCH] maj

---
 css/style.css        |  11 +-
 css/style_menu.css   |   2 +-
 css/style_projet.css |  10 +-
 index.html           |   4 +-
 js/index.js          | 255 +++++++++++++++++--------------------------
 js/projet_detail.js  |  28 ++++-
 6 files changed, 145 insertions(+), 165 deletions(-)
diff --git a/css/style.css b/css/style.css
index 21ccdea..ad18ab7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -182,7 +182,7 @@ body::before {
 }
 
 .hiddenTable {
-  max-height: 65vh;
+  max-height: 50vh;
   overflow-y: hidden;
 }
 
@@ -197,14 +197,17 @@ footer {
   bottom: 0;
   width: 100%;
   background-color: #1e1e1e;
-  padding: 1.5vh;
+  padding: 1vh;
   border-top: 1px solid #333;
   color: #e0e0e0;
+  font-size: 2vh;
 }
 
 #metric_viewer {
-  margin-left: 14px;
-  background-color: rgb(227, 216, 216);
+  margin-left: 3vw;
+  background-color: #444;
+  font-size: bold;
+  opacity: 0.79;
 }
 
 .default-access-button {
diff --git a/css/style_menu.css b/css/style_menu.css
index 2e80cdf..02ccd1a 100644
--- a/css/style_menu.css
+++ b/css/style_menu.css
@@ -85,7 +85,7 @@
   cursor: pointer;
   background-color: transparent;
   font-size: 20vh;
-  color: white;
+  color: rgb(57, 89, 217);
   border: none;
   bottom: 25vh;
   transition: transform 0.3s, box-shadow 0.3s;
diff --git a/css/style_projet.css b/css/style_projet.css
index 9a87fce..11cdc3b 100644
--- a/css/style_projet.css
+++ b/css/style_projet.css
@@ -2,12 +2,16 @@
   float: left;
   display: inline;
   width: 49%;
-  margin-bottom: 10vh;
 }
 
 .picture_placeHolder {
   width: 15.5vw;
   height: 15.5vh;
+  display: block!important;
+}
+.picture_placeHolder img {
+  width: 100%;
+  height: 100%;
 }
 
 .video {
@@ -62,7 +66,7 @@
   cursor: pointer;
   padding-top: 1em; 
   border-radius: 4px;
-  bottom: 45px; /* Adjust as needed to position below the table */
+  bottom: 6vh; /* Adjust as needed to position below the table */
   left: 72%;
   transform: translateX(-50%);
   display: flex;
@@ -104,7 +108,7 @@
 
 .left-bar:after, .right-bar:after {
   content: "";
-  background-color: white;
+  background-color: rgb(231, 65, 65);
   width: 40px;
   height: 10px;
   display: block;
diff --git a/index.html b/index.html
index d279eeb..f12874b 100644
--- a/index.html
+++ b/index.html
@@ -10,8 +10,8 @@
   </head>
   
   <body id="body">
-    <button class="default-button" id="download"><span>Download App</span></button>
-    <button class="default-button" id="show-form-button"><span>+</span></button>
+    <button class="default-button" id="download"><span>Télécharger l'App</span></button>
+    <button class="default-button" id="show-form-button"><span>Ajouter un projet</span></button>
     <div id="customAlert" class="modal">
         <div class="modal-content">
             <p id="alertMessage">This is a custom alert!</p>
diff --git a/js/index.js b/js/index.js
index 3d9ddc2..70df028 100644
--- a/js/index.js
+++ b/js/index.js
@@ -29,13 +29,15 @@ function setupCarousel(global_project_list) {
   const carousel = document.getElementById('carousel');
   const carouselDots = document.getElementById('carousel-dots');
   let currentIndex = 0;
+  let currdeg = 0;
+  const degGlobal = 360 / global_project_list.length;
 
   function showForm() {
-      formContainer.style.display = 'flex';
+    formContainer.style.display = 'flex';
   }
 
   function hideForm() {
-      formContainer.style.display = 'none';
+    formContainer.style.display = 'none';
   }
 
   document.getElementById('show-form-button').addEventListener('click', showForm);
@@ -43,167 +45,116 @@ function setupCarousel(global_project_list) {
   document.getElementById('submit').addEventListener('click', handleFormSubmit);
 
   async function handleFormSubmit() {
-      const nameProject = document.getElementById('name').value;
-      const description = document.getElementById('description').value;
-      if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
-          alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
-              'veuillez en trouver un autre');
-          return;
-      }
-      PostNewProject(nameProject, description).then(() => {
-          location.reload();
-      });
+    const nameProject = document.getElementById('name').value;
+    const description = document.getElementById('description').value;
+    if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
+      alert('Le nom : "' + nameProject + '" est déjà pris ou vide ! \n' +
+        'veuillez en trouver un autre');
+      return;
+    }
+    PostNewProject(nameProject, description).then(() => {
+      location.reload();
+    });
   }
 
   function checkName(Projects, name) {
-      let res = true;
-      Projects.forEach(project => {
-          const ProjectName = project.name;
-          if (ProjectName === name)
-              res = false;
-      });
-      return res;
+    return !Projects.some(project => project.name === name);
   }
 
-  function updateCarousel() {
-      const projectWidth = document.querySelector('.project').clientWidth;
-      carousel.style.transform = `translateX(-${currentIndex * projectWidth}px)`;
-      updateDots();
-  }
 
   function updateDots() {
-      const dots = document.querySelectorAll('.dot');
-      dots.forEach((dot, index) => {
-          dot.classList.toggle('active', index === currentIndex);
-      });
+    const dots = document.querySelectorAll('.dot');
+    dots.forEach((dot, index) => {
+      dot.classList.toggle('active', index === currentIndex);
+    });
   }
 
   function showPrevProject() {
-      if (currentIndex > 0) {
-          currentIndex--;
-          updateCarousel();
-      } else {
-          currentIndex = global_project_list.length - 1;
-          updateCarousel();
-      }
+    currentIndex = (currentIndex > 0) ? currentIndex - 1 : global_project_list.length - 1;
+    updateDots();
   }
 
   function showNextProject() {
-      if (currentIndex < global_project_list.length - 1) {
-          currentIndex++;
-          updateCarousel();
-      } else {
-          currentIndex = 0;
-          updateCarousel();
-      }
-  }  
-
+    currentIndex = (currentIndex < global_project_list.length - 1) ? currentIndex + 1 : 0;
+    updateDots();
+  }
 
   document.getElementById('prev-button').addEventListener('click', showPrevProject);
   document.getElementById('next-button').addEventListener('click', showNextProject);
 
-  // Populate the carousel with project data
-  const letter = ['a', 'b', 'c', 'd', 'e', 'f','g','h','i','j','k','l','m','n','o','p','q','r','s','t'];
-  const degGlobal = 360 / global_project_list.length;
-
-  let carousel_css = $(".carousel"),
-    currdeg  = 0
-
-  let width = window.innerWidth;
+  const letter = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'v', 'w', 'x', 'y', 'z'];
 
   global_project_list.forEach((project, index) => {
-      const projectDiv = document.createElement('div');
-      projectDiv.classList.add('project');
-      projectDiv.classList.add('item');
-      projectDiv.classList.add(letter[index]);
-      projectDiv.innerHTML = `
+    const projectDiv = document.createElement('div');
+    projectDiv.classList.add('project');
+    projectDiv.classList.add('item');
+    projectDiv.classList.add(letter[index]);
+    projectDiv.innerHTML = `
       <h2>${project.name}</h2>
       <p>${formatDate(project.start_date)}</p>
       <p>Status : ${formatStatus(parseInt(project.status))}</p>
       <div class="project_buttons">
-      <button class="default-access-button">détails de ${project.name}</button>
-      <button class="default-delete-button">Supprimer</button>
+        <button class="default-access-button">détails de ${project.name}</button>
+        <button class="default-delete-button">Supprimer</button>
       </div>
-      `;
-      carousel.appendChild(projectDiv);
-      document.querySelector('.'.concat(letter[index])).style=`transform: rotateY(${index * degGlobal}deg) translateZ(${width/6}px);`;
+    `;
+    carousel.appendChild(projectDiv);
+    projectDiv.style.transform = `rotateY(${index * degGlobal}deg) translateZ(${global_project_list.length*3.5}vw)`;
 
-      // Add event listener for project details button
-      const detailButton = projectDiv.querySelector('.default-access-button');
-      detailButton.addEventListener('click', (event) => {
-          event.stopPropagation();
-          window.location.href = `html/projet_detail.html?id=${project.id}`;
-      });
+    const detailButton = projectDiv.querySelector('.default-access-button');
+    detailButton.addEventListener('click', (event) => {
+      event.stopPropagation();
+      window.location.href = `html/projet_detail.html?id=${project.id}`;
+    });
 
-      // Add event listener for project delete button
-      const deleteButton = projectDiv.querySelector('.default-delete-button');
-      deleteButton.addEventListener('click', (event) => {
-          event.stopPropagation();
-          const projectName = project.name;
+    const deleteButton = projectDiv.querySelector('.default-delete-button');
+    deleteButton.addEventListener('click', (event) => {
+      event.stopPropagation();
+      const projectName = project.name;
+      document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
+      document.getElementById('customAlert').style.display = 'block';
 
-          document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
-          document.getElementById('customAlert').style.display = 'block';
-
-          document.getElementById('okBtn').onclick = function () {
-              document.getElementById('customAlert').style.display = 'none';
-              // Call your delete function here
-              deleteProject(project.id).then(() => {
-                  location.reload();
-              });
-          };
-
-          document.getElementById('cancelBtn').onclick = function () {
-              document.getElementById('customAlert').style.display = 'none';
-          };
-      });
-
-      // Create a dot for each project
-      const dot = document.createElement('div');
-      dot.classList.add('dot');
-      dot.addEventListener('click', () => {
-        const targetDeg = index * degGlobal;
-        const diff = targetDeg - currdeg;
-        currdeg +=diff;
-        currdeg=-currdeg;
-        currentIndex = index;
-        carousel_css.css({
-            "-webkit-transform": `rotateY(${currdeg}deg)`,
-            "-moz-transform": `rotateY(${currdeg}deg)`,
-            "-o-transform": `rotateY(${currdeg}deg)`,
-            "transform": `rotateY(${currdeg}deg)`
+      document.getElementById('okBtn').onclick = function () {
+        document.getElementById('customAlert').style.display = 'none';
+        deleteProject(project.id).then(() => {
+          location.reload();
         });
-        updateDots(); // Update active dot styles
-      });
-      carouselDots.appendChild(dot);
+      };
+
+      document.getElementById('cancelBtn').onclick = function () {
+        document.getElementById('customAlert').style.display = 'none';
+      };
+    });
+
+    const dot = document.createElement('div');
+    dot.classList.add('dot');
+    dot.addEventListener('click', () => {
+      currentIndex = index;
+      currdeg = -index * degGlobal;
+      carousel.style.transform = `rotateY(${currdeg}deg) translateZ(-${global_project_list.length * 3.5}vw)`;
+      updateDots();
+    });
+    carouselDots.appendChild(dot);
   });
+  carousel.style.transformOrigin = `50% 50% -${global_project_list.length * 3.5}vw`;
+  carousel.style.transform = `translateZ(-${global_project_list.length * 3.5}vw)`
+  //updateCarousel();
+  $(".next").on("click", { d: "n" }, rotate);
+  $(".prev").on("click", { d: "p" }, rotate);
 
-  // Initial update to set the correct position
-  updateCarousel();
+  function rotate(e) {
+    if (e.data.d == "n") {
+      currdeg = currdeg - degGlobal;
+    }
+    if (e.data.d == "p") {
+      currdeg = currdeg + degGlobal;
+    }
+    if (currdeg > 360) {
+      currdeg = currdeg % 360;
+    }
+    carousel.style.transform = `rotateY(${currdeg}deg) translateZ(-${global_project_list.length * 3.5}vw)`;
 
-
-  
-
-$(".next").on("click", { d: "n" }, rotate);
-$(".prev").on("click", { d: "p" }, rotate);
-
-function rotate(e){
-  if(e.data.d=="n"){
-    currdeg = currdeg - degGlobal;
   }
-  if(e.data.d=="p"){
-    currdeg = currdeg + degGlobal;
-  }
-  if(currdeg > 360){
-    currdeg = currdeg%360;
-  }
-  carousel_css.css({
-    "-webkit-transform": "rotateY("+currdeg+"deg)",
-    "-moz-transform": "rotateY("+currdeg+"deg)",
-    "-o-transform": "rotateY("+currdeg+"deg)",
-    "transform": "rotateY("+currdeg+"deg)"
-  });
-}
-
 }
 
 function handleResize() {
@@ -213,36 +164,33 @@ function handleResize() {
 window.addEventListener('resize', handleResize);
 
 function isMobileDevice() {
-  let check = false;
-  (function(a){if(/(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(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
-  return check;
-};
+  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);
+}
 
 window.addEventListener('DOMContentLoaded', (event) => {
   if (isMobileDevice()) {
-      const body = document.body;
-      const downloadApp = document.getElementById('download');
-      // Apply hidden to all children of body except the downloadApp element
-      body.childNodes.forEach((child) => {
-          if (child.nodeType === 1 && child !== downloadApp) { // Check if the child is an element node
-              child.style.display = 'none';
-          }
-      });
-      const newH1 = document.createElement('h1');
-      newH1.textContent = "Caméra Timelapse sur mobile, utilisez l'app !!!";
-      newH1.classList.add('global_title');
-                // Append the new h1 element to the body
-      body.appendChild(newH1);
+    const body = document.body;
+    const downloadApp = document.getElementById('download');
+    body.childNodes.forEach((child) => {
+      if (child.nodeType === 1 && child !== downloadApp) {
+        child.style.display = 'none';
+      }
+    });
+    const newH1 = document.createElement('h1');
+    newH1.textContent = "Caméra Timelapse sur mobile, utilisez l'app !!!";
+    newH1.classList.add('global_title');
+    body.appendChild(newH1);
   }
 });
+
 let titleIsReadable = true;
 
-function change_title_style(){
+function change_title_style() {
   const titlePlaceHolder = document.getElementById('title-global');
   const ball = document.getElementById('ball');
   const xyz = document.getElementById('xyz');
   const h1_title = document.getElementById('h1-title');
-  if(titleIsReadable){
+  if (titleIsReadable) {
     titleIsReadable = false;
     titlePlaceHolder.classList.add('container-title');
     ball.style.display = 'block';
@@ -255,8 +203,7 @@ function change_title_style(){
     xyz.style.display = 'none';
     h1_title.style.display = 'block';
   }
- 
-  
+}
+
+change_title_style();
 
-} 
-change_title_style();
\ No newline at end of file
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 486f405..88ce1ad 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -265,7 +265,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 class="picture_placeHolder"id="${i}" src="${api_url}/preview/${measure.project_id}/${measure.order_id}"/></a>`;
+    imageTD.innerHTML = `<a class="picture_placeHolder" 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>`;
     row.appendChild(imageTD);
 
     if ((i + 1) % 3 === 0 && i !== 0) {
@@ -357,6 +357,7 @@ async function generateViewMetric(projectId) {
           label: "Hygrometrie (%)",
           data: Hygrometrie,
           fill: false,
+          color: "rgba(153, 102, 255, 1)",
           borderColor: "rgba(153, 102, 255, 1)",
           tension: 0.1,
           yAxisID: "y1", // Use the second y-axis
@@ -368,6 +369,21 @@ async function generateViewMetric(projectId) {
         y: {
           beginAtZero: true,
           position: "left",
+          ticks: {
+            color: 'white', // Set y-axis labels to white
+          },
+          grid: {
+            color: 'white', // Set grid line color to white
+          },
+        },
+        x: {
+          ticks: {
+            color: 'white', // Set x-axis labels to white
+          },
+          grid: {
+            drawOnChartArea: true,
+            color: 'white', // Set grid line color to white
+          },
         },
         y1: {
           beginAtZero: true,
@@ -375,8 +391,18 @@ async function generateViewMetric(projectId) {
           grid: {
             drawOnChartArea: false, // Only want the grid lines for one axis to show up
           },
+          ticks: {
+            color: 'white', // Set y-axis labels to white
+          }
         },
       },
+      plugins: {
+        legend: {
+          labels: {
+            color: "white", // Set legend labels to white
+          },
+        }
+      }
     },
   });
 }
