test

html/projet_detail.html

@@ -26,7 +26,7 @@
       <table class="table table-striped" id="table-metrics">
         <thead class="bg-blue-600 text-black">
           <tr>
-            <th> Métriques </th>
+            <th> date </th>
             <th> Hygrométrie </th>
             <th> température </th>
           </tr>

js/globals.js

@@ -3,7 +3,6 @@ let api_url = "https://timelapse.kerboul.me/api";
 let global_project_list;
 let current_project = "";
 
-
 function formatDate(isoString) {
   const date = new Date(isoString);
 
@@ -14,32 +13,33 @@ function formatDate(isoString) {
     hour: "numeric",
     minute: "numeric",
     second: "numeric",
-    timeZoneName: "short"
+    timeZoneName: "short",
   };
 
   return date.toLocaleString("en-US", options);
 }
-const readableString = date.toLocaleString("en-US", options);
-console.log(readableString);
 // Function to get data from API
 
-function getDataFromApi() {
+function getDataProjectFromApi() {
-    // const cachedData = localStorage.getItem("project_list");
-    // if (cachedData) {
-    //   // If the data is in the cache, parse it and return it
-    //   return Promise.resolve(JSON.parse(cachedData));
-    // } else {
-      // If the data is not in the cache, make the API request
   return $.ajax({
     url: api_url.concat("/itemsdb"),
     method: "GET",
     dataType: "json",
-      }).then(data => {
+  }).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;
   });
-    // }
+}
+function getDataProjectMetricsFromApi(id) {
+  return $.ajax({
+    url: api_url.concat(`/metric/${id}`),
+    method: "GET",
+    dataType: "json",
+  }).then((data) => {
+    // If the request is successful, store the data in the cache and return it
+    return data;
+  });
 }
 
 // Function to send data to API

js/index.js

@@ -9,13 +9,13 @@ function display_projects() {
                 <th>Status</th>
                 <th>Actions</th>
                 </tr> `;
-  for (let i = 0; i < global_project_list.rows.length; i++) {
+  for (let i = 0; i < global_project_list.length; i++) {
     datas += `<tr>
-                <th>${global_project_list.rows[i].id}</th>
+                <th>${global_project_list[i].id}</th>
-                <th>${global_project_list.rows[i].titre}</th>
+                <th>${global_project_list[i].titre}</th>
-                <th>${formatDate(global_project_list.rows[i].creation)}</th>
+                <th>${formatDate(global_project_list[i].creation)}</th>
-                <th>${global_project_list.rows[i].status}</th>
+                <th>${global_project_list[i].status}</th>
-                <th><button class="project_detail btn btn-primary">détails de ${global_project_list.rows[i].titre}</button></th>
+                <th><button class="project_detail btn btn-primary">détails de ${global_project_list[i].titre}</button></th>
                 </tr>`;
   }
   table.innerHTML = datas;
@@ -26,7 +26,7 @@ function display_projects() {
   for (let i = 0; i < buttons.length; i++) {
     buttons[i].addEventListener("click", (event) => {
       // Send data to API and then navigate to projet_detail.html page
-      window.location.href = `html/projet_detail.html?id=${global_project_list.rows[i].id}`;
+      window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
     });
     buttons[i].addEventListener("onclick", (event) => {
       // Send data to API and then navigate to projet_detail.html page
@@ -34,7 +34,7 @@ function display_projects() {
     });
   }
 }
-getDataFromApi()
+getDataProjectFromApi()
   .then(project_list => {
     global_project_list = project_list;
     // Call the next function here

js/projet_detail.js

@@ -1,12 +1,37 @@
+function display_metrics(metrics_datas) {
+  // Get data from API and then generate HTML code to display the data in a table
+  const table = document.getElementById("table-metrics");
+  let datas = `<tr>
+                <th>Date</th>
+                <th>Température</th>
+                <th>Hygrométrie</th>
+                </tr> `;
+  for (let i = 0; i < metrics_datas.length; i++) {
+    datas += `<tr>
+              <th>${formatDate(metrics_datas[i].date_metrique)}</th>
+                <th>${metrics_datas[i].temperature}</th>
+                <th>${metrics_datas[i].hygrometrie}</th>
+                </tr>`;
+  }
+  table.innerHTML = datas;
+}
+
 document.addEventListener("DOMContentLoaded", () => {
     const urlParams = new URLSearchParams(window.location.search);
     const projectId = urlParams.get("id");
-
+    getDataProjectMetricsFromApi(projectId)
+    .then(project_metrics => {
+      console.log(project_metrics)
+      display_metrics(project_metrics);
+    })
+    .catch(error => {
+      console.error(error);
+    });
     document.getElementById("projets").addEventListener("click", () => {
       window.location.href = "../index.html";
       current_project="";
     });
     global_project_list=JSON.parse(localStorage.getItem("project_list"));
-    document.getElementById("name_project").innerHTML=global_project_list.rows[projectId-1].titre;
+    document.getElementById("name_project").innerHTML=global_project_list[projectId-1].titre;
 });