diff --git a/css/style.css b/css/style.css index f7e122c..275d95f 100644 --- a/css/style.css +++ b/css/style.css @@ -7,4 +7,4 @@ footer { text-align: center; position: fixed; bottom: 0; -} \ No newline at end of file +} diff --git a/html/projet_detail.html b/html/projet_detail.html index 6628816..71aed8e 100644 --- a/html/projet_detail.html +++ b/html/projet_detail.html @@ -14,24 +14,25 @@ -
-
- +
+
+
+ +
+

-
-
- Métriques -
-
- Hygrométrie -
-
- température -
-
-
+ + + + + + + + + +
Métriques Hygrométrie température
@@ -53,28 +54,8 @@ integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous" > - + + + diff --git a/html/videos.html b/html/videos.html index 798ebc5..24da14a 100644 --- a/html/videos.html +++ b/html/videos.html @@ -36,7 +36,7 @@ diff --git a/html/projets.html b/index.html similarity index 87% rename from html/projets.html rename to index.html index cd223e9..9480dcf 100644 --- a/html/projets.html +++ b/index.html @@ -22,7 +22,7 @@ Name - Status + Images Actions @@ -35,15 +35,16 @@
- + + diff --git a/js/globals.js b/js/globals.js new file mode 100644 index 0000000..d021b7c --- /dev/null +++ b/js/globals.js @@ -0,0 +1,56 @@ +// Global variables +let api_url = "https://timelapse.kerboul.me/api"; +let global_project_list; +let current_project = ""; + +// Function to get data from API + +function getDataFromApi() { + 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 => { + // If the request is successful, store the data in the cache and return it + localStorage.setItem("project_list", JSON.stringify(data)); + 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 new file mode 100644 index 0000000..18601be --- /dev/null +++ b/js/index.js @@ -0,0 +1,41 @@ +// 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 + Actions + `; + for (let i = 0; i < global_project_list.rows.length; i++) { + datas += ` + ${global_project_list.rows[i].id} + ${global_project_list.rows[i].name} + + `; + } + 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.rows[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); + }); + } +} +getDataFromApi() + .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 new file mode 100644 index 0000000..432297c --- /dev/null +++ b/js/projet_detail.js @@ -0,0 +1,12 @@ +document.addEventListener("DOMContentLoaded", () => { + const urlParams = new URLSearchParams(window.location.search); + const projectId = urlParams.get("id"); + + 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].name; +}); + diff --git a/js/projets.js b/js/projets.js deleted file mode 100644 index db0d814..0000000 --- a/js/projets.js +++ /dev/null @@ -1,86 +0,0 @@ -// Global variable for the API URL -let api_url = "https://timelapse.kerboul.me/api"; - -// 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 - getDataFromApi().then(function (project_list) { - const table = document.getElementById("table-projects"); - let datas = ` - Id - Name - Actions - `; - for (let i = 0; i < project_list.rows.length; i++) { - datas += ` - ${project_list.rows[i].id} - ${project_list.rows[i].name} - - `; - } - 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 - deleteDataFromApi(4) - window.location.href = "projet_detail.html"; - }); - } - }); -} - -// Function to get data from API -function getDataFromApi() { - return $.ajax({ - url: api_url.concat("/itemsdb"), // replace with your API URL - method: "GET", // or 'POST', 'PUT', 'DELETE', etc. - dataType: "json", // expected data type - success: function (data) { - // This function is called if the request is successful - return data; // log the data to the console - }, - error: function (jqXHR, textStatus, errorThrown) { - // This function is called if the request fails - console.error("Error:", textStatus, errorThrown); - }, - }); -} - -// 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); - }, - }); - } - - -// Call display_projects() function to display projects -display_projects(); diff --git a/js/videos.js b/js/videos.js new file mode 100644 index 0000000..756cf14 --- /dev/null +++ b/js/videos.js @@ -0,0 +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)); + }); \ No newline at end of file