show completed trips on profiles

frontend/app.js

@@ -107,10 +107,22 @@ function updateUserProfile(user) {
     const avatarEl = document.getElementById('userAvatar');
     const defaultAvatar = 'https://www.fitbit.com/images/profile/defaultProfile_150_male.png';
 
-    if (nameEl && user.displayName) nameEl.textContent = user.displayName;
+    if (nameEl && user.displayName) {
+        nameEl.textContent = user.displayName;
+        nameEl.style.cursor = 'pointer';
+        if (!nameEl.hasListener) {
+            nameEl.addEventListener('click', () => openUserProfile(currentUserID));
+            nameEl.hasListener = true;
+        }
+    }
     if (avatarEl) {
         avatarEl.src = user.avatarUrl || defaultAvatar;
+        avatarEl.style.cursor = 'pointer';
         avatarEl.onerror = () => { avatarEl.src = defaultAvatar; };
+        if (!avatarEl.hasListener) {
+            avatarEl.addEventListener('click', () => openUserProfile(currentUserID));
+            avatarEl.hasListener = true;
+        }
     }
 }
 
@@ -369,7 +381,7 @@ function createKMLFileHTML(file, isOwnFiles, listId, index) {
                 </div>
             </div>
             <div class="kml-file-actions">
-                <button id="open-${uniqueId}" class="primary-btn small" title="View Details">📂 Open</button>
+                <button id="open-${uniqueId}" class="primary-btn small" title="Start this trip">▶️ Start Trip</button>
                 ${!isOwnFiles ? `
                     <button id="upvote-${uniqueId}" class="vote-btn" title="Upvote">
                         👍 <span class="vote-count">${file.votes}</span>
@@ -907,6 +919,9 @@ function setupEventListeners() {
 async function calculateAndStartRoute(startAddress, endAddress, isRestoring = false) {
     if (!window.google) return;
 
+    // Reset celebration state immediately on start attempt
+    window.hasCelebrated = false;
+
     // Use Directions Service to finding route
     if (!directionsService) {
         directionsService = new google.maps.DirectionsService();
@@ -945,6 +960,14 @@ async function calculateAndStartRoute(startAddress, endAddress, isRestoring = fa
             // Save state
             localStorage.setItem(LOCATION_STORAGE, JSON.stringify(locationData));
 
+            currentTripDetails = {
+                type: 'address',
+                route_name: `${leg.start_address} to ${leg.end_address}`,
+                start_address: leg.start_address,
+                end_address: leg.end_address,
+                distance: routeTotalDistance / 1000 // In km
+            };
+
             // Initialize step reference
             // Only start a new trip on server if this is a fresh start, not a restore
             if (!isRestoring) {
@@ -1004,6 +1027,9 @@ async function calculateAndStartRoute(startAddress, endAddress, isRestoring = fa
 function startFromLocation(locationLatLng, address) {
     const location = locationLatLng;
 
+    // Reset celebration state
+    window.hasCelebrated = false;
+
     // Initialize Street View panorama
     panorama = new google.maps.StreetViewPanorama(
         document.getElementById('panorama'),
@@ -1176,8 +1202,12 @@ async function triggerDrain() {
 // Step tracking
 // Using a 6-second delay buffer to ensure smooth interpolation between past known points.
 // This prevents overshooting/guessing.
-const INTERPOLATION_DELAY = 6000; // 6 seconds
-let stateBuffer = []; // Array of {t: timestamp, s: steps}
+const INTERPOLATION_DELAY = 6000;
+// State variables
+let currentTripDetails = null;
+window.hasCelebrated = false;
+let stateBuffer = [];
+// Array of {t: timestamp, s: steps}
 let displayTripSteps = 0; // Current interpolated value
 
 
@@ -1441,6 +1471,14 @@ function startCameraAnimation() {
                 });
             }
 
+            // --- TRIP COMPLETION CHECK ---
+            if (masterPath.length > 0 && routeTotalDistance > 0 && !window.hasCelebrated) {
+                if (distanceTraveled >= routeTotalDistance) {
+                    window.hasCelebrated = true;
+                    triggerCelebration(distanceTraveled);
+                }
+            }
+
             idleAnimationId = requestAnimationFrame(animate);
         } catch (e) {
             console.error("Animation Loop Crash:", e);
@@ -1497,15 +1535,45 @@ async function openUserProfile(userId) {
     updateURLState('profile', { userId: userId });
 
     try {
-        // 1. Fetch User Info
+        // 1. Fetch User Info & Completed Trips
         const userResp = await fetch(`/api/user/profile?user_id=${userId}`);
         if (!userResp.ok) throw new Error('User not found');
-        const user = await userResp.json();
+        const profileData = await userResp.json();
+        const user = profileData.user;
 
         document.getElementById('profileDisplayName').textContent = user.display_name || 'Unknown User';
         document.getElementById('profileFitbitID').textContent = `@${user.fitbit_user_id}`;
         document.getElementById('profileAvatar').src = user.avatar_url || 'https://www.fitbit.com/images/profile/defaultProfile_150_male.png';
 
+        // Render Completed Trips
+        const completedListEl = document.getElementById('profileCompletedTripsList');
+        if (profileData.completed_trips && profileData.completed_trips.length > 0) {
+            completedListEl.innerHTML = profileData.completed_trips.map((trip, index) => `
+                <div class="kml-file-item">
+                    <div class="kml-file-info">
+                        <div class="kml-file-name">${escapeHtml(trip.route_name)}</div>
+                        <div class="kml-file-meta">
+                            <span>📏 ${trip.distance.toFixed(2)} km</span>
+                            <span class="trip-date">📅 ${new Date(trip.completed_at).toLocaleDateString()}</span>
+                        </div>
+                    </div>
+                    <div class="kml-file-actions">
+                        <button id="start-completed-${index}" class="primary-btn small-btn">▶️ Start Trip</button>
+                    </div>
+                </div>
+            `).join('');
+
+            // Attach listeners for completed trips
+            profileData.completed_trips.forEach((trip, index) => {
+                document.getElementById(`start-completed-${index}`).addEventListener('click', (e) => {
+                    e.stopPropagation(); // Avoid triggering potential row clicks
+                    startCompletedTrip(trip);
+                });
+            });
+        } else {
+            completedListEl.innerHTML = '<p class="empty-message">No completed walks yet.</p>';
+        }
+
         // 2. Fetch Public KMLs
         currentProfileUserId = userId;
         currentProfilePage = 1;
@@ -1515,6 +1583,7 @@ async function openUserProfile(userId) {
         console.error("Error loading profile:", err);
         document.getElementById('profileDisplayName').textContent = 'Error';
         document.getElementById('profilePublicTripsList').innerHTML = '<p class="empty-message">Failed to load user profile.</p>';
+        document.getElementById('profileCompletedTripsList').innerHTML = '<p class="empty-message">Error loading profile.</p>';
     }
 }
 
@@ -1601,6 +1670,26 @@ function setupUserProfileListeners() {
         currentProfilePage++;
         loadProfilePublicFiles();
     });
+
+    // Profile Tabs
+    document.querySelectorAll('.profile-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+            const tabName = tab.dataset.tab;
+
+            // Update tab buttons
+            document.querySelectorAll('.profile-tab').forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+
+            // Update panes
+            document.querySelectorAll('.profile-pane').forEach(p => p.classList.remove('active'));
+            document.getElementById(`${tabName}-pane`).classList.add('active');
+        });
+    });
+
+    // Close Celebration
+    document.getElementById('closeCelebration').addEventListener('click', () => {
+        document.getElementById('celebration-overlay').classList.remove('active');
+    });
 }
 
 
@@ -2025,6 +2114,16 @@ function startFromCustomRoute(pathData, routeName, isRestoring = false, markers
 
     localStorage.setItem(LOCATION_STORAGE, JSON.stringify(locationData));
 
+    // Reset celebration state
+    window.hasCelebrated = false;
+    currentTripDetails = {
+        type: 'kml',
+        route_name: routeName,
+        kml_filename: locationData.routeName,
+        kml_owner_id: currentUserID,
+        distance: routeTotalDistance / 1000 // In km
+    };
+
     // Initialize/Reset Server Trip
     if (!isRestoring) {
         fetch('/api/trip', { method: 'POST' }).catch(console.error);
@@ -2157,3 +2256,101 @@ function renderTripMarkers(markers) {
     });
 }
 
+
+// --- Celebration & Trip Re-entry Helpers ---
+
+async function triggerCelebration(finalDistance) {
+    console.log("🎉 Celebration Triggered!");
+    const overlay = document.getElementById('celebration-overlay');
+    const routeNameEl = document.getElementById('finishRouteName');
+    const distanceEl = document.getElementById('finishDistance');
+
+    if (currentTripDetails) {
+        routeNameEl.textContent = currentTripDetails.route_name;
+        currentTripDetails.distance = finalDistance / 1000; // Store in km
+    }
+    distanceEl.textContent = `${(finalDistance / 1000).toFixed(2)} km`;
+
+    overlay.classList.add('active');
+    createConfetti();
+
+    // Report to backend
+    if (currentTripDetails) {
+        try {
+            await fetch('/api/trip/complete', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    type: currentTripDetails.type,
+                    route_name: currentTripDetails.route_name,
+                    start_address: currentTripDetails.start_address || '',
+                    end_address: currentTripDetails.end_address || '',
+                    kml_filename: currentTripDetails.kml_filename || '',
+                    kml_owner_id: currentTripDetails.kml_owner_id || '',
+                    distance: currentTripDetails.distance
+                })
+            });
+        } catch (err) {
+            console.error("Failed to record trip completion:", err);
+        }
+    }
+}
+
+function createConfetti() {
+    const container = document.querySelector('.confetti-container');
+    if (!container) return;
+    const colors = ['#6366f1', '#8b5cf6', '#10b981', '#f59e0b', '#ef4444'];
+
+    for (let i = 0; i < 100; i++) {
+        const confetti = document.createElement('div');
+        confetti.className = 'confetti';
+        confetti.style.left = Math.random() * 100 + '%';
+        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+        confetti.style.width = Math.random() * 8 + 4 + 'px';
+        confetti.style.height = Math.random() * 8 + 4 + 'px';
+        confetti.style.opacity = Math.random();
+        confetti.style.borderRadius = '50%';
+
+        const duration = Math.random() * 3 + 2;
+        confetti.style.top = '-10px';
+        confetti.style.position = 'absolute';
+        confetti.style.animation = `confetti-fall ${duration}s linear forwards`;
+        confetti.style.animationDelay = Math.random() * 2 + 's';
+
+        container.appendChild(confetti);
+
+        // Remove after animation
+        setTimeout(() => confetti.remove(), (duration + 2) * 1000);
+    }
+}
+
+function startCompletedTrip(trip) {
+    console.log("Reviewing completed trip re-entry:", trip);
+
+    if (trip.trip_type === 'address') {
+        // Pre-fill setup overlay
+        document.getElementById('startLocationInput').value = trip.start_address;
+        document.getElementById('endLocationInput').value = trip.end_address;
+
+        // Hide profile, show setup
+        document.getElementById('user-profile-overlay').classList.remove('active');
+        showSetupOverlay();
+
+        // Update URL to home/setup state
+        updateURLState('home', null);
+
+    } else if (trip.trip_type === 'kml') {
+        // Open KML details with metadata from trip
+        // Note: HandleUserProfile now joins metadata info
+        const file = {
+            filename: trip.kml_filename,
+            user_id: trip.kml_owner_id,
+            display_name: trip.kml_display_name,
+            distance: trip.distance,
+            votes: trip.kml_votes,
+            description: trip.kml_description,
+            is_public: true
+        };
+        openKMLDetails(file);
+    }
+}