took older version of the fetch

src/Python/flask/web/static/script.js

@@ -1,66 +1,41 @@
-document.addEventListener("DOMContentLoaded", function () {
+document.querySelectorAll(".btn").forEach(button => {
-  document.querySelectorAll(".btn").forEach((button) => {
+  button.addEventListener("click", async function(event) { // Maak de functie async
-    button.addEventListener("click", function (event) {
+    event.preventDefault(); // voorkomt pagina-verversing
-      event.preventDefault(); // prevents page refresh
 
-      // Get the value of the button
+    // Haal de waarde van de knop op
     const direction = event.target.value;
 
-      fetch("/move", {
+    try {
+      const response = await fetch("/move", {
         method: "POST",
         headers: {
-          "Content-Type": "application/json",
+          "Content-Type": "application/json"
         },
-        body: JSON.stringify({ direction: direction }),
+        body: JSON.stringify({ direction: direction })
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          script;
-          console.log("Success:", data);
-        })
-        .catch((error) => {
-          console.error("Error:", error);
       });
-    });
-  });
-
-  // Fetch data from the server
-  async function fetchData() {
-    try {
-      const response = await fetch("/data");
       const data = await response.json();
-      return data;
+      console.log("Success:", data);
     } catch (error) {
       console.error("Error:", error);
     }
+
+    // Fetch data from the server
+    async function fetchData() {
+      const response = await fetch("/data");
+      const data = await response.json();
+      return data;
     }
+
     // Parse the data and show it on the website
-  async function parseData() {
     const data = await fetchData();
-    const sensorDataContainer = document.getElementById("sensor-data").querySelector("tbody");
+    const sensorDataContainer = document.getElementById("sensor-data");
     sensorDataContainer.innerHTML = ""; // Clear previous data
-    // For each object in JSON array, create a new row and append it to the sensorDataContainer
+    //for each object in json array create a new paragraph element and append it to the sensorDataContainer
-    data.forEach(sensor => {
+    for (const [key, value] of Object.entries(data)) {
-      const row = document.createElement("tr");
+      const dataElement = document.createElement("p");
-      Object.entries(sensor).forEach(([key, value]) => {
+      dataElement.textContent = `${key}: ${value}`;
-        const cell = document.createElement("td");
+      sensorDataContainer.appendChild(dataElement); // Voeg het element toe aan de container
-        cell.textContent = `${key}: ${value}`;
-        row.appendChild(cell);
-      });
-      sensorDataContainer.appendChild(row);
-    });
     }
-
-  setInterval(parseData, 1000);
-
-  // Update the image
-  function updateImage() {
-    var img = document.getElementById("robot-image");
-    img.src = "/image?" + new Date().getTime(); // Add timestamp to avoid caching
-  }
-
-  // Fetch and display sensor data every 5 seconds
-
-  // Update the image every 5 seconds
-  setInterval(updateImage, 200);
   });
+});
+