From 9721905617afd8a4942176f4bf2d4d18c5c32a63 Mon Sep 17 00:00:00 2001
From: derlole <122916573+derlole@users.noreply.github.com>
Date: Tue, 29 Apr 2025 13:07:50 +0000
Subject: [PATCH] esp

---
 routes/esp_routes.py | 13 ++++---------
 routes/shared.py     |  2 +-
 static/style.css     | 41 +++++++++++++++++++++++++++-------------
 templates/index.html | 45 +++++++++++++++++++++++---------------------
 4 files changed, 57 insertions(+), 44 deletions(-)

diff --git a/routes/esp_routes.py b/routes/esp_routes.py
index d28c29c..c164c63 100644
--- a/routes/esp_routes.py
+++ b/routes/esp_routes.py
@@ -7,7 +7,7 @@ esp = Blueprint('eps', __name__, url_prefix='/unsecure/esp')
 
 MQTT_BROKER = "localhost"  # oder IP/Domain
 MQTT_PORT = 1883
-MQTT_TOPIC = "iot/machine"
+MQTT_TOPIC = "coffee/command"
 
 @esp.route('/')
 def fetch_command():
@@ -17,16 +17,11 @@ def fetch_command():
 
 @esp.route('/toggle-machine', methods=['POST'])
 def toggle_machine():
-    pCd = shared.pending_command
-    shared.reset_command()
-    pCd['command'] = 'machineToggle'
-    pCd['command-URL'] = 'NO_URL'
-    pCd['command-expected'] = 'machineStatusResponse'
-    pCd['command-expected-URL'] = 'http://lires.de/unsecure/esp/machine-status'
 
+    testData = {'test': 'Live-Daten', 'status': 'OK', 'counter': 0}
     client = mqtt.Client()
     client.connect(MQTT_BROKER, MQTT_PORT, 60)
-    client.publish(MQTT_TOPIC, json.dumps(pCd))
+    client.publish(MQTT_TOPIC, json.dumps(testData))
     client.disconnect()
 
-    return jsonify({"status": json.dumps(pCd)})
\ No newline at end of file
+    return jsonify({"status": json.dumps(testData)})
\ No newline at end of file
diff --git a/routes/shared.py b/routes/shared.py
index 42df8a0..68d4842 100644
--- a/routes/shared.py
+++ b/routes/shared.py
@@ -6,5 +6,5 @@ def reset_command():
         'command': None,
         'command-URL': None,
         'command-expected': None,
-        'command-expected-URL': None
+        'command-expected-topic': None
     }
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 83ba180..75f47de 100644
--- a/static/style.css
+++ b/static/style.css
@@ -116,7 +116,7 @@ header {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
-    max-height: 62vh;
+    max-height: 70vh;
     overflow-y: auto;
 }
 
@@ -134,11 +134,6 @@ header {
     transition: background 0.3s;
     position: relative;
 }
-
-.grid-button:hover {
-    background: #7f8c8d;
-    cursor: pointer;
-}
 /* Rahmen + Titel für den rechten Block */
 .stats-box {
     border: 2px solid #000;
@@ -182,8 +177,8 @@ header {
     position: absolute;
     top: 10px;
     left: 12px;
-    font-size: 20px;
-    color: #ff0000;
+    font-size: 24px;
+    color: #000000;
 }
 
 .clickable .center-number {
@@ -194,16 +189,36 @@ header {
 .grid-button .top-left-text {
     position: absolute;
     top: 10px;
-    left: 12px;
-    font-size: 20px;
-    color: #ff0000;
+    left: 16px;
+    font-size: 24px;
+    color: #000000;
 }
 .grid-button .center-number {
-    margin-top: 40px;
+    margin-top: 85px;
     width: 100%;
     height: 80%;
     font-size: 48px;
     font-weight: bold;
     color: #222;
     text-align: center;
-}
\ No newline at end of file
+}
+.deniePress:hover{
+    cursor: not-allowed;
+}
+.blink-orange {
+  background-color: orange;
+  animation: pulse-orange 1.0s infinite;
+}
+
+@keyframes pulse-orange {
+  0% { background-color: orange; }
+  50% { background-color: #fdbb57; } /* etwas heller */
+  100% { background-color: orange; }
+}
+.initBackRed {
+background-color: red;
+}
+.initBackRed:Hover{
+    background-color: rgb(255, 37, 37);
+}
+  
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index bd12029..b42607c 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -21,29 +21,30 @@
 
         <section class="left">
             <div class="info">ESP-Conn Infos</div>
-            <div class="action-button"> MAKE ME A COFFEE...</div>
+
             <div class="button-grid">
-                <div class="grid-button" onclick="toggleMachine()">
+                <div class="grid-button deniePress">
+                    <div class="top-left-text">Kaffeeee</div>
+                    <div class="center-number">Kaffee Machen</div>
+                </div>
+                <div class="grid-button initBackRed" id="machine-status-butt" onclick="toggleMachine()">
                     <div class="top-left-text">Maschine</div>
                     <div class="center-number" id="machine-status">AUS</div>
                 </div>
-                <div class="grid-button">
+                <div class="grid-button deniePress">
                     <div class="top-left-text">Maschiene</div>
                     <div class="center-number">Nicht Bereit</div>
                 </div>
-                <div class="grid-button">
-                    <div class="top-left-text">irgendwas kommt hier noch</div>
-                    <div class="center-number">XXX</div>
-                </div>
-                <div class="grid-button">
+
+                <div class="grid-button deniePress">
                     <div class="top-left-text">Fehler</div>
                     <div class="center-number">Wasser leer?</div>
                 </div>
-                <div class="grid-button">
+                <div class="grid-button deniePress">
                     <div class="top-left-text">Wasser</div>
                     <div class="center-number">Aufgefüllt</div>
                 </div>
-                <div class="grid-button">
+                <div class="grid-button deniePress">
                     <div class="top-left-text">Bohnen</div>
                     <div class="center-number">Nachgefüllt</div>
                 </div>
@@ -77,17 +78,19 @@
     </main>
     <script>
         function toggleMachine() {
-            fetch('/unsecure/esp/toggle-machine', { method: 'POST' })
-                .then(res => res.json())
-                .then(data => {
-                    //console.log(data);
-                    const inner = JSON.parse(data.status);
-                    if (inner.command === 'machineToggle') {
-                        document.getElementById("machine-status").innerText = "PENDING";
-                    } else {
-                        document.getElementById("machine-status").innerText = "SOME_ERR";
-                    }
-                });
+            document.getElementById("machine-status").innerText = "PENDING";
+            document.getElementById("machine-status-butt").classList.add("blink-orange");
+            // fetch('/unsecure/esp/toggle-machine', { method: 'POST' })
+            //     .then(res => res.json())
+            //     .then(data => {
+            //         //console.log(data);
+            //         const inner = JSON.parse(data.status);
+            //         if (inner.command === 'machineToggle') {
+
+            //         } else {
+            //             document.getElementById("machine-status").innerText = "SOME_ERR";
+            //         }
+            //     });
         }
     </script>
 </body>