From a56cf12c2a794924abd6873efe0632826bdbf323 Mon Sep 17 00:00:00 2001
From: null <null@alice>
Date: Wed, 28 Feb 2024 21:02:23 +0100
Subject: [PATCH] crud with conditions

---
 app.py                           | 17 ++--------------
 static/css/styles.css            | 35 +++++++++++++++++++++++++++++---
 static/js/main.js                |  9 +++++++-
 templates/conditions/create.html | 15 ++++++++++----
 templates/conditions/update.html | 14 +++++++++----
 templates/index.html             | 27 ++++++++++++++++--------
 6 files changed, 82 insertions(+), 35 deletions(-)

diff --git a/app.py b/app.py
index ed19235..9d32982 100644
--- a/app.py
+++ b/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)
diff --git a/static/css/styles.css b/static/css/styles.css
index 720eca8..ae4b5c5 100644
--- a/static/css/styles.css
+++ b/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,13 +89,20 @@ fieldset {
 /* 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;
 }
+
+dialog.create {
+    height: 320px;
+}
+
+dialog.update {
+    height: 500px;
+}
   
   /* Labels */
 label {
@@ -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%;
 }
 
diff --git a/static/js/main.js b/static/js/main.js
index cb61b64..291d0f2 100644
--- a/static/js/main.js
+++ b/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()
+
         }
     }
 }
\ No newline at end of file
diff --git a/templates/conditions/create.html b/templates/conditions/create.html
index 9884834..82425ef 100644
--- a/templates/conditions/create.html
+++ b/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>
diff --git a/templates/conditions/update.html b/templates/conditions/update.html
index ebc2597..1eb2a03 100644
--- a/templates/conditions/update.html
+++ b/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>
diff --git a/templates/index.html b/templates/index.html
index 7c10ba5..019b882 100644
--- a/templates/index.html
+++ b/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>