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

More daily forecasting

Browse Source
This commit is contained in:
Zakary Timson
2026-06-24 12:27:35 -04:00
parent 9e8f1a7c12
commit 25c6bcce7b
2 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

3
server/openmeteo.mjs
View File

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