Separieren vom css und js und fixes

2025-09-04 14:14:59 +02:00
parent 0cfac629b5
commit f6cd5c734f
12 changed files with 3130 additions and 2462 deletions
--- a/public/js/leaderboard.js
+++ b/public/js/leaderboard.js
@@ -0,0 +1,500 @@
+// Supabase configuration
+const SUPABASE_URL = 'https://lfxlplnypzvjrhftaoog.supabase.co';
+const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImxmeGxwbG55cHp2anJoZnRhb29nIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NDkyMTQ3NzIsImV4cCI6MjA2NDc5MDc3Mn0.XR4preBqWAQ1rT4PFbpkmRdz57BTwIusBI89fIxDHM8';
+
+// Initialize Supabase client
+const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+
+// Initialize Socket.IO connection
+const socket = io();
+
+// Global variable to store locations with coordinates
+let locationsData = [];
+
+// WebSocket Event Handlers
+socket.on('connect', () => {
+    console.log('🔌 WebSocket verbunden');
+});
+
+socket.on('disconnect', () => {
+    console.log('🔌 WebSocket getrennt');
+});
+
+socket.on('newTime', (data) => {
+    console.log('🏁 Neue Zeit empfangen:', data);
+    showNotification(data);
+    // Reload data to show the new time
+    loadData();
+});
+
+// Notification Functions
+function showNotification(timeData) {
+    const notificationBubble = document.getElementById('notificationBubble');
+    const notificationTitle = document.getElementById('notificationTitle');
+    const notificationSubtitle = document.getElementById('notificationSubtitle');
+    
+    // Format the time data
+    const playerName = timeData.player_name || 'Unbekannter Spieler';
+    const locationName = timeData.location_name || 'Unbekannter Standort';
+    const timeString = timeData.recorded_time || '--:--';
+    
+    // Update notification content
+    notificationTitle.textContent = `🏁 Neue Zeit von ${playerName}!`;
+    notificationSubtitle.textContent = `${timeString} • ${locationName}`;
+    
+    // Show notification
+    notificationBubble.classList.remove('hide');
+    notificationBubble.classList.add('show');
+    
+    // Auto-hide after 5 seconds
+    setTimeout(() => {
+        hideNotification();
+    }, 5000);
+}
+
+function hideNotification() {
+    const notificationBubble = document.getElementById('notificationBubble');
+    notificationBubble.classList.remove('show');
+    notificationBubble.classList.add('hide');
+    
+    // Remove hide class after animation
+    setTimeout(() => {
+        notificationBubble.classList.remove('hide');
+    }, 300);
+}
+
+// Check authentication status
+async function checkAuth() {
+    try {
+        const { data: { session } } = await supabase.auth.getSession();
+        
+        if (session) {
+            // User is logged in, show dashboard button
+            document.getElementById('adminLoginBtn').style.display = 'none';
+            document.getElementById('dashboardBtn').style.display = 'inline-block';
+            document.getElementById('logoutBtn').style.display = 'inline-block';
+        } else {
+            // User is not logged in, show admin login button
+            document.getElementById('adminLoginBtn').style.display = 'inline-block';
+            document.getElementById('dashboardBtn').style.display = 'none';
+            document.getElementById('logoutBtn').style.display = 'none';
+        }
+    } catch (error) {
+        console.error('Error checking auth:', error);
+        // Fallback: show login button if auth check fails
+        document.getElementById('adminLoginBtn').style.display = 'inline-block';
+        document.getElementById('dashboardBtn').style.display = 'none';
+        document.getElementById('logoutBtn').style.display = 'none';
+    }
+}
+
+// Logout function
+async function logout() {
+    try {
+        const { error } = await supabase.auth.signOut();
+        if (error) {
+            console.error('Error logging out:', error);
+        } else {
+            window.location.reload();
+        }
+    } catch (error) {
+        console.error('Error during logout:', error);
+        window.location.reload();
+    }
+}
+
+// Load locations from database
+async function loadLocations() {
+    try {
+        const response = await fetch('/public-api/locations');
+        if (!response.ok) {
+            throw new Error('Failed to fetch locations');
+        }
+        
+        const responseData = await response.json();
+        const locations = responseData.data || responseData; // Handle both formats
+        const locationSelect = document.getElementById('locationSelect');
+        
+        // Store locations globally for distance calculations
+        locationsData = locations;
+        
+        // Clear existing options except "Alle Standorte"
+        locationSelect.innerHTML = '<option value="all">🌍 Alle Standorte</option>';
+        
+        // Add locations from database
+        locations.forEach(location => {
+            const option = document.createElement('option');
+            option.value = location.name;
+            option.textContent = `📍 ${location.name}`;
+            locationSelect.appendChild(option);
+        });
+        
+    } catch (error) {
+        console.error('Error loading locations:', error);
+    }
+}
+
+// Calculate distance between two points using Haversine formula
+function calculateDistance(lat1, lon1, lat2, lon2) {
+    const R = 6371; // Earth's radius in kilometers
+    const dLat = toRadians(lat2 - lat1);
+    const dLon = toRadians(lon2 - lon1);
+    
+    const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+        Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) *
+        Math.sin(dLon / 2) * Math.sin(dLon / 2);
+    
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+    const distance = R * c; // Distance in kilometers
+    
+    return distance;
+}
+
+function toRadians(degrees) {
+    return degrees * (Math.PI / 180);
+}
+
+// Find nearest location based on user's current position
+async function findNearestLocation() {
+    const btn = document.getElementById('findLocationBtn');
+    const locationSelect = document.getElementById('locationSelect');
+    
+    // Check if geolocation is supported
+    if (!navigator.geolocation) {
+        showLocationError('Geolocation wird von diesem Browser nicht unterstützt.');
+        return;
+    }
+
+    // Update button state to loading
+    btn.disabled = true;
+    btn.classList.add('loading');
+    btn.textContent = '🔍 Suche...';
+
+    try {
+        // Get user's current position
+        const position = await new Promise((resolve, reject) => {
+            navigator.geolocation.getCurrentPosition(
+                resolve,
+                reject,
+                {
+                    enableHighAccuracy: true,
+                    timeout: 10000,
+                    maximumAge: 300000 // 5 minutes
+                }
+            );
+        });
+
+        const userLat = position.coords.latitude;
+        const userLon = position.coords.longitude;
+
+        // Calculate distances to all locations
+        const locationsWithDistance = locationsData.map(location => ({
+            ...location,
+            distance: calculateDistance(
+                userLat, 
+                userLon, 
+                parseFloat(location.latitude), 
+                parseFloat(location.longitude)
+            )
+        }));
+
+        // Find the nearest location
+        const nearestLocation = locationsWithDistance.reduce((nearest, current) => {
+            return current.distance < nearest.distance ? current : nearest;
+        });
+
+        // Select the nearest location in the dropdown
+        locationSelect.value = nearestLocation.name;
+        
+        // Trigger change event to update the leaderboard
+        locationSelect.dispatchEvent(new Event('change'));
+
+        // Show success notification
+        showLocationSuccess(nearestLocation.name, nearestLocation.distance);
+
+    } catch (error) {
+        console.error('Error getting location:', error);
+        let errorMessage = 'Standort konnte nicht ermittelt werden.';
+        
+        if (error.code) {
+            switch(error.code) {
+                case error.PERMISSION_DENIED:
+                    errorMessage = 'Standortzugriff wurde verweigert. Bitte erlaube den Standortzugriff in den Browser-Einstellungen.';
+                    break;
+                case error.POSITION_UNAVAILABLE:
+                    errorMessage = 'Standortinformationen sind nicht verfügbar.';
+                    break;
+                case error.TIMEOUT:
+                    errorMessage = 'Zeitüberschreitung beim Abrufen des Standorts.';
+                    break;
+            }
+        }
+        
+        showLocationError(errorMessage);
+    } finally {
+        // Reset button state
+        btn.disabled = false;
+        btn.classList.remove('loading');
+        btn.textContent = '📍 Mein Standort';
+    }
+}
+
+// Show success notification for location finding
+function showLocationSuccess(locationName, distance) {
+    const notificationBubble = document.getElementById('notificationBubble');
+    const notificationTitle = document.getElementById('notificationTitle');
+    const notificationSubtitle = document.getElementById('notificationSubtitle');
+    
+    // Update notification content
+    notificationTitle.textContent = `📍 Standort gefunden!`;
+    notificationSubtitle.textContent = `${locationName} (${distance.toFixed(1)} km entfernt)`;
+    
+    // Show notification
+    notificationBubble.classList.remove('hide');
+    notificationBubble.classList.add('show');
+    
+    // Auto-hide after 4 seconds
+    setTimeout(() => {
+        hideNotification();
+    }, 4000);
+}
+
+// Show error notification for location finding
+function showLocationError(message) {
+    const notificationBubble = document.getElementById('notificationBubble');
+    const notificationTitle = document.getElementById('notificationTitle');
+    const notificationSubtitle = document.getElementById('notificationSubtitle');
+    
+    // Change notification style to error
+    notificationBubble.style.background = 'linear-gradient(135deg, #dc3545, #c82333)';
+    
+    // Update notification content
+    notificationTitle.textContent = '❌ Fehler';
+    notificationSubtitle.textContent = message;
+    
+    // Show notification
+    notificationBubble.classList.remove('hide');
+    notificationBubble.classList.add('show');
+    
+    // Auto-hide after 6 seconds
+    setTimeout(() => {
+        hideNotification();
+        // Reset notification style
+        notificationBubble.style.background = 'linear-gradient(135deg, #00d4ff, #0891b2)';
+    }, 6000);
+}
+
+// Load data from local database via MCP
+async function loadData() {
+    try {
+        const location = document.getElementById('locationSelect').value;
+        const period = document.querySelector('.time-tab.active').dataset.period;
+        
+        // Build query parameters
+        const params = new URLSearchParams();
+        if (location && location !== 'all') {
+            params.append('location', location);
+        }
+        if (period && period !== 'all') {
+            params.append('period', period);
+        }
+        
+        // Fetch times with player and location data from local database
+        const response = await fetch(`/public-api/times-with-details?${params.toString()}`);
+        if (!response.ok) {
+            throw new Error('Failed to fetch times');
+        }
+        
+        const times = await response.json();
+        
+        // Convert to the format expected by the leaderboard
+        const leaderboardData = times.map(time => {
+            const { minutes, seconds, milliseconds } = time.recorded_time;
+            const timeString = `${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds}`;
+            const playerName = time.player ? 
+                `${time.player.firstname} ${time.player.lastname}` : 
+                'Unknown Player';
+            const locationName = time.location ? time.location.name : 'Unknown Location';
+            const date = new Date(time.created_at).toISOString().split('T')[0];
+            
+            return {
+                name: playerName,
+                time: timeString,
+                date: date,
+                location: locationName
+            };
+        });
+
+        // Sort by time (fastest first)
+        leaderboardData.sort((a, b) => {
+            const timeA = timeToSeconds(a.time);
+            const timeB = timeToSeconds(b.time);
+            return timeA - timeB;
+        });
+
+        updateLeaderboard(leaderboardData);
+        updateStats(leaderboardData);
+        updateCurrentSelection();
+        
+    } catch (error) {
+        console.error('Error loading data:', error);
+        // Fallback to sample data if API fails
+        loadSampleData();
+    }
+}
+
+// Fallback sample data based on real database data
+function loadSampleData() {
+    const sampleData = [
+        { name: "Carsten Graf", time: "01:28.945", date: "2025-08-30", location: "Ulm Donaubad" },
+        { name: "Carsten Graf", time: "01:30.945", date: "2025-08-30", location: "Ulm Donaubad" },
+        { name: "Max Mustermann", time: "01:50.945", date: "2025-08-30", location: "Ulm Donaubad" },
+        { name: "Carsten Graf", time: "02:50.945", date: "2025-08-31", location: "Test" },
+        { name: "Max Mustermann", time: "02:50.945", date: "2025-08-31", location: "Test" },
+        { name: "Carsten Graf", time: "01:10.945", date: "2025-09-02", location: "Test" },
+        { name: "Carsten Graf", time: "01:11.945", date: "2025-09-02", location: "Test" },
+        { name: "Carsten Graf", time: "01:11.945", date: "2025-09-02", location: "Ulm Donaubad" }
+    ];
+    
+    updateLeaderboard(sampleData);
+    updateStats(sampleData);
+    updateCurrentSelection();
+}
+
+function timeToSeconds(timeStr) {
+    const [minutes, seconds] = timeStr.split(':');
+    return parseFloat(minutes) * 60 + parseFloat(seconds);
+}
+
+function updateStats(data) {
+    const totalPlayers = new Set(data.map(item => item.name)).size;
+    const bestTime = data.length > 0 ? data[0].time : '--:--';
+    const totalRecords = data.length;
+    
+    document.getElementById('totalPlayers').textContent = totalPlayers;
+    document.getElementById('bestTime').textContent = bestTime;
+    document.getElementById('totalRecords').textContent = totalRecords;
+}
+
+function updateCurrentSelection() {
+    const location = document.getElementById('locationSelect').value;
+    const period = document.querySelector('.time-tab.active').dataset.period;
+    
+    // Get the display text from the selected option
+    const locationSelect = document.getElementById('locationSelect');
+    const selectedLocationOption = locationSelect.options[locationSelect.selectedIndex];
+    const locationDisplay = selectedLocationOption ? selectedLocationOption.textContent : '🌍 Alle Standorte';
+    
+    const periodIcons = {
+        'today': '📅 Heute',
+        'week': '📊 Diese Woche',
+        'month': '📈 Dieser Monat',
+        'all': '♾️ Alle Zeiten'
+    };
+    
+    document.getElementById('currentSelection').textContent = 
+        `${locationDisplay} • ${periodIcons[period]}`;
+    
+    document.getElementById('lastUpdated').textContent = 
+        `Letzter Sync: ${new Date().toLocaleTimeString('de-DE')}`;
+}
+
+function updateLeaderboard(data) {
+    const rankingList = document.getElementById('rankingList');
+    
+    if (data.length === 0) {
+        rankingList.innerHTML = `
+            <div class="empty-state">
+                <div class="empty-icon">🏁</div>
+                <div class="empty-title">Keine Rekorde gefunden</div>
+                <div class="empty-description">
+                    Für diese Filtereinstellungen liegen noch keine Zeiten vor.<br>
+                    Versuche es mit einem anderen Zeitraum oder Standort.
+                </div>
+            </div>
+        `;
+        return;
+    }
+    
+    rankingList.innerHTML = data.map((player, index) => {
+        const rank = index + 1;
+        let positionClass = '';
+        let trophy = '';
+        
+        if (rank === 1) {
+            positionClass = 'gold';
+            trophy = '👑';
+        } else if (rank === 2) {
+            positionClass = 'silver';  
+            trophy = '🥈';
+        } else if (rank === 3) {
+            positionClass = 'bronze';
+            trophy = '🥉';
+        } else if (rank <= 10) {
+            trophy = '⭐';
+        }
+        
+        const formatDate = new Date(player.date).toLocaleDateString('de-DE', {
+            day: '2-digit',
+            month: 'short'
+        });
+        
+        return `
+            <div class="rank-entry">
+                <div class="position ${positionClass}">#${rank}</div>
+                <div class="player-data">
+                    <div class="player-name">${player.name}</div>
+                    <div class="player-meta">
+                        <span class="location-tag">${player.location}</span>
+                        <span>🗓️ ${formatDate}</span>
+                    </div>
+                </div>
+                <div class="time-result">${player.time}</div>
+                ${trophy ? `<div class="trophy-icon">${trophy}</div>` : '<div class="trophy-icon"></div>'}
+            </div>
+        `;
+    }).join('');
+}
+
+// Event Listeners Setup
+function setupEventListeners() {
+    // Location select event listener
+    document.getElementById('locationSelect').addEventListener('change', loadData);
+    
+    // Time tab event listeners
+    document.querySelectorAll('.time-tab').forEach(tab => {
+        tab.addEventListener('click', function() {
+            // Remove active class from all tabs
+            document.querySelectorAll('.time-tab').forEach(t => t.classList.remove('active'));
+            // Add active class to clicked tab
+            this.classList.add('active');
+            // Load data with new period
+            loadData();
+        });
+    });
+
+    // Smooth scroll for better UX
+    const rankingsList = document.querySelector('.rankings-list');
+    if (rankingsList) {
+        rankingsList.style.scrollBehavior = 'smooth';
+    }
+}
+
+// Initialize page
+async function init() {
+    await checkAuth();
+    await loadLocations();
+    await loadData();
+    setupEventListeners();
+}
+
+// Auto-refresh function
+function startAutoRefresh() {
+    setInterval(loadData, 45000);
+}
+
+// Start the application when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    init();
+    startAutoRefresh();
+});