use global variable, change styling

main.py

@@ -1,6 +1,7 @@
 import asyncio
 import json
 import aiomqtt
+from aiomqtt.error import MqttError
 from typing import Annotated
 from datetime import datetime
 from authlib.integrations.starlette_client import OAuth, OAuthError
@@ -47,30 +48,40 @@ class Settings(BaseSettings):
 }
 
 MAX_CHANGES = 10
+MQTT_TIMEOUT = 5
 
 class MQTTRunner:
     def __init__(self):
         self.started = False
 
     async def mqtt_loop(self):
-        async with aiomqtt.Client("10.0.1.17") as client:
-            async with client.messages() as messages:
-                await client.subscribe("sensor/c-leuse/status")
-                async for message in messages:
-                    now = datetime.now()
-                    payload = message.payload.decode()
-                    door_status['updated'] = now
-                    if door_status['current'] != payload:
-                        door_status['changes'].append({
-                            'from': door_status['current'],
-                            'to': payload,
-                            'when': now,
-                        })
-                        if len(door_status['changes']) > MAX_CHANGES:
-                            door_status['changes'] = door_status['changes'][:-MAX_CHANGES]
-                    door_status['current'] = payload
-
-        return None
+        global door_status
+        try:
+            async with aiomqtt.Client("10.0.1.17", timeout=MQTT_TIMEOUT) as client:
+                async with client.messages() as messages:
+                    await client.subscribe("sensor/c-leuse/status")
+                    async for message in messages:
+                        now = datetime.now()
+                        payload = message.payload.decode()
+                        door_status['updated'] = now
+                        if door_status['current'] != payload:
+                            door_status['changes'].append({
+                                'from': door_status['current'],
+                                'to': payload,
+                                'when': now,
+                            })
+                            if len(door_status['changes']) > MAX_CHANGES:
+                                door_status['changes'] = door_status['changes'][:-MAX_CHANGES]
+                        door_status['current'] = payload
+        except MqttError as error:
+            door_status['changes'].append({
+                'from': door_status['current'],
+                'to': 'unknown',
+                'when': datetime.now(),
+            })
+            door_status['updated'] = datetime.now()
+            door_status['current'] = f"'ERROR: {error}'"
+            await asyncio.sleep(2.0)
 
     async def run_main(self):
         self.started = True

static/css/style.css

@@ -1,9 +1,41 @@
 body {
+    background: #ccc;
     text-align: center;
     font-family: sans-serif;
 }
 
 .value {
-
+    margin: 10px auto;
+    width: fit-content;
+    padding: 10px;
     font-size: 23px;
+    background: #111;
+    color: #fff;
+    border: 2px solid #fff;
+}
+
+.value-open {
+    background: #35930d;
+}
+.value-shields-up {
+    background: rgb(170, 170, 0);
+}
+.value-shutdown {
+    background: #8a0000;
+}
+
+.changes {
+    font-family: 'Courier New', Courier, monospace;
+    padding: 10px;
+    background: #333;
+    color: lightgreen;
+    width: 50vw;
+    text-align: left;
+    margin: auto;
+}
+
+.explainer {
+    width: 50vw;
+    text-align: left;
+    margin: auto;
 }

templates/index.html

@@ -2,19 +2,24 @@
 
 {% block content %}
 <h1>Hello {{ user.preferred_username }}, c-base is:</h1>
-<div class="value">{{ status.current }}</div>
+<div class="value{% if status.current == 'open' %} value-open{% endif %}{% if status.current == 'shields_up'%} value-shields-up{% endif %}{% if status.current == 'shutdown'%} value-shutdown{% endif %}">{{ status.current }}</div>
 <div class="changes">
     {% for change in status.changes %}
     <div class="change-entry">
-        at {{ change.when }} status changed from {{ change.from }} to {{ change.to }}.
+        - at {{ change.when }} status changed from {{ change.from }} to {{ change.to }}.
     </div>
     {% endfor %}
 </div>
 <p><a href="/logout/">Logout</a></p>
-<p>
-    A "shields-up" or "open" status does not mean that c-base is necessarily open:
-    <ul>
-
-    </ul>
-</p>
+<div class="explainer">
+    <p>
+        A "shields-up" or "open" status does not mean that c-base is necessarily open:
+        <ul>
+            <li>Someone might just have opened the space to fetch something and leave right away.</li>
+            <li>The last cey-member might have to leave before you arrive at c-base.</li>
+            <li>Someone might have left the door in the wrong position.</li>
+        </ul>
+        If you want to be sure please call <a href="tel:+493028599300">+4930-285 993 00</a> if you need to be sure.
+    </p>
+</div>
 {% endblock content %}