First commit
This commit is contained in:
213
static/js/app.js
Normal file
213
static/js/app.js
Normal file
@@ -0,0 +1,213 @@
|
||||
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 Unix Timestamps (Sekunden) in Millisekunden für JS
|
||||
const timestamps = data.map(d => {
|
||||
// Wenn es schon Millisekunden sind (sehr große Zahl, > 10^11), lassen, sonst * 1000
|
||||
return d.dateTime > 10000000000 ? d.dateTime : d.dateTime * 1000;
|
||||
});
|
||||
|
||||
const rainTimestamps = rainData.map(d => {
|
||||
// rainData.hour kommt aus SQLite "strftime" als String "YYYY-MM-DD HH:00:00"
|
||||
// da wir unixepoch verwendet haben, müssen wir prüfen, was der Server liefert.
|
||||
// Server liefert "YYYY-MM-DD HH:00:00". Das müssen wir parsen.
|
||||
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.outTemp]),
|
||||
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.outHumidity]),
|
||||
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.barometer]),
|
||||
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.windSpeed]),
|
||||
color: '#f38181',
|
||||
lineWidth: 2
|
||||
}, {
|
||||
name: 'Böen',
|
||||
data: data.map((d, i) => [timestamps[i], d.windGust]),
|
||||
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.windDir || 0]),
|
||||
color: '#f39c12',
|
||||
lineWidth: 2
|
||||
}],
|
||||
credits: { enabled: false }
|
||||
});
|
||||
}
|
||||
|
||||
// Initiales Laden
|
||||
loadData();
|
||||
|
||||
// Auto-Refresh alle 5 Minuten
|
||||
setInterval(loadData, 5 * 60 * 1000);
|
||||
Reference in New Issue
Block a user