From b6bba140654c18687e05874e822cccbef6fea4fa Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan@jantuomi.fi>
Date: Mon, 17 Feb 2025 18:19:21 +0200
Subject: Improve templating

---
 browser/static/htmp.js                    | 10 ----------
 browser/static/styles.css                 | 10 ++++++++++
 browser/templates/frag_aside.html.j2      | 21 +++++++++++++++++----
 browser/templates/frag_aside_link.html.j2 |  9 +++++++++
 browser/templates/frag_error.html.j2      |  6 ++++++
 browser/templates/frag_form_find.html.j2  |  2 +-
 6 files changed, 43 insertions(+), 15 deletions(-)
 create mode 100644 browser/templates/frag_aside_link.html.j2

diff --git a/browser/static/htmp.js b/browser/static/htmp.js
index 36deae2..62956a4 100644
--- a/browser/static/htmp.js
+++ b/browser/static/htmp.js
@@ -39,13 +39,3 @@ document.querySelectorAll("form[htmp]").forEach(function (el) {
   el.action = action.toString();
   el.target = "htmp";
 });
-
-document.querySelectorAll("a[htmp]").forEach(function (el) {
-  const re = el.attributes.replace.value;
-
-  const href = new URL(el.href);
-  href.hash = re;
-  href.searchParams.set("htmp", re);
-  el.target = "htmp";
-  el.href = href.toString();
-});
diff --git a/browser/static/styles.css b/browser/static/styles.css
index 0faa49f..82bed74 100644
--- a/browser/static/styles.css
+++ b/browser/static/styles.css
@@ -78,6 +78,16 @@ input[type="submit"] {
     margin-top: 20px;
 }
 
+button.link,
+input[type="submit"].link {
+    background: none;
+    color: var(--blue);
+    padding: 0;
+    margin: 0;
+    text-decoration: underline;
+    font-family: "Inclusive Sans";
+}
+
 button.red,
 input[type="submit"].red {
     background-color: var(--red);
diff --git a/browser/templates/frag_aside.html.j2 b/browser/templates/frag_aside.html.j2
index 7ec10ad..6c5658f 100644
--- a/browser/templates/frag_aside.html.j2
+++ b/browser/templates/frag_aside.html.j2
@@ -1,13 +1,26 @@
+{#
+Params
+    selected_form   Form fragment to include
+#}
+
 <aside id="aside">
     <h3>Read operations</h3>
     <ul>
-        <li><a href="/find" htmp replace=form_query>Find</a></li>
-        <li><a href="/range" htmp replace=form_query>Range</a></li>
+        {% with href="/find", text="Find" %}
+            <li>{% include "frag_aside_link.html.j2" %}</li>
+        {% endwith %}
+        {% with href="/range", text="Range" %}
+            <li>{% include "frag_aside_link.html.j2" %}</li>
+        {% endwith %}
     </ul>
     <h3>Write operations</h3>
     <ul>
-        <li><a href="/upsert">Upsert</a></li>
-        <li><a href="/delete">Delete</a></li>
+        {% with href="/upsert", text="Upsert" %}
+            <li>{% include "frag_aside_link.html.j2" %}</li>
+        {% endwith %}
+        {% with href="/delete", text="Delete" %}
+            <li>{% include "frag_aside_link.html.j2" %}</li>
+        {% endwith %}
     </ul>
 
     {% include selected_form %}
diff --git a/browser/templates/frag_aside_link.html.j2 b/browser/templates/frag_aside_link.html.j2
new file mode 100644
index 0000000..9cd6041
--- /dev/null
+++ b/browser/templates/frag_aside_link.html.j2
@@ -0,0 +1,9 @@
+{#
+Params
+    text    Text to render in the link
+    href    URL to link to
+#}
+
+<form method="GET" action="{{ href }}" htmp replace=form_query>
+    <button class="link" type="submit">{{ text }}</button>
+</form>
diff --git a/browser/templates/frag_error.html.j2 b/browser/templates/frag_error.html.j2
index 092642f..c5034cd 100644
--- a/browser/templates/frag_error.html.j2
+++ b/browser/templates/frag_error.html.j2
@@ -1,3 +1,9 @@
+{#
+Params
+    error       Error message to display
+    container   (optional) id for a div to wrap the error message in
+#}
+
 {% if container %}
 <div id="{{ container }}">
 {% endif %}
diff --git a/browser/templates/frag_form_find.html.j2 b/browser/templates/frag_form_find.html.j2
index cadd44b..f527b45 100644
--- a/browser/templates/frag_form_find.html.j2
+++ b/browser/templates/frag_form_find.html.j2
@@ -1,4 +1,4 @@
-<form id="form_query" action="/find" method="post" htmp replace=results>
+<form id="form_query" action="/find" method="get" htmp replace=results>
     <label for="field">Field</label>
     <input type="text" name="field" id="field" required>
     <label for="values">Values (one per line)</label>
-- 
cgit v1.3