**WIP**

frontend/src/App.jsx

@@ -4,35 +4,73 @@ import './App.css'
 
 function App() {
   const [weatherData, setWeatherData] = useState([])
+  const [rainData, setRainData] = useState([])
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState(null)
   const [lastUpdate, setLastUpdate] = useState(null)
+  const [timeRange, setTimeRange] = useState('24h') // '24h', '7d', '30d', '365d'
 
   useEffect(() => {
     const fetchData = async () => {
       try {
+        setLoading(true)
+        
         // Prüfe ob eingebettete Daten vorhanden sind (statischer Build)
-        if (window.__WEATHER_DATA__) {
+        if (window.__WEATHER_DATA__ && timeRange === '24h') {
           setWeatherData(window.__WEATHER_DATA__)
+          setRainData([])
           setLastUpdate(new Date())
           setLoading(false)
-        } else {
-          // Development oder Production: Daten von API holen
-          // Im Development: localhost:8000
-          // Im Production: /api/ (nginx proxy)
-          const apiUrl = import.meta.env.DEV 
-            ? 'http://localhost:8000/weather/history?hours=24'
-            : '/api/weather/history?hours=24'
-          
-          const response = await fetch(apiUrl)
-          if (!response.ok) {
-            throw new Error('API-Fehler: ' + response.status)
-          }
-          const data = await response.json()
-          setWeatherData(data)
-          setLastUpdate(new Date())
-          setLoading(false)
+          return
         }
+        
+        // API-URLs basierend auf Zeitraum
+        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/hourly-aggregated?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
+        const weatherResponse = await fetch(weatherUrl)
+        if (!weatherResponse.ok) {
+          throw new Error('API-Fehler: ' + weatherResponse.status)
+        }
+        const weatherDataResult = await weatherResponse.json()
+        setWeatherData(weatherDataResult)
+        
+        // Regendaten laden (falls separater Endpunkt)
+        if (rainUrl) {
+          const rainResponse = await fetch(rainUrl)
+          if (rainResponse.ok) {
+            const rainDataResult = await rainResponse.json()
+            setRainData(rainDataResult)
+          }
+        } else {
+          setRainData([])
+        }
+        
+        setLastUpdate(new Date())
+        setLoading(false)
       } catch (err) {
         setError(err.message)
         setLoading(false)
@@ -41,12 +79,12 @@ function App() {
     
     fetchData()
     
-    // Automatisches Update alle 5 Minuten (nur im Entwicklungsmodus)
-    if (!window.__WEATHER_DATA__) {
+    // Automatisches Update alle 5 Minuten (nur für 24h und ohne statische Daten)
+    if (!window.__WEATHER_DATA__ && timeRange === '24h') {
       const interval = setInterval(fetchData, 5 * 60 * 1000)
       return () => clearInterval(interval)
     }
-  }, [])
+  }, [timeRange])
 
   if (loading) {
     return (
@@ -98,7 +136,12 @@ function App() {
       </header>
       
       <main className="app-main">
-        <WeatherDashboard data={weatherData} />
+        <WeatherDashboard 
+          data={weatherData} 
+          rainData={rainData}
+          timeRange={timeRange}
+          onTimeRangeChange={setTimeRange}
+        />
       </main>
     </div>
   )