From 7dca2a200b5377661ec55bf824d9e30250caec9a Mon Sep 17 00:00:00 2001
From: ztimson <zaktimson@gmail.com>
Date: Wed, 24 Jun 2026 13:27:20 -0400
Subject: [PATCH] 24h forecasting

---
 client/src/components/ForecastStrip.vue | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/client/src/components/ForecastStrip.vue b/client/src/components/ForecastStrip.vue
index 3bc56a3..9ae28d3 100644
--- a/client/src/components/ForecastStrip.vue
+++ b/client/src/components/ForecastStrip.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import Loading from '@/components/Loading.vue';
 import {formatDate} from '@ztimson/utils';
 import {BASE, type DataRow} from '../services/api';
 
-const props = withDefaults(defineProps<{ days: DataRow[] }>(), {days: <any>[]});
+const props = withDefaults(defineProps<{ days: DataRow[] }>(), {});
+const filler = [1, 2, 3, 4, 5];
 
 function dir(deg: number) {
 	if(deg > 22.5 && deg <= 67.5) return 'NE';
@@ -57,7 +59,7 @@ function dir(deg: number) {
 
 <template>
 	<div class="forecast-wrap">
-		<div class="strip">
+		<div v-if="days?.length" class="strip">
 			<div v-for="d in days" class="day">
 				<div class="day-name">{{ formatDate('ddd, MMM d', new Date(d.time + 'T00:00:00')) }}</div>
 				<img :src="BASE + d.icon" class="day-icon" :alt="(d.label?.toString() || '')" />
@@ -67,9 +69,22 @@ function dir(deg: number) {
 					<span class="day-low">↓{{ d.temperature_min || '—' }}</span>
 				</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-wind">🍃 {{ ~~(d.wind_gusts as any) || 0 }} Kph ({{dir(d.wind_dir as any)}})</div>
 				<div class="day-rain">🌧️ {{ d.precipitation_chance || 0 }}% ({{ (d.precipitation as any || 0).toFixed(1) }}mm)</div>
 			</div>
 		</div>
+		<div v-else class="strip">
+			<div v-for="d in filler" class="day">
+				<div class="day-name w-100 br-2 overflow-hidden pos-rel"><Loading /></div>
+				<div class="br-2 overflow-hidden pos-rel mb-2" style="height: 80px; width: 80px;"><Loading /></div>
+				<div class="day-temps mb-2">
+					<div class="br-2 overflow-hidden pos-rel" style="width: 50px; height: 1em"><Loading/></div>
+					<div class="br-2 overflow-hidden pos-rel" style="width: 50px; height: 1em"><Loading/></div>
+				</div>
+				<div class="w-100 br-2 overflow-hidden pos-rel mb-2" style="height: 1em"><Loading/></div>
+				<div class="w-100 br-2 overflow-hidden pos-rel mb-2" style="height: 1em"><Loading/></div>
+				<div class="w-100 br-2 overflow-hidden pos-rel mb-2" style="height: 1em"><Loading/></div>
+			</div>
+		</div>
 	</div>
 </template>