Mercurial Hosting > chat
diff src/chat.html.luan @ 7:41d35b72c774
chat page
| author | Franklin Schmidt <fschmidt@gmail.com> |
|---|---|
| date | Tue, 29 Oct 2024 22:11:40 -0600 |
| parents | a49866b52cc2 |
| children | d654e3471132 |
line wrap: on
line diff
--- a/src/chat.html.luan Tue Oct 29 16:47:11 2024 -0600 +++ b/src/chat.html.luan Tue Oct 29 22:11:40 2024 -0600 @@ -13,7 +13,6 @@ local header = Shared.header or error() local User = require "site:/lib/User.luan" local current_user = User.current or error() -local get_user_by_id = User.get_by_id or error() local get_user_by_email = User.get_by_email or error() local Utils = require "site:/lib/Utils.luan" local to_set = Utils.to_set or error() @@ -23,18 +22,6 @@ local chat_search = Chat.search or error() -local function other_users(user,chat) - local my_id = user.id - local t = {} - for _, user_id in ipairs(chat.user_ids) do - if user_id ~= my_id then - local other_user = get_user_by_id(user_id) or error() - t[#t+1] = other_user.email - end - end - return concat( t, ", " ) -end - local function get_chat(with) local t = {} local ids = {} @@ -91,14 +78,69 @@ <html> <head> <% head() %> + <style> + body { + height: 100vh; + display: flex; + flex-direction: column; + } + div[content] { + margin-bottom: 0; + display: flex; + height: 100%; + margin-left: calc(3% - 8px); + } + div[chats] { + width: 250px; + padding-right: 8px; + } + div[chats] > div { + margin-top: 2px; + margin-bottom: 2px; + padding-top: 16px; + padding-bottom: 16px; + padding-left: 8px; + padding-right: 8px; + border-radius: 4px; + } + div[chats] > div:hover, + div[chats] > div[selected] { + background-color: LightBlue; + } + div[posts] { + padding-left: 8px; + border-left: 1px solid; + } + </style> + <script> + 'use strict'; + + let currentChatId = null; + + function selectChat(div) { + let chatId = div.getAttribute('chat'); + if( chatId === currentChatId ) + return; + let selected = div.parentNode.querySelector('[selected]'); + if( selected ) selected.removeAttribute('selected'); + div.setAttribute('selected',''); + ajax(`chat.js?chat=${chatId}`); + } + </script> </head> <body> <% header() %> <div content> - <h1>Chat</h1> -<% for _, chat in ipairs(chats) do %> - <p><%= other_users(user,chat) %></p> -<% end %> + <div chats> +<% + for _, chat in ipairs(chats) do +%> + <div chat="<%=chat.id%>" onclick="selectChat(this)"><%= chat.other_users_email(user) %></div> +<% + end +%> + </div> + <div posts></div> </div> </body> </html>