XFiesta/templates/chat.html at main · sh4dman23/XFiesta · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
{% extends "layout.html" %}

{% block optional_c %}
    <link rel="stylesheet" href="/static/styles/inbox.css">
    <link rel="stylesheet" href="/static/styles/chat.css">
    <script src="/static/scripts/chat.js"></script>
{% endblock %}

{% block title %}
    Chat | @{{ user["username"] }}
{% endblock %}

{% block main %}
    <div id="main-container" class="main-container o-profile">
        <div style="display: flex; width: 100%; align-items: center;">
            <div id="go_back">
                <button class="action-button btn-big" type="button" onclick="history.back();"><img src="/static/images/back.png"></button>
            </div>
            <div class="top-bar">
                <a href="/profile/{{ user['username'] }}"><div class="profile-pic" style="width: 35px; height: 35px;"><img src="{% if user['pfp_location'] %} /{{ user['pfp_location']}} {% else %} /static/images/user_profile_pic.png {% endif %}"></div></a>
                <div style="margin-left: 0.5vw; text-align: left;">
                    <div class="name"><a href="/profile/{{ user['username'] }}" style="text-decoration: none; color: inherit;">{{ user['fullname'] }}</a></div>
                    <div class="username"><a href="/profile/{{ user['username'] }}" style="text-decoration: none; color: inherit;">@{{ user['username'] }}</a></div>
                </div>
            </div>
        </div>
        <div id="chat-container" class="chat-container">
            {% for message in messages %}
                <div name="message" id="{{ message['id'] }}" class="message-container">
                    <div class="top-part">
                        <div class="name name-chat" style="margin-right: 10px;"><a tabindex="-1" href="/profile/{{ message['sender_username'] }}">{{ message["sender_username"] }}</a></div>
                        <div class="name" style="font-weight: normal; margin-right: auto;">
                            {{ message["date"] }} {{ message["time"] }}
                        </div>
                        {% if message["sender_id"] == session["user_id"] %}
                            <div class="actions">
                                <button name="delete_message_button" class="action-button btn-big" value="{{ message['id'] }}" type="button">
                                    <img alt="Delete Message" src="/static/images/delete.png">
                                </button>
                                <button name="confirm_deletion" class="action-button" value="{{ message['id'] }}" style="display: none;" type="button">
                                    <img alt="Confirm Deletion" src="/static/images/Tick-logo.png" style="width: 15px;">
                                </button>
                                <button name="cancel_deletion" class="action-button" value="{{ message['id'] }}" style="display: none;" type="button">
                                    <img alt="Cancel Deletion" src="/static/images/cross-logo.png" style="width: 15px;">
                                </button>
                            </div>
                        {% endif %}
                    </div>
                    <p style="white-space: pre-line;">{{ message["contents"] }}</p>
                    <div name="warning" class="warning"></div>
                </div>
            {% endfor %}
            <div id="no_message">
                You don't seem to have any messages with this person.
                <br>
                Start a conversation by sending them a message!
            </div>
        </div>
        <div id="send_warning"></div>
        <div class="send-message">
            <textarea id="send_box" class="form-control send-box" placeholder="Send Message"></textarea>
            <div style="margin-top: auto; margin-bottom: auto;">
                <button id="send_button" class="btn btn-primary btn-prof">Send</button>
            </div>
        </div>
    </div>
    <script>
        const user_id = {{ user_id }};

        {% if inbox_id %}
            let inbox_id = {{ inbox_id }};
        {% else %}
            let inbox_id = null;
        {% endif %}

        {% if messages %}
            {% set last = messages|last %}
            let last_message_id = "{{ last.id }}";
        {% else %}
            let last_message_id = null;
        {% endif %}
    </script>
{% endblock %}