119 lines
3.3 KiB
JavaScript
119 lines
3.3 KiB
JavaScript
import "../css/app.css";
|
|
|
|
// EuchreCamp Application JavaScript
|
|
|
|
// Initialize the application
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
initBottomNav();
|
|
initOfflineSupport();
|
|
initThemePreference();
|
|
});
|
|
|
|
// Bottom Navigation Active State
|
|
function initBottomNav() {
|
|
const currentPath = window.location.pathname;
|
|
const navItems = document.querySelectorAll('.bottom-nav-item');
|
|
|
|
navItems.forEach(item => {
|
|
if (item.getAttribute('href') === currentPath) {
|
|
item.classList.add('active');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Offline Support with Local Storage
|
|
function initOfflineSupport() {
|
|
// Cache recent data for offline access
|
|
if ('caches' in window) {
|
|
// Listen for online/offline events
|
|
window.addEventListener('online', handleOnline);
|
|
window.addEventListener('offline', handleOffline);
|
|
|
|
// Check initial state
|
|
if (!navigator.onLine) {
|
|
handleOffline();
|
|
}
|
|
}
|
|
}
|
|
|
|
function handleOnline() {
|
|
console.log('App is online');
|
|
// Clear any offline indicators
|
|
document.body.classList.remove('offline');
|
|
|
|
// Sync any pending changes
|
|
syncPendingChanges();
|
|
}
|
|
|
|
function handleOffline() {
|
|
console.log('App is offline');
|
|
// Add offline indicator to body
|
|
document.body.classList.add('offline');
|
|
|
|
// Show offline notification
|
|
showOfflineNotification();
|
|
}
|
|
|
|
function showOfflineNotification() {
|
|
// Create or update offline notification
|
|
let notification = document.getElementById('offline-notification');
|
|
if (!notification) {
|
|
notification = document.createElement('div');
|
|
notification.id = 'offline-notification';
|
|
notification.className = 'offline-notification';
|
|
notification.innerHTML = `
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" width="20" height="20">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
|
|
</svg>
|
|
<span>Offline Mode - Some features may be limited</span>
|
|
`;
|
|
document.body.appendChild(notification);
|
|
}
|
|
}
|
|
|
|
function syncPendingChanges() {
|
|
// Implement sync logic here
|
|
// This would sync any locally stored changes to the server
|
|
console.log('Syncing pending changes...');
|
|
}
|
|
|
|
// Theme Preference
|
|
function initThemePreference() {
|
|
// Check for saved theme preference
|
|
const savedTheme = localStorage.getItem('euchrecamp-theme');
|
|
if (savedTheme) {
|
|
document.documentElement.setAttribute('data-theme', savedTheme);
|
|
}
|
|
}
|
|
|
|
// Utility Functions
|
|
function saveToLocalStorage(key, data) {
|
|
try {
|
|
localStorage.setItem(`euchrecamp-${key}`, JSON.stringify(data));
|
|
return true;
|
|
} catch (e) {
|
|
console.error('Error saving to localStorage:', e);
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function getFromLocalStorage(key) {
|
|
try {
|
|
const data = localStorage.getItem(`euchrecamp-${key}`);
|
|
return data ? JSON.parse(data) : null;
|
|
} catch (e) {
|
|
console.error('Error reading from localStorage:', e);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function clearLocalStorage(key) {
|
|
try {
|
|
localStorage.removeItem(`euchrecamp-${key}`);
|
|
return true;
|
|
} catch (e) {
|
|
console.error('Error clearing localStorage:', e);
|
|
return false;
|
|
}
|
|
}
|