utils and event logging

static/js/events.js

@@ -0,0 +1,95 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize variables
+    let currentPage = 1;
+    const totalPages = parseInt(document.getElementById('totalPages').textContent);
+    
+    // Get filter elements
+    const eventTypeFilter = document.getElementById('eventTypeFilter');
+    const dateRangeFilter = document.getElementById('dateRangeFilter');
+    const userFilter = document.getElementById('userFilter');
+    const applyFiltersBtn = document.getElementById('applyFilters');
+    
+    // Get pagination elements
+    const prevPageBtn = document.getElementById('prevPage');
+    const nextPageBtn = document.getElementById('nextPage');
+    const currentPageSpan = document.getElementById('currentPage');
+    
+    // Event details modal
+    const eventDetailsModal = document.getElementById('eventDetailsModal');
+    const eventDetailsContent = document.getElementById('eventDetailsContent');
+    
+    // Function to update URL with current filters
+    function updateURL() {
+        const params = new URLSearchParams(window.location.search);
+        params.set('page', currentPage);
+        if (eventTypeFilter.value) params.set('event_type', eventTypeFilter.value);
+        if (dateRangeFilter.value) params.set('date_range', dateRangeFilter.value);
+        if (userFilter.value) params.set('user_id', userFilter.value);
+        window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
+    }
+    
+    // Function to load events with current filters
+    function loadEvents() {
+        const params = new URLSearchParams();
+        params.set('page', currentPage);
+        if (eventTypeFilter.value) params.set('event_type', eventTypeFilter.value);
+        if (dateRangeFilter.value) params.set('date_range', dateRangeFilter.value);
+        if (userFilter.value) params.set('user_id', userFilter.value);
+        
+        window.location.href = `${window.location.pathname}?${params.toString()}`;
+    }
+    
+    // Function to load event details
+    function loadEventDetails(eventId) {
+        fetch(`/api/events/${eventId}`)
+            .then(response => response.json())
+            .then(data => {
+                const formattedDetails = JSON.stringify(data.details, null, 2);
+                eventDetailsContent.textContent = formattedDetails;
+            })
+            .catch(error => {
+                console.error('Error loading event details:', error);
+                eventDetailsContent.textContent = 'Error loading event details';
+            });
+    }
+    
+    // Event listeners for filters
+    applyFiltersBtn.addEventListener('click', function() {
+        currentPage = 1;
+        loadEvents();
+    });
+    
+    // Event listeners for pagination
+    prevPageBtn.addEventListener('click', function() {
+        if (currentPage > 1) {
+            currentPage--;
+            loadEvents();
+        }
+    });
+    
+    nextPageBtn.addEventListener('click', function() {
+        if (currentPage < totalPages) {
+            currentPage++;
+            loadEvents();
+        }
+    });
+    
+    // Event listener for event details modal
+    eventDetailsModal.addEventListener('show.bs.modal', function(event) {
+        const button = event.relatedTarget;
+        const eventId = button.getAttribute('data-event-id');
+        loadEventDetails(eventId);
+    });
+    
+    // Initialize filters from URL parameters
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has('event_type')) eventTypeFilter.value = urlParams.get('event_type');
+    if (urlParams.has('date_range')) dateRangeFilter.value = urlParams.get('date_range');
+    if (urlParams.has('user_id')) userFilter.value = urlParams.get('user_id');
+    if (urlParams.has('page')) currentPage = parseInt(urlParams.get('page'));
+    
+    // Update pagination buttons state
+    prevPageBtn.disabled = currentPage === 1;
+    nextPageBtn.disabled = currentPage === totalPages;
+    currentPageSpan.textContent = currentPage;
+});