feat: weather card — precip probability %, condition text, unit-aware wind

- Fetch precipitation_probability_max from Open-Meteo (replaces precip_sum
  in the card display — probability is more useful at a glance than mm)
- Show WMO condition description text on each forecast day
- Convert wind speed to mph when temp unit is F; pass wind_unit in response
- Display 💧 X% chance of rain; 💨 X mph/km/h wind per day

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-31 13:02:36 -04:00
parent c1fcb1e287
commit ea23f16bd7
3 changed files with 30 additions and 11 deletions
+14 -4
View File
@@ -6,7 +6,7 @@ interface ForecastDay {
condition: string
high: number
low: number
precip_mm: number
precip_probability: number | null
windspeed_max: number
}
@@ -19,6 +19,7 @@ interface WeatherData {
today_low: number | null
yesterday_high: number | null
yesterday_low: number | null
wind_unit?: string
forecast: ForecastDay[]
}
@@ -87,10 +88,11 @@ const fetchedAtLabel = computed(() => {
<div v-for="day in weather.forecast" :key="day.day" class="weather-forecast-day">
<span class="forecast-day-name">{{ day.day }}</span>
<span class="forecast-icon">{{ weatherIcon(day.condition) }}</span>
<span class="forecast-condition">{{ day.condition }}</span>
<span class="forecast-temps">{{ day.high }}° / {{ day.low }}°</span>
<span v-if="day.precip_mm > 0" class="forecast-precip">💧 {{ day.precip_mm }}mm</span>
<span v-else class="forecast-precip forecast-precip--dry"></span>
<span class="forecast-wind">💨 {{ day.windspeed_max }}km/h</span>
<span v-if="day.precip_probability != null && day.precip_probability > 0" class="forecast-precip">💧 {{ day.precip_probability }}%</span>
<span v-else class="forecast-precip forecast-precip--dry">💧 </span>
<span class="forecast-wind">💨 {{ day.windspeed_max }} {{ weather.wind_unit ?? 'km/h' }}</span>
</div>
</div>
</div>
@@ -186,6 +188,14 @@ const fetchedAtLabel = computed(() => {
line-height: 1;
}
.forecast-condition {
font-size: 0.7rem;
color: var(--color-text-muted);
text-align: center;
line-height: 1.2;
word-break: break-word;
}
.forecast-temps {
white-space: nowrap;
}