${isGerman ? 'Verfolge deine Leistung und überwache wichtige Metriken.' : 'Track your performance and monitor important metrics.'}
`; } if (statisticsCard) { const isGerman = currentLanguage === 'de'; statisticsCard.innerHTML = `${isGerman ? 'Detaillierte Statistiken zu deinen Läufen - beste Zeiten, Verbesserungen und Vergleiche.' : 'Detailed statistics about your runs - best times, improvements and comparisons.'}
`; } } } // Update achievement notifications function updateAchievementNotifications() { // This will be called when achievements are displayed } // Update time display formats function updateTimeDisplayFormats() { // This will be called when times are displayed } // Update achievement progress text function updateAchievementProgressText() { // This will be called when achievements are displayed } // Achievement translations are now handled by the database // Translate achievement data using database translations function translateAchievement(achievement) { if (currentLanguage === 'en' && achievement.name_en) { return { ...achievement, name: achievement.name_en, description: achievement.description_en || achievement.description }; } return achievement; } // Initialize dashboard when page loads document.addEventListener('DOMContentLoaded', function () { loadLanguagePreference(); changeLanguage(); // Apply saved language initDashboard(); }); // Modal functions function openModal(modalId) { document.getElementById(modalId).style.display = 'block'; } function closeModal(modalId) { document.getElementById(modalId).style.display = 'none'; // Reset modal state if (modalId === 'rfidModal') { stopQRScanner(); document.getElementById('manualRfidInput').value = ''; } } // Close modal when clicking outside window.onclick = function (event) { if (event.target.classList.contains('modal')) { closeModal(event.target.id); } } // QR Scanner variables let qrStream = null; let qrScanning = false; // Show RFID Settings async function showRFIDSettings() { openModal('rfidModal'); // Reset scanner state stopQRScanner(); // Check if user is already linked and hide/show create player section await updateCreatePlayerSectionVisibility(); } // Update visibility of create player section based on link status async function updateCreatePlayerSectionVisibility() { const createPlayerSection = document.getElementById('createPlayerSection'); if (!currentUser) { // No user logged in - hide create player section if (createPlayerSection) { createPlayerSection.style.display = 'none'; } return; } try { // Check if user has a linked player const response = await fetch(`/api/v1/public/user-player/${currentUser.id}?t=${Date.now()}`); if (response.ok) { const result = await response.json(); if (result.success && result.data && result.data.id) { // User is already linked - hide create player section if (createPlayerSection) { createPlayerSection.style.display = 'none'; } } else { // User is not linked - show create player section if (createPlayerSection) { createPlayerSection.style.display = 'block'; } } } else { // Error checking link status - show create player section as fallback if (createPlayerSection) { createPlayerSection.style.display = 'block'; } } } catch (error) { console.error('Error checking link status:', error); // Error occurred - show create player section as fallback if (createPlayerSection) { createPlayerSection.style.display = 'block'; } } } // Check link status and load times async function checkLinkStatusAndLoadTimes() { if (!currentUser) { showTimesNotLinked(); return; } try { // Check if user has a linked player const response = await fetch(`/api/v1/public/user-player/${currentUser.id}?t=${Date.now()}`); if (response.ok) { const result = await response.json(); // User is linked, load times await loadUserTimesSection(result.data); } else { // User is not linked showTimesNotLinked(); } } catch (error) { console.error('Error checking link status:', error); showTimesNotLinked(); } } // Start QR Scanner async function startQRScanner() { try { // Request camera access qrStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', // Use back camera if available width: { ideal: 1280 }, height: { ideal: 720 } } }); const video = document.getElementById('qrVideo'); const canvas = document.getElementById('qrCanvas'); const context = canvas.getContext('2d'); video.srcObject = qrStream; video.play(); // Show camera container and update buttons document.getElementById('cameraContainer').style.display = 'block'; document.getElementById('startScanBtn').style.display = 'none'; document.getElementById('stopScanBtn').style.display = 'inline-block'; document.getElementById('scanningStatus').style.display = 'block'; qrScanning = true; // Start scanning loop video.addEventListener('loadedmetadata', () => { canvas.width = video.videoWidth; canvas.height = video.videoHeight; scanQRCode(); }); } catch (error) { console.error('Error accessing camera:', error); const cameraErrorMsg = currentLanguage === 'de' ? 'Kamera-Zugriff fehlgeschlagen. Bitte verwende die manuelle Eingabe.' : 'Camera access failed. Please use manual input.'; showMessage('rfidMessage', cameraErrorMsg, 'error'); } } // Stop QR Scanner function stopQRScanner() { qrScanning = false; if (qrStream) { qrStream.getTracks().forEach(track => track.stop()); qrStream = null; } // Reset UI document.getElementById('cameraContainer').style.display = 'none'; document.getElementById('startScanBtn').style.display = 'inline-block'; document.getElementById('stopScanBtn').style.display = 'none'; document.getElementById('scanningStatus').style.display = 'none'; } // Scan QR Code from video stream function scanQRCode() { if (!qrScanning) return; const video = document.getElementById('qrVideo'); const canvas = document.getElementById('qrCanvas'); const context = canvas.getContext('2d'); if (video.readyState === video.HAVE_ENOUGH_DATA) { canvas.width = video.videoWidth; canvas.height = video.videoHeight; context.drawImage(video, 0, 0, canvas.width, canvas.height); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const code = jsQR(imageData.data, imageData.width, imageData.height); if (code) { console.log('QR Code detected:', code.data); handleQRCodeDetected(code.data); return; } } // Continue scanning if (qrScanning) { requestAnimationFrame(scanQRCode); } } // Format RFID UID to match database format function formatRfidUid(rawUid) { // Remove any existing formatting (spaces, colons, etc.) let cleanUid = rawUid.replace(/[^a-fA-F0-9]/g, '').toUpperCase(); // Handle different UID lengths if (cleanUid.length === 6) { // Pad 6-digit UID to 8 digits by adding leading zeros cleanUid = '00' + cleanUid; } else if (cleanUid.length === 8) { // Already correct length } else if (cleanUid.length < 6) { // Pad shorter UIDs to 8 digits cleanUid = cleanUid.padStart(8, '0'); } else { throw new Error(`Ungültige RFID UID Länge: ${cleanUid.length} Zeichen (unterstützt: 6-8)`); } // Format as XX:XX:XX:XX return cleanUid.match(/.{2}/g).join(':'); } // Handle detected QR code async function handleQRCodeDetected(qrData) { stopQRScanner(); try { // Extract and format RFID UID from QR code const rawUid = qrData.trim(); if (!rawUid) { const qrErrorMsg = currentLanguage === 'de' ? 'QR-Code enthält keine gültige RFID UID' : 'QR code contains no valid RFID UID'; showMessage('rfidMessage', qrErrorMsg, 'error'); return; } // Format the UID to match database format (XX:XX:XX:XX) const formattedUid = formatRfidUid(rawUid); const qrDetectedMsg = currentLanguage === 'de' ? `QR-Code erkannt: ${rawUid} → ${formattedUid}` : `QR code detected: ${rawUid} → ${formattedUid}`; showMessage('rfidMessage', qrDetectedMsg, 'info'); // Link the user using the formatted RFID UID await linkUserByRfidUid(formattedUid); } catch (error) { console.error('Error formatting RFID UID:', error); const formatErrorMsg = currentLanguage === 'de' ? `Fehler beim Formatieren der RFID UID: ${error.message}` : `Error formatting RFID UID: ${error.message}`; showMessage('rfidMessage', formatErrorMsg, 'error'); } } // Manual RFID linking async function linkManualRfid() { const rawUid = document.getElementById('manualRfidInput').value.trim(); if (!rawUid) { const inputErrorMsg = currentLanguage === 'de' ? 'Bitte gib eine RFID UID ein' : 'Please enter a RFID UID'; showMessage('rfidMessage', inputErrorMsg, 'error'); return; } try { // Format the UID to match database format const formattedUid = formatRfidUid(rawUid); const formattedMsg = currentLanguage === 'de' ? `Formatiert: ${rawUid} → ${formattedUid}` : `Formatted: ${rawUid} → ${formattedUid}`; showMessage('rfidMessage', formattedMsg, 'info'); await linkUserByRfidUid(formattedUid); } catch (error) { console.error('Error formatting manual RFID UID:', error); const formatErrorMsg = currentLanguage === 'de' ? `Fehler beim Formatieren: ${error.message}` : `Error formatting: ${error.message}`; showMessage('rfidMessage', formatErrorMsg, 'error'); } } // Create new RFID player record async function createRfidPlayerRecord() { const rawUid = document.getElementById('manualRfidInput').value.trim(); const firstname = document.getElementById('playerFirstname').value.trim(); const lastname = document.getElementById('playerLastname').value.trim(); const birthdate = document.getElementById('playerBirthdate').value; // Validation if (!rawUid) { const inputErrorMsg = currentLanguage === 'de' ? 'Bitte gib eine RFID UID ein' : 'Please enter a RFID UID'; showMessage('rfidMessage', inputErrorMsg, 'error'); return; } if (!firstname) { const inputErrorMsg = currentLanguage === 'de' ? 'Bitte gib einen Vornamen ein' : 'Please enter a first name'; showMessage('rfidMessage', inputErrorMsg, 'error'); return; } if (!lastname) { const inputErrorMsg = currentLanguage === 'de' ? 'Bitte gib einen Nachnamen ein' : 'Please enter a last name'; showMessage('rfidMessage', inputErrorMsg, 'error'); return; } if (!birthdate) { const inputErrorMsg = currentLanguage === 'de' ? 'Bitte gib ein Geburtsdatum ein' : 'Please enter a birth date'; showMessage('rfidMessage', inputErrorMsg, 'error'); return; } try { // Format the UID to match database format const formattedUid = formatRfidUid(rawUid); const formattedMsg = currentLanguage === 'de' ? `Erstelle Spieler: ${firstname} ${lastname} (${formattedUid})` : `Creating player: ${firstname} ${lastname} (${formattedUid})`; showMessage('rfidMessage', formattedMsg, 'info'); // Create player record const response = await fetch('/api/v1/public/players/create-with-rfid', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ rfiduid: formattedUid, firstname: firstname, lastname: lastname, birthdate: birthdate, supabase_user_id: currentUser?.id || null }) }); const result = await response.json(); if (result.success) { const successMsg = currentLanguage === 'de' ? `Spieler erfolgreich erstellt: ${result.data.firstname} ${result.data.lastname}` : `Player successfully created: ${result.data.firstname} ${result.data.lastname}`; showMessage('rfidMessage', successMsg, 'success'); // Clear form document.getElementById('manualRfidInput').value = ''; document.getElementById('playerFirstname').value = ''; document.getElementById('playerLastname').value = ''; document.getElementById('playerBirthdate').value = ''; // Hide create player section since user is now linked const createPlayerSection = document.getElementById('createPlayerSection'); if (createPlayerSection) { createPlayerSection.style.display = 'none'; } // Refresh times if user is linked if (currentUser) { await checkLinkStatusAndLoadTimes(); } } else { let errorMsg = result.message; // Erweitere Fehlermeldung um Levenshtein-Details falls vorhanden if (result.details) { if (result.details.matchType === 'similar') { const similarityPercent = Math.round((1 - result.details.similarity) * 100); errorMsg += `\n\nÄhnlichkeit: ${similarityPercent}% (Distanz: ${result.details.levenshteinDistance})`; } } showMessage('rfidMessage', errorMsg, 'error'); } } catch (error) { console.error('Error creating RFID player record:', error); const errorMsg = currentLanguage === 'de' ? `Fehler beim Erstellen: ${error.message}` : `Error creating: ${error.message}`; showMessage('rfidMessage', errorMsg, 'error'); } } // Link user by RFID UID (core function) async function linkUserByRfidUid(rfidUid) { if (!currentUser) { const authErrorMsg = currentLanguage === 'de' ? 'Benutzer nicht authentifiziert' : 'User not authenticated'; showMessage('rfidMessage', authErrorMsg, 'error'); return; } try { // First, find the player with this RFID UID const response = await fetch('/api/v1/public/link-by-rfid', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ rfiduid: rfidUid, supabase_user_id: currentUser.id }) }); const result = await response.json(); if (response.ok) { const successMsg = currentLanguage === 'de' ? `✅ RFID erfolgreich verknüpft!\nSpieler: ${result.data.firstname} ${result.data.lastname}` : `✅ RFID successfully linked!\nPlayer: ${result.data.firstname} ${result.data.lastname}`; showMessage('rfidMessage', successMsg, 'success'); setTimeout(() => { closeModal('rfidModal'); // Reload times section after successful linking checkLinkStatusAndLoadTimes(); }, 2000); } else { const errorMsg = currentLanguage === 'de' ? result.message || 'Fehler beim Verknüpfen' : result.message || 'Error linking'; showMessage('rfidMessage', errorMsg, 'error'); } } catch (error) { console.error('Error linking RFID:', error); const linkErrorMsg = currentLanguage === 'de' ? 'Fehler beim Verknüpfen der RFID' : 'Error linking RFID'; showMessage('rfidMessage', linkErrorMsg, 'error'); } } // Show not linked state function showTimesNotLinked() { document.getElementById('timesLoading').style.display = 'none'; document.getElementById('timesNotLinked').style.display = 'block'; document.getElementById('timesDisplay').style.display = 'none'; // Update the text content for the not linked state const notLinkedTitle = document.querySelector('#timesNotLinked h3'); const notLinkedDescription = document.querySelector('#timesNotLinked p'); const notLinkedButton = document.querySelector('#timesNotLinked button'); const notLinkedSteps = document.querySelectorAll('#timesNotLinked li'); if (notLinkedTitle) { notLinkedTitle.textContent = currentLanguage === 'de' ? 'RFID noch nicht verknüpft' : 'RFID not linked yet'; } if (notLinkedDescription) { notLinkedDescription.textContent = currentLanguage === 'de' ? 'Um deine persönlichen Zeiten zu sehen, musst du zuerst deine RFID-Karte mit deinem Account verknüpfen.' : 'To see your personal times, you must first link your RFID card with your account.'; } if (notLinkedButton) { notLinkedButton.textContent = currentLanguage === 'de' ? '🏷️ RFID jetzt verknüpfen' : '🏷️ Link RFID now'; } if (notLinkedSteps.length >= 3) { notLinkedSteps[0].textContent = currentLanguage === 'de' ? 'Klicke auf "RFID jetzt verknüpfen"' : 'Click on "Link RFID now"'; notLinkedSteps[1].textContent = currentLanguage === 'de' ? 'Scanne den QR-Code auf deiner RFID-Karte' : 'Scan the QR code on your RFID card'; notLinkedSteps[2].textContent = currentLanguage === 'de' ? 'Fertig! Deine Zeiten werden automatisch hier angezeigt' : 'Done! Your times will be displayed here automatically'; } // Update the "So funktioniert's" title const howItWorksTitle = document.querySelector('#timesNotLinked h4'); if (howItWorksTitle) { howItWorksTitle.textContent = currentLanguage === 'de' ? 'So funktioniert\'s:' : 'How it works:'; } } // Show RFID linked info with help button function showRFIDLinkedInfo(playerData) { // Find the RFID card and update it const rfidCard = document.querySelector('.card[onclick="showRFIDSettings()"]'); if (rfidCard) { const isGerman = currentLanguage === 'de'; rfidCard.innerHTML = `${playerData.rfiduid}${noTimesDescription}
${noAchievementsDescription}
${translatedAchievement.description}
Keine Standort-Daten verfügbar
'; return; } const locationHTML = locations.map(location => `Keine Bestzeiten verfügbar
'; return; } const recordsHTML = records.map((record, index) => `Keine Ranglisten-Daten verfügbar
'; return; } const rankingsHTML = rankings.map(ranking => `${notLinkedMessage}
`; document.getElementById('runsThisMonth').textContent = '0 Läufe'; document.getElementById('runsLastMonth').textContent = '0 Läufe'; document.getElementById('bestTimeThisMonth').textContent = '--:--'; } function displayStatisticsFallback() { // Show fallback data when API fails or user not linked const notLinkedMessage = currentLanguage === 'de' ? 'RFID nicht verknüpft - Statistiken nicht verfügbar' : 'RFID not linked - Statistics not available'; document.getElementById('personalRecords').innerHTML = `${notLinkedMessage}
`; document.getElementById('averageTime').textContent = '--:--'; document.getElementById('timeDeviation').textContent = '--:--'; document.getElementById('consistencyScore').textContent = '0%'; document.getElementById('rankingStats').innerHTML = `${notLinkedMessage}
`; document.getElementById('totalRunsStats').textContent = '0'; document.getElementById('activeDays').textContent = '0'; document.getElementById('locationsVisited').textContent = '0'; } // Get achievement condition value for progress display function getAchievementConditionValue(achievementName) { const conditionMap = { 'Erste Schritte': 1, 'Durchhalter': 3, 'Fleißig': 5, 'Besessen': 10, 'Regelmäßig': 5, 'Stammgast': 10, 'Treue': 20, 'Veteran': 50, 'Fortschritt': 5, 'Durchbruch': 10, 'Transformation': 15, 'Perfektionist': 20 }; return conditionMap[achievementName] || null; } // Show achievement category function showAchievementCategory(category) { currentAchievementCategory = category; // Update active tab document.querySelectorAll('.category-tab').forEach(tab => { tab.classList.remove('active'); }); document.querySelector(`[data-category="${category}"]`).classList.add('active'); // Display filtered achievements displayAchievements(); } // Show achievement details (placeholder for future modal) function showAchievementDetails(achievementId) { const achievement = playerAchievements.find(a => a.id === achievementId); if (achievement) { console.log('Achievement details:', achievement); // TODO: Implement achievement details modal } } // Show achievements not available state function showAchievementsNotAvailable() { document.getElementById('achievementsLoading').style.display = 'none'; document.getElementById('achievementStats').style.display = 'none'; document.getElementById('achievementCategories').style.display = 'none'; document.getElementById('achievementsNotAvailable').style.display = 'block'; // Update the text content for the not available state const notAvailableTitle = document.querySelector('#achievementsNotAvailable h3'); const notAvailableDescription = document.querySelector('#achievementsNotAvailable p'); const notAvailableButton = document.querySelector('#achievementsNotAvailable button'); if (notAvailableTitle) { notAvailableTitle.textContent = currentLanguage === 'de' ? 'Achievements noch nicht verfügbar' : 'Achievements not available yet'; } if (notAvailableDescription) { notAvailableDescription.textContent = currentLanguage === 'de' ? 'Um Achievements zu sammeln, musst du zuerst deine RFID-Karte mit deinem Account verknüpfen und einige Läufe absolvieren.' : 'To collect achievements, you must first link your RFID card with your account and complete some runs.'; } if (notAvailableButton) { notAvailableButton.textContent = currentLanguage === 'de' ? '🏷️ RFID jetzt verknüpfen' : '🏷️ Link RFID now'; } // Update the "So funktioniert's" title const howItWorksTitle = document.querySelector('#achievementsNotAvailable h4'); if (howItWorksTitle) { howItWorksTitle.textContent = currentLanguage === 'de' ? 'So funktioniert\'s:' : 'How it works:'; } // Update the steps const notAvailableSteps = document.querySelectorAll('#achievementsNotAvailable li'); if (notAvailableSteps.length >= 3) { notAvailableSteps[0].textContent = currentLanguage === 'de' ? 'Klicke auf "RFID jetzt verknüpfen"' : 'Click on "Link RFID now"'; notAvailableSteps[1].textContent = currentLanguage === 'de' ? 'Scanne den QR-Code auf deiner RFID-Karte' : 'Scan the QR code on your RFID card'; notAvailableSteps[2].textContent = currentLanguage === 'de' ? 'Fertig! Deine Zeiten werden automatisch hier angezeigt' : 'Done! Your times will be displayed here automatically'; } } // Check achievements for current player async function checkPlayerAchievements() { if (!currentPlayerId) return; try { const response = await fetch(`/api/achievements/check/${currentPlayerId}?t=${Date.now()}`, { method: 'POST' }); if (response.ok) { const result = await response.json(); if (result.data.count > 0) { // Show notification for new achievements showAchievementNotification(result.data.new_achievements); // Reload achievements await loadPlayerAchievements(); } } } catch (error) { console.error('Error checking achievements:', error); } } // Show achievement notification function showAchievementNotification(newAchievements) { // Create notification element const notification = document.createElement('div'); notification.className = 'achievement-notification'; const titleText = currentLanguage === 'de' ? 'Neue Achievements erreicht!' : 'New Achievements Unlocked!'; const descriptionText = currentLanguage === 'de' ? `Du hast ${newAchievements.length} neue Achievement${newAchievements.length > 1 ? 's' : ''} erhalten!` : `You have received ${newAchievements.length} new achievement${newAchievements.length > 1 ? 's' : ''}!`; notification.innerHTML = `${descriptionText}