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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user