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

Updated UI

Browse Source
This commit is contained in:
Zakary Timson
2026-06-22 01:54:52 -04:00
parent 4300ebc532
commit 8fe35b820a
7 changed files with 464 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,59 +4,68 @@ import type { DataRow } from '../services/api'
const props = defineProps<{ days: DataRow[] }>()
const items = computed(() => props.days.slice(0, 5).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,
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,
})))
</script>
<style scoped lang="scss">
.strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
.forecast-wrap {
width: 100%;
}
&::-webkit-scrollbar { height: 4px; }
&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.strip {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 6px;
width: 100%;
&::-webkit-scrollbar { height: 4px; }
&::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
}
.day {
flex: 1;
min-width: 80px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 8px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 10px 8px;
border-radius: 10px;
background: var(--surface);
border: 1px solid var(--border);
}
.day-name { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; }
.day-icon { width: 36px; height: 36px; object-fit: contain; }
.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-name { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; text-align: center; }
.day-icon { width: 36px; height: 36px; object-fit: contain; }
.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); }
</style>
<template>
<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="item.icon" class="day-icon" :alt="item.label" />
<div class="day-label">{{ item.label }}</div>
<div class="day-temps">
<span>{{ item.high }}</span>
<span class="day-low">{{ item.low }}</span>
</div>
<div v-if="item.rain" class="day-rain">🌧 {{ item.rain }}</div>
</div>
</div>
<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="item.icon" class="day-icon" :alt="item.label" />
<div class="day-label">{{ item.label }}</div>
<div class="day-temps">
<span>{{ item.high }}</span>
<span class="day-low">{{ item.low }}</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>
</div>
</div>
</template>