main.py

@@ -1,7 +1,8 @@
-from flask import Flask, render_template, request, redirect, url_for, jsonify
+from flask import Flask, render_template, request, redirect, url_for
 import sqlite3
 
-# create table orders (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, remark TEXT, created_at datetime default current_timestamp, status text default "besteld");
+# create table orders (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, remark TEXT, created_at dat
+#etime default current_timestamp, status text default "besteld");
 
 # c = conn.cursor()
 # Create table
@@ -17,13 +18,9 @@ def execute_query(query):
     conn = sqlite3.connect('user.db')
     c = conn.cursor()
 
-    print(f"{query=}")
-    results = []
-
     # Insert a row of data
     try:
         c.execute(query)
-        results = c.fetchall()
     except:
         print("An sql execute error occured")
 
@@ -33,24 +30,38 @@ def execute_query(query):
     # We can also close the connection if we are done with it.
     # Just be sure any changes have been committed or they will be lost.
     conn.close()
-    return results
 
 
+def fetch_orders():
+    conn = sqlite3.connect('user.db')
+    c = conn.cursor()
+
+    c.execute(
+        "select name, remark, status, id from orders order by created_at")
+    rows = c.fetchall()
+
+    return [{
+        "name": row[0],
+        "remark": row[1],
+        "status": row[2],
+        "id": row[3]
+    } for row in rows]
+
 
 pancake_statuses = ["besteld", "aan_het_bakken", "klaar"]
 
 
 @app.route("/")
 def home():
-    return render_template("home.html")
+    return render_template("home.html", orders=fetch_orders())
 
 
 @app.route("/execute", methods=["POST"])
 def execute():
     content = request.json
     print("Query : ", content)
-    response = execute_query(content["lecode"])
-    return jsonify(response)
+    execute_query(content["lecode"])
+    return redirect("/")
 
 
 if __name__ == "__main__":

templates/home.html

@@ -11,70 +11,50 @@
         <h1>Welkom bij de pannenkoekenwachtrij</h1>
 
         <form id="addPersonForm">
-            <p>Naam van de volgende <input type="text" name="name" maxlength=30></p>
-            <p>Specifieke opmerkingen <input type="text" name="remark" maxlength=50></p>
+            <p>Naam van de volgende <input type="text" name="name"></p>
+            <p>Specifieke opmerkingen <input type="text" name="remark"></p>
             <p><input type="submit" value="Persoon toevoegen" id="addPersonButton"></p>
         </form>
 
         <h2>Zie hieronder de lijst van personen die een pannenkoek willen</h2>
-        <table id="orderTable">
+        <table>
+            {% for order in orders %}
+            <tr>
+                <td><button onclick="start_bakken({{order.id}})">Aan het bakken</button></td>
+                <td><button onclick="klaar({{order.id}})">Klaar</button></td>
+                <td><button onclick="dissmiss({{order.id}})">Dismiss</button></td>
+                <th>{{ order.name + order.remark + ": " }}</th>
+                <td>{{ "Huidige status: " + order.status }}</td>
+            </tr>
+            {% endfor %}
         </table>
     </header>
 
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
     <script>
-
-        function executeQuery(query, callback) {
-          $.ajax({
-              type: "POST",
-              url: '/execute',
-              contentType: "application/json",
-              data: JSON.stringify({
-                  "lecode": query
-              }),
-              success: callback,
-              error: function(e) {
-                  console.log("ERROR : ", e);
-              }
-          });
-        }
-
-        function start_bakken(id) {
-          executeQuery(`UPDATE orders SET status = 'aan_het_bakken' where id=${id}`, function(ign) {
-            updateTable();
-          });
-        }
-        function klaar(id) {
-          executeQuery(`UPDATE orders SET status = 'klaar' where id=${id}`, function(ign) {
-            updateTable();
-          });
-        }
-        function dismiss(id) {
-          executeQuery(`UPDATE orders SET status = 'dismissed' where id=${id}`, function(ign) {
-            updateTable();
-          });
-        }
-
-        function updateTable() {
-          executeQuery(`SELECT id, name, remark, status from orders where status != 'dismissed'`, function(x) {
-            $('#orderTable').empty();
-            console.log(x);
-            for (row of x) {
-              console.log(row);
-              $('#orderTable').append(`<tr><td><button onclick="start_bakken(${row[0]})">Aan het bakken</button></td><td><button onclick="klaar(${row[0]})">Klaar</button></td><td><button onclick="dismiss(${row[0]})">Dismiss</button></td><th>${row[1] + " (" + row[2] + ")"}</th><td>${row[3]}</td></tr>`);
-            }
-          });
-        }
-
         $(document).ready(function() {
-            updateTable();
             $("#addPersonButton").click(function(event) {
                 event.preventDefault();
+
                 var form = $("#addPersonForm").serializeArray();
+
+
                 var name = form[0]["value"];
                 var remark = form[1]["value"];
-                executeQuery(`INSERT INTO orders (name, remark) VALUES ('${name}', '${remark}')`, function(ign) {
-                  updateTable();
+
+                $.ajax({
+                    type: "POST",
+                    url: '/execute',
+                    contentType: "application/json",
+                    data: JSON.stringify({
+                        "lecode": `insert into orders (name, remark) values ("${name}", "${remark}")`
+                    }),
+                    success: function(data) {
+                        console.log("SUCCESS : ", data);
+                    },
+                    error: function(e) {
+                        console.log("ERROR : ", e);
+                    }
                 });
             });
         })