Refactor button handling in index.html and app.py

src/Python/flask/web/app.py

@@ -1,4 +1,4 @@
-from flask import Flask, request, render_template, redirect
+from flask import Flask, request, render_template
 import paho.mqtt.client as mqtt
 
 app = Flask(__name__)
@@ -9,19 +9,17 @@ mqtt_client = mqtt.Client()
 mqtt_client.username_pw_set("ishak", "kobuki")
 mqtt_client.connect("localhost", 1883, 60)
 mqtt_client.loop_start()
-@app.route('/')
-def index():
-    return render_template('index.html')
 
-@app.route('/move', methods=['POST'])
+@app.route('/', methods=['GET', 'POST'])
-def move():
+def index():
-    direction = request.form['direction']
+    if request.method == 'POST':
-    result = mqtt_client.publish("home/commands", direction)
+        direction = request.form['direction']
-    if result.rc == mqtt.MQTT_ERR_SUCCESS:
+        result = mqtt_client.publish("home/commands", direction)
-        print("Bericht succesvol gepubliceerd")
+        if result.rc == mqtt.MQTT_ERR_SUCCESS:
-    else:
+            message = "Bericht succesvol gepubliceerd"
-        print("Fout bij het publiceren van bericht")
+        else:
-    return redirect('/') 
+            message = "Fout bij het publiceren van bericht"
+    return render_template('index.html', message=message)
 
 if __name__ == '__main__':
     app.run(debug=True)

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

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