generated from t/malachite
add: working chat ui
This commit is contained in:
parent
f53eb3d367
commit
b360c5e737
14 changed files with 319 additions and 53 deletions
|
@ -19,30 +19,16 @@
|
|||
("style" "flex: 1 0 auto")
|
||||
(div
|
||||
("class" "card flex flex_rev_col gap_2")
|
||||
("style" "flex: 1 0 auto")
|
||||
("style" "flex: 1 0 auto; max-height: 80dvh; overflow: auto")
|
||||
("id" "messages_stream")
|
||||
(text "{% if chat.last_message_created > 0 -%}")
|
||||
(div
|
||||
("class" "flex gap_ch items_center")
|
||||
("id" "delivered_read_status")
|
||||
(text "{% if chat.last_message_read_by|length <= 1 -%}")
|
||||
; just delivered
|
||||
(text "{{ icon \"check\" }}")
|
||||
(text "{{ chat.last_message_created|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC }}")
|
||||
(text "{%- else -%}")
|
||||
; delivered and read by at least two people
|
||||
(text "{{ icon \"check-check\" }}")
|
||||
(text "{% for uid in chat.last_message_read_by -%}")
|
||||
(text "{{ components::avatar(id=uid) }}")
|
||||
(text "{%- endfor %}")
|
||||
(text "{%- endif %}"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
(text "{% if messages|length == 0 -%}")
|
||||
(i ("class" "flex gap_ch items_center fade") (text "{{ icon \"star\" }} This is the start of the chat!"))
|
||||
(text "{%- endif %}"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
(div ("ui_ident" "data_marker")))
|
||||
(form
|
||||
("class" "card flex flex_row items_center gap_2")
|
||||
("onsubmit" "create_message(event)")
|
||||
(input
|
||||
("type" "text")
|
||||
("class" "w_full")
|
||||
|
@ -53,6 +39,10 @@
|
|||
("class" "button")
|
||||
(text "{{ icon \"send\" }}"))))
|
||||
|
||||
(script ("src" "/public/messages.js"))
|
||||
(script
|
||||
(text ""))
|
||||
(text "create_streamer(\"{{ chat.id }}\", document.querySelector(\"[ui_ident=data_marker]\"));
|
||||
sock_con();
|
||||
mark_message_read();
|
||||
read_receipt();"))
|
||||
(text "{% endblock %}")
|
||||
|
|
|
@ -22,18 +22,18 @@
|
|||
; advanced
|
||||
(text "{% if chat.style == \"Direct\" -%} {% for member in members -%} {% if member.id != user.id -%}")
|
||||
; direct message; user that ISN'T the current user
|
||||
(text "{{ components::avatar(id=member.id, size=avatar_size) }}")
|
||||
(text "{{ components::username(user=member) }}")
|
||||
(text "{{ self::avatar(id=member.id, size=avatar_size) }}")
|
||||
(text "{{ self::username(user=member) }}")
|
||||
(text "{%- endif %} {%- endfor %} {%- else -%}")
|
||||
; group chat
|
||||
(text "{% for member in members -%} {{ components::avatar(id=member.id, size=avatar_size) }} {%- endfor %}")
|
||||
(text "{% for member in members -%} {{ self::avatar(id=member.id, size=avatar_size) }} {%- endfor %}")
|
||||
(b (text "{{ chat.style.Group.name }}"))
|
||||
(text "{%- endif %}")
|
||||
(text "{%- else -%}")
|
||||
; NOT advanced
|
||||
(text "{% if chat.style == \"Direct\" -%} {% for member in members -%} {% if member.id != user.id -%}")
|
||||
; direct message; user that ISN'T the current user
|
||||
(text "{{ user.username }}")
|
||||
(text "{{ member.username }}")
|
||||
(text "{%- endif %} {%- endfor %} {%- else -%}")
|
||||
; group chat
|
||||
(text "{{ chat.style.Group.name }}")
|
||||
|
@ -44,8 +44,9 @@
|
|||
(text "{% macro message(message) -%}")
|
||||
(div
|
||||
("class" "flex w_full gap_ch message {%- if user.id == message.owner %} justify_right mine {%- endif %}")
|
||||
("id" "message_{{ message.id }}")
|
||||
(div
|
||||
("class" "inner no_p_margin")
|
||||
(text "{{ message.content|markdown|safe }}"))
|
||||
(text "{{ components::avatar(id=uid) }}"))
|
||||
(text "{{ self::avatar(id=message.owner) }}"))
|
||||
(text "{%- endmacro %}")
|
||||
|
|
|
@ -101,7 +101,7 @@
|
|||
|
||||
// redirect
|
||||
setTimeout(() => {
|
||||
window.location.href = \"/app\";
|
||||
window.location.href = \"/chats\";
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -1,2 +1,2 @@
|
|||
(text "{%- import \"components.lisp\" as components -%}")
|
||||
(text "{{ components::message(message) }}")
|
||||
(text "{{ components::message(message=message) }}")
|
||||
|
|
|
@ -1,4 +1,15 @@
|
|||
(text "{%- import \"components.lisp\" as components -%}")
|
||||
(text "{% for message in messages -%}")
|
||||
(text "{{ components::message(message) }}")
|
||||
(text "{{ components::message(message=message) }}")
|
||||
(text "{%- endfor %}")
|
||||
|
||||
(div
|
||||
("class" "hidden")
|
||||
("id" "msgs_data_{{ id }}")
|
||||
("data-first-message-time" "{{ first_message_time }}"))
|
||||
|
||||
(text "{% if messages|length == 0 -%}")
|
||||
(div
|
||||
("class" "hidden")
|
||||
("id" "msgs_quit_{{ id }}"))
|
||||
(text "{%- endif %}")
|
||||
|
|
17
app/templates_src/read_receipt.lisp
Normal file
17
app/templates_src/read_receipt.lisp
Normal file
|
@ -0,0 +1,17 @@
|
|||
(text "{%- import \"components.lisp\" as components -%}")
|
||||
(text "{% if chat.last_message_created > 0 -%}")
|
||||
(div
|
||||
("class" "flex gap_ch items_center")
|
||||
("id" "delivered_read_status")
|
||||
(text "{% if chat.last_message_read_by|length <= 1 -%}")
|
||||
; just delivered
|
||||
(text "{{ icon \"check\" }}")
|
||||
(text "{{ chat.last_message_created|int|date(format=\"%H:%M\", timezone=\"Etc/UTC\") }} UTC")
|
||||
(text "{%- else -%}")
|
||||
; delivered and read by at least two people
|
||||
(text "{{ icon \"check-check\" }}")
|
||||
(text "{% for uid in chat.last_message_read_by -%}")
|
||||
(text "{{ components::avatar(id=uid) }}")
|
||||
(text "{%- endfor %}")
|
||||
(text "{%- endif %}"))
|
||||
(text "{%- endif %}")
|
Loading…
Add table
Add a link
Reference in a new issue