/** * @fileoverview Manages the rooms list view functionality. * This file handles: * - Room list search with debounced input * - Room filter form submission * - Clear filter functionality for the rooms list */ /** * Creates a debounced version of a function that delays its execution * until after a specified wait time has elapsed since the last time it was invoked. * This helps prevent excessive form submissions during rapid user input. * @function * @param {Function} func - The function to debounce * @param {number} wait - The number of milliseconds to delay (300ms default for search) * @returns {Function} A debounced version of the provided function */ function debounce(func, wait) { let timeout; return function(...args) { clearTimeout(timeout); timeout = setTimeout(() => func.apply(this, args), wait); }; } /** * Initializes the rooms list functionality when the DOM is loaded. * Sets up event listeners for: * - Search input with debounced form submission (300ms delay) * - Clear filter button to reset search and refresh results * @function */ document.addEventListener('DOMContentLoaded', function() { const searchInput = document.getElementById('roomSearchInput'); const form = document.getElementById('roomFilterForm'); if (searchInput && form) { searchInput.addEventListener('input', debounce(function() { form.submit(); }, 300)); } // Clear button logic const clearBtn = document.getElementById('clearRoomsFilter'); if (clearBtn && searchInput) { clearBtn.addEventListener('click', function() { searchInput.value = ''; form.submit(); }); } // Log when rooms page is viewed fetch('/api/events/log', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }, body: JSON.stringify({ event_type: 'room_list_view', details: { timestamp: new Date().toISOString() } }) }); // Log when a room is opened const openRoomButtons = document.querySelectorAll('a[href*="/room/"]'); openRoomButtons.forEach(button => { button.addEventListener('click', function(e) { const roomId = this.href.split('/room/')[1]; fetch('/api/events/log', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }, body: JSON.stringify({ event_type: 'room_open', details: { room_id: roomId, timestamp: new Date().toISOString() } }) }); }); }); // Log when a room is deleted const deleteRoomForms = document.querySelectorAll('form[action*="/delete"]'); deleteRoomForms.forEach(form => { form.addEventListener('submit', function(e) { const roomId = this.action.split('/rooms/')[1].split('/delete')[0]; fetch('/api/events/log', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }, body: JSON.stringify({ event_type: 'room_delete', details: { room_id: roomId, timestamp: new Date().toISOString() } }) }); }); }); // Log when a room is created const createRoomForm = document.querySelector('form[action*="/create"]'); if (createRoomForm) { createRoomForm.addEventListener('submit', function(e) { const formData = new FormData(this); fetch('/api/events/log', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }, body: JSON.stringify({ event_type: 'room_create', details: { room_name: formData.get('name'), description: formData.get('description'), timestamp: new Date().toISOString() } }) }); }); } // Log when a room is edited const editRoomForm = document.querySelector('form[action*="/edit"]'); if (editRoomForm) { editRoomForm.addEventListener('submit', function(e) { const roomId = this.action.split('/rooms/')[1].split('/edit')[0]; const formData = new FormData(this); fetch('/api/events/log', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }, body: JSON.stringify({ event_type: 'room_update', details: { room_id: roomId, room_name: formData.get('name'), description: formData.get('description'), timestamp: new Date().toISOString() } }) }); }); } // Log when room search is performed if (searchInput) { let searchTimeout; searchInput.addEventListener('input', function(e) { clearTimeout(searchTimeout); searchTimeout = setTimeout(() => { if (this.value.length > 0) { fetch('/api/events/log', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').getAttribute('content') }, body: JSON.stringify({ event_type: 'room_search', details: { search_term: this.value, timestamp: new Date().toISOString() } }) }); } }, 500); }); } });