From df4b62f2a1aa616e4038b1511b2e38cd956e6423 Mon Sep 17 00:00:00 2001
From: "Matthias P. Braendli" <matthias.braendli@mpb.li>
Date: Wed, 24 Jan 2024 22:25:00 +0100
Subject: Get Chat window working

---
 templates/chat.html | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

(limited to 'templates/chat.html')

diff --git a/templates/chat.html b/templates/chat.html
index 8411b01..f68b1da 100644
--- a/templates/chat.html
+++ b/templates/chat.html
@@ -1,34 +1,33 @@
 {% include "head.html" %}
 <div class="content h-full">
   <h1>Chat</h1>
-  <div class="section h-[96%]">
+  <div class="section h-[90vh]">
     <div class="m-2 h-full flex flex-col">
-      <div class="flex-1 grow">
+      <div id="messagelist" class="flex-1 grow overflow-scroll">
         <template id="message_template">
-          <div class="p-2 m-2 border-l-1 border-sky-100">
-            <div class="font-thin text-sky-400">Timestamp</div>
-            <div class="font-bold text-sky-900">FROM</div>
-            <div class="text-sky-800">Message</div>
+          <div class="p-2 border-l-2 border-sky-100 flex gap-4">
+            <div class="msg_timestamp flex-none font-thin text-sm text-sky-400">timestamp</div>
+            <div class="msg_from flex-none font-bold text-sky-900" onclick="call_clicked(this)">CALL-SSID</div>
+            <div class="msg_comment flex-1 text-sky-800">COMMENT</div>
           </div>
         </template>
         {% for packet in packets %}
         {% match packet.comment %}{% when Some with (comment) %}
         <div class="p-2 border-l-2 border-sky-100 flex gap-4">
-          <div class="flex-none font-thin text-sky-400">{{ packet.received_at_iso()|e }}</div>
-          <div class="flex-none font-bold text-sky-900">{{ packet.from_callsign|e }}-{{ packet.from_ssid|e }}</div>
-          <div class="flex-1 text-sky-800">{{ comment|e }}
-          </div>
+          <div class="flex-none font-thin text-sm text-sky-400">{{ packet.received_at_iso()|e }}</div>
+          <div class="flex-none font-bold text-sky-900" onclick="call_clicked(this)">{{ packet.from_callsign|e }}-{{ packet.from_ssid|e }}</div>
+          <div class="flex-1 text-sky-800">{{ comment|e }}</div>
         </div>
         {% when None %}{% endmatch %}
         {% endfor %}
       </div>
-      <div class="flex-none grow-0 h-12">
-        <div class="flex">
+      <div class="m-2 flex-none grow-0 h-16">
+        <div class="flex gap-2">
           <div class="flex-none">
-            <label for="dest">Message for:</label><input class="textinput" type="text" name="dest" value="" placeholder="callsign-ssid">
+            <label for="dest">Message for:</label><input class="textinput" type="text" id="dest" value="" placeholder="callsign-ssid">
           </div>
           <div class="flex-1">
-            <input class="textinput w-full" type="text" name="message" value="" placeholder="Type your message here">
+            <input class="textinput w-full" type="text" id="whisker_comment" value="" placeholder="Type your message here">
           </div>
           <div class="flex-none">
             <button class="btn" type="button" onclick="btn_chat_send_message()">Send</button>
-- 
cgit v1.2.3