working version

a5/db.py

@@ -79,12 +79,12 @@ CREATE TABLE IF NOT EXISTS measurements
         return stats
 
     def get_page(self, page: int, page_size: int = 20) -> List[sqlite3.Row]:
-        """Gets a paged list of all measurements. Page is 0 indexed."""
+        """Gets a paged list of all measurements. Page is 1 indexed."""
         with closing(self._conn.cursor()) as cursor:
             cursor.execute(
                 # sql
                 "SELECT timestamp, tvoc, co2 FROM measurements ORDER BY timestamp DESC LIMIT ?, ?",
-                (page_size, (page - 1) * page_size),
+                ((page - 1) * page_size, page_size),
             )
             return cursor.fetchall()
 

a5/main.py

@@ -1,3 +1,4 @@
+from datetime import datetime
 from time import time
 
 from flask import Flask, g, render_template, request
@@ -10,6 +11,11 @@ app = Flask(__name__)
 htmx = HTMX(app)
 
 
+@app.template_filter()
+def format_datetime(value):
+    return datetime.fromtimestamp(value).isoformat()
+
+
 @app.route("/api/report", methods=["POST"])
 def report() -> ResponseReturnValue:
     """Adds a measurement"""
@@ -33,7 +39,7 @@ def stats() -> ResponseReturnValue:
     """Gets overall statistics as well as few recent measurements"""
     db = get_db()
     stats = db.get_stats()
-    recents = db.get_page(0, 10)
+    recents = db.get_page(1, 10)
     template = "page/index.html.j2"
     if htmx:
         template = "block/index.html.j2"

a5/templates/block/index.html.j2

@@ -1,10 +1,14 @@
-<div hx-get="/" hx-trigger="every 2s" hx-target="main"></div>
+<div hx-get="/?htmx" hx-trigger="every 2s" hx-target="main"></div>
 
 <h1>Overview</h1>
 
 <article class="card">
     <div class="contents">
-        Count {{ stats.count }}
+        <div>
+            <b>Count {{ stats.count }}</b> <br>
+            <b>TVOC min {{ stats.tvoc_min.tvoc }}</b> @ {{ stats.tvoc_min.timestamp|format_datetime }} <b>max {{ stats.tvoc_max.tvoc }}</b> @ {{ stats.tvoc_max.timestamp|format_datetime }} <br>
+            <b>CO2 min {{ stats.co2_min.co2 }}</b> @ {{ stats.co2_min.timestamp|format_datetime }} <b>max {{ stats.co2_max.co2 }}</b> @ {{ stats.co2_max.timestamp|format_datetime }}
+        </div>
     </div>
 </article>
 
@@ -14,8 +18,10 @@
     <article class="card">
         <div class="contents">
             <header>@ {{row['timestamp']}}</header>
-            CO2: {{row['co2']}}
-            TVOC: {{row['tvoc']}}
+            <div>
+                CO2: <b>{{row['co2']}}</b>
+                TVOC: <b>{{row['tvoc']}}</b>
+            </div>
         </div>
     </article>
 {% else %}

a5/templates/block/measurements.html.j2

@@ -1,4 +1,4 @@
-<div hx-get="/measurements" hx-trigger="every 2s" hx-target="main"></div>
+<div hx-get="/measurements?htmx" hx-trigger="every 2s" hx-target="main"></div>
 
 <h1>Measurements</h1>
 <p>Page {{page}}</p>
@@ -21,10 +21,10 @@
 
 <div>
     {% if page > 1 %}
-        <a href="/measurements?page={{page+1}}" class="btn btn-link">Previous page</a>
+        <a href="/measurements?page={{page+1}}" hx-get="/measurements?page={{page+1}}&htmx" hx-target="main" class="btn btn-link">Previous page</a>
     {% endif %}
     {% if has_next_page %}
-        <a href="/measurements?page={{page-1}}" class="btn btn-link">Next page</a>
+        <a href="/measurements?page={{page-1}}" hx-get="/measurements?page={{page-1}}&htmx" hx-target="main" class="btn btn-link">Next page</a>
     {% endif %}
 
     <a href="/" class="btn btn-link">View statistics</a>