105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
import { create_listener } from "./chat.js";
|
|
|
|
render_rooms_wrapper()
|
|
|
|
async function render_rooms_wrapper() {
|
|
const room_info = await request_rooms();
|
|
console.log(room_info);
|
|
render_rooms(room_info);
|
|
}
|
|
|
|
function render_rooms(room_info) {
|
|
const roomsContainer = document.getElementById('rooms');
|
|
roomsContainer.innerHTML = '';
|
|
|
|
const tabBar = document.createElement('div');
|
|
tabBar.className = 'tab-bar';
|
|
roomsContainer.appendChild(tabBar);
|
|
|
|
const contentContainer = document.createElement('div');
|
|
contentContainer.className = 'room-content-container';
|
|
roomsContainer.appendChild(contentContainer);
|
|
|
|
room_info.forEach(([roomId, pubkey], index) => {
|
|
// tab button
|
|
const tabButton = document.createElement('button');
|
|
tabButton.className = 'tab-button';
|
|
tabButton.textContent = roomId;
|
|
tabButton.dataset.roomId = roomId;
|
|
tabButton.addEventListener('click', () => openRoom(roomId));
|
|
tabBar.appendChild(tabButton);
|
|
|
|
// room content
|
|
const roomDiv = document.createElement('div');
|
|
roomDiv.id = `room-${roomId}`;
|
|
roomDiv.className = 'room-content';
|
|
|
|
// public key textarea
|
|
const pubKeyText = document.createElement('textarea');
|
|
pubKeyText.value = pubkey;
|
|
pubKeyText.readOnly = true;
|
|
roomDiv.appendChild(pubKeyText);
|
|
|
|
// messages list
|
|
const messagesUl = document.createElement('ul');
|
|
messagesUl.id = `messages-${roomId}`;
|
|
messagesUl.className = `key-${pubkey}`;
|
|
roomDiv.appendChild(messagesUl);
|
|
|
|
// message form
|
|
const form = document.createElement('form');
|
|
form.id = `form-${roomId}`;
|
|
form.className = `key-${pubkey}`;
|
|
|
|
const input = document.createElement('input');
|
|
input.id = `input-${roomId}`;
|
|
input.className = `key-${pubkey}`;
|
|
input.autocomplete = 'off';
|
|
|
|
const button = document.createElement('button');
|
|
button.textContent = 'Send';
|
|
|
|
form.appendChild(input);
|
|
form.appendChild(button);
|
|
roomDiv.appendChild(form);
|
|
contentContainer.appendChild(roomDiv);
|
|
|
|
// show first room by default
|
|
if (index === 0) {
|
|
roomDiv.style.display = 'block';
|
|
tabButton.classList.add('active');
|
|
} else {
|
|
roomDiv.style.display = 'none';
|
|
}
|
|
|
|
create_listener(form, input);
|
|
});
|
|
}
|
|
|
|
// handle tab switching
|
|
function openRoom(roomId) {
|
|
const roomIdStr = String(roomId);
|
|
|
|
document.querySelectorAll('.room-content').forEach(div => {
|
|
div.style.display = 'none';
|
|
});
|
|
document.querySelectorAll('.tab-button').forEach(button => {
|
|
button.classList.remove('active');
|
|
});
|
|
|
|
const roomDiv = document.getElementById(`room-${roomIdStr}`);
|
|
const tabButton = document.querySelector(`.tab-button[data-room-id="${roomIdStr}"]`);
|
|
|
|
if (roomDiv && tabButton) {
|
|
roomDiv.style.display = 'block';
|
|
tabButton.classList.add('active');
|
|
}
|
|
}
|
|
|
|
async function request_rooms() {
|
|
const apiUrl = '/chat/rooms';
|
|
const response = await fetch(apiUrl, { method: 'GET' });
|
|
const { rooms } = await response.json();
|
|
return rooms;
|
|
}
|