diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 4c3da2e..849cb8f 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -9,14 +9,36 @@ function App() { const [lastUpdate, setLastUpdate] = useState(null) useEffect(() => { - // Prüfe ob eingebettete Daten vorhanden sind - if (window.__WEATHER_DATA__) { - setWeatherData(window.__WEATHER_DATA__) - setLastUpdate(new Date()) - setLoading(false) - } else { - setError('Keine Wetterdaten verfügbar') - setLoading(false) + const fetchData = async () => { + try { + // Prüfe ob eingebettete Daten vorhanden sind (statischer Build) + if (window.__WEATHER_DATA__) { + setWeatherData(window.__WEATHER_DATA__) + setLastUpdate(new Date()) + setLoading(false) + } else { + // Entwicklungsmodus: Daten von API holen + const response = await fetch('http://localhost:8000/weather/history?hours=24') + if (!response.ok) { + throw new Error('API-Fehler: ' + response.status) + } + const data = await response.json() + setWeatherData(data) + setLastUpdate(new Date()) + setLoading(false) + } + } catch (err) { + setError(err.message) + setLoading(false) + } + } + + fetchData() + + // Automatisches Update alle 5 Minuten (nur im Entwicklungsmodus) + if (!window.__WEATHER_DATA__) { + const interval = setInterval(fetchData, 5 * 60 * 1000) + return () => clearInterval(interval) } }, []) diff --git a/frontend/src/components/WeatherDashboard.css b/frontend/src/components/WeatherDashboard.css index 1613fb7..07935e0 100644 --- a/frontend/src/components/WeatherDashboard.css +++ b/frontend/src/components/WeatherDashboard.css @@ -1,6 +1,7 @@ .dashboard { width: 100%; max-width: 795px; + margin: 0 auto; } .current-values { diff --git a/frontend/src/components/WeatherDashboard.jsx b/frontend/src/components/WeatherDashboard.jsx index 310d501..725dd77 100644 --- a/frontend/src/components/WeatherDashboard.jsx +++ b/frontend/src/components/WeatherDashboard.jsx @@ -82,15 +82,14 @@ const WeatherDashboard = ({ data }) => { const min = Math.min(...temps) const max = Math.max(...temps) const range = max - min - console.log("Range: ", range) + let yMin = min let yMax = max - console.log("yMax:",yMax, " yMin:", yMin) + if (range < 10) { const center = (max + min) / 2 yMin = center - 5 yMax = center + 5 - console.log("yMax:",yMax, " yMin:", yMin) } return { @@ -126,12 +125,12 @@ const WeatherDashboard = ({ data }) => { ...getCommonOptions(), yAxis: { ...getCommonOptions().yAxis, - title: { text: 'Luftfeuchtigkeit (%)' }, - min: 0, + title: { text: 'Feuchte (%)' }, + min: 40, max: 100 }, series: [{ - name: 'Luftfeuchtigkeit', + name: 'Feuchte', data: sortedData.map(item => [new Date(item.datetime).getTime(), item.humidity]), color: 'rgb(54, 162, 235)', fillColor: { @@ -154,17 +153,14 @@ const WeatherDashboard = ({ data }) => { const min = Math.min(...pressures) const max = Math.max(...pressures) const range = max - min - console.log("Range: ", range) let yMin = min let yMax = max - console.log("yMax:",yMax, " yMin:", yMin) - + if (range < 40) { const center = (max + min) / 2 yMin = center - 20 yMax = center + 20 - console.log("yMax:",yMax, " yMin:", yMin) } return { @@ -349,6 +345,10 @@ const WeatherDashboard = ({ data }) => { const maxPressureItem = todayData.reduce((max, item) => item.pressure != null && (max === null || item.pressure > max.pressure) ? item : max, null) + // Windgeschwindigkeit + const maxWindGustItem = todayData.reduce((max, item) => + item.wind_gust != null && (max === null || item.wind_gust > max.wind_gust) ? item : max, null) + return { minTemp: minTempItem?.temperature ?? null, maxTemp: maxTempItem?.temperature ?? null, @@ -361,9 +361,11 @@ const WeatherDashboard = ({ data }) => { minPressure: minPressureItem?.pressure ?? null, maxPressure: maxPressureItem?.pressure ?? null, minPressureTime: minPressureItem ? format(new Date(minPressureItem.datetime), 'HH:mm', { locale: de }) : null, - maxPressureTime: maxPressureItem ? format(new Date(maxPressureItem.datetime), 'HH:mm', { locale: de }) : null + maxPressureTime: maxPressureItem ? format(new Date(maxPressureItem.datetime), 'HH:mm', { locale: de }) : null, + maxWindGust: maxWindGustItem?.wind_gust ?? null, + maxWindGustTime: maxWindGustItem ? format(new Date(maxWindGustItem.datetime), 'HH:mm', { locale: de }) : null } - }, [sortedData]) + }, [sortedData]) return (