feat: Enhance offline sync system with support for multiple action types (progress_update, inspection, feature_create, media_upload) and improved error handling

resources/js/app.js

@@ -2,28 +2,61 @@ import './bootstrap';
 
 import localforage from 'localforage';
 
-// Sync pending actions when online
-window.addEventListener('online', () => {
-    fetch('/offline/sync', { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content } })
-        .then(res => res.json())
-        .then(data => console.log('Synced:', data));
-});
-
-// Function to store offline progress update
-window.offlineProgressUpdate = function(phaseId, progress, comment, location) {
-    const payload = { phase_id: phaseId, progress, comment, location };
+// Generic function to queue any offline action
+window.queueOfflineAction = function(action, payload) {
+    const pendingAction = { action, payload };
     if (navigator.onLine) {
+        // Send immediately
         fetch('/offline/pending', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
-            body: JSON.stringify({ action: 'progress_update', payload })
-        }).then(() => alert('Actualizado online'));
+            body: JSON.stringify(pendingAction)
+        })
+        .then(res => res.json())
+        .then(data => {
+            if (data.queued) {
+                console.log('Action queued:', action);
+            } else {
+                console.error('Failed to queue action:', data);
+            }
+        })
+        .catch(err => {
+            console.error('Error queuing action:', err);
+        });
     } else {
+        // Store in IndexedDB (via localforage)
         localforage.getItem('pendingOffline').then(pending => {
             const list = pending || [];
-            list.push(payload);
+            list.push(pendingAction);
             localforage.setItem('pendingOffline', list);
-            alert('Guardado localmente, se sincronizará al recuperar internet');
+            console.log('Action stored offline:', action);
+        }).catch(err => {
+            console.error('Error storing offline action:', err);
         });
     }
 };
+
+// Function to store offline progress update (for backward compatibility)
+window.offlineProgressUpdate = function(phaseId, progress, comment, location) {
+    const payload = { phase_id: phaseId, progress, comment, location };
+    window.queueOfflineAction('progress_update', payload);
+};
+
+// Sync pending actions when online
+window.addEventListener('online', () => {
+    // Trigger a sync attempt
+    fetch('/offline/sync', { method: 'POST', headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content } })
+        .then(res => res.json())
+        .then(data => {
+            console.log('Synced:', data);
+            // Optionally, clear the local pending list if the sync was successful
+            // But note: the backend will mark them as synced, so we rely on the service worker to clean up?
+            // We'll leave it to the service worker to handle the state.
+        })
+        .catch(err => {
+            console.error('Error triggering sync:', err);
+        });
+});
+
+// Also, we can listen for the service worker's message to update the UI if needed
+// But for now, we'll rely on the service worker's notification and the online event.