user logging

static/js/events.js

@@ -41,15 +41,47 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Function to load event details
     function loadEventDetails(eventId) {
+        console.log('Loading details for event:', eventId);
         fetch(`/api/events/${eventId}`)
-            .then(response => response.json())
+            .then(response => {
+                console.log('Response status:', response.status);
+                return response.json();
+            })
             .then(data => {
-                const formattedDetails = JSON.stringify(data.details, null, 2);
-                eventDetailsContent.textContent = formattedDetails;
+                console.log('Received event data:', data);
+                
+                // Format the details for display
+                const formattedDetails = {
+                    'Event ID': data.id,
+                    'Event Type': data.event_type,
+                    'Timestamp': new Date(data.timestamp).toLocaleString(),
+                    'User': data.user ? `${data.user.username} (${data.user.last_name})` : 'N/A',
+                    'IP Address': data.ip_address || 'N/A',
+                    'User Agent': data.user_agent || 'N/A'
+                };
+                
+                // Handle details separately
+                if (data.details) {
+                    if (typeof data.details === 'object') {
+                        formattedDetails['Details'] = JSON.stringify(data.details, null, 2);
+                    } else {
+                        formattedDetails['Details'] = data.details;
+                    }
+                } else {
+                    formattedDetails['Details'] = 'No additional details';
+                }
+                
+                // Convert to formatted string
+                const detailsText = Object.entries(formattedDetails)
+                    .map(([key, value]) => `${key}: ${value}`)
+                    .join('\n\n');
+                
+                console.log('Formatted details:', detailsText);
+                eventDetailsContent.textContent = detailsText;
             })
             .catch(error => {
                 console.error('Error loading event details:', error);
-                eventDetailsContent.textContent = 'Error loading event details';
+                eventDetailsContent.textContent = 'Error loading event details. Please try again.';
             });
     }
     

static/js/settings.js

@@ -13,9 +13,8 @@ document.addEventListener('DOMContentLoaded', function() {
     const secondaryColorInput = document.getElementById('secondaryColor');
     const colorSettingsForm = document.getElementById('colorSettingsForm');
 
-    // Tab persistence
-    const settingsTabs = document.querySelectorAll('#settingsTabs button[data-bs-toggle="tab"]');
-    const tabContent = document.querySelectorAll('.tab-pane');
+    // Get all tab buttons
+    const settingsTabs = document.querySelectorAll('[data-bs-toggle="tab"]');
 
     /**
      * Activates a specific settings tab and updates the UI accordingly.
@@ -24,27 +23,89 @@ document.addEventListener('DOMContentLoaded', function() {
      * @param {string} tabId - The ID of the tab to activate
      */
     function activateTab(tabId) {
-        // Remove active class from all tabs and content
+        // Update URL without reloading the page
+        const url = new URL(window.location.href);
+        url.searchParams.set('tab', tabId);
+        window.history.pushState({}, '', url);
+        
+        // Save active tab to localStorage
+        localStorage.setItem('settingsActiveTab', tabId);
+        
+        // Update active state of tabs
         settingsTabs.forEach(tab => {
-            tab.classList.remove('active');
-            tab.setAttribute('aria-selected', 'false');
+            const targetId = tab.getAttribute('data-bs-target').substring(1);
+            if (targetId === tabId) {
+                tab.classList.add('active');
+            } else {
+                tab.classList.remove('active');
+            }
         });
-        tabContent.forEach(content => {
-            content.classList.remove('show', 'active');
+        
+        // Update active state of tab panes
+        document.querySelectorAll('.tab-pane').forEach(pane => {
+            if (pane.id === tabId) {
+                pane.classList.add('show', 'active');
+            } else {
+                pane.classList.remove('show', 'active');
+            }
         });
 
-        // Activate the selected tab
-        const selectedTab = document.querySelector(`#${tabId}-tab`);
-        const selectedContent = document.getElementById(tabId);
-        if (selectedTab && selectedContent) {
-            selectedTab.classList.add('active');
-            selectedTab.setAttribute('aria-selected', 'true');
-            selectedContent.classList.add('show', 'active');
-            // Save to localStorage
-            localStorage.setItem('settingsActiveTab', tabId);
+        // If switching to events tab, fetch events data
+        if (tabId === 'events') {
+            fetchEvents();
         }
     }
 
+    /**
+     * Fetches events data from the server and updates the events table
+     * @function
+     */
+    function fetchEvents() {
+        const url = new URL(window.location.href);
+        const eventType = url.searchParams.get('event_type') || '';
+        const dateRange = url.searchParams.get('date_range') || '7d';
+        const userId = url.searchParams.get('user_id') || '';
+        const page = url.searchParams.get('page') || 1;
+
+        // Show loading state
+        const eventsTableBody = document.getElementById('eventsTableBody');
+        if (eventsTableBody) {
+            eventsTableBody.innerHTML = '<tr><td colspan="5" class="text-center">Loading events...</td></tr>';
+        }
+
+        // Fetch events data
+        fetch(`/settings/events?event_type=${eventType}&date_range=${dateRange}&user_id=${userId}&page=${page}`, {
+            headers: {
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+            .then(response => response.text())
+            .then(html => {
+                // Extract the events table content from the response
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(html, 'text/html');
+                const newEventsTable = doc.getElementById('eventsTableBody');
+                
+                console.log('Found table body:', newEventsTable); // Debug log
+                
+                if (newEventsTable && eventsTableBody) {
+                    eventsTableBody.innerHTML = newEventsTable.innerHTML;
+                    console.log('Updated table content'); // Debug log
+                } else {
+                    console.error('Could not find events table in response');
+                    if (eventsTableBody) {
+                        eventsTableBody.innerHTML = '<tr><td colspan="5" class="text-center">Error: Could not load events</td></tr>';
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Error fetching events:', error);
+                if (eventsTableBody) {
+                    eventsTableBody.innerHTML = '<tr><td colspan="5" class="text-center">Error loading events</td></tr>';
+                }
+            });
+    }
+
     // Add click event listeners to tabs
     settingsTabs.forEach(tab => {
         tab.addEventListener('click', (e) => {