Display devices and there status

app.py

@@ -50,6 +50,12 @@ def home():
     return render_template('base.html')
 
 
+@ app.route("/devices")
+def devices():
+    devices = db.get_devices()
+    return render_template('devices.html', devices=devices)
+
+
 @app.route("/overview")
 def overview():
     cadences = db.get_all_cadences()

db.py

@@ -42,3 +42,17 @@ class DataBase():
 
     def get_all_cadences(self):
         return self.execute('SELECT * FROM cadence')
+
+    def get_devices(self):
+        return self.execute("""
+        SELECT DEVICE.ID,
+	        DEVICE.NAME,
+	        MAX(CADENCE.LOGGED_AT) AS LAST_LOGGED_AT,
+	        CASE WHEN(NOW() < (MAX(CADENCE.LOGGED_AT) + (INTERVAL '5 min'))) THEN 'yes'
+				ELSE 'no'
+	        END AS IS_ACTIVE
+        FROM DEVICE
+        LEFT JOIN CADENCE ON DEVICE.ID = CADENCE.DEVICE_ID
+        GROUP BY DEVICE.ID
+        ORDER BY LAST_LOGGED_AT
+        """)

graph.py

@@ -14,6 +14,10 @@ custom_style = Style(
 
 
 def generate_graph(x_labels, data, style=custom_style):
+    """
+    Generate SVG line graph using pygal
+    example usage: generate_graph([1,2,3], [("RPM", [1,2,3]),("Power", [2,4,6])]) 
+    """
     graph = pygal.Line(show_y_guides=False,
                        show_legend=False, style=style)
     graph.x_labels = x_labels

templates/base.html

@@ -15,6 +15,8 @@
     <div class="h-full w-full bg-gray-50 relative overflow-y-auto">
         <main>
             <div class="px-4 container mx-auto pt-8" id="container">
+                <div hx-get="{{ url_for('devices') }}" hx-trigger="load">
+                </div>
                 <div hx-get="{{ url_for('overview') }}" hx-trigger="load, every 2s">
                 </div>
             </div>

templates/devices.html

@@ -0,0 +1,26 @@
+<div class="relative overflow-x-auto">
+    <table class="lg:w-1/4 sm:w-full text-sm text-left text-gray-500 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+                <th scope="col" class="px-6 py-3">
+                    Name
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Status
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for d in devices %}
+            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 cursor-pointer">
+                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                    {{d['name']}}
+                </th>
+                <td class="px-6 py-4">
+                    {{d['is_active']}}
+                </td>
+            </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>