13 files changed, 61 insertions, 125 deletions
diff --git a/demo/templates/base.html.j2 b/demo/templates/base.html.j2
index 47b3f6c..06ab5fc 100644
--- a/demo/templates/base.html.j2
+++ b/demo/templates/base.html.j2
@@ -6,14 +6,25 @@
     <link rel="preload" href="/static/InclusiveSans-Regular.ttf" as="font" type="font/woff2" crossorigin="anonymous">
     <link rel="stylesheet" href="/static/styles.css"></link>
     {% block head_meta %}
-    <title>Database browser</title>
-    <meta name="description" content="Database browser for log_db">
+    <title>Demo chat app</title>
+    <meta name="description" content="Demo chat app">
     {% endblock %}
 </head>
 <body>
-  <h1><a href="/">Database browser</a></h1>
+  <h1><a href="/">Demo chat app</a></h1>
   {% block content %}{% endblock %}
 
+  <form id="refresh" action="/" hidden method="get" htmp replace="messages">
+      <input id="refresh_hidden" type="hidden" name="nonce" value="">
+  </form>
+
   <script src="/static/htmp.js"></script>
+  <script>
+  setInterval(() => {
+    console.log('refreshing');
+    document.getElementById('refresh_hidden').value = Date.now();
+    document.getElementById('refresh').submit();
+  }, 3000);
+  </script>
 </body>
 </html>
diff --git a/demo/templates/frag_aside.html.j2 b/demo/templates/frag_aside.html.j2
deleted file mode 100644
index 6c5658f..0000000
--- a/demo/templates/frag_aside.html.j2
+++ /dev/null
@@ -1,27 +0,0 @@
-{#
-Params
-    selected_form   Form fragment to include
-#}
-
-<aside id="aside">
-    <h3>Read operations</h3>
-    <ul>
-        {% 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>
-        {% 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 %}
-</aside>
diff --git a/demo/templates/frag_aside_link.html.j2 b/demo/templates/frag_aside_link.html.j2
deleted file mode 100644
index 9cd6041..0000000
--- a/demo/templates/frag_aside_link.html.j2
+++ /dev/null
@@ -1,9 +0,0 @@
-{#
-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/demo/templates/frag_error.html.j2 b/demo/templates/frag_error.html.j2
deleted file mode 100644
index c5034cd..0000000
--- a/demo/templates/frag_error.html.j2
+++ /dev/null
@@ -1,16 +0,0 @@
-{#
-Params
-    error       Error message to display
-    container   (optional) id for a div to wrap the error message in
-#}
-
-{% if container %}
-<div id="{{ container }}">
-{% endif %}
-
-<h2>Error</h2>
-{{ error }}
-
-{% if container %}
-</div>
-{% endif %}
diff --git a/demo/templates/frag_form_delete.html.j2 b/demo/templates/frag_form_delete.html.j2
deleted file mode 100644
index 22306c1..0000000
--- a/demo/templates/frag_form_delete.html.j2
+++ /dev/null
@@ -1,7 +0,0 @@
-<form id="form_query" action="/delete" method="post" htmp replace=results>
-    <label for="field">Field</label>
-    <input type="text" name="field" id="field" required>
-    <label for="value">Value</label>
-    <input type="text" name="value" id="value" required>
-    <button type="submit">Run query</button>
-</form>
diff --git a/demo/templates/frag_form_find.html.j2 b/demo/templates/frag_form_find.html.j2
deleted file mode 100644
index cadd44b..0000000
--- a/demo/templates/frag_form_find.html.j2
+++ /dev/null
@@ -1,7 +0,0 @@
-<form id="form_query" action="/find" method="post" htmp replace=results>
-    <label for="field">Field</label>
-    <input type="text" name="field" id="field" required>
-    <label for="values">Values (one per line)</label>
-    <textarea name="values" id="values" required></textarea>
-    <button type="submit">Run query</button>
-</form>
diff --git a/demo/templates/frag_form_range.html.j2 b/demo/templates/frag_form_range.html.j2
deleted file mode 100644
index 84b8024..0000000
--- a/demo/templates/frag_form_range.html.j2
+++ /dev/null
@@ -1,21 +0,0 @@
-<form id="form_query" action="/range" method="post" htmp replace=results>
-    <label for="field">Field</label>
-    <input type="text" name="field" id="field" required>
-    <label for="from_type">Lower bound type</label>
-    <select id="from_type" name="from_type" required>
-        <option value="unbounded">Unbounded</option>
-        <option value="included">Inclusive</option>
-        <option value="excluded">Exclusive</option>
-    </select>
-    <label for="values">Lower bound value</label>
-    <input type="text" name="from_value" id="from_value">
-    <label for="to_type">Upper bound type</label>
-    <select id="to_type" name="to_type" required>
-        <option value="unbounded">Unbounded</option>
-        <option value="included">Inclusive</option>
-        <option value="excluded">Exclusive</option>
-    </select>
-    <label for="values">Upper bound value</label>
-    <input type="text" name="to_value" id="to_value">
-    <button type="submit">Run query</button>
-</form>
diff --git a/demo/templates/frag_form_upsert.html.j2 b/demo/templates/frag_form_upsert.html.j2
deleted file mode 100644
index 68820f5..0000000
--- a/demo/templates/frag_form_upsert.html.j2
+++ /dev/null
@@ -1,5 +0,0 @@
-<form id="form_query" action="/upsert" method="post" htmp replace=results>
-    <label for="values">Values (one per line)</label>
-    <textarea name="values" id="values" required></textarea>
-    <button type="submit">Run query</button>
-</form>
diff --git a/demo/templates/frag_messages.html.j2 b/demo/templates/frag_messages.html.j2
new file mode 100644
index 0000000..0473d16
--- /dev/null
+++ b/demo/templates/frag_messages.html.j2
@@ -0,0 +1,12 @@
+{#
+Params
+    messages    List of message objects to display
+#}
+
+<div id="messages">
+    {% for m in messages %}
+    <div class="message">
+        <small>{{ m.ts }}</small> <strong>{{ m.username }}</strong>: {{ m.msg }}
+    </div>
+    {% endfor %}
+</div>
diff --git a/demo/templates/frag_results.html.j2 b/demo/templates/frag_results.html.j2
deleted file mode 100644
index bfb54e9..0000000
--- a/demo/templates/frag_results.html.j2
+++ /dev/null
@@ -1,18 +0,0 @@
-<table id="results">
-<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>
diff --git a/demo/templates/page_error.html.j2 b/demo/templates/page_error.html.j2
index 3233283..a3f260e 100644
--- a/demo/templates/page_error.html.j2
+++ b/demo/templates/page_error.html.j2
@@ -1,5 +1,12 @@
 {% extends "base.html.j2" %}
 
 {% block content %}
-{% include "frag_error.html.j2" %}
+<div id="container">
+<h2>Error</h2>
+<p>An error occurred while processing your request.</p>
+
+<pre>
+{{ error }}
+</pre>
+</div>
 {% endblock %}
diff --git a/demo/templates/page_index.html.j2 b/demo/templates/page_index.html.j2
new file mode 100644
index 0000000..2da14ab
--- /dev/null
+++ b/demo/templates/page_index.html.j2
@@ -0,0 +1,27 @@
+{% extends "base.html.j2" %}
+
+{% block content %}
+<div id="container">
+    <h2>Messages</h2>
+    {% include "frag_messages.html.j2" %}
+
+    <form id="send_form" action="/" method="post" htmp replace="messages">
+        <input required minlength="1" maxlength="20" type="text" name="username" placeholder="Username...">
+        <input required minlength="1" maxlength="140" type="text" name="message" placeholder="Message...">
+        <button type="submit">Send</button>
+    </form>
+
+    <script>
+    document.getElementById("send_form").addEventListener("submit", function(event) {
+        // add message immediately to #messages
+        const username = this.querySelector('input[name="username"]').value;
+        const message = this.querySelector('input[name="message"]').value;
+        const ts = new Date(Date.now()).toISOString().slice(0, 10);
+        const messages = document.getElementById("messages");
+        const newMessage = document.createElement("div");
+        newMessage.innerHTML = `<small>${ts}</small> <strong>${username}</strong>: ${message}`;
+        messages.prepend(newMessage);
+    });
+    </script>
+</div>
+{% endblock %}
diff --git a/demo/templates/page_main.html.j2 b/demo/templates/page_main.html.j2
deleted file mode 100644
index 907275f..0000000
--- a/demo/templates/page_main.html.j2
+++ /dev/null
@@ -1,11 +0,0 @@
-{% extends "base.html.j2" %}
-
-{% block content %}
-<div id="container">
-    {% include "frag_aside.html.j2" %}
-
-    <main id="main">
-        {% include "frag_results.html.j2" %}
-    </main>
-</div>
-{% endblock %}