Fill channel selector using JavaScript

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

chat/static/chat.js

@@ -60,11 +60,27 @@ function sendMessage() {
 
 function setChannels(new_channels) {
     channels = {}
+    let navTab = document.getElementById('nav-channels-tab')
+    navTab.innerHTML = ''
+
     for (let channel of new_channels) {
         channels[channel['id']] = channel
         if (!messages[channel['id']])
             messages[channel['id']] = new Map()
 
+        let navItem = document.createElement('li')
+        navItem.classList.add('list-group-item')
+        navItem.id = `tab-channel-${channel['id']}`
+        navItem.setAttribute('data-bs-dismiss', 'offcanvas')
+        navItem.onclick = () => selectChannel(channel['id'])
+        navTab.appendChild(navItem)
+
+        let channelButton = document.createElement('button')
+        channelButton.classList.add('nav-link')
+        channelButton.type = 'button'
+        channelButton.innerText = channel['name']
+        navItem.appendChild(channelButton)
+
         fetchMessages(channel['id'])
     }
 
@@ -73,7 +89,7 @@ function setChannels(new_channels) {
 }
 
 function receiveMessage(message) {
-    messages[message['channel_id']].push(message)
+    messages[message['channel_id']].set(message['id'], message)
     redrawMessages()
 }
 

chat/templates/chat/chat.html

@@ -13,14 +13,7 @@
             <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">
+            <ul class="list-group list-group-flush" id="nav-channels-tab"></ul>
-                {% 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>