Bereichswahl dazu

2026-04-08 09:08:24 +02:00
parent d4a5f1b1c9
commit 6c45f260c6
4 changed files with 510 additions and 59 deletions
@@ -9,7 +9,19 @@ function App() {
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  const [lastUpdate, setLastUpdate] = useState(null)
-  const [timeRange, setTimeRange] = useState('24h') // '24h', '7d', '30d', '365d'
+  const [timeRange, setTimeRange] = useState('24h') // '24h', '7d', '30d', '365d', oder {type: 'custom', start, end, days}
+
+  // Handler für Zeitbereich-Änderungen
+  const handleTimeRangeChange = (range, customParams) => {
+    if (range === 'custom' && customParams) {
+      const start = new Date(customParams.start)
+      const end = new Date(customParams.end)
+      const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24))
+      setTimeRange({ type: 'custom', start: customParams.start, end: customParams.end, days })
+    } else {
+      setTimeRange(range)
+    }
+  }

  useEffect(() => {
    const fetchData = async () => {
@@ -30,26 +42,44 @@ function App() {
        let weatherUrl, rainUrl
        const baseUrl = import.meta.env.DEV ? 'http://localhost:8000' : '/api'
        
-        switch (timeRange) {
-          case '24h':
-            weatherUrl = `${baseUrl}/weather/history?hours=24`
-            rainUrl = null
-            break
-          case '7d':
-            weatherUrl = `${baseUrl}/weather/hourly-aggregated?days=7`
-            rainUrl = `${baseUrl}/weather/rain-daily?days=7`
-            break
-          case '30d':
-            weatherUrl = `${baseUrl}/weather/daily-with-minmax?days=30`
-            rainUrl = `${baseUrl}/weather/rain-daily?days=30`
-            break
-          case '365d':
-            weatherUrl = `${baseUrl}/weather/daily-aggregated?days=365`
-            rainUrl = `${baseUrl}/weather/rain-weekly?days=365`
-            break
-          default:
-            weatherUrl = `${baseUrl}/weather/history?hours=24`
+        // Benutzerdefinierter Zeitbereich
+        if (typeof timeRange === 'object' && timeRange.type === 'custom') {
+          const start = encodeURIComponent(timeRange.start)
+          const end = encodeURIComponent(timeRange.end)
+          const days = timeRange.days || 1
+          
+          if (days >= 7) {
+            // >= 7 Tage: Tagesaggregation mit Min/Max verwenden
+            weatherUrl = `${baseUrl}/weather/daily-aggregated-range?start=${start}&end=${end}`
+            rainUrl = null // TODO: Regen-Aggregation für Range implementieren
+          } else {
+            // < 7 Tage: Stundenaggregation verwenden
+            weatherUrl = `${baseUrl}/weather/hourly-aggregated-range?start=${start}&end=${end}`
            rainUrl = null
+          }
+        } else {
+          // Vordefinierte Zeitbereiche
+          switch (timeRange) {
+            case '24h':
+              weatherUrl = `${baseUrl}/weather/history?hours=24`
+              rainUrl = null
+              break
+            case '7d':
+              weatherUrl = `${baseUrl}/weather/daily-with-minmax?days=7`
+              rainUrl = `${baseUrl}/weather/rain-daily?days=7`
+              break
+            case '30d':
+              weatherUrl = `${baseUrl}/weather/daily-with-minmax?days=30`
+              rainUrl = `${baseUrl}/weather/rain-daily?days=30`
+              break
+            case '365d':
+              weatherUrl = `${baseUrl}/weather/daily-aggregated?days=365`
+              rainUrl = `${baseUrl}/weather/rain-weekly?days=365`
+              break
+            default:
+              weatherUrl = `${baseUrl}/weather/history?hours=24`
+              rainUrl = null
+          }
        }
        
        // Wetterdaten laden
@@ -155,7 +185,7 @@ function App() {
          currentData={currentWeatherData}
          rainData={rainData}
          timeRange={timeRange}
-          onTimeRangeChange={setTimeRange}
+          onTimeRangeChange={handleTimeRangeChange}
        />
      </main>
    </div>