Refactor move endpoint to accept JSON input and update form submission method

src/Python/flask/web/app.py

@@ -15,18 +15,14 @@ def index():
 
 @app.route('/move', methods=['POST'])
 def move():
-    # Get the direction from the form data
-    direction = request.form['direction']
-    
-    # Publish the direction to the MQTT topic "home/commands"
-    result = mqtt_client.publish("home/commands", direction)
-    
-    # Check if the publish was successful
-    if result.rc == mqtt.MQTT_ERR_SUCCESS:
-        return jsonify({"message": "Bericht succesvol gepubliceerd"}), 200
-    else:
-        return jsonify({"message": "Fout bij het publiceren van bericht"}), 500
+    data = request.get_json()
+    direction = data.get("direction")
 
+    # Verstuur de richting via MQTT
+    if direction:
+        mqtt_client.publish("home/commands", direction)  # Het topic kan aangepast worden
+
+    return jsonify({"status": "success", "direction": direction})
 # Run the Flask application in debug mode
 if __name__ == '__main__':
     app.run(debug=True)

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

@@ -1,25 +1,23 @@
-document.getElementById("form").addEventListener("click", function(event) {
-  event.preventDefault(); // Prevent the form from reloading the page
+document.getElementById("form").addEventListener("submit", function(event) {
+  event.preventDefault(); // voorkomt het herladen van de pagina
 
-  // Check if the target of the click event is a button
-  if (event.target.tagName === "BUTTON") {
-    const direction = event.target.value; // Get the direction from the button's value
+  // Haal de waarde van de ingedrukte knop op
+  const formData = new FormData(event.target);
+  const direction = formData.get("direction"); // Haalt de 'direction' waarde op
 
-    // Send the direction data to the server using fetch
-    fetch("/", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ direction: direction })
-    })
-    .then(response => response.json())
-    .then(data => {
-      console.log("Success:", data);
-      // Optional: Update UI based on server response if needed
-    })
-    .catch(error => {
-      console.error("Error:", error);
-    });
-  }
+  // Verstuur de richting via fetch naar de server
+  fetch("/move", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ direction: direction })
+  })
+  .then(response => response.json())
+  .then(data => {
+    console.log("Success:", data);
+  })
+  .catch(error => {
+    console.error("Error:", error);
+  });
 });

src/Python/flask/web/templates/index.html

@@ -12,7 +12,7 @@
         <img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
       </div>
       <div class="button-section">
-        <form id = "form" action="/" method="post">
+        <form id = "form" action="/move" method="post">
           <button class="btn" name="direction" value="left">←</button>
           <button class="btn" name="direction" value="up">↑</button>
           <button class="btn" name="direction" value="right">→</button>