126 lines
6.9 KiB
HTML
126 lines
6.9 KiB
HTML
{% load i18n %}
|
|
|
|
<noscript>
|
|
{# Le chat fonctionne à l'aide d'un script JavaScript, sans JavaScript activé il n'est pas possible d'utiliser le chat. #}
|
|
{% trans "JavaScript must be enabled on your browser to access chat." %}
|
|
</noscript>
|
|
<div class="offcanvas offcanvas-start" tabindex="-1" id="channelSelector" aria-labelledby="offcanvasTitle">
|
|
<div class="offcanvas-header">
|
|
{# Titre du sélecteur de canaux #}
|
|
<h3 class="offcanvas-title" id="offcanvasTitle">{% trans "Chat channels" %}</h3>
|
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body">
|
|
{# Contenu du sélecteur de canaux #}
|
|
<div class="form-switch form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="sort-by-unread-switch">
|
|
<label class="form-check-label" for="sort-by-unread-switch">{% trans "Sort by unread messages" %}</label>
|
|
</div>
|
|
<ul class="list-group list-group-flush" id="nav-channels-tab">
|
|
{# Liste des différentes catégories, avec les canaux par catégorie #}
|
|
<li class="list-group-item d-none">
|
|
{# Canaux généraux #}
|
|
<h4>{% trans "General channels" %}</h4>
|
|
<ul class="list-group list-group-flush" id="nav-general-channels-tab"></ul>
|
|
</li>
|
|
<li class="list-group-item d-none">
|
|
{# Canaux liés à un tournoi #}
|
|
<h4>{% trans "Tournament channels" %}</h4>
|
|
<ul class="list-group list-group-flush" id="nav-tournament-channels-tab"></ul>
|
|
</li>
|
|
<li class="list-group-item d-none">
|
|
{# Canaux d'équipes #}
|
|
<h4>{% trans "Team channels" %}</h4>
|
|
<ul class="list-group list-group-flush" id="nav-team-channels-tab"></ul>
|
|
</li>
|
|
<li class="list-group-item d-none">
|
|
{# Échanges privés #}
|
|
<h4>{% trans "Private channels" %}</h4>
|
|
<ul class="list-group list-group-flush" id="nav-private-channels-tab"></ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-info d-none" id="alert-download-chat-app">
|
|
{# Lorsque l'application du chat est installable (par exemple sur un Chrome sur Android), on affiche le message qui indique que c'est bien possible. #}
|
|
{% trans "You can install a shortcut to the chat on your home screen using the download button on the header." %}
|
|
</div>
|
|
|
|
{# Conteneur principal du chat. #}
|
|
{# Lorsque le chat est en plein écran, on le place en coordonnées absolues, occupant tout l'espace de l'écran. #}
|
|
<div class="card tab-content w-100 mh-100{% if request.GET.fullscreen == '1' or fullscreen %} position-absolute top-0 start-0 vh-100 z-3{% endif %}"
|
|
style="height: 95vh" id="chat-container">
|
|
<div class="card-header">
|
|
<h3>
|
|
{% if fullscreen %}
|
|
{# Lorsque le chat est en plein écran, on affiche le bouton de déconnexion. #}
|
|
{# Le bouton de déconnexion doit être présent dans un formulaire. Le formulaire doit inclure toute la ligne. #}
|
|
<form action="{% url 'chat:logout' %}" method="post">
|
|
{% csrf_token %}
|
|
{% endif %}
|
|
{# Bouton qui permet d'ouvrir le sélecteur de canaux #}
|
|
<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> {# Titre du canal sélectionné #}
|
|
{% if not fullscreen %}
|
|
{# Dans le cas où on est pas uniquement en plein écran (cas de l'application), on affiche les boutons pour passer en ou quitter le mode plein écran. #}
|
|
<button class="btn float-end" type="button" onclick="toggleFullscreen()" title="{% trans "Toggle fullscreen mode" %}">
|
|
<i class="fas fa-expand"></i>
|
|
</button>
|
|
{% else %}
|
|
{# Le bouton de déconnexion n'est affiché que sur l'application. #}
|
|
<button class="btn float-end" title="{% trans "Log out" %}">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</button>
|
|
{% endif %}
|
|
{# On affiche le bouton d'installation uniquement dans le cas où l'application est installable sur l'écran d'accueil. #}
|
|
<button class="btn float-end d-none" type="button" id="install-app-home-screen" title="{% trans "Install app on home screen" %}">
|
|
<i class="fas fa-download"></i>
|
|
</button>
|
|
{% if fullscreen %}
|
|
</form>
|
|
{% endif %}
|
|
</h3>
|
|
</div>
|
|
|
|
{# Contenu de la carte, contenant la liste des messages. La liste des messages est affichée à l'envers pour avoir un scroll plus cohérent. #}
|
|
<div class="card-body d-flex flex-column-reverse flex-grow-0 overflow-y-scroll" id="chat-messages">
|
|
{# Correspond à la liste des messages à afficher. #}
|
|
<ul class="list-group list-group-flush" id="message-list"></ul>
|
|
{# S'il y a des messages à récupérer, on affiche un lien qui permet de récupérer les anciens messages. #}
|
|
<div class="text-center d-none" id="fetch-previous-messages">
|
|
<a href="#" class="nav-link" onclick="event.preventDefault(); fetchPreviousMessages()">
|
|
{% trans "Fetch previous messages…" %}
|
|
</a>
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
|
|
{# Pied de la carte, contenant le formulaire pour envoyer un message. #}
|
|
<div class="card-footer mt-auto">
|
|
{# Lorsqu'on souhaite envoyer un message, on empêche le formulaire de s'envoyer et on envoie le message par websocket. #}
|
|
<form onsubmit="event.preventDefault(); sendMessage()">
|
|
<div class="input-group">
|
|
<label for="input-message" class="input-group-text">
|
|
<i class="fas fa-comment"></i>
|
|
</label>
|
|
{# Affichage du contrôleur de texte pour rédiger le message à envoyer. #}
|
|
<input type="text" class="form-control" id="input-message" placeholder="{% trans "Send message…" %}" autofocus autocomplete="off">
|
|
<button class="input-group-text btn btn-success" type="submit">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
{# Récupération de l'utilisateur⋅rice courant⋅e afin de pouvoir effectuer des tests plus tard. #}
|
|
const USER_ID = {{ request.user.id }}
|
|
{# Récupération du statut administrateur⋅rice de l'utilisateur⋅rice connecté⋅e afin de pouvoir effectuer des tests plus tard. #}
|
|
const IS_ADMIN = {{ request.user.registration.is_admin|yesno:"true,false" }}
|
|
</script> |