tawny/app/templates_src/chats.lisp

(text "{% extends \"root.lisp\" %} {% block head %}")
(title
    (text "My chats — {{ config.name }}"))
(text "{% endblock %} {% block body %}")
(div
    ("class" "flex w_full gap_2 justify_between items_center")
    (div
        ("class" "tabs short bar")
        (a
            ("class" "button tab")
            ("href" "/chats")
            (text "chats")
            (text "{% if user.missed_messages_count > 0 -%}") (b (text "({{ user.missed_messages_count }})")) (text "{%- endif %}")))
    (button
        ("class" "button square")
        ("title" "Create chat")
        ("onclick" "document.getElementById('create_dialog').showModal()")
        (text "{{ icon \"plus\" }}")))
(div
    ("class" "card flex flex_col gap_2")
    (text "{% for chat in chats -%}")
    (div
        ("class" "card surface w_full flex justify_between items_center gap_2")
        (a
            ("class" "flush flex gap_ch items_center {% if not user.id in chat[0].last_message_read_by -%} yellow {%- endif %}")
            ("href" "/chats/{{ chat[0].id }}")
            (text "{{ components::chat_name(chat=chat[0], members=chat[1], advanced=true) }}"))
        (div
            ("class" "dropdown")
            (button
                ("onclick" "open_dropdown(event)")
                ("exclude" "dropdown")
                ("class" "button icon_only big_icon")
                (text "{{ icon \"ellipsis\" }}"))
            (div
                ("class" "inner")
                (a
                    ("class" "button")
                    ("href" "/chats/{{ chat[0].id }}")
                    ("target" "_blank")
                    (text "pop open"))

                (a
                    ("class" "button")
                    ("href" "/chats/{{ chat[0].id }}/manage")
                    (text "manage"))

                (button
                    ("class" "button red")
                    ("onclick" "leave_chat('{{ chat[0].id }}')")
                    (text "leave")))))
    (text "{%- endfor %}")

    (text "{% if chats|length == 0 -%}")
    (i ("class" "flex gap_ch items_center fade") (text "{{ icon \"smile\" }} No results, yet!"))
    (text "{%- endif %}")

    ; pagination
    (div
        ("class" "flex w_full items_center gap_2 justify_between")
        (text "{% if page > 0 -%}")
        (a
            ("href" "?page={{ page - 1 }}")
            ("class" "button surface")
            (text "{{ icon \"arrow-left\" }} Back"))
        (text "{%- else -%}")
        (div null?)
        (text "{%- endif %}")

        (text "{% if chats|length > 0 -%}")
        (a
            ("href" "?page={{ page + 1 }}")
            ("class" "button surface")
            (text "Next {{ icon \"arrow-right\" }}"))
        (text "{%- endif %}")))

(dialog
    ("id" "create_dialog")
    (div
        ("class" "inner")
        (h2
            ("class" "text_center w_full")
            (text "Create chat"))

        (ul ("id" "members_list"))
        (form
            ("class" "flex flex_row gap_2 w_full")
            ("onsubmit" "add_member(event)")
            (input
                ("type" "text")
                ("list" "users_search")
                ("name" "username")
                ("id" "username")
                ("placeholder" "username")
                ("oninput" "search_users(event)"))
            (button
                ("class" "button")
                (text "Add")))

        (hr ("class" "margin"))

        (div
            ("class" "flex gap_2 justify_between")
            (button
                ("onclick" "document.getElementById('create_dialog').close()")
                ("class" "button red")
                (text "Cancel"))

            (button
                ("class" "button green")
                ("onclick" "create_chat_from_form()")
                (text "Create")))))

(datalist ("id" "users_search"))

(script
    (text "globalThis.CHAT_MEMBERS = [];

    function render_members() {
        document.getElementById('members_list').innerHTML = \"\";
        for (const member of CHAT_MEMBERS) {
            document.getElementById('members_list').innerHTML += `<li>${member} (<a href=\"javascript:remove_member('${member}')\" class=\"red\">remove</a>)</li>`;
        }
    }

    function add_member(e) {
        e.preventDefault();
        const member = e.target.username.value;

        if (CHAT_MEMBERS.includes(member)) {
            return;
        }

        CHAT_MEMBERS.push(member);
        render_members();
        e.target.reset();
    }

    function remove_member(member) {
        CHAT_MEMBERS.splice(CHAT_MEMBERS.indexOf(member), 1);
        render_members();
    }

    function create_chat_from_form(e) {
        document.getElementById('create_dialog').close();

        fetch(\"/api/v1/chats\", {
            method: \"POST\",
            headers: {
                \"Content-Type\": \"application/json\",
            },
            body: JSON.stringify({
                style: CHAT_MEMBERS.length > 1 ? { Group: { name: \"Untitled\" } } : \"Direct\",
                members: CHAT_MEMBERS,
            }),
        })
            .then((res) => res.json())
            .then((res) => {
                show_message(res.message, res.ok);

                if (res.ok) {
                    window.location.href = `/chats/${res.payload}`;
                    e.target.reset();
                }
            });
    }"))

(script ("src" "/public/messages.js"))
(text "{% endblock %}")