all crud ops

app.py

@@ -13,17 +13,25 @@ r = RethinkDB()
 conn = r.connect(rethinkUrl, rethinkPort, db='finfree')
 
 create_conditions_routes(app, r, conn)
+conditionModel = {
+    "id": {
+        "type": "readonly",
+        "name": "ID"
+    },
+    "itemDescription": {
+        "type": "string",
+        "name": "Beschreibung"
+    },
+    "itemName": {
+        "type": "string",
+        "name": "Name"
+    }
+}
 
 @app.route('/')
 def index():
     cursor = r.table("conditions").run(conn)
     conditions = list(cursor)
-    conditionModel = { 
-        "id": "string",
-        "itemDescription": "string",
-        "itemName": "string"
-    }
-
     return render_template('index.html', data={"conditions": { "data": conditions, "model": conditionModel }})
 
 if __name__ == '__main__':

routes/conditions.py

@@ -1,4 +1,4 @@
-from flask import jsonify, request
+from flask import jsonify, request, redirect, render_template
 import rethinkdb as r
 
 table_name = 'conditions'
@@ -12,6 +12,10 @@ def create_conditions_routes(app, r, conn):
     # Routes for CRUD operations
 
     # Create operation
+    @app.route('/' + route + '/create', methods=['GET'])
+    def create_form(): 
+        return render_template('conditions/create.html')
+
     @app.route('/' + route, methods=['POST'])
     def create_condition():
         if request.headers['Content-Type'] == 'application/json':
@@ -19,7 +23,7 @@ def create_conditions_routes(app, r, conn):
         else: # Assuming form data is in 'application/x-www-form-urlencoded' format
             data = request.form.to_dict()
         result = r.table(table_name).insert(data).run(conn)
-        return jsonify({'id': result['generated_keys'][0]}), 201
+        return redirect(request.referrer or url_for('index')) 
 
     # Read operation
     @app.route('/' + route, methods=['GET'])
@@ -30,17 +34,29 @@ def create_conditions_routes(app, r, conn):
 
     @app.route('/' + route + '/<id>', methods=['GET'])
     def get_condition(id):
-        condition = r.table(table_name).get(id).run(conn)
-        return jsonify(condition)
+        cursor = r.table(table_name).get(id).run(conn)
+        json = jsonify(cursor)
+        if request.headers.get('Content-Type') == 'application/json':
+            return json 
+        else:
+            return render_template('conditions/update.html', data=cursor)
 
     # Update operation
-    @app.route('/' + route + '/<id>', methods=['PUT'])
+    @app.route('/' + route + '/<id>', methods=['POST'])
     def update_condition(id):
-        data = request.get_json()
+        if request.headers['Content-Type'] == 'application/json':
+            data = request.json
+        else:
+            data = request.form.to_dict()
         r.table(table_name).get(id).update(data).run(conn)
-        return jsonify({'message': 'condition updated successfully'})
+        return "<script>window.close();</script>"
 
     # Delete operation
+    @app.route('/' + route + '/delete/<id>', methods=['POST'])
+    def delete_post(id):
+        r.table(table_name).get(id).delete().run(conn)
+        return jsonify({'message': 'condition deleted successfully'})
+
     @app.route('/' + route + '/<id>', methods=['DELETE'])
     def delete_condition(id):
         r.table(table_name).get(id).delete().run(conn)

static/css/styles.css

@@ -26,6 +26,11 @@ table {
     margin-top: 20px;
 }
 
+tbody tr:hover {
+    background-color: #eee;
+    cursor: pointer;
+}
+
 th,
 td {
     border: 1px solid #ddd;
@@ -50,38 +55,64 @@ button {
     cursor: pointer;
 }
 
-.modal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
+button:hover {
+    background-color: #3c8d3e;
+}
+
+fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+}
+/* Dialog box */
+dialog {
+    width: 400px;
+    height: 420px;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+  
+  /* Labels */
+label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+
+}
+  
+/* Text inputs */
+input, form div {
+    padding: 8px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    display: block;
+    font-size: 16;
+}
+
+input {
+    width: 100%;
+}
+
+form fieldset:last-child {
+    margin-top: 20px;
+    text-align: right;
+}
+  
+iframe {
     width: 100%;
     height: 100%;
-    overflow: auto;
-    background-color: rgba(0, 0, 0, 0.4);
-    padding-top: 60px;
 }
 
-.modal-content {
-    background-color: #fefefe;
-    margin: 5% auto;
-    padding: 20px;
-    border: 1px solid #888;
-    width: 80%;
-    border-radius: 8px;
+button.danger {
+    margin-top: 50px;
+    width: 100%;
+    background-color: #af4c4c;
 }
 
-.close {
-    color: #aaa;
-    float: right;
-    font-size: 28px;
-    font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
-    color: black;
-    text-decoration: none;
-    cursor: pointer;
+button.danger:hover {
+    background-color: #8d3c3c;
 }

static/js/main.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', documentReady, false);
+window.onmessage = (event) => {
+    if (event.data == "close") {
+        document.querySelector("dialog[open]").close();
+    }
+}
+
+function documentReady() {
+    const iframe = document.querySelector("iframe");
+    iframe.onload=(event) => {
+        const openDialog = document.querySelector("dialog[open]");
+        if (openDialog) {
+            openDialog.close();
+            window.location.reload();
+        } else {
+            document.querySelector("dialog").showModal()
+        }
+    }
+}

templates/conditions/create.html

@@ -0,0 +1,29 @@
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
+  <style>
+    body {
+      background-color: white;
+      overflow: hidden;
+    }
+  </style>
+  </head>
+    <body>
+        <h2>Create a condition</h2>
+        <form method="POST" action="/conditions">
+          <fieldset>
+            <label for="itemDescription">Beschreibung</label>
+            <input type="text" name="itemDescription">
+
+            <label for="itemName">Name</label>
+            <input type="text" name="itemName">
+          </fieldset>
+          <fieldset>
+            <button value="cancel" formmethod="dialog" onclick="window.top.postMessage('close', '*')">Cancel</button>
+            <button type="submit">Submit</button>
+          </fieldset>
+        </form>
+    </body>
+</html>

templates/conditions/update.html

@@ -0,0 +1,35 @@
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
+  <style>
+    body {
+      background-color: white;
+      overflow: hidden;
+    }
+  </style>
+  </head>
+    <body>
+        <h2>Update a condition</h2>
+        <form method="POST" action="/conditions/{{ data.id }}">
+          <fieldset>
+            <label>ID</label>
+            <div>{{ data.id }}</div>
+
+            <label for="itemDescription">Beschreibung</label>
+            <input type="text" name="itemDescription" value="{{ data.itemDescription }}">
+
+            <label for="itemName">Name</label>
+            <input type="text" name="itemName" value="{{ data.itemName }}">
+          </fieldset>
+          <fieldset>
+            <button value="cancel" formmethod="dialog" onclick="window.top.postMessage('close', '*')">Cancel</button>
+            <button type="submit">Submit</button>
+          </fieldset>
+        </form>
+        <form method="POST" action="/conditions/delete/{{ data.id }}">
+            <button class="danger" type="submit">Delete</button>
+        </form>
+    </body>
+</html>

templates/index.html

@@ -12,28 +12,20 @@
 <body>
   <div class="container">
     <h1>Conditions</h1>
-    <dialog id="conditionDialog">
-        <form method="POST" action="/conditions">
-          <label for="itemName">Name:</label><br>
-          <input type="text" id="itemName" name="itemName"><br>
-          <label for="itemDescription">Description:</label><br>
-          <textarea id="itemDescription" name="itemDescription"></textarea><br><br>
-
-          <button value="cancel" formmethod="dialog">Cancel</button>
-          <button type="submit">Submit</button>
-        </form>
+    <dialog>
+      <iframe frameborder="0"></iframe>
     </dialog>
     <table id="conditionTable">
       <thead>
         <tr>
-        {% for key, items in data.conditions.model.items() %}
-            <th>{{ key }}</th>
+        {% for key, value in data.conditions.model.items() %}
+            <th>{{ value.name }}</th>
         {% endfor %}
         </tr>
       </thead>
       <tbody>
         {% for item in data.conditions.data %}
-          <tr>
+          <tr onclick="document.querySelector('dialog iframe').contentWindow.location='/conditions/{{ item.id }}'">
             {% for key, value in item.items() %}
               <td>{{ value }}</td>
             {% endfor %}
@@ -43,7 +35,7 @@
         <tfoot>
           <tr>
             <td colspan="3" style="text-align: right;"> <!-- Adjust colspan as per your total columns -->
-              <button onclick="openModal()">Add Item</button>
+              <button onclick="document.querySelector('dialog iframe').contentWindow.location='/conditions/create'">Add Item</button>
             </td>
           </tr>
         </tfoot>