Add sort by unread messages option

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>

chat/static/chat.js

@@ -95,7 +95,7 @@ async function addChannel(channel, categoryLists) {
     categoryList.parentElement.classList.remove('d-none')
 
     let navItem = document.createElement('li')
-    navItem.classList.add('list-group-item')
+    navItem.classList.add('list-group-item', 'tab-channel')
     navItem.id = `tab-channel-${channel['id']}`
     navItem.setAttribute('data-bs-dismiss', 'offcanvas')
     navItem.onclick = () => selectChannel(channel['id'])
@@ -115,6 +115,9 @@ async function addChannel(channel, categoryLists) {
         unreadBadge.classList.add('d-none')
     channelButton.appendChild(unreadBadge)
 
+    if (document.getElementById('sort-by-unread-switch').checked)
+        navItem.style.order = `${-channel.unread_messages}`
+
     fetchMessages(channel['id'])
 }
 
@@ -187,7 +190,8 @@ function markMessageAsRead(data) {
 }
 
 function updateUnreadBadges(unreadMessages) {
-    console.log(unreadMessages)
+    const sortByUnread = document.getElementById('sort-by-unread-switch').checked
+
     for (let channel of Object.values(channels)) {
         let unreadMessagesChannel = unreadMessages[channel['id']] || 0
         console.log(channel, unreadMessagesChannel)
@@ -199,6 +203,9 @@ function updateUnreadBadges(unreadMessages) {
             unreadBadge.classList.remove('d-none')
         else
             unreadBadge.classList.add('d-none')
+
+        if (sortByUnread)
+            document.getElementById(`tab-channel-${channel['id']}`).style.order = `${-unreadMessagesChannel}`
     }
 }
 
@@ -392,6 +399,24 @@ function toggleFullscreen() {
 document.addEventListener('DOMContentLoaded', () => {
     document.addEventListener('click', removeAllPopovers)
 
+    document.getElementById('sort-by-unread-switch').addEventListener('change', event => {
+        const sortByUnread = event.target.checked
+        for (let channel of Object.values(channels)) {
+            let item = document.getElementById(`tab-channel-${channel['id']}`)
+            if (sortByUnread)
+                item.style.order = `${-channel.unread_messages}`
+            else
+                item.style.removeProperty('order')
+        }
+
+        localStorage.setItem('chat.sort-by-unread', sortByUnread)
+    })
+
+    if (localStorage.getItem('chat.sort-by-unread') === 'true') {
+        document.getElementById('sort-by-unread-switch').checked = true
+        document.getElementById('sort-by-unread-switch').dispatchEvent(new Event('change'))
+    }
+
     /**
      * Process the received data from the server.
      * @param data The received message

chat/templates/chat/content.html

@@ -9,6 +9,10 @@
         <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body">
+        <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">
             <li class="list-group-item d-none">
                 <h4>{% trans "General channels" %}</h4>

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-28 23:24+0200\n"
+"POT-Creation-Date: 2024-04-28 23:37+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,19 +21,19 @@ msgstr ""
 msgid "API"
 msgstr "API"
 
-#: chat/models.py:17 chat/templates/chat/content.html:14
+#: chat/models.py:17 chat/templates/chat/content.html:18
 msgid "General channels"
 msgstr "Canaux généraux"
 
-#: chat/models.py:18 chat/templates/chat/content.html:18
+#: chat/models.py:18 chat/templates/chat/content.html:22
 msgid "Tournament channels"
 msgstr "Canaux de tournois"
 
-#: chat/models.py:19 chat/templates/chat/content.html:22
+#: chat/models.py:19 chat/templates/chat/content.html:26
 msgid "Team channels"
 msgstr "Canaux d'équipes"
 
-#: chat/models.py:20 chat/templates/chat/content.html:26
+#: chat/models.py:20 chat/templates/chat/content.html:30
 msgid "Private channels"
 msgstr "Messages privés"
 
@@ -179,7 +179,11 @@ msgstr "JavaScript doit être activé sur votre navigateur pour accéder au chat
 msgid "Chat channels"
 msgstr "Canaux de chat"
 
-#: chat/templates/chat/content.html:34
+#: chat/templates/chat/content.html:14
+msgid "Sort by unread messages"
+msgstr "Trier par messages non lus"
+
+#: chat/templates/chat/content.html:38
 msgid ""
 "You can install a shortcut to the chat on your home screen using the "
 "download button on the header."
@@ -187,23 +191,23 @@ msgstr ""
 "Vous pouvez installer un raccourci vers le chat sur votre écran d'accueil en "
 "utilisant le bouton de téléchargement dans l'en-tête."
 
-#: chat/templates/chat/content.html:52
+#: chat/templates/chat/content.html:56
 msgid "Toggle fullscreen mode"
 msgstr "Inverse le mode plein écran"
 
-#: chat/templates/chat/content.html:56 tfjm/templates/navbar.html:117
+#: chat/templates/chat/content.html:60 tfjm/templates/navbar.html:117
 msgid "Log out"
 msgstr "Déconnexion"
 
-#: chat/templates/chat/content.html:60
+#: chat/templates/chat/content.html:64
 msgid "Install app on home screen"
 msgstr "Installer l'application sur l'écran d'accueil"
 
-#: chat/templates/chat/content.html:72
+#: chat/templates/chat/content.html:76
 msgid "Fetch previous messages…"
 msgstr "Récupérer les messages précédents…"
 
-#: chat/templates/chat/content.html:83
+#: chat/templates/chat/content.html:87
 msgid "Send message…"
 msgstr "Envoyer un message…"