mirror of
https://gitlab.fdmci.hva.nl/technische-informatica-sm3/ti-projectten/rooziinuubii79.git
synced 2025-08-03 20:04:58 +00:00
Refactor move endpoint to accept JSON input and update form submission method
This commit is contained in:
@@ -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"
|
|
||||||
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
|
|
||||||
|
|
||||||
|
# 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
|
# Run the Flask application in debug mode
|
||||||
if __name__ == '__main__':
|
if __name__ == '__main__':
|
||||||
app.run(debug=True)
|
app.run(debug=True)
|
@@ -1,25 +1,23 @@
|
|||||||
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"
|
||||||
},
|
},
|
||||||
body: JSON.stringify({ direction: direction })
|
body: JSON.stringify({ direction: direction })
|
||||||
})
|
})
|
||||||
.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);
|
});
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
@@ -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>
|
||||||
|
Reference in New Issue
Block a user