From 25c6bcce7b05809ff4ee83eb600e84064e6b4ac1 Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Wed, 24 Jun 2026 12:27:35 -0400
Subject: [PATCH] More daily forecasting

---
 client/src/components/ForecastStrip.vue | 27 +++++++++++++++++--------
 server/openmeteo.mjs                    |  3 ++-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/client/src/components/ForecastStrip.vue b/client/src/components/ForecastStrip.vue
index 6f2538d..df96c3d 100644
--- a/client/src/components/ForecastStrip.vue
+++ b/client/src/components/ForecastStrip.vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
 import {formatDate} from '@ztimson/utils';
-import {watch} from 'vue';
 import {BASE, type DataRow} from '../services/api';
 
 const props = withDefaults(defineProps<{ days: DataRow[] }>(), {days: <any>[]});
 
-watch(() => props.days, console.log, {immediate: true});
+function dir(deg: number) {
+	if(deg > 22.5 && deg <= 67.5) return 'NE';
+	if(deg > 67.5 && deg <= 112.5) return 'E';
+	if(deg > 112.5 && deg <= 157.5) return 'SE';
+	if(deg > 157.5 && deg <= 202.5) return 'S';
+	if(deg > 202.5 && deg <= 247.5) return 'SW';
+	if(deg > 247.5 && deg <= 292.5) return 'W';
+	if(deg > 292.5 && deg <= 337.5) return 'NW';
+	return 'N';
+}
 </script>
 
 <style scoped lang="scss">
@@ -41,8 +49,10 @@ watch(() => props.days, console.log, {immediate: true});
 .day-label  { font-size: 10px; color: var(--text-muted); text-align: center; line-height: 1.2; }
 .day-temps  { display: flex; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
 .day-low    { color: var(--text-muted); font-weight: 400; }
-.day-rain   { font-size: 11px; color: #38bdf8; }
-.day-precip { font-size: 10px; color: var(--text-muted); }
+.day-humid   { font-size: 11px; color: var(--text-muted); }
+.day-wind   { font-size: 11px; color: var(--text-muted); }
+.day-rain   { font-size: 11px; color: var(--text-muted); }
+.day-precip { font-size: 9px; color: var(--text-muted); }
 </style>
 
 <template>
@@ -53,11 +63,12 @@ watch(() => props.days, console.log, {immediate: true});
 				<img :src="BASE + d.icon" class="day-icon" :alt="(d.label?.toString() || '')" />
 				<div class="day-label">{{ d.label }}</div>
 				<div class="day-temps">
-					<span>{{ d.temp_max }}</span>
-					<span class="day-low">{{ d.temp_min }}</span>
+					<span>{{ d.temp_max || '—' }}</span>
+					<span class="day-low">{{ d.temp_min || '—' }}</span>
 				</div>
-				<div v-if="d.precipitation_chance" class="day-rain">🌧 {{ d.precipitation_chance }}</div>
-				<div v-if="d.precipitation" class="day-precip">{{ d.precipitation }}</div>
+				<div class="day-humid">🌡️ {{ d.humidity || 0 }}%</div>
+				<div class="day-wind">🍃 {{ ~~(d.wind_gusts) || 0 }} Kph ({{dir(d.wind_dir)}})</div>
+				<div class="day-rain">🌧️ {{ d.precipitation_chance || 0 }}% ({{ (d.precipitation as any || 0).toFixed(1) }}mm)</div>
 			</div>
 		</div>
 	</div>
diff --git a/server/openmeteo.mjs b/server/openmeteo.mjs
index 8872ab2..1d9ecdb 100644
--- a/server/openmeteo.mjs
+++ b/server/openmeteo.mjs
@@ -72,7 +72,7 @@ const DAILY_FIELDS = [
   'temperature_2m_max', 'temperature_2m_min',
   'precipitation_sum', 'precipitation_probability_max',
   'windspeed_10m_max', 'windgusts_10m_max', 'winddirection_10m_dominant',
-  'weathercode', 'sunrise', 'sunset',
+  'weathercode', 'sunrise', 'sunset', 'relative_humidity_2m_mean',
   'uv_index_max', 'shortwave_radiation_sum',
 ].join(',')
 
@@ -99,6 +99,7 @@ export async function getOpenMeteo(lat, lon, start, end) {
       label:                          WMO[code] || 'Unknown',
       icon,
       code,
+      humidity:                       data.daily.relative_humidity_2m_mean[i],
       temperature:                    data.daily.temperature_2m_max[i],
       temperature_max:                data.daily.temperature_2m_max[i],
       temperature_min:                data.daily.temperature_2m_min[i],