Div Erweiterungen
This commit is contained in:
@@ -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 = {
|
||||
|
||||
Reference in New Issue
Block a user