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

Fixed forecasting days

Browse Source
This commit is contained in:
Zakary Timson
2026-06-24 12:12:50 -04:00
parent 9ac343d9aa
commit 9e8f1a7c12
3 changed files with 16 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,11 @@
<script setup lang="ts">
import { computed } from 'vue'
import {formatDate} from '@ztimson/utils';
import {watch} from 'vue';
import {BASE, type DataRow} from '../services/api';
const props = defineProps<{ days: DataRow[] }>()
const props = withDefaults(defineProps<{ days: DataRow[] }>(), {days: <any>[]});
const items = computed(() => props.days.slice(0, 7).map(d => ({
date: new Date(d.time as string).toLocaleDateString('en', { weekday: 'short', month: 'short', day: 'numeric' }),
icon: d.forecast_weather_icon as string | null,
label: d.forecast_weather_label as string,
high: d.env_temp_max_c != null ? `${(d.env_temp_max_c as number).toFixed(1)}°` : '—',
low: d.env_temp_min_c != null ? `${(d.env_temp_min_c as number).toFixed(1)}°` : '—',
rain: d.forecast_precipitation_probability != null ? `${d.forecast_precipitation_probability}%` : null,
precip: d.forecast_precipitation_mm != null ? `${(d.forecast_precipitation_mm as number).toFixed(1)}mm` : null,
})))
watch(() => props.days, console.log, {immediate: true});
</script>
<style scoped lang="scss">
@@ -55,16 +48,16 @@ const items = computed(() => props.days.slice(0, 7).map(d => ({
<template>
<div class="forecast-wrap">
<div class="strip">
<div v-for="item in items" :key="item.date" class="day">
<div class="day-name">{{ item.date }}</div>
<img v-if="item.icon" :src="BASE + item.icon" class="day-icon" :alt="item.label" />
<div class="day-label">{{ item.label }}</div>
<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() || '')" />
<div class="day-label">{{ d.label }}</div>
<div class="day-temps">
<span>{{ item.high }}</span>
<span class="day-low">{{ item.low }}</span>
<span>{{ d.temp_max }}</span>
<span class="day-low">{{ d.temp_min }}</span>
</div>
<div v-if="item.rain" class="day-rain">🌧 {{ item.rain }}</div>
<div v-if="item.precip" class="day-precip">{{ item.precip }}</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>
</div>
</div>