feat: Add JavaScript for bottom nav, offline support, and local storage

2026-03-27 13:23:32 -07:00
parent f10f1df91e
commit c0f9733c10
1 changed files with 117 additions and 0 deletions
@@ -1 +1,118 @@
 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;
+  }
+}