From f3a4a99b78bc55b5dc8307523d092e09c5da6189 Mon Sep 17 00:00:00 2001 From: Emmy D'Anello Date: Sat, 27 Apr 2024 12:08:10 +0200 Subject: [PATCH] Setup chat UI Signed-off-by: Emmy D'Anello --- chat/static/chat.js | 40 +++++++++++++- chat/templates/chat/chat.html | 58 +++++++++++++++++++++ chat/views.py | 8 +++ locale/fr/LC_MESSAGES/django.po | 92 +++++++++++++++++++-------------- tfjm/templates/base.html | 8 +-- 5 files changed, 161 insertions(+), 45 deletions(-) diff --git a/chat/static/chat.js b/chat/static/chat.js index 8d5063a..8e51aec 100644 --- a/chat/static/chat.js +++ b/chat/static/chat.js @@ -4,6 +4,9 @@ await Notification.requestPermission() })() +let channels = {} +let selected_channel_id = null + /** * Display a new notification with the given title and the given body. * @param title The title of the notification @@ -18,6 +21,33 @@ function showNotification(title, body, timeout = 5000) { return notif } +function selectChannel(channel_id) { + let channel = channels[channel_id] + if (!channel) { + console.error('Channel not found:', channel_id) + return + } + + selected_channel_id = channel_id + + let channelTitle = document.getElementById('channel-title') + channelTitle.innerText = channel['name'] + + let messageInput = document.getElementById('input-message') + messageInput.disabled = !channel['write_access'] +} + +function setChannels(new_channels) { + channels = {} + for (let channel of new_channels) { + channels[channel['id']] = channel + } + + if (new_channels && (!selected_channel_id || !channels[selected_channel_id])) { + selectChannel(Object.keys(channels)[0]) + } +} + document.addEventListener('DOMContentLoaded', () => { /** * Process the received data from the server. @@ -25,7 +55,15 @@ document.addEventListener('DOMContentLoaded', () => { */ function processMessage(data) { // TODO Implement chat protocol - console.log(data) + switch (data['type']) { + case 'fetch_channels': + setChannels(data['channels']) + break + default: + console.log(data) + console.error('Unknown message type:', data['type']) + break + } } function setupSocket(nextDelay = 1000) { diff --git a/chat/templates/chat/chat.html b/chat/templates/chat/chat.html index cf7de49..860147b 100644 --- a/chat/templates/chat/chat.html +++ b/chat/templates/chat/chat.html @@ -4,6 +4,64 @@ {% load i18n %} {% block content %} + +
+
+

{% trans "Chat channels" %}

+ +
+
+ +
+
+ +
+
+

+ + +

+
+
+
    +
  • +
    Emmy D'Anello (CNO)
    + Message 1 +
    • +
  • +
    Emmy D'Anello (CNO)
    + Message 2 +
    • +
  • +
    Emmy D'Anello (CNO)
    + Message 3 +
    • +
+
+
+
+ + + +
+
+
{% endblock %} {% block extrajavascript %} diff --git a/chat/views.py b/chat/views.py index 8c4ef96..30c40e9 100644 --- a/chat/views.py +++ b/chat/views.py @@ -4,6 +4,8 @@ from django.contrib.auth.mixins import LoginRequiredMixin from django.views.generic import TemplateView +from chat.models import Channel + class ChatView(LoginRequiredMixin, TemplateView): """ @@ -11,3 +13,9 @@ class ChatView(LoginRequiredMixin, TemplateView): with Javascript and websockets. """ template_name = "chat/chat.html" + + def get_context_data(self, **kwargs): + context = super().get_context_data(**kwargs) + from asgiref.sync import async_to_sync + context['channels'] = async_to_sync(Channel.get_accessible_channels)(self.request.user, 'read') + return context diff --git a/locale/fr/LC_MESSAGES/django.po b/locale/fr/LC_MESSAGES/django.po index 13cd29e..c70abdc 100644 --- a/locale/fr/LC_MESSAGES/django.po +++ b/locale/fr/LC_MESSAGES/django.po @@ -7,7 +7,7 @@ msgid "" msgstr "" "Project-Id-Version: TFJM\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2024-04-27 08:46+0200\n" +"POT-Creation-Date: 2024-04-27 11:02+0200\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: Emmy D'Anello \n" "Language-Team: LANGUAGE \n" @@ -21,20 +21,20 @@ msgstr "" msgid "API" msgstr "API" -#: chat/models.py:13 participation/models.py:35 participation/models.py:263 +#: chat/models.py:17 participation/models.py:35 participation/models.py:263 #: participation/tables.py:18 participation/tables.py:34 msgid "name" msgstr "nom" -#: chat/models.py:17 +#: chat/models.py:22 msgid "read permission" msgstr "permission de lecture" -#: chat/models.py:22 +#: chat/models.py:28 msgid "write permission" msgstr "permission d'écriture" -#: chat/models.py:32 draw/admin.py:53 draw/admin.py:71 draw/admin.py:88 +#: chat/models.py:38 draw/admin.py:53 draw/admin.py:71 draw/admin.py:88 #: draw/models.py:26 participation/admin.py:79 participation/admin.py:140 #: participation/admin.py:171 participation/models.py:693 #: participation/models.py:717 participation/models.py:935 @@ -43,7 +43,7 @@ msgstr "permission d'écriture" msgid "tournament" msgstr "tournoi" -#: chat/models.py:34 +#: chat/models.py:40 msgid "" "For a permission that concerns a tournament, indicates what is the concerned " "tournament." @@ -51,21 +51,21 @@ msgstr "" "Pour une permission qui concerne un tournoi, indique quel est le tournoi " "concerné." -#: chat/models.py:43 draw/models.py:429 draw/models.py:456 +#: chat/models.py:49 draw/models.py:429 draw/models.py:456 #: participation/admin.py:136 participation/admin.py:155 #: participation/models.py:1434 participation/models.py:1443 #: participation/tables.py:84 msgid "pool" msgstr "poule" -#: chat/models.py:45 +#: chat/models.py:51 msgid "" "For a permission that concerns a pool, indicates what is the concerned pool." msgstr "" "Pour une permission qui concerne une poule, indique quelle est la poule " "concernée." -#: chat/models.py:54 draw/templates/draw/tournament_content.html:277 +#: chat/models.py:60 draw/templates/draw/tournament_content.html:277 #: participation/admin.py:167 participation/models.py:252 #: participation/models.py:708 #: participation/templates/participation/tournament_harmonize.html:15 @@ -75,18 +75,18 @@ msgstr "" msgid "team" msgstr "équipe" -#: chat/models.py:56 +#: chat/models.py:62 msgid "" "For a permission that concerns a team, indicates what is the concerned team." msgstr "" "Pour une permission qui concerne une équipe, indique quelle est l'équipe " "concernée." -#: chat/models.py:60 +#: chat/models.py:66 msgid "private" msgstr "privé" -#: chat/models.py:62 +#: chat/models.py:68 msgid "" "If checked, only users who have been explicitly added to the channel will be " "able to access it." @@ -94,11 +94,11 @@ msgstr "" "Si sélectionné, seul⋅es les utilisateur⋅rices qui ont été explicitement " "ajouté⋅es au canal pourront y accéder." -#: chat/models.py:67 +#: chat/models.py:73 msgid "invited users" msgstr "Utilisateur⋅rices invité" -#: chat/models.py:70 +#: chat/models.py:76 msgid "" "Extra users who have been invited to the channel, in addition to the " "permitted group of the channel." @@ -106,43 +106,55 @@ msgstr "" "Utilisateur⋅rices supplémentaires qui ont été invité⋅es au canal, en plus du " "groupe autorisé du canal." -#: chat/models.py:75 +#: chat/models.py:81 #, python-brace-format msgid "Channel {name}" msgstr "Canal {name}" -#: chat/models.py:78 chat/models.py:87 +#: chat/models.py:150 chat/models.py:159 msgid "channel" msgstr "canal" -#: chat/models.py:79 +#: chat/models.py:151 msgid "channels" msgstr "canaux" -#: chat/models.py:93 +#: chat/models.py:165 msgid "author" msgstr "auteur⋅rice" -#: chat/models.py:100 +#: chat/models.py:172 msgid "created at" msgstr "créé le" -#: chat/models.py:105 +#: chat/models.py:177 msgid "updated at" msgstr "modifié le" -#: chat/models.py:110 +#: chat/models.py:182 msgid "content" msgstr "contenu" -#: chat/models.py:114 +#: chat/models.py:186 msgid "message" msgstr "message" -#: chat/models.py:115 +#: chat/models.py:187 msgid "messages" msgstr "messages" +#: chat/templates/chat/chat.html:8 +msgid "JavaScript must be enabled on your browser to access chat." +msgstr "" + +#: chat/templates/chat/chat.html:12 +msgid "Chat channels" +msgstr "Canaux de chat" + +#: chat/templates/chat/chat.html:43 +msgid "Send message…" +msgstr "Envoyer un message…" + #: draw/admin.py:39 draw/admin.py:57 draw/admin.py:75 #: participation/admin.py:109 participation/models.py:253 #: participation/tables.py:88 @@ -158,68 +170,68 @@ msgstr "tour" msgid "Draw" msgstr "Tirage au sort" -#: draw/consumers.py:30 +#: draw/consumers.py:31 msgid "You are not an organizer." msgstr "Vous n'êtes pas un⋅e organisateur⋅rice." -#: draw/consumers.py:162 +#: draw/consumers.py:165 msgid "The draw is already started." msgstr "Le tirage a déjà commencé." -#: draw/consumers.py:168 +#: draw/consumers.py:171 msgid "Invalid format" msgstr "Format invalide" -#: draw/consumers.py:173 +#: draw/consumers.py:176 #, python-brace-format msgid "The sum must be equal to the number of teams: expected {len}, got {sum}" msgstr "" "La somme doit être égale au nombre d'équipes : attendu {len}, obtenu {sum}" -#: draw/consumers.py:178 +#: draw/consumers.py:181 msgid "There can be at most one pool with 5 teams." msgstr "Il ne peut y avoir au plus qu'une seule poule de 5 équipes." -#: draw/consumers.py:218 +#: draw/consumers.py:221 msgid "Draw started!" msgstr "Le tirage a commencé !" -#: draw/consumers.py:240 +#: draw/consumers.py:243 #, python-brace-format msgid "The draw for the tournament {tournament} will start." msgstr "Le tirage au sort du tournoi {tournament} va commencer." -#: draw/consumers.py:251 draw/consumers.py:277 draw/consumers.py:687 -#: draw/consumers.py:904 draw/consumers.py:993 draw/consumers.py:1015 -#: draw/consumers.py:1106 draw/templates/draw/tournament_content.html:5 +#: draw/consumers.py:254 draw/consumers.py:280 draw/consumers.py:690 +#: draw/consumers.py:907 draw/consumers.py:996 draw/consumers.py:1018 +#: draw/consumers.py:1109 draw/templates/draw/tournament_content.html:5 msgid "The draw has not started yet." msgstr "Le tirage au sort n'a pas encore commencé." -#: draw/consumers.py:264 +#: draw/consumers.py:267 #, python-brace-format msgid "The draw for the tournament {tournament} is aborted." msgstr "Le tirage au sort du tournoi {tournament} est annulé." -#: draw/consumers.py:304 draw/consumers.py:325 draw/consumers.py:621 -#: draw/consumers.py:692 draw/consumers.py:909 +#: draw/consumers.py:307 draw/consumers.py:328 draw/consumers.py:624 +#: draw/consumers.py:695 draw/consumers.py:912 msgid "This is not the time for this." msgstr "Ce n'est pas le moment pour cela." -#: draw/consumers.py:317 draw/consumers.py:320 +#: draw/consumers.py:320 draw/consumers.py:323 msgid "You've already launched the dice." msgstr "Vous avez déjà lancé le dé." -#: draw/consumers.py:323 +#: draw/consumers.py:326 msgid "It is not your turn." msgstr "Ce n'est pas votre tour." -#: draw/consumers.py:410 +#: draw/consumers.py:413 #, python-brace-format msgid "Dices from teams {teams} are identical. Please relaunch your dices." msgstr "" "Les dés des équipes {teams} sont identiques. Merci de relancer vos dés." -#: draw/consumers.py:1018 +#: draw/consumers.py:1021 msgid "This is only available for the final tournament." msgstr "Cela n'est possible que pour la finale." diff --git a/tfjm/templates/base.html b/tfjm/templates/base.html index f272bd7..da1cff5 100644 --- a/tfjm/templates/base.html +++ b/tfjm/templates/base.html @@ -40,18 +40,18 @@ {% include "navbar.html" %} -
+
-
-
+
+
{% block content-title %}

{{ title }}

{% endblock %} {% include "messages.html" %} -
+
{% block content %}

Default content...

{% endblock content %}