ynerant/plateforme-tfjm2
1
0
Fork 0
mirror of https://gitlab.com/animath/si/plateforme.git synced 2025-11-04 08:22:10 +01:00
Code Issues Releases Wiki Activity

Properly sort messages and add fetch previous messages ability

Browse Source 
Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
This commit is contained in:
Emmy D'Anello
2024-04-27 14:12:08 +02:00
parent d59bb75dce
commit d617dd77c1
4 changed files with 78 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
chat/consumers.py
View File

@@ -63,7 +63,7 @@ class ChatConsumer(AsyncJsonWebsocketConsumer):
case 'send_message':
await self.receive_message(content)
case 'fetch_messages':
await self.fetch_messages(content['channel_id'])
await self.fetch_messages(**content)
case unknown:
print("Unknown message type:", unknown)
@@ -109,17 +109,19 @@ class ChatConsumer(AsyncJsonWebsocketConsumer):
'content': message.content,
})
async def fetch_messages(self, channel_id: int, offset: int = 0, limit: int = 50) -> None:
async def fetch_messages(self, channel_id: int, offset: int = 0, limit: int = 50, **_kwargs) -> None:
channel = await Channel.objects.aget(id=channel_id)
read_channels = await Channel.get_accessible_channels(self.scope['user'], 'read')
if not await read_channels.acontains(channel):
return
messages = Message.objects.filter(channel=channel).order_by('created_at')[offset:offset + limit].all()
limit = min(limit, 200) # Fetch only maximum 200 messages at the time
messages = Message.objects.filter(channel=channel).order_by('-created_at')[offset:offset + limit].all()
await self.send_json({
'type': 'fetch_messages',
'channel_id': channel_id,
'messages': [
'messages': list(reversed([
{
'id': message.id,
'timestamp': message.created_at.isoformat(),
@@ -127,7 +129,7 @@ class ChatConsumer(AsyncJsonWebsocketConsumer):
'content': message.content,
}
async for message in messages
]
]))
})
async def chat_send_message(self, message) -> None:

48
chat/static/chat.js
View File

@@ -4,6 +4,8 @@
await Notification.requestPermission()
})()
const MAX_MESSAGES = 50
let channels = {}
let messages = {}
let selected_channel_id = null
@@ -61,12 +63,9 @@ function setChannels(new_channels) {
for (let channel of new_channels) {
channels[channel['id']] = channel
if (!messages[channel['id']])
messages[channel['id']] = []
messages[channel['id']] = new Map()
socket.send(JSON.stringify({
'type': 'fetch_messages',
'channel_id': channel['id'],
}))
fetchMessages(channel['id'])
}
if (new_channels && (!selected_channel_id || !channels[selected_channel_id]))
@@ -78,16 +77,35 @@ function receiveMessage(message) {
redrawMessages()
}
function fetchMessages(data) {
function fetchMessages(channel_id, offset = 0, limit = MAX_MESSAGES) {
socket.send(JSON.stringify({
'type': 'fetch_messages',
'channel_id': channel_id,
'offset': offset,
'limit': limit,
}))
}
function fetchPreviousMessages() {
let channel_id = selected_channel_id
let offset = messages[channel_id].size
fetchMessages(channel_id, offset, MAX_MESSAGES)
}
function receiveFetchedMessages(data) {
let channel_id = data['channel_id']
let new_messages = data['messages']
if (!messages[channel_id])
messages[channel_id] = []
messages[channel_id] = new Map()
for (let message of new_messages) {
messages[channel_id].push(message)
}
for (let message of new_messages)
messages[channel_id].set(message['id'], message)
// Sort messages by timestamp
messages[channel_id] = new Map([...messages[channel_id].values()]
.sort((a, b) => new Date(a['timestamp']) - new Date(b['timestamp']))
.map(message => [message['id'], message]))
redrawMessages()
}
@@ -99,7 +117,7 @@ function redrawMessages() {
let lastMessage = null
let lastContentDiv = null
for (let message of messages[selected_channel_id]) {
for (let message of messages[selected_channel_id].values()) {
if (lastMessage && lastMessage['author'] === message['author']) {
let lastTimestamp = new Date(lastMessage['timestamp'])
let newTimestamp = new Date(message['timestamp'])
@@ -138,6 +156,12 @@ function redrawMessages() {
lastMessage = message
lastContentDiv = contentDiv
}
let fetchMoreButton = document.getElementById('fetch-previous-messages')
if (!messages[selected_channel_id] || messages[selected_channel_id].size % MAX_MESSAGES !== 0)
fetchMoreButton.classList.add('d-none')
else
fetchMoreButton.classList.remove('d-none')
}
document.addEventListener('DOMContentLoaded', () => {
@@ -154,7 +178,7 @@ document.addEventListener('DOMContentLoaded', () => {
receiveMessage(data)
break
case 'fetch_messages':
fetchMessages(data)
receiveFetchedMessages(data)
break
default:
console.log(data)

6
chat/templates/chat/chat.html
View File

@@ -35,6 +35,12 @@
</h3>
</div>
<div class="card-body overflow-y-scroll mw-100 h-100 flex-grow-0" id="chat-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>
<ul class="list-group list-group-flush" id="message-list"></ul>
</div>
<div class="card-footer mt-auto">

54
locale/fr/LC_MESSAGES/django.po
View File

@@ -7,7 +7,7 @@ msgid ""
msgstr ""
"Project-Id-Version: TFJM\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2024-04-27 11:02+0200\n"
"POT-Creation-Date: 2024-04-27 14:10+0200\n"
"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
"Last-Translator: Emmy D'Anello <emmy.danello@animath.fr>\n"
"Language-Team: LANGUAGE <LL@li.org>\n"
@@ -21,20 +21,20 @@ msgstr ""
msgid "API"
msgstr "API"
#: chat/models.py:17 participation/models.py:35 participation/models.py:263
#: chat/models.py:18 participation/models.py:35 participation/models.py:263
#: participation/tables.py:18 participation/tables.py:34
msgid "name"
msgstr "nom"
#: chat/models.py:22
#: chat/models.py:23
msgid "read permission"
msgstr "permission de lecture"
#: chat/models.py:28
#: chat/models.py:29
msgid "write permission"
msgstr "permission d'écriture"
#: chat/models.py:38 draw/admin.py:53 draw/admin.py:71 draw/admin.py:88
#: chat/models.py:39 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:40
#: chat/models.py:41
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:49 draw/models.py:429 draw/models.py:456
#: chat/models.py:50 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:51
#: chat/models.py:52
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:60 draw/templates/draw/tournament_content.html:277
#: chat/models.py:61 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:62
#: chat/models.py:63
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:66
#: chat/models.py:67
msgid "private"
msgstr "privé"
#: chat/models.py:68
#: chat/models.py:69
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:73
#: chat/models.py:74
msgid "invited users"
msgstr "Utilisateur⋅rices invité"
#: chat/models.py:76
#: chat/models.py:77
msgid ""
"Extra users who have been invited to the channel, in addition to the "
"permitted group of the channel."
@@ -106,52 +106,56 @@ msgstr ""
"Utilisateur⋅rices supplémentaires qui ont été invité⋅es au canal, en plus du "
"groupe autorisé du canal."
#: chat/models.py:81
#: chat/models.py:82
#, python-brace-format
msgid "Channel {name}"
msgstr "Canal {name}"
#: chat/models.py:150 chat/models.py:159
#: chat/models.py:148 chat/models.py:157
msgid "channel"
msgstr "canal"
#: chat/models.py:151
#: chat/models.py:149
msgid "channels"
msgstr "canaux"
#: chat/models.py:165
#: chat/models.py:163
msgid "author"
msgstr "auteur⋅rice"
#: chat/models.py:172
#: chat/models.py:170
msgid "created at"
msgstr "créé le"
#: chat/models.py:177
#: chat/models.py:175
msgid "updated at"
msgstr "modifié le"
#: chat/models.py:182
#: chat/models.py:180
msgid "content"
msgstr "contenu"
#: chat/models.py:186
#: chat/models.py:243
msgid "message"
msgstr "message"
#: chat/models.py:187
#: chat/models.py:244
msgid "messages"
msgstr "messages"
#: chat/templates/chat/chat.html:8
msgid "JavaScript must be enabled on your browser to access chat."
msgstr ""
msgstr "JavaScript doit être activé sur votre navigateur pour accéder au chat."
#: chat/templates/chat/chat.html:12
msgid "Chat channels"
msgstr "Canaux de chat"
#: chat/templates/chat/chat.html:43
#: chat/templates/chat/chat.html:40
msgid "Fetch previous messages…"
msgstr "Récupérer les messages précédents…"
#: chat/templates/chat/chat.html:52
msgid "Send message…"
msgstr "Envoyer un message…"