plateforme-tfjm2/chat/templates/chat/chat.html

{% extends "base.html" %}

{% load static %}
{% load i18n %}

{% block content %}
    <noscript>
        {% trans "JavaScript must be enabled on your browser to access chat." %}
    </noscript>
    <div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h4 class="offcanvas-title" id="offcanvasExampleLabel">{% trans "Chat channels" %}</h4>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="list-group list-group-flush" id="nav-channels-tab">
                {% for channel in channels %}
                    <li class="list-group-item" id="tab-channel-{{ channel.id }}" data-bs-dismiss="offcanvas"
                        onclick="selectChannel({{ channel.id }})">
                        <button class="nav-link">{{ channel.name }}</button>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="card tab-content w-100 mh-100" style="height: 95vh" id="nav-channels-content">
        <div class="card-header">
            <h3>
                <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#channelSelector"
                        aria-controls="channelSelector" aria-expanded="false" aria-label="Toggle channel selector">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <span id="channel-title"></span>
            </h3>
        </div>
        <div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-messages">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">
                    <div class="fw-bold">Emmy D'Anello (CNO)</div>
                    Message 1
                </li>
                <li class="list-group-item">
                    <div class="fw-bold">Emmy D'Anello (CNO)</div>
                    Message 2
                </li>
                <li class="list-group-item">
                    <div class="fw-bold">Emmy D'Anello (CNO)</div>
                    Message 3
                </li>
            </ul>
        </div>
        <div class="card-footer mt-auto">
            <div class="input-group">
                <label for="input-message" class="input-group-text">
                    <i class="fas fa-comment"></i>
                </label>
                <input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autocomplete="off">
                <button class="input-group-text btn btn-success">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>
{% endblock %}

{% block extrajavascript %}
    {# This script contains all data for the chat management #}
    <script src="{% static 'chat.js' %}"></script>
{% endblock %}