user logging

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) => {