commit 37faba25baa300001c2b3d4867571fedb5e53a20 Author: Kerboul Date: Thu Sep 26 08:44:56 2024 +0000 Init Frontend diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..f7e122c --- /dev/null +++ b/css/style.css @@ -0,0 +1,10 @@ +main { + flex: 1 0 auto; +} + + +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 new file mode 100644 index 0000000..6628816 --- /dev/null +++ b/html/projet_detail.html @@ -0,0 +1,80 @@ + + + + + + Détails + + + + + +
+
+ +
+
+
+ Métriques +
+
+ Hygrométrie +
+
+ température +
+
+
+
+ + + + + + + + + diff --git a/html/projets.html b/html/projets.html new file mode 100644 index 0000000..cd223e9 --- /dev/null +++ b/html/projets.html @@ -0,0 +1,52 @@ + + + + + + + Timelapse + + + + + + +
+
+ + +
+ + + + + + + + + + +
NameStatusActions
+
+ + + + + + + + + diff --git a/html/videos.html b/html/videos.html new file mode 100644 index 0000000..798ebc5 --- /dev/null +++ b/html/videos.html @@ -0,0 +1,45 @@ + + + + + + + Vidéos + + + + + +
+
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/js/projets.js b/js/projets.js new file mode 100644 index 0000000..db0d814 --- /dev/null +++ b/js/projets.js @@ -0,0 +1,86 @@ +// 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();