function populateServerSelectionList() { const servers = localstorage_credentials.getServers(); let nodes = []; for (let server of servers) { const li = document.createElement("li"); const endpoint = humanReadableEndpoint(server.endpoint); li.innerText = `${server.login_id}@${endpoint} `; const logoutButton = document.createElement("button"); logoutButton.className = "logout"; logoutButton.innerText = "Log out"; logoutButton.addEventListener("click", e => logOut(server.endpoint, e.currentTarget)); li.appendChild(logoutButton); nodes.push(li); } byId("server_selection_list").innerHTML = ""; byId("server_selection_list").append(...nodes); } function populateChannelList() { async function addChannelItems(client) { const {teams, channels, unread} = await client.channelStore.get(); const users = await client.getUsers(); let nodes = []; let sortedChannels = Object.values(channels).sort((a, b) => b["last_post_at"] - a["last_post_at"] ); for (const channel of sortedChannels) { const team = teams[channel["team_id"]]; const chanUnread = unread[channel.id].unread; const chanMentions = unread[channel.id].mentions; const li = document.createElement("li"); const a = document.createElement("a"); a.href = "javascript:void(0)"; const titleAndElements = channelNameElements(team, channel, client.me["id"], users); if (!titleAndElements) continue; a.title = titleAndElements[0]; a.append(...titleAndElements[1]); a.append(document.createTextNode(" ")); const msgCountGem = document.createElement("span"); msgCountGem.className = "msg_count_gem"; msgCountGem.innerText = chanMentions; if (chanMentions > 0) msgCountGem.style.display = "inline-block"; a.append(msgCountGem); a.addEventListener("click", () => switchToChannel(client, team, channel)); li.appendChild(a); li.dataset["id"] = channel.id; li.dataset["server"] = client.endpoint; const curChan = currentChannel(); if (curChan.endpoint === client.endpoint && curChan.channel_id === channel.id) { li.className = "active"; } if (chanUnread > 0) { li.className += " unread"; } nodes.push(li); } byId("channel_list").append(...nodes); } byId("channel_list").innerHTML = ""; const endpoints = localstorage_credentials.getServers().map(server => server.endpoint); for (let client of mm_client.getOrCreateMultiple(endpoints)) { addChannelItems(client); } } function updateUnreadCount(el, unread, mentions) { let msgCountGem = el.querySelector('.msg_count_gem'); if (mentions > 0) { msgCountGem.style.display = "inline-block"; msgCountGem.innerText = mentions; } else { msgCountGem.style.display = "none"; } if (unread > 0) { addClass(el, "unread"); } else { removeClass(el, "unread"); } } pubsub.subscribe("CHANNEL_UNREAD_UPDATED", ({endpoint, channel_id, unread, mentions}) => { for (let el of byId("channel_list").childNodes) { if (el.dataset["server"] == endpoint && el.dataset["id"] == channel_id) { updateUnreadCount(el, unread, mentions); } } }); pubsub.subscribe("CHANNELS_RELOADED", () => { populateChannelList(); }); pubsub.subscribe("CHANNEL_LAST_POST_TIME_UPDATED", () => { populateChannelList(); });