wetterstation_python/static/js/app.js

let currentPeriod = 'day';
const DEFAULT_CHART_HEIGHT = 360;
const POLAR_CHART_HEIGHT = 420;

// HighCharts globale Einstellungen
Highcharts.setOptions({
    lang: {
        months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
                 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
        shortMonths: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
        weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
        shortWeekdays: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
    }
});

function switchPeriod(period) {
    currentPeriod = period;
    
    // Tab-Status aktualisieren
    document.querySelectorAll('.tab').forEach(tab => {
        tab.classList.remove('active');
    });
    event.target.classList.add('active');
    
    loadData();
}

function loadData() {
    document.getElementById('loading').style.display = 'block';
    document.getElementById('charts').style.display = 'none';
    
    fetch(`/api/data/${currentPeriod}`)
        .then(response => response.json())
        .then(data => {
            renderCharts(data);
            document.getElementById('loading').style.display = 'none';
            document.getElementById('charts').style.display = 'grid';
        })
        .catch(error => {
            console.error('Fehler beim Laden:', error);
            document.getElementById('loading').innerHTML = 'Fehler beim Laden der Daten';
        });
}

function renderCharts(apiData) {
    const data = apiData.data;
    const rainData = apiData.rain_hourly;
    
    // Konvertiere Timestamps in Millisekunden
    const timestamps = data.map(d => {
        const [date, time] = d.datetime.split(' ');
        return new Date(date + 'T' + time).getTime();
    });
    
    const rainTimestamps = rainData.map(d => {
        const [date, time] = d.hour.split(' ');
        return new Date(date + 'T' + time).getTime();
    });
    
    // Berechne Zeitbereich für die Achsen
    const minTime = Math.min(...timestamps, ...rainTimestamps);
    const maxTime = Math.max(...timestamps, ...rainTimestamps);
    
    // 1-Stunden-Intervalle für die Achsen-Labels (3600000 ms = 1 Stunde)
    const ONE_HOUR = 3600000;
    const FOUR_HOURS = ONE_HOUR * 4;
    
    // Temperatur
    Highcharts.chart('temp-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '🌡️ Temperatur (°C)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS
        },
        yAxis: { title: { text: '°C' } },
        legend: { enabled: true },
        series: [{
            name: 'Temperatur',
            data: data.map((d, i) => [timestamps[i], d.temperature]),
            color: '#ff6b6b',
            lineWidth: 2
        }],
        credits: { enabled: false }
    });
    
    // Luftfeuchtigkeit
    Highcharts.chart('humidity-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '💧 Luftfeuchtigkeit (%)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS
        },
        yAxis: { title: { text: '%' } },
        legend: { enabled: true },
        series: [{
            name: 'Luftfeuchtigkeit',
            data: data.map((d, i) => [timestamps[i], d.humidity]),
            color: '#4ecdc4',
            lineWidth: 2
        }],
        credits: { enabled: false }
    });
    
    // Luftdruck
    Highcharts.chart('pressure-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '🎈 Luftdruck (hPa)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS
        },
        yAxis: { title: { text: 'hPa' } },
        legend: { enabled: true },
        series: [{
            name: 'Luftdruck',
            data: data.map((d, i) => [timestamps[i], d.pressure]),
            color: '#95e1d3',
            lineWidth: 2
        }],
        credits: { enabled: false }
    });
    
    // Regenmenge pro Stunde
    Highcharts.chart('rain-chart', {
        chart: { type: 'column', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '🌧️ Regenmenge pro Stunde (mm)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS
        },
        yAxis: { title: { text: 'mm' } },
        legend: { enabled: false },
        series: [{
            name: 'Regen',
            data: rainData.map((d, i) => [rainTimestamps[i], d.rain]),
            color: '#3498db'
        }],
        credits: { enabled: false }
    });
    
    // Windgeschwindigkeit
    Highcharts.chart('wind-speed-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '💨 Windgeschwindigkeit (m/s)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS
        },
        yAxis: { title: { text: 'm/s' } },
        legend: { enabled: true },
        series: [{
            name: 'Windgeschwindigkeit',
            data: data.map((d, i) => [timestamps[i], d.wind_speed]),
            color: '#f38181',
            lineWidth: 2
        }, {
            name: 'Böen',
            data: data.map((d, i) => [timestamps[i], d.wind_gust]),
            color: '#aa96da',
            lineWidth: 2,
            dashStyle: 'dash'
        }],
        credits: { enabled: false }
    });
    
    // Windrichtung
    Highcharts.chart('wind-dir-chart', {
        chart: { type: 'line', height: DEFAULT_CHART_HEIGHT, spacingRight: 20 },
        title: { text: '🧭 Windrichtung (°)' },
        xAxis: { 
            type: 'datetime',
            title: { text: 'Zeit' },
            labels: { format: '{value:%H}' },
            tickInterval: FOUR_HOURS
        },
        yAxis: { 
            title: { text: 'Richtung (°)' },
            min: 0,
            max: 360,
            tickPositions: [0, 90, 180, 270, 360]
        },
        legend: { enabled: true },
        series: [{
            name: 'Windrichtung',
            data: data.map((d, i) => [timestamps[i], d.wind_dir || 0]),
            color: '#f39c12',
            lineWidth: 2
        }],
        credits: { enabled: false }
    });
}

// Initiales Laden
loadData();

// Auto-Refresh alle 5 Minuten
setInterval(loadData, 5 * 60 * 1000);