diff --git a/src/Python/flask/web/static/script.js b/src/Python/flask/web/static/script.js index 625b4c9..e5b4fee 100644 --- a/src/Python/flask/web/static/script.js +++ b/src/Python/flask/web/static/script.js @@ -1,66 +1,41 @@ -document.addEventListener("DOMContentLoaded", function () { - document.querySelectorAll(".btn").forEach((button) => { - button.addEventListener("click", function (event) { - event.preventDefault(); // prevents page refresh +document.querySelectorAll(".btn").forEach(button => { + button.addEventListener("click", async function(event) { // Maak de functie async + event.preventDefault(); // voorkomt pagina-verversing - // Get the value of the button - const direction = event.target.value; + // 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 }), - }) - .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"); + body: JSON.stringify({ direction: direction }) + }); const data = await response.json(); - return data; + console.log("Success:", data); } catch (error) { console.error("Error:", error); } - } - // Parse the data and show it on the website - async function parseData() { + + // 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 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 - data.forEach(sensor => { - const row = document.createElement("tr"); - Object.entries(sensor).forEach(([key, value]) => { - const cell = document.createElement("td"); - 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); + //for each object in json array create a new paragraph element and append it to the sensorDataContainer + for (const [key, value] of Object.entries(data)) { + const dataElement = document.createElement("p"); + dataElement.textContent = `${key}: ${value}`; + sensorDataContainer.appendChild(dataElement); // Voeg het element toe aan de container + } + }); }); +