diff options
| author | Matthias P. Braendli <matthias.braendli@mpb.li> | 2024-01-24 17:29:33 +0100 |
|---|---|---|
| committer | Matthias P. Braendli <matthias.braendli@mpb.li> | 2024-01-24 17:29:33 +0100 |
| commit | 67441f813917d0a9c6624ec04ddc08d89ec2b3bc (patch) | |
| tree | 8071903dc1c6982daa2fd84e2cc867e276c1160e /templates | |
| parent | 82f6ce1b1f003903c0e8ffceafe17682ecd7fb88 (diff) | |
| download | cats-radio-node-67441f813917d0a9c6624ec04ddc08d89ec2b3bc.tar.gz cats-radio-node-67441f813917d0a9c6624ec04ddc08d89ec2b3bc.tar.bz2 cats-radio-node-67441f813917d0a9c6624ec04ddc08d89ec2b3bc.zip | |
Work on chat page
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/chat.html | 38 | ||||
| -rw-r--r-- | templates/dashboard.html | 2 | ||||
| -rw-r--r-- | templates/head.html | 4 | ||||
| -rw-r--r-- | templates/send.html | 14 |
4 files changed, 49 insertions, 9 deletions
diff --git a/templates/chat.html b/templates/chat.html index 584bde5..8411b01 100644 --- a/templates/chat.html +++ b/templates/chat.html @@ -1,6 +1,42 @@ {% include "head.html" %} -<div class="content"> +<div class="content h-full"> <h1>Chat</h1> + <div class="section h-[96%]"> + <div class="m-2 h-full flex flex-col"> + <div class="flex-1 grow"> + <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> + </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> + {% when None %}{% endmatch %} + {% endfor %} + </div> + <div class="flex-none grow-0 h-12"> + <div class="flex"> + <div class="flex-none"> + <label for="dest">Message for:</label><input class="textinput" type="text" name="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"> + </div> + <div class="flex-none"> + <button class="btn" type="button" onclick="btn_chat_send_message()">Send</button> + </div> + </div> + </div> + </div> + </div> </div> {% include "foot.html" %} {# vi:set et sw=2 ts=2: #} diff --git a/templates/dashboard.html b/templates/dashboard.html index a58bec6..029993b 100644 --- a/templates/dashboard.html +++ b/templates/dashboard.html @@ -10,7 +10,7 @@ <h2>Ten most recent packets</h2> <ul> {% for packet in packets %} - <li>{{ packet.received_at|e }} <b>{{ packet.from_callsign|e }}-{{ packet.from_ssid|e }}</b> + <li>{{ packet.received_at_iso()|e }} <b>{{ packet.from_callsign|e }}-{{ packet.from_ssid|e }}</b> {% match packet.comment %}{% when Some with (val) %}{{ val|e }}{% when None %}N/A{% endmatch %} </li> {% endfor %} diff --git a/templates/head.html b/templates/head.html index 3c611ed..fd0afe4 100644 --- a/templates/head.html +++ b/templates/head.html @@ -6,7 +6,9 @@ <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/static/style.css" type="text/css"> <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css"> - <script src="/static/main.js" defer></script> + {% for js in page.styles() %} + <script src="/static/{{ js }}.js" defer></script> + {% endfor %} </head> <body> <div class="flex"> diff --git a/templates/send.html b/templates/send.html index b3bccab..f90d447 100644 --- a/templates/send.html +++ b/templates/send.html @@ -1,9 +1,11 @@ {% include "head.html" %} <div class="content"> <h1>Send a frame</h1> - <p>One main feature of CATS is that packets are constructed from Whiskers. - Each Whisker represents one possible attribute of data.</p> - <p>On this page you can select which whiskers to include in your packet.</p> + <div class="section"> + <p>One main feature of CATS is that packets are constructed from Whiskers. + Each Whisker represents one possible attribute of data.</p> + <p>On this page you can select which whiskers to include in your packet.</p> + </div> <div class="section"> <h2>Identification</h2> @@ -19,11 +21,11 @@ <p class="destination"> <input class="textinput dest_callsign" type="text" placeholder="Type callsign here"> <input class="textinput dest_ssid" type="text" placeholder="Type SSID here"> - <button class="btn" type="button" onclick="btn_remove_destination(this)">Remove</button> + <button class="btn" type="button" onclick="btn_send_remove_destination(this)">Remove</button> </p> </template> <div id="destinations"></div> - <button class="btn" type="button" onclick="btn_add_destination()">Add destination</button> + <button class="btn" type="button" onclick="btn_send_add_destination()">Add destination</button> </div> <div class="section"> <h2>Comment Whisker</h2> @@ -58,7 +60,7 @@ </div>--> <div class="section"> - <button class="btn" type="button" onclick="btn_send_packet()">Send</button> + <button class="btn" type="button" onclick="btn_send_send()">Send</button> </div> </div> {% include "foot.html" %} |