From e8f3a470ce693bef9303d3dd4c46523cdc691826 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan@jantuomi.fi>
Date: Tue, 11 Feb 2025 12:12:37 +0200
Subject: Add structure, introduce progressive enhancement

---
 browser/app.py                            | 34 +++++++++++++++----------------
 browser/static/styles.css                 |  6 +++---
 browser/templates/aside.html.j2           | 16 ---------------
 browser/templates/base.html.j2            | 21 ++++++++++++++++---
 browser/templates/error.html.j2           |  6 ------
 browser/templates/form_find.html.j2       |  6 ------
 browser/templates/form_range.html.j2      |  8 --------
 browser/templates/frag_aside.html.j2      | 14 +++++++++++++
 browser/templates/frag_error.html.j2      | 10 +++++++++
 browser/templates/frag_form_find.html.j2  |  7 +++++++
 browser/templates/frag_form_range.html.j2 |  9 ++++++++
 browser/templates/index.html.j2           | 28 -------------------------
 browser/templates/page_error.html.j2      |  5 +++++
 browser/templates/page_main.html.j2       | 28 +++++++++++++++++++++++++
 14 files changed, 110 insertions(+), 88 deletions(-)
 delete mode 100644 browser/templates/aside.html.j2
 delete mode 100644 browser/templates/error.html.j2
 delete mode 100644 browser/templates/form_find.html.j2
 delete mode 100644 browser/templates/form_range.html.j2
 create mode 100644 browser/templates/frag_aside.html.j2
 create mode 100644 browser/templates/frag_error.html.j2
 create mode 100644 browser/templates/frag_form_find.html.j2
 create mode 100644 browser/templates/frag_form_range.html.j2
 delete mode 100644 browser/templates/index.html.j2
 create mode 100644 browser/templates/page_error.html.j2
 create mode 100644 browser/templates/page_main.html.j2

(limited to 'browser')

diff --git a/browser/app.py b/browser/app.py
index 1398e93..ebe590d 100644
--- a/browser/app.py
+++ b/browser/app.py
@@ -5,7 +5,7 @@ import os
 import sys
 import traceback
 import tempfile
-from flask import Flask, render_template
+from flask import Flask, render_template, request
 from flask_compress import Compress # type: ignore
 
 from log_db import DB, Bound
@@ -28,21 +28,19 @@ db = DB \
     .secondary_keys(["name"]) \
     .initialize()
 
-def error_page(message: str, code: int = 400):
-    return render_template("error.html.j2", error = message), code
-
-@app.errorhandler(404)
-def not_found(e: Exception):
-    return error_page("Not found", 404)
-
-@app.errorhandler(405)
-def method_not_allowed(e: Exception):
-    return error_page(str(e), 405)
-
 @app.errorhandler(Exception)
 def error_handler(e: Exception):
-    traceback.print_exception(e, file=sys.stderr)
-    return error_page("Internal server error", 500)
+    if e.code >= 500: # type: ignore
+        traceback.print_exception(e, file=sys.stderr)
+        error_text = "Internal Server Error"
+    else:
+        error_text = str(e)
+
+    htmz_target = request.form.get("htmz")
+    if htmz_target:
+        return render_template("frag_error.html.j2", error = error_text, container = htmz_target)
+    else:
+        return render_template("page_error.html.j2", error = error_text)
 
 @app.get("/")
 def index():
@@ -52,8 +50,8 @@ def index():
 def page_find():
     rows = db.range_by("id", Bound.unbounded(), Bound.unbounded(), limit=100)
 
-    return render_template('index.html.j2',
-        selected_form = "form_find.html.j2",
+    return render_template('page_main.html.j2',
+        selected_form = "frag_form_find.html.j2",
         field_names = ["id", "name"],
         rows = rows,
     )
@@ -62,8 +60,8 @@ def page_find():
 def page_range():
     rows = db.range_by("id", Bound.unbounded(), Bound.unbounded(), limit=100)
 
-    return render_template('index.html.j2',
-        selected_form = "form_range.html.j2",
+    return render_template('page_main.html.j2',
+        selected_form = "frag_form_range.html.j2",
         field_names = ["id", "name"],
         rows = rows,
     )
diff --git a/browser/static/styles.css b/browser/static/styles.css
index 73379e7..0faa49f 100644
--- a/browser/static/styles.css
+++ b/browser/static/styles.css
@@ -31,7 +31,7 @@ body {
     line-height: 24px;
 }
 
-main {
+#container {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
@@ -104,11 +104,11 @@ input[type*="date"]:disabled {
     color: var(--gray);
 }
 
-main > aside {
+aside {
     width: 250px;
 }
 
-main > .results {
+main {
     flex: 1;
     overflow-y: scroll;
     max-height: 100%;
diff --git a/browser/templates/aside.html.j2 b/browser/templates/aside.html.j2
deleted file mode 100644
index eb8c9cf..0000000
--- a/browser/templates/aside.html.j2
+++ /dev/null
@@ -1,16 +0,0 @@
-{% block aside %}
-<aside>
-    <h3>Read operations</h3>
-    <ul>
-        <li><a href="/find">Find</a></li>
-        <li><a href="/range">Range</a></li>
-    </ul>
-    <h3>Write operations</h3>
-    <ul>
-        <li><a href="/upsert">Upsert</a></li>
-        <li><a href="/delete">Delete</a></li>
-    </ul>
-
-    {% include selected_form %}
-</aside>
-{% endblock %}
diff --git a/browser/templates/base.html.j2 b/browser/templates/base.html.j2
index a8a6cf7..8b41a85 100644
--- a/browser/templates/base.html.j2
+++ b/browser/templates/base.html.j2
@@ -9,12 +9,27 @@
     <title>Database browser</title>
     <meta name="description" content="Database browser for log_db">
     {% endblock %}
-
-    <!-- -- https://leanrada.com/htmz/ -->
-    <iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
 </head>
 <body>
   <h1><a href="/">Database browser</a></h1>
   {% block content %}{% endblock %}
+
+  <!-- https://leanrada.com/htmz/ -->
+  <iframe hidden name=htmz onload="setTimeout(()=>document.querySelector(contentWindow.location.hash||null)?.replaceWith(...contentDocument.body.childNodes))"></iframe>
+  <!-- Enable progressive enhancement for htmz -->
+  <script>
+  document.querySelectorAll("form[htmz]").forEach(function (element) {
+    const input = document.createElement("input");
+    input.type = "hidden";
+    input.name = "htmz";
+    input.value = element.attributes.replace.value;
+    element.appendChild(input);
+
+    const action = new URL(element.action);
+    action.hash = element.attributes.replace.value;
+    element.action = action.toString();
+    element.target = "htmz";
+  });
+  </script>
 </body>
 </html>
diff --git a/browser/templates/error.html.j2 b/browser/templates/error.html.j2
deleted file mode 100644
index 2d0dc19..0000000
--- a/browser/templates/error.html.j2
+++ /dev/null
@@ -1,6 +0,0 @@
-{% extends "base.html.j2" %}
-
-{% block content %}
-<h2>Error</h2>
-{{ error }}
-{% endblock %}
diff --git a/browser/templates/form_find.html.j2 b/browser/templates/form_find.html.j2
deleted file mode 100644
index 54608b6..0000000
--- a/browser/templates/form_find.html.j2
+++ /dev/null
@@ -1,6 +0,0 @@
-<form action="/find" method="post">
-    <label for="field">Field</label>
-    <input type="text" name="field" id="field" required>
-    <label for="values">Values</label>
-    <input type="text" name="values" id="values" required>
-    <button type="submit">Run query</button>
diff --git a/browser/templates/form_range.html.j2 b/browser/templates/form_range.html.j2
deleted file mode 100644
index 76eb4d2..0000000
--- a/browser/templates/form_range.html.j2
+++ /dev/null
@@ -1,8 +0,0 @@
-<form action="/range" method="post">
-    <label for="field">Field</label>
-    <input type="text" name="field" id="field" required>
-    <label for="values">From...</label>
-    <input type="text" name="from" id="from" required>
-    <label for="values">...To</label>
-    <input type="text" name="to" id="to" required>
-    <button type="submit">Run query</button>
diff --git a/browser/templates/frag_aside.html.j2 b/browser/templates/frag_aside.html.j2
new file mode 100644
index 0000000..8366436
--- /dev/null
+++ b/browser/templates/frag_aside.html.j2
@@ -0,0 +1,14 @@
+<aside id="aside">
+    <h3>Read operations</h3>
+    <ul>
+        <li><a href="/find">Find</a></li>
+        <li><a href="/range">Range</a></li>
+    </ul>
+    <h3>Write operations</h3>
+    <ul>
+        <li><a href="/upsert">Upsert</a></li>
+        <li><a href="/delete">Delete</a></li>
+    </ul>
+
+    {% include selected_form %}
+</aside>
diff --git a/browser/templates/frag_error.html.j2 b/browser/templates/frag_error.html.j2
new file mode 100644
index 0000000..f014f0a
--- /dev/null
+++ b/browser/templates/frag_error.html.j2
@@ -0,0 +1,10 @@
+{% if container %}
+<{{ container }}>
+{% endif %}
+
+<h2>Error</h2>
+{{ error }}
+
+{% if container %}
+</{{ container }}>
+{% endif %}
diff --git a/browser/templates/frag_form_find.html.j2 b/browser/templates/frag_form_find.html.j2
new file mode 100644
index 0000000..a8fe493
--- /dev/null
+++ b/browser/templates/frag_form_find.html.j2
@@ -0,0 +1,7 @@
+<form action="/find" method="post" htmz replace=main>
+    <label for="field">Field</label>
+    <input type="text" name="field" id="field" required>
+    <label for="values">Values</label>
+    <input type="text" name="values" id="values" required>
+    <button type="submit">Run query</button>
+</form>
diff --git a/browser/templates/frag_form_range.html.j2 b/browser/templates/frag_form_range.html.j2
new file mode 100644
index 0000000..b343b6d
--- /dev/null
+++ b/browser/templates/frag_form_range.html.j2
@@ -0,0 +1,9 @@
+<form action="/range" method="post" htmz replace=main>
+    <label for="field">Field</label>
+    <input type="text" name="field" id="field" required>
+    <label for="values">From...</label>
+    <input type="text" name="from" id="from" required>
+    <label for="values">...To</label>
+    <input type="text" name="to" id="to" required>
+    <button type="submit">Run query</button>
+</form>
diff --git a/browser/templates/index.html.j2 b/browser/templates/index.html.j2
deleted file mode 100644
index 9713944..0000000
--- a/browser/templates/index.html.j2
+++ /dev/null
@@ -1,28 +0,0 @@
-{% extends "base.html.j2" %}
-
-{% block content %}
-<main>
-    {% include "aside.html.j2" %}
-
-    <div class="results">
-        <table>
-        <thead>
-            <tr>
-            {% for field_name in field_names %}
-                <th>{{ field_name }}</th>
-            {% endfor %}
-            </tr>
-        </thead>
-        <tbody>
-            {% for row in rows %}
-            <tr>
-            {% for field in row %}
-                <td>{{ field }}</td>
-            {% endfor %}
-            </tr>
-            {% endfor %}
-        </tbody>
-        </table>
-    </div>
-</main>
-{% endblock %}
diff --git a/browser/templates/page_error.html.j2 b/browser/templates/page_error.html.j2
new file mode 100644
index 0000000..3233283
--- /dev/null
+++ b/browser/templates/page_error.html.j2
@@ -0,0 +1,5 @@
+{% extends "base.html.j2" %}
+
+{% block content %}
+{% include "frag_error.html.j2" %}
+{% endblock %}
diff --git a/browser/templates/page_main.html.j2 b/browser/templates/page_main.html.j2
new file mode 100644
index 0000000..8ce4a13
--- /dev/null
+++ b/browser/templates/page_main.html.j2
@@ -0,0 +1,28 @@
+{% extends "base.html.j2" %}
+
+{% block content %}
+<div id="container">
+    {% include "frag_aside.html.j2" %}
+
+    <main id="main">
+        <table>
+        <thead>
+            <tr>
+            {% for field_name in field_names %}
+                <th>{{ field_name }}</th>
+            {% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+            {% for row in rows %}
+            <tr>
+            {% for field in row %}
+                <td>{{ field }}</td>
+            {% endfor %}
+            </tr>
+            {% endfor %}
+        </tbody>
+        </table>
+    </main>
+</div>
+{% endblock %}
-- 
cgit v1.3