crud with conditions

app.py

@@ -13,26 +13,13 @@ 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)
-    return render_template('index.html', data={"conditions": { "data": conditions, "model": conditionModel }})
+    return render_template('index.html', data={"conditions":  conditions })
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=8080, debug=True)

static/css/styles.css

@@ -38,10 +38,32 @@ td {
     text-align: left;
 }
 
+td div {
+    max-width: 6ch;
+    white-space: nowrap;
+    overflow: hidden;
+    display: block;
+}
+
+thead td:first-child {
+    border: none;
+}
+
+th.nodata {
+    text-align: center;
+}
+
 tfoot td {
     border: none;
 }
 
+tbody td:first-child {
+    max-width: 1ch;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 button {
     background-color: #4CAF50;
     color: white;
@@ -67,7 +89,6 @@ fieldset {
 /* Dialog box */
 dialog {
     width: 400px;
-    height: 420px;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
@@ -75,6 +96,14 @@ dialog {
     overflow: hidden;
 }
 
+dialog.create {
+    height: 320px;
+}
+
+dialog.update {
+    height: 500px;
+}
+  
   /* Labels */
 label {
     display: block;
@@ -84,7 +113,7 @@ label {
 }
   
 /* Text inputs */
-input, form div {
+input, select, form div {
     padding: 8px;
     margin-bottom: 10px;
     border: 1px solid #ccc;
@@ -93,7 +122,7 @@ input, form div {
     font-size: 16;
 }
 
-input {
+input, select {
     width: 100%;
 }
 

static/js/main.js

@@ -13,7 +13,14 @@ function documentReady() {
             openDialog.close();
             window.location.reload();
         } else {
-            document.querySelector("dialog").showModal()
+            const dialog = document.querySelector("dialog")
+            if (iframe.contentWindow.location.href.split("/").pop() === "create") {
+                dialog.className = 'create';
+            } else {
+                dialog.className = 'update';
+            }
+            dialog.showModal()
+
         }
     }
 }

templates/conditions/create.html

@@ -14,12 +14,19 @@
         <h2>Create a condition</h2>
         <form method="POST" action="/conditions">
           <fieldset>
-            <label for="itemDescription">Beschreibung</label>
-            <input type="text" name="itemDescription">
+            <label for="symbol">Symbol</label>
+            <input type="text" name="symbol">
 
-            <label for="itemName">Name</label>
-            <input type="text" name="itemName">
+            <label for="condition">Condition</label>
+            <select name="condition">
+              <option value="gt">Greater than</option>
+              <option value="lt">Lower than</option>
+            </select>
+
+            <label for="value">Value</label>
+            <input type="number" step="any" name="value">
           </fieldset>
+
           <fieldset>
             <button value="cancel" formmethod="dialog" onclick="window.top.postMessage('close', '*')">Cancel</button>
             <button type="submit">Submit</button>

templates/conditions/update.html

@@ -17,11 +17,17 @@
             <label>ID</label>
             <div>{{ data.id }}</div>
 
-            <label for="itemDescription">Beschreibung</label>
-            <input type="text" name="itemDescription" value="{{ data.itemDescription }}">
+            <label for="symbol">Symbol</label>
+            <input type="text" name="symbol" value="{{ data.symbol }}">
 
-            <label for="itemName">Name</label>
-            <input type="text" name="itemName" value="{{ data.itemName }}">
+            <label for="condition">Condition</label>
+            <select name="condition">
+              <option value="gt" {% if data.condition == "gt" %}selected{% endif %}>Greater than</option>
+              <option value="lt" {% if data.condition == "lt" %}selected{% endif %}>Lower than</option>
+            </select>
+
+            <label for="value">Value</label>
+            <input type="number" step="any" name="value" value="{{ data.value }}">
           </fieldset>
           <fieldset>
             <button value="cancel" formmethod="dialog" onclick="window.top.postMessage('close', '*')">Cancel</button>

templates/index.html

@@ -11,30 +11,41 @@
 
 <body>
   <div class="container">
-    <h1>Conditions</h1>
     <dialog>
       <iframe frameborder="0"></iframe>
     </dialog>
     <table id="conditionTable">
       <thead>
         <tr>
-        {% for key, value in data.conditions.model.items() %}
-            <th>{{ value.name }}</th>
-        {% endfor %}
+          <td colspan="5"><h2>Conditions</h2></td>
         </tr>
+        {% if data.conditions %}
+        <tr>
+          <th>ID</th>
+          <th>Symbol</th>
+          <th>Condition</th>
+          <th>Value</th>
+        </tr>
+        {% else %}
+        <tr>
+          <th class="nodata">No Data</th>
+        </tr>
+        {% endif %}
       </thead>
       <tbody>
-        {% for item in data.conditions.data %}
+        {% for item in data.conditions %}
           <tr onclick="document.querySelector('dialog iframe').contentWindow.location='/conditions/{{ item.id }}'">
-            {% for key, value in item.items() %}
-              <td>{{ value }}</td>
+
+            {% set order = ["id", "symbol", "condition", "value"] %}
+            {% for key in order %}
+              <td>{{ item[key] }}</td>
             {% endfor %}
           </tr>
         {% endfor %}
       </tbody>
         <tfoot>
           <tr>
-            <td colspan="3" style="text-align: right;"> <!-- Adjust colspan as per your total columns -->
+            <td colspan="5" style="text-align: right;"> <!-- Adjust colspan as per your total columns -->
               <button onclick="document.querySelector('dialog iframe').contentWindow.location='/conditions/create'">Add Item</button>
             </td>
           </tr>