ztimson/weather-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

24h forecasting

Browse Source
This commit is contained in:
Zakary Timson
2026-06-24 13:27:20 -04:00
parent 7418616a5b
commit 7dca2a200b
1 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/ForecastStrip.vue
View File

@@ -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>