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