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

This commit is contained in:
ishak jmilou.ishak
2024-11-04 11:54:21 +01:00
parent 17e1399643
commit ca9b81c03e
3 changed files with 28 additions and 34 deletions

View File

@@ -15,18 +15,14 @@ def index():
@app.route('/move', methods=['POST']) @app.route('/move', methods=['POST'])
def move(): def move():
# Get the direction from the form data data = request.get_json()
direction = request.form['direction'] direction = data.get("direction")
# Publish the direction to the MQTT topic "home/commands" # Verstuur de richting via MQTT
result = mqtt_client.publish("home/commands", direction) if direction:
mqtt_client.publish("home/commands", direction) # Het topic kan aangepast worden
# 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
return jsonify({"status": "success", "direction": direction})
# Run the Flask application in debug mode # Run the Flask application in debug mode
if __name__ == '__main__': if __name__ == '__main__':
app.run(debug=True) app.run(debug=True)

View File

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

View File

@@ -12,7 +12,7 @@
<img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" /> <img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
</div> </div>
<div class="button-section"> <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="left"></button>
<button class="btn" name="direction" value="up"></button> <button class="btn" name="direction" value="up"></button>
<button class="btn" name="direction" value="right"></button> <button class="btn" name="direction" value="right"></button>