Init Frontend

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 = `<tr>
+                <th>Id</th>
+                <th>Name</th>
+                <th>Actions</th>
+                </tr> `;
+    for (let i = 0; i < project_list.rows.length; i++) {
+      datas += `<tr>
+                <th>${project_list.rows[i].id}</th>
+                <th>${project_list.rows[i].name}</th>
+                <th><button class="project_detail btn btn-primary">détails de ${project_list.rows[i].name}</button></th>
+                </tr>`;
+    }
+    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();