/** * Settings Management System * Handles loading, saving, and applying user preferences */ let userPreferences = {}; // Load preferences on page load async function loadUserPreferences() { try { const response = await fetch('/api/user_preferences.php'); const data = await response.json(); if (data.success) { userPreferences = data.preferences; applyPreferences(); } } catch (error) { console.error('Error loading preferences:', error); } } // Apply preferences to UI function applyPreferences() { // Rows per page const rowsPerPage = userPreferences.rows_per_page || '15'; const rowsSelect = document.getElementById('rowsPerPage'); if (rowsSelect) { rowsSelect.value = rowsPerPage; } // Default filters const defaultFilters = (userPreferences.default_status_filters || 'Open,Pending,In Progress').split(','); document.querySelectorAll('[name="defaultFilters"]').forEach(cb => { cb.checked = defaultFilters.includes(cb.value); }); // Table density const density = userPreferences.table_density || 'normal'; const densitySelect = document.getElementById('tableDensity'); if (densitySelect) { densitySelect.value = density; } document.body.classList.remove('table-compact', 'table-comfortable'); if (density !== 'normal') { document.body.classList.add(`table-${density}`); } // Notifications const notificationsCheckbox = document.getElementById('notificationsEnabled'); if (notificationsCheckbox) { notificationsCheckbox.checked = userPreferences.notifications_enabled !== '0'; } const soundCheckbox = document.getElementById('soundEffects'); if (soundCheckbox) { soundCheckbox.checked = userPreferences.sound_effects !== '0'; } // Toast duration const toastDuration = userPreferences.toast_duration || '3000'; const toastSelect = document.getElementById('toastDuration'); if (toastSelect) { toastSelect.value = toastDuration; } } // Save preferences async function saveSettings() { const prefs = { rows_per_page: document.getElementById('rowsPerPage').value, default_status_filters: Array.from(document.querySelectorAll('[name="defaultFilters"]:checked')) .map(cb => cb.value).join(','), table_density: document.getElementById('tableDensity').value, notifications_enabled: document.getElementById('notificationsEnabled').checked ? '1' : '0', sound_effects: document.getElementById('soundEffects').checked ? '1' : '0', toast_duration: document.getElementById('toastDuration').value }; try { // Save each preference for (const [key, value] of Object.entries(prefs)) { const response = await fetch('/api/user_preferences.php', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key, value }) }); const result = await response.json(); if (!result.success) { throw new Error(`Failed to save ${key}`); } } if (typeof toast !== 'undefined') { toast.success('Preferences saved successfully!'); } closeSettingsModal(); // Reload page to apply new preferences setTimeout(() => window.location.reload(), 1000); } catch (error) { if (typeof toast !== 'undefined') { toast.error('Error saving preferences'); } console.error('Error saving preferences:', error); } } // Modal controls function openSettingsModal() { const modal = document.getElementById('settingsModal'); if (modal) { modal.style.display = 'block'; loadUserPreferences(); } } function closeSettingsModal() { const modal = document.getElementById('settingsModal'); if (modal) { modal.style.display = 'none'; } } // Close modal when clicking on backdrop (outside the settings content) function closeOnBackdropClick(event) { const modal = document.getElementById('settingsModal'); // Only close if clicking directly on the modal backdrop, not on content if (event.target === modal) { closeSettingsModal(); } } // Keyboard shortcut to open settings (Alt+S) document.addEventListener('keydown', (e) => { if (e.altKey && e.key === 's') { e.preventDefault(); openSettingsModal(); } // ESC to close modal if (e.key === 'Escape') { const modal = document.getElementById('settingsModal'); if (modal && modal.style.display === 'block') { closeSettingsModal(); } } }); // Initialize on page load document.addEventListener('DOMContentLoaded', loadUserPreferences);