From e17048eddfe2df86abd2d498da2a33b9c3dd8a72 Mon Sep 17 00:00:00 2001
From: Jan Tuomi <jan@jantuomi.fi>
Date: Fri, 2 May 2025 23:38:23 +0300
Subject: Add sort_asc param, impl demo chat app

---
 demo/templates/page_index.html.j2 | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 demo/templates/page_index.html.j2

(limited to 'demo/templates/page_index.html.j2')

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 %}
-- 
cgit v1.3