Add sort_asc param, impl demo chat app

1 files changed, 27 insertions, 0 deletions

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 %}