SQL poc

main.py

@@ -1,8 +1,7 @@
-from flask import Flask, render_template, request, redirect, url_for
+from flask import Flask, render_template, request, redirect, url_for, jsonify
 import sqlite3
 
-# create table orders (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, remark TEXT, created_at dat
-#etime default current_timestamp, status text default "besteld");
+# create table orders (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, remark TEXT, created_at datetime default current_timestamp, status text default "besteld");
 
 # c = conn.cursor()
 # Create table
@@ -18,9 +17,13 @@ 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")
 
@@ -30,38 +33,24 @@ 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", orders=fetch_orders())
+    return render_template("home.html")
 
 
 @app.route("/execute", methods=["POST"])
 def execute():
     content = request.json
     print("Query : ", content)
-    execute_query(content["lecode"])
-    return redirect("/")
+    response = execute_query(content["lecode"])
+    return jsonify(response)
 
 
 if __name__ == "__main__":

templates/home.html

@@ -17,44 +17,64 @@
         </form>
 
         <h2>Zie hieronder de lijst van personen die een pannenkoek willen</h2>
-        <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 id="orderTable">
         </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"];
-
-                $.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);
-                    }
+                executeQuery(`INSERT INTO orders (name, remark) VALUES ('${name}', '${remark}')`, function(ign) {
+                  updateTable();
                 });
             });
         })