+
+
+
+
+
+
+
+
+
+
diff --git a/js/globals.js b/js/globals.js
index 2960a96..0a7be22 100644
--- a/js/globals.js
+++ b/js/globals.js
@@ -1,85 +1,85 @@
-// Global variables
-let api_url = "https://timelapse.kerboul.me/api";
-let global_project_list;
-let current_project = "";
-
-function formatDate(isoString) {
- const date = new Date(isoString);
-
- const options = {
- year: "numeric",
- month: "long",
- day: "numeric",
- hour: "numeric",
- minute: "numeric",
- second: "numeric",
- timeZoneName: "short",
- };
-
- return date.toLocaleString("en-US", options);
-}
-// Function to get data from API
-
-function getDataProjectFromApi() {
- return $.ajax({
- url: api_url.concat("/itemsdb"),
- 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;
- });
-}
-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 getDataProjectImagesFromApi(id) {
- return $.ajax({
- url: api_url.concat(`/image/${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
-function sendDataFromApi(datas) {
- return $.ajax({
- url: api_url.concat("/projets"),
- method: "POST",
- data: JSON.stringify(datas),
- contentType: "application/json",
- success: function (datas) {
- console.log("successful");
- },
- error: function (jqXHR, textStatus, errorThrown) {
- console.error(errorThrown);
- },
- });
-}
-
-function deleteDataFromApi(id) {
- return $.ajax({
- url: api_url.concat("/delete"),
- method: "POST",
- data: JSON.stringify({ id: id }),
- contentType: "application/json",
- success: function (datas) {
- console.log("successful");
- },
- error: function (jqXHR, textStatus, errorThrown) {
- console.error(errorThrown);
- },
- });
-}
+// Global variables
+let api_url = "https://timelapse.kerboul.me/api";
+let global_project_list;
+let current_project = "";
+
+function formatDate(isoString) {
+ const date = new Date(isoString);
+
+ const options = {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ hour: "numeric",
+ minute: "numeric",
+ second: "numeric",
+ timeZoneName: "short",
+ };
+
+ return date.toLocaleString("en-US", options);
+}
+// Function to get data from API
+
+function getDataProjectFromApi() {
+ return $.ajax({
+ url: api_url.concat("/itemsdb"),
+ 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;
+ });
+}
+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 getDataProjectImagesFromApi(id) {
+ return $.ajax({
+ url: api_url.concat(`/image/${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
+function sendDataFromApi(datas) {
+ return $.ajax({
+ url: api_url.concat("/projets"),
+ method: "POST",
+ data: JSON.stringify(datas),
+ contentType: "application/json",
+ success: function (datas) {
+ console.log("successful");
+ },
+ error: function (jqXHR, textStatus, errorThrown) {
+ console.error(errorThrown);
+ },
+ });
+}
+
+function deleteDataFromApi(id) {
+ return $.ajax({
+ url: api_url.concat("/delete"),
+ method: "POST",
+ data: JSON.stringify({ id: id }),
+ contentType: "application/json",
+ success: function (datas) {
+ console.log("successful");
+ },
+ error: function (jqXHR, textStatus, errorThrown) {
+ console.error(errorThrown);
+ },
+ });
+}
diff --git a/js/index.js b/js/index.js
index a2bed3d..e74ba22 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,45 +1,45 @@
-// Function to display projects in a table
-function display_projects() {
- // Get data from API and then generate HTML code to display the data in a table
- const table = document.getElementById("table-projects");
- let datas = `
-
Id
-
Name
-
Date
-
Status
-
Actions
-
`;
- for (let i = 0; i < global_project_list.length; i++) {
- datas += `
-
${global_project_list[i].id}
-
${global_project_list[i].titre}
-
${formatDate(global_project_list[i].creation)}
-
${global_project_list[i].status}
-
-
`;
- }
- table.innerHTML = datas;
-
- // Select all the buttons with the class button_project
- const buttons = document.getElementsByClassName("project_detail");
- // Add an event listener to each button
- 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[i].id}`;
- });
- buttons[i].addEventListener("onclick", (event) => {
- // Send data to API and then navigate to projet_detail.html page
- current_project=change_current_project(i);
- });
- }
-}
-getDataProjectFromApi()
- .then(project_list => {
- global_project_list = project_list;
- // Call the next function here
- display_projects();
- })
- .catch(error => {
- console.error(error);
- });
+// Function to display projects in a table
+function display_projects() {
+ // Get data from API and then generate HTML code to display the data in a table
+ const table = document.getElementById("table-projects");
+ let datas = `
+
Id
+
Name
+
Date
+
Status
+
Actions
+
`;
+ for (let i = 0; i < global_project_list.length; i++) {
+ datas += `
+
${global_project_list[i].id}
+
${global_project_list[i].titre}
+
${formatDate(global_project_list[i].creation)}
+
${global_project_list[i].status}
+
+
`;
+ }
+ table.innerHTML = datas;
+
+ // Select all the buttons with the class button_project
+ const buttons = document.getElementsByClassName("project_detail");
+ // Add an event listener to each button
+ 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[i].id}`;
+ });
+ buttons[i].addEventListener("onclick", (event) => {
+ // Send data to API and then navigate to projet_detail.html page
+ current_project=change_current_project(i);
+ });
+ }
+}
+getDataProjectFromApi()
+ .then(project_list => {
+ global_project_list = project_list;
+ // Call the next function here
+ display_projects();
+ })
+ .catch(error => {
+ console.error(error);
+ });
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 14886bd..a2fdc13 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -1,62 +1,73 @@
-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 = `
-
Date
-
Température
-
Hygrométrie
-
`;
- for (let i = 0; i < metrics_datas.length; i++) {
- datas += `
-
${formatDate(metrics_datas[i].date_metrique)}
-
${metrics_datas[i].temperature}
-
${metrics_datas[i].hygrometrie}
-
`;
- }
- table.innerHTML = datas;
-}
-
-// function display_metrics(images_datas) {
-// // Get data from API and then generate HTML code to display the data in a table
-// const table_image = document.getElementById("table-image");
-// let datas = `
-//
Images
-
-//
`;
-// for (let i = 0; i < images_datas.length; i+=3) {
-// if(i+2
-//
${images_datas[i]}
-//
${images_datas[i+1]}
-//
${images_datas[i+2]}
-// `;
-// }
-// table_image.innerHTML = datas;
-// }
-
-document.addEventListener("DOMContentLoaded", () => {
- const urlParams = new URLSearchParams(window.location.search);
- const projectId = urlParams.get("id");
- getDataProjectMetricsFromApi(projectId)
- .then(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[projectId-1].titre;
-
- fetch("https://timelapse.kerboul.me/api/smile")
- .then(response => response.blob())
- .then(blob => {
- const url = URL.createObjectURL(blob);
- const imageElement = document.getElementById("my-image");
- imageElement.src = url;
- });
-});
-
+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 = `
+
Date
Température
Hygrométrie
+
`;
+ for (let i = 0; i < metrics_datas.length; i++) {
+ datas += `
+
+
${formatDate(metrics_datas[i].date_metrique)}
+
${metrics_datas[i].temperature}
+
${metrics_datas[i].hygrometrie}
+
`;
+ }
+ table.innerHTML = datas;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+ const urlParams = new URLSearchParams(window.location.search);
+ const projectId = urlParams.get("id");
+ getDataProjectMetricsFromApi(projectId)
+ .then((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[projectId - 1].titre;
+
+ fetch("https://timelapse.kerboul.me/api/smile")
+ .then((response) => response.blob())
+ .then((blob) => {
+ const url = URL.createObjectURL(blob);
+ let tableBody = document.getElementById("imageSource");
+ let row = document.createElement("tr");
+
+ for (let i = 0; i < 1500; i++) {
+ let imageTD = document.createElement("td");
+ imageTD.innerHTML = ``;
+ row.appendChild(imageTD);
+
+ if ((i + 1) % 3 === 0 && i !== 0) {
+ tableBody.appendChild(row);
+ row = document.createElement("tr"); // Create a new row
+ }
+ }
+
+ // Append the last row if there are remaining images
+ if (row.childNodes.length > 0) {
+ tableBody.appendChild(row);
+ }
+ });
+
+ // Add event listener for the toggle button
+ document.getElementById("toggle-view").addEventListener("click", () => {
+ const tableImage = document.getElementById("content1");
+ if (tableImage.classList.contains("hiddenTable")) {
+ tableImage.classList.remove("hiddenTable");
+ tableImage.classList.add("full-view");
+ document.getElementById("toggle-view").innerHTML="See first images"
+ } else {
+ tableImage.classList.remove("full-view");
+ tableImage.classList.add("hiddenTable");
+ document.getElementById("toggle-view").innerHTML="See all images"
+ }
+ });
+});
diff --git a/js/videos.js b/js/videos.js
index 756cf14..22bd99c 100644
--- a/js/videos.js
+++ b/js/videos.js
@@ -1,31 +1,31 @@
-document.addEventListener("DOMContentLoaded", () => {
- // Fetch data from the API
- fetch("https://timelapse.kerboul.me/api/itemsdb")
- .then(response => response.json())
- .then(data => {
- // Get the table body element
- const tableBody = document.querySelector("#table-metrics tbody");
-
- // Loop through the data and create a new row for each item
- data.forEach(item => {
- const row = document.createElement("tr");
-
- // Create a new cell for each property (metrics, hygrometry, temperature)
- const metricsCell = document.createElement("td");
- metricsCell.textContent = item.metrics;
- row.appendChild(metricsCell);
-
- const hygrometryCell = document.createElement("td");
- hygrometryCell.textContent = item.hygrometry;
- row.appendChild(hygrometryCell);
-
- const temperatureCell = document.createElement("td");
- temperatureCell.textContent = item.temperature;
- row.appendChild(temperatureCell);
-
- // Append the row to the table body
- tableBody.appendChild(row);
- });
- })
- .catch(error => console.error(error));
+document.addEventListener("DOMContentLoaded", () => {
+ // Fetch data from the API
+ fetch("https://timelapse.kerboul.me/api/itemsdb")
+ .then(response => response.json())
+ .then(data => {
+ // Get the table body element
+ const tableBody = document.querySelector("#table-metrics tbody");
+
+ // Loop through the data and create a new row for each item
+ data.forEach(item => {
+ const row = document.createElement("tr");
+
+ // Create a new cell for each property (metrics, hygrometry, temperature)
+ const metricsCell = document.createElement("td");
+ metricsCell.textContent = item.metrics;
+ row.appendChild(metricsCell);
+
+ const hygrometryCell = document.createElement("td");
+ hygrometryCell.textContent = item.hygrometry;
+ row.appendChild(hygrometryCell);
+
+ const temperatureCell = document.createElement("td");
+ temperatureCell.textContent = item.temperature;
+ row.appendChild(temperatureCell);
+
+ // Append the row to the table body
+ tableBody.appendChild(row);
+ });
+ })
+ .catch(error => console.error(error));
});
\ No newline at end of file