Div Erweiterungen

This commit is contained in:
2025-09-15 23:52:59 +02:00
parent ad6ba66220
commit 5ca7b0b19c
9 changed files with 2567 additions and 24 deletions

View File

@@ -1177,6 +1177,266 @@ function displayAchievements() {
achievementsGrid.innerHTML = achievementCards;
}
// Initialize Analytics and Statistics event listeners
document.addEventListener('DOMContentLoaded', function() {
const analyticsCard = document.getElementById('analyticsCard');
const statisticsCard = document.getElementById('statisticsCard');
if (analyticsCard) {
analyticsCard.addEventListener('click', showAnalytics);
console.log('Analytics card event listener added');
}
if (statisticsCard) {
statisticsCard.addEventListener('click', showStatistics);
console.log('Statistics card event listener added');
}
});
// Analytics Functions
function showAnalytics() {
console.log('showAnalytics called');
// Hide other sections
const timesDisplay = document.getElementById('timesDisplay');
const achievementsDisplay = document.getElementById('achievementsDisplay');
const statisticsSection = document.getElementById('statisticsSection');
if (timesDisplay) timesDisplay.style.display = 'none';
if (achievementsDisplay) achievementsDisplay.style.display = 'none';
if (statisticsSection) statisticsSection.style.display = 'none';
// Show analytics section
const analyticsSection = document.getElementById('analyticsSection');
if (analyticsSection) {
analyticsSection.style.display = 'block';
console.log('Analytics section shown');
} else {
console.error('Analytics section not found');
}
// Load analytics data
loadAnalyticsData();
}
function showStatistics() {
console.log('showStatistics called');
// Hide other sections
const timesDisplay = document.getElementById('timesDisplay');
const achievementsDisplay = document.getElementById('achievementsDisplay');
const analyticsSection = document.getElementById('analyticsSection');
if (timesDisplay) timesDisplay.style.display = 'none';
if (achievementsDisplay) achievementsDisplay.style.display = 'none';
if (analyticsSection) analyticsSection.style.display = 'none';
// Show statistics section
const statisticsSection = document.getElementById('statisticsSection');
if (statisticsSection) {
statisticsSection.style.display = 'block';
console.log('Statistics section shown');
} else {
console.error('Statistics section not found');
}
// Load statistics data
loadStatisticsData();
}
async function loadAnalyticsData() {
try {
if (!currentPlayerId) {
console.error('No player ID available');
return;
}
// Load analytics data from API
const response = await fetch(`/api/v1/analytics/player/${currentPlayerId}`);
if (!response.ok) {
throw new Error('Failed to load analytics data');
}
const analyticsData = await response.json();
displayAnalyticsData(analyticsData);
// Update preview in main card
updateAnalyticsPreview(analyticsData);
} catch (error) {
console.error('Error loading analytics data:', error);
// Show fallback data
displayAnalyticsFallback();
}
}
async function loadStatisticsData() {
try {
if (!currentPlayerId) {
console.error('No player ID available');
return;
}
// Load statistics data from API
const response = await fetch(`/api/v1/statistics/player/${currentPlayerId}`);
if (!response.ok) {
throw new Error('Failed to load statistics data');
}
const statisticsData = await response.json();
displayStatisticsData(statisticsData);
// Update preview in main card
updateStatisticsPreview(statisticsData);
} catch (error) {
console.error('Error loading statistics data:', error);
// Show fallback data
displayStatisticsFallback();
}
}
function displayAnalyticsData(data) {
// Performance Trends
document.getElementById('avgTimeThisWeekDetail').textContent = formatTime(data.performance.avgTimeThisWeek);
document.getElementById('avgTimeLastWeek').textContent = formatTime(data.performance.avgTimeLastWeek);
document.getElementById('improvementDetail').textContent = data.performance.improvement + '%';
// Activity Stats
document.getElementById('runsToday').textContent = data.activity.runsToday + ' Läufe';
document.getElementById('runsThisWeekDetail').textContent = data.activity.runsThisWeek + ' Läufe';
document.getElementById('avgRunsPerDay').textContent = data.activity.avgRunsPerDay.toFixed(1);
// Location Performance
displayLocationPerformance(data.locationPerformance);
// Monthly Stats
document.getElementById('runsThisMonth').textContent = data.monthly.runsThisMonth + ' Läufe';
document.getElementById('runsLastMonth').textContent = data.monthly.runsLastMonth + ' Läufe';
document.getElementById('bestTimeThisMonth').textContent = formatTime(data.monthly.bestTimeThisMonth);
}
function displayStatisticsData(data) {
// Personal Records
displayPersonalRecords(data.personalRecords);
// Consistency Metrics
document.getElementById('averageTime').textContent = formatTime(data.consistency.averageTime);
document.getElementById('timeDeviation').textContent = formatTime(data.consistency.timeDeviation);
document.getElementById('consistencyScore').textContent = data.consistency.consistencyScore + '%';
// Ranking Stats
displayRankingStats(data.rankings);
// Progress Stats
document.getElementById('totalRunsStats').textContent = data.progress.totalRuns;
document.getElementById('activeDays').textContent = data.progress.activeDays;
document.getElementById('locationsVisited').textContent = data.progress.locationsVisited;
}
function displayLocationPerformance(locations) {
const container = document.getElementById('locationPerformance');
if (!locations || locations.length === 0) {
container.innerHTML = '<p>Keine Standort-Daten verfügbar</p>';
return;
}
const locationHTML = locations.map(location => `
<div class="location-item">
<span class="location-name">${location.name}</span>
<div>
<span class="location-best">${formatTime(location.bestTime)}</span>
<span class="location-runs">(${location.runs} Läufe)</span>
</div>
</div>
`).join('');
container.innerHTML = locationHTML;
}
function displayPersonalRecords(records) {
const container = document.getElementById('personalRecords');
if (!records || records.length === 0) {
container.innerHTML = '<p>Keine Bestzeiten verfügbar</p>';
return;
}
const recordsHTML = records.map((record, index) => `
<div class="record-item">
<div>
<span class="record-rank">#${index + 1}</span>
<span class="record-time">${formatTime(record.time)}</span>
</div>
<span class="record-location">${record.location}</span>
</div>
`).join('');
container.innerHTML = recordsHTML;
}
function displayRankingStats(rankings) {
const container = document.getElementById('rankingStats');
if (!rankings || rankings.length === 0) {
container.innerHTML = '<p>Keine Ranglisten-Daten verfügbar</p>';
return;
}
const rankingsHTML = rankings.map(ranking => `
<div class="ranking-item">
<span class="ranking-category">${ranking.category}</span>
<div>
<span class="ranking-position">#${ranking.position}</span>
<span class="ranking-total">von ${ranking.total}</span>
</div>
</div>
`).join('');
container.innerHTML = rankingsHTML;
}
function updateAnalyticsPreview(data) {
document.getElementById('avgTimeThisWeek').textContent = formatTime(data.performance.avgTimeThisWeek);
document.getElementById('improvementThisWeek').textContent = data.performance.improvement + '%';
document.getElementById('runsThisWeek').textContent = data.activity.runsThisWeek;
document.getElementById('analyticsPreview').style.display = 'block';
}
function updateStatisticsPreview(data) {
document.getElementById('personalBest').textContent = formatTime(data.personalRecords[0]?.time || 0);
document.getElementById('totalRunsCount').textContent = data.progress.totalRuns;
document.getElementById('rankPosition').textContent = data.rankings[0]?.position || '-';
document.getElementById('statisticsPreview').style.display = 'block';
}
function displayAnalyticsFallback() {
// Show fallback data when API fails
document.getElementById('avgTimeThisWeekDetail').textContent = '--:--';
document.getElementById('avgTimeLastWeek').textContent = '--:--';
document.getElementById('improvementDetail').textContent = '+0.0%';
document.getElementById('runsToday').textContent = '0 Läufe';
document.getElementById('runsThisWeekDetail').textContent = '0 Läufe';
document.getElementById('avgRunsPerDay').textContent = '0.0';
document.getElementById('locationPerformance').innerHTML = '<p>Daten nicht verfügbar</p>';
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
document.getElementById('personalRecords').innerHTML = '<p>Daten nicht verfügbar</p>';
document.getElementById('averageTime').textContent = '--:--';
document.getElementById('timeDeviation').textContent = '--:--';
document.getElementById('consistencyScore').textContent = '0%';
document.getElementById('rankingStats').innerHTML = '<p>Daten nicht verfügbar</p>';
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 = {