docupulse/static/js/rooms-list.js

/**
 * @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);
        });
    }
});