add daily weather forecast

Author: refact0r

src/lib/components/Settings.svelte

@@ -327,6 +327,23 @@
                 </div>
             {/if}
 
+            <div class="group">
+                <div class="setting-label">weather forecast</div>
+                <div class="radio-group">
+                    <RadioButton
+                        bind:group={settings.forecastMode}
+                        value="hourly"
+                    >
+                        hourly
+                    </RadioButton>
+                    <RadioButton
+                        bind:group={settings.forecastMode}
+                        value="daily"
+                    >
+                        daily
+                    </RadioButton>
+                </div>
+            </div>
             <div class="group">
                 <div class="setting-label">weather location</div>
                 <div class="radio-group">

src/lib/components/Weather.svelte

@@ -10,6 +10,7 @@
     let loading = $state(false)
     let error = $state(null)
     let initialLoad = $state(true)
+    let prevForecastMode = $state(settings.forecastMode)
 
     const weatherAPI = new WeatherAPI()
 
@@ -26,12 +27,20 @@
         const tempUnit = settings.tempUnit
         const speedUnit = settings.speedUnit
         const timeFormat = settings.timeFormat
+        const forecastMode = settings.forecastMode
 
         if (untrack(() => initialLoad)) {
             initialLoad = false
+            prevForecastMode = forecastMode
             return
         }
 
+        // Clear cache if forecast mode changed
+        if (untrack(() => prevForecastMode) !== forecastMode) {
+            prevForecastMode = forecastMode
+            weatherAPI.clearCache()
+        }
+
         refreshWeather()
     })
 
@@ -88,7 +97,8 @@
         const cached = weatherAPI.getCachedWeather(
             settings.timeFormat,
             lat,
-            lon
+            lon,
+            settings.forecastMode
         )
         if (cached.data) {
             current = cached.data.current
@@ -109,7 +119,8 @@
                 lon,
                 settings.tempUnit,
                 settings.speedUnit,
-                settings.timeFormat
+                settings.timeFormat,
+                settings.forecastMode
             )
 
             current = data.current
@@ -186,7 +197,13 @@
                 </div>
                 <div class="col">
                     {#each forecast as forecast}
-                        <div class="forecast-temp">{forecast.temperature}°</div>
+                        {#if settings.forecastMode === 'daily'}
+                            <div class="forecast-temp">
+                                {forecast.temperatureMax}° <span class="separator">/</span> {forecast.temperatureMin}°
+                            </div>
+                        {:else}
+                            <div class="forecast-temp">{forecast.temperature}°</div>
+                        {/if}
                     {/each}
                 </div>
                 <div class="col">
@@ -233,6 +250,9 @@
         text-align: end;
         color: var(--txt-1);
     }
+    .forecast-temp .separator {
+        color: var(--txt-3);
+    }
     .forecast-weather {
         color: var(--txt-3);
     }

src/lib/settings-store.svelte.js

@@ -12,6 +12,7 @@ let defaultSettings = {
     dateFormat: 'mdy',
     tempUnit: 'fahrenheit',
     speedUnit: 'mph',
+    forecastMode: 'hourly',
     linksPerColumn: 4,
     linkTarget: '_self',
     links: [

src/lib/weather-api.js

@@ -6,7 +6,7 @@ import descriptions from '../assets/descriptions.json'
 class WeatherAPI {
     constructor() {
         this.baseUrl = 'https://api.open-meteo.com/v1/forecast'
-        this.cacheKey = `weather_data`
+        this.cacheKey = 'weather_data'
         this.cacheExpiry = 15 * 60 * 1000
     }
 
@@ -18,43 +18,60 @@ class WeatherAPI {
         longitude,
         tempUnit,
         speedUnit,
-        timeFormat = '12hr'
+        timeFormat = '12hr',
+        forecastMode = 'hourly'
     ) {
         const rawData = await this._fetchWeatherData(
             latitude,
             longitude,
             tempUnit,
-            speedUnit
+            speedUnit,
+            forecastMode
         )
         this._cacheWeather(rawData, latitude, longitude)
 
+        const forecast =
+            forecastMode === 'daily'
+                ? this._processDailyForecast(rawData.daily, timeFormat)
+                : this._processHourlyForecast(
+                      rawData.hourly,
+                      rawData.current.time,
+                      timeFormat
+                  )
+
         return {
             current: this._processCurrentWeather(rawData.current),
-            forecast: this._processHourlyForecast(
-                rawData.hourly,
-                rawData.current.time,
-                timeFormat
-            ),
+            forecast,
         }
     }
 
     /**
      * Get cached weather data with staleness info
      */
-    getCachedWeather(timeFormat = '12hr', latitude = null, longitude = null) {
+    getCachedWeather(
+        timeFormat = '12hr',
+        latitude = null,
+        longitude = null,
+        forecastMode = 'hourly'
+    ) {
         const cached = this._getCachedData(latitude, longitude)
 
         if (!cached.data) {
             return { data: null, isStale: false }
         }
 
+        const forecast =
+            forecastMode === 'daily'
+                ? this._processDailyForecast(cached.data.daily, timeFormat)
+                : this._processHourlyForecast(
+                      cached.data.hourly,
+                      cached.data.current.time,
+                      timeFormat
+                  )
+
         const processedData = {
             current: this._processCurrentWeather(cached.data.current),
-            forecast: this._processHourlyForecast(
-                cached.data.hourly,
-                cached.data.current.time,
-                timeFormat
-            ),
+            forecast,
         }
 
         return {
@@ -125,18 +142,32 @@ class WeatherAPI {
     /**
      * Private method to fetch raw weather data from API
      */
-    async _fetchWeatherData(latitude, longitude, tempUnit, speedUnit) {
-        const params = new URLSearchParams({
+    async _fetchWeatherData(
+        latitude,
+        longitude,
+        tempUnit,
+        speedUnit,
+        forecastMode = 'hourly'
+    ) {
+        const baseParams = {
             latitude: latitude.toString(),
             longitude: longitude.toString(),
-            hourly: 'temperature_2m,weather_code,is_day',
             current:
                 'temperature_2m,weather_code,relative_humidity_2m,precipitation_probability,wind_speed_10m,apparent_temperature,is_day',
             timezone: 'auto',
-            forecast_hours: '24',
             temperature_unit: tempUnit,
             wind_speed_unit: speedUnit,
-        })
+        }
+
+        if (forecastMode === 'daily') {
+            baseParams.daily = 'weather_code,temperature_2m_max,temperature_2m_min'
+            baseParams.forecast_days = '7'
+        } else {
+            baseParams.hourly = 'temperature_2m,weather_code,is_day'
+            baseParams.forecast_hours = '24'
+        }
+
+        const params = new URLSearchParams(baseParams)
 
         const response = await fetch(`${this.baseUrl}?${params}`)
         if (!response.ok) {
@@ -204,6 +235,30 @@ class WeatherAPI {
         return forecasts
     }
 
+    /**
+     * Process daily forecast to get next 5 days
+     */
+    _processDailyForecast(dailyData, timeFormat = '12hr') {
+        const forecasts = []
+
+        // Get forecasts for the next 5 days (skip today, get days 1-5)
+        for (let i = 1; i <= 5 && i < dailyData.time.length; i++) {
+            forecasts.push({
+                time: dailyData.time[i],
+                temperatureMax: dailyData.temperature_2m_max[i].toFixed(0),
+                temperatureMin: dailyData.temperature_2m_min[i].toFixed(0),
+                weatherCode: dailyData.weather_code[i],
+                description: this._getWeatherDescription(
+                    dailyData.weather_code[i],
+                    true
+                ),
+                formattedTime: this._formatDate(dailyData.time[i]),
+            })
+        }
+
+        return forecasts
+    }
+
     /**
      * Get weather description from code
      */
@@ -238,6 +293,14 @@ class WeatherAPI {
         }
     }
 
+    /**
+     * Format date to display day name (e.g., "Mon", "Tue")
+     */
+    _formatDate(dateString) {
+        const date = new Date(dateString + 'T00:00:00')
+        return date.toLocaleDateString('en-US', { weekday: 'short' }).toLowerCase()
+    }
+
     /**
      * Cache weather data with timestamp and coordinates
      */