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(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(endpoint) { const client = createClient(endpoint); const teams = await client.myTeams(); console.log(teams); for (let team of teams) { let nodes = []; const channels = await client.myChannels(team.id); console.log(channels); for (let channel of channels) { const li = document.createElement("li"); const a = document.createElement("a"); a.href = "javascript:void(0)"; const titleAndElements = channelNameElements(team, channel); if (!titleAndElements) continue; a.title = titleAndElements[0]; a.append(...titleAndElements[1]); a.addEventListener("click", () => switchToChannel(client, team, channel)); li.appendChild(a); li.dataset["id"] = channel.id; nodes.push(li); } byId("channel_list").append(...nodes); } } const servers = localstorage_credentials.getServers(); byId("channel_list").innerHTML = ""; for (let server of servers) { addChannelItems(server.endpoint); } } function populateChannelContents(contents) { byId("channel_contents").innerHTML = ""; let nodes = []; for (let id of contents.order) { const post = contents.posts[id]; const isThreadReply = !!post.parent_id; const messageDiv = document.createElement("div"); messageDiv.className = "message"; messageDiv.innerText = post.message; const createAt = new Date(post.create_at); const createAtDiv = document.createElement("time"); createAtDiv.className = "create_at"; createAtDiv.innerText = createAt.toLocaleString("nl-BE"); createAtDiv.dateTime = createAt.toISOString(); const authorDiv = document.createElement("div"); authorDiv.className = "author"; authorDiv.innerText = `Auteur: ${post.user_id}`; const postDiv = document.createElement("div"); postDiv.className = "post"; postDiv.dataset["id"] = id; postDiv.appendChild(authorDiv); postDiv.appendChild(createAtDiv); postDiv.appendChild(messageDiv); nodes.unshift(postDiv); } byId("channel_contents").append(...nodes); checkScrolledToBottom(); } function updateComposeHeight() { byId("compose").style.height = ""; byId("compose").style.height = (byId("compose").scrollHeight + 1) + "px"; } byId("compose").addEventListener("input", updateComposeHeight); function checkScrolledToBottom() { const el = byId("channel_contents_wrapper"); const scrolledTo = el.clientHeight + el.scrollTop; const scrollHeight = el.scrollHeight const atBottom = scrolledTo >= scrollHeight; el.className = atBottom ? "" : "not-at-bottom"; } byId("channel_contents_wrapper").addEventListener("scroll", checkScrolledToBottom);