rattatwinko/bytechat
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update ts

Browse Source
This commit is contained in:
rattatwinko
2025-08-31 22:45:24 +02:00
parent 556759342d
commit 14da03f8d3
1 changed files with 69 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/static/rooms.js
View File

@@ -6,14 +6,20 @@ let isSubscribedToRooms = false;
// Show the public rooms browser
function showPublicRoomsBrowser() {
document.getElementById('publicRoomsBrowser').style.display = 'block';
loadPublicRoomsWebSocket();
subscribeToPublicRooms();
const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement) {
browserElement.style.display = 'block';
loadPublicRoomsWebSocket();
subscribeToPublicRooms();
}
}
// Close the public rooms browser
function closePublicRoomsBrowser() {
document.getElementById('publicRoomsBrowser').style.display = 'none';
const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement) {
browserElement.style.display = 'none';
}
unsubscribeFromPublicRooms();
// Clear auto-refresh
@@ -46,8 +52,11 @@ function loadPublicRoomsWebSocket() {
try {
showLoadingState();
currentSortBy = document.getElementById('roomsSortSelect').value;
currentMinUsers = document.getElementById('minUsersFilter').value || 0;
const sortSelect = document.getElementById('roomsSortSelect');
const minUsersFilter = document.getElementById('minUsersFilter');
currentSortBy = sortSelect ? sortSelect.value : 'activity';
currentMinUsers = minUsersFilter ? (minUsersFilter.value || 0) : 0;
if (typeof socket !== 'undefined' && socket !== null && socket.connected) {
socket.emit('request_public_rooms', {
@@ -71,8 +80,11 @@ async function loadPublicRoomsHTTP() {
try {
showLoadingState();
const sortBy = document.getElementById('roomsSortSelect').value;
const minUsers = document.getElementById('minUsersFilter').value || 0;
const sortSelect = document.getElementById('roomsSortSelect');
const minUsersFilter = document.getElementById('minUsersFilter');
const sortBy = sortSelect ? sortSelect.value : 'activity';
const minUsers = minUsersFilter ? (minUsersFilter.value || 0) : 0;
const response = await fetch(`/api/rooms/public?sort=${sortBy}&min_users=${minUsers}&limit=50`);
@@ -84,10 +96,14 @@ async function loadPublicRoomsHTTP() {
publicRoomsData = data.rooms || [];
// Also load stats
const statsResponse = await fetch('/api/rooms/stats');
if (statsResponse.ok) {
const stats = await statsResponse.json();
updateStatsDisplay(stats);
try {
const statsResponse = await fetch('/api/rooms/stats');
if (statsResponse.ok) {
const stats = await statsResponse.json();
updateStatsDisplay(stats);
}
} catch (statsError) {
console.warn('Failed to load room stats:', statsError);
}
displayRooms();
@@ -106,8 +122,8 @@ function refreshPublicRooms() {
// Update stats display
function updateStatsDisplay(stats) {
const statsElement = document.getElementById('roomsStats');
if (statsElement) {
statsElement.textContent = `${stats.public_rooms} public rooms • ${stats.total_users} users online`;
if (statsElement && stats) {
statsElement.textContent = `${stats.public_rooms || 0} public rooms • ${stats.total_users || 0} users online`;
}
}
@@ -149,7 +165,7 @@ function displayRooms() {
if (roomsLoading) roomsLoading.style.display = 'none';
if (publicRoomsData.length === 0) {
if (!publicRoomsData || publicRoomsData.length === 0) {
if (roomsEmpty) roomsEmpty.style.display = 'flex';
if (roomsList) roomsList.style.display = 'none';
return;
@@ -164,13 +180,15 @@ function displayRooms() {
// Create room card HTML
function createRoomCard(room) {
const activityClass = getActivityClass(room.minutes_since_activity);
const timeAgo = formatTimeAgo(room.minutes_since_activity);
if (!room) return '';
const activityClass = getActivityClass(room.minutes_since_activity || 0);
const timeAgo = formatTimeAgo(room.minutes_since_activity || 0);
return `
<div class="room-card" onclick="joinPublicRoom('${room.room_id}')">
<div class="room-card" onclick="joinPublicRoom('${escapeHtml(room.room_id || '')}')">
<div class="room-title">
${escapeHtml(room.title || room.room_id)}
${escapeHtml(room.title || room.room_id || 'Unnamed Room')}
<span class="activity-indicator ${activityClass}"></span>
</div>
<div class="room-description">
@@ -179,11 +197,11 @@ function createRoomCard(room) {
<div class="room-stats">
<div class="room-stat">
<span>👥</span>
<span>${room.user_count} user${room.user_count !== 1 ? 's' : ''}</span>
<span>${room.user_count || 0} user${(room.user_count || 0) !== 1 ? 's' : ''}</span>
</div>
<div class="room-stat">
<span>💬</span>
<span>${room.message_count} message${room.message_count !== 1 ? 's' : ''}</span>
<span>${room.message_count || 0} message${(room.message_count || 0) !== 1 ? 's' : ''}</span>
</div>
<div class="room-stat">
<span>🕐</span>
@@ -191,7 +209,7 @@ function createRoomCard(room) {
</div>
<div class="room-stat">
<span>🆔</span>
<span>${room.room_id}</span>
<span>${escapeHtml(room.room_id || 'Unknown')}</span>
</div>
</div>
</div>
@@ -208,7 +226,7 @@ function getActivityClass(minutesAgo) {
// Format time ago
function formatTimeAgo(minutes) {
if (minutes < 1) return 'just now';
if (minutes < 60) return `${minutes}m ago`;
if (minutes < 60) return `${Math.floor(minutes)}m ago`;
const hours = Math.floor(minutes / 60);
if (hours < 24) return `${hours}h ago`;
@@ -219,6 +237,7 @@ function formatTimeAgo(minutes) {
// Escape HTML to prevent XSS
function escapeHtml(text) {
if (!text) return '';
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
@@ -226,6 +245,11 @@ function escapeHtml(text) {
// Join a public room - integrated with your existing system
function joinPublicRoom(roomId) {
if (!roomId) {
console.error('No room ID provided');
return;
}
console.log(`Joining public room: ${roomId}`);
// Close the browser
@@ -260,9 +284,9 @@ function setupPublicRoomsWebSocketHandlers() {
// Handle public rooms data response
socket.on('public_rooms_data', function(data) {
console.log('Received public rooms data via WebSocket:', data);
publicRoomsData = data.rooms || [];
publicRoomsData = data && data.rooms ? data.rooms : [];
if (data.stats) {
if (data && data.stats) {
updateStatsDisplay(data.stats);
}
@@ -276,9 +300,9 @@ function setupPublicRoomsWebSocketHandlers() {
// Only update if the browser is currently open and we're subscribed
const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement && browserElement.style.display === 'block' && isSubscribedToRooms) {
publicRoomsData = data.rooms || [];
publicRoomsData = data && data.rooms ? data.rooms : [];
if (data.stats) {
if (data && data.stats) {
updateStatsDisplay(data.stats);
}
@@ -300,7 +324,14 @@ function waitForSocketAndSetupHandlers() {
if (typeof socket !== 'undefined' && socket !== null && socket.connected) {
setupPublicRoomsWebSocketHandlers();
} else {
setTimeout(waitForSocketAndSetupHandlers, 100);
// Check if socket exists but is still connecting
if (typeof socket !== 'undefined' && socket !== null) {
// Socket exists but might not be connected yet
setTimeout(waitForSocketAndSetupHandlers, 100);
} else {
// Socket doesn't exist yet, keep waiting
setTimeout(waitForSocketAndSetupHandlers, 250);
}
}
}
@@ -318,6 +349,16 @@ document.addEventListener('DOMContentLoaded', function() {
minUsersFilter.addEventListener('change', refreshPublicRooms);
}
// Setup backdrop click handler
const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement) {
browserElement.addEventListener('click', function(e) {
if (e.target === this) {
closePublicRoomsBrowser();
}
});
}
// Start the WebSocket setup process
waitForSocketAndSetupHandlers();
@@ -336,16 +377,4 @@ document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && browserElement && browserElement.style.display === 'block') {
closePublicRoomsBrowser();
}
});
// Close on backdrop click
document.addEventListener('DOMContentLoaded', function() {
const browserElement = document.getElementById('publicRoomsBrowser');
if (browserElement) {
browserElement.addEventListener('click', function(e) {
if (e.target === this) {
closePublicRoomsBrowser();
}
});
}
});