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

refactor part 1

Browse Source
This commit is contained in:
Zakary Timson
2026-06-23 22:17:01 -04:00
parent 214cf50908
commit d5bb7ff24f
18 changed files with 508 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
client/src/components/CurrentWeather.vue
View File

@@ -1,29 +1,17 @@
<script setup lang="ts">
import { computed } from 'vue'
import type { DataRow } from '../services/api'
import {computed, onMounted, ref} from 'vue';
import {api, BASE, type DataRow} from '../services/api';
const props = defineProps<{ data: DataRow }>()
const d = computed(() => props.data)
const data = ref<any>({});
const precipitation = '';
const humidity = computed(() => data.value.humidity || '—');
const label = computed(() => data.value.forecast_weather_label || '');
const fmt = (v: unknown, dec = 1, unit = '') => v != null ? `${(v as number).toFixed(dec)}${unit}` : '—'
const time = (v: unknown) => v ? new Date(v as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—'
onMounted(async () => {
data.value = await api.current();
console.log(data.value);
});
const high = computed(() => fmt(d.value.env_temp_max_c, 1, '°C'))
const low = computed(() => fmt(d.value.env_temp_min_c, 1, '°C'))
const sunrise = computed(() => time(d.value.sun_sunrise))
const sunset = computed(() => time(d.value.sun_sunset))
const ghMornEnd = computed(() => time(d.value.sun_golden_hour_morning_end))
const ghEveStart = computed(() => time(d.value.sun_golden_hour_evening_start))
const dayLen = computed(() => d.value.sun_day_length_hours != null ? `${(d.value.sun_day_length_hours as number).toFixed(2)}h` : '—')
const uviMax = computed(() => fmt(d.value.light_uvi_max, 1))
const precipProb = computed(() => d.value.forecast_precipitation_probability != null ? `${d.value.forecast_precipitation_probability}%` : '—')
const precipMm = computed(() => fmt(d.value.forecast_precipitation_mm, 1, 'mm'))
const precipHrs = computed(() => d.value.precipitation_hours != null ? `${d.value.precipitation_hours}h` : null)
const windMax = computed(() => fmt(d.value.wind_speed_max_kmh, 1, ' km/h'))
const gustMax = computed(() => fmt(d.value.wind_gusts_max_kmh, 1, ' km/h'))
const icon = computed(() => d.value.forecast_weather_icon as string | null)
const label = computed(() => d.value.forecast_weather_label as string | null)
const solarSum = computed(() => d.value.light_solar_wm2_sum != null ? `${(d.value.light_solar_wm2_sum as number).toFixed(1)} W/m²` : null)
</script>
<style scoped lang="scss">
@@ -127,13 +115,16 @@ const solarSum = computed(() => d.value.light_solar_wm2_sum != null ? `${(d.va
<template>
<div class="today-card">
<div class="today-header">
<img v-if="icon" :src="icon" class="today-icon" alt="weather" />
<div class="today-title">
<div class="today-date">Today · {{ new Date().toLocaleDateString('en', { weekday: 'long', month: 'long', day: 'numeric' }) }}</div>
<div class="today-label">{{ label }}</div>
<div class="hi-lo">
<div class="flex-r align-items-center justify-between px-3">
<div class="flex-c justify-center align-items-center">
<div class="today-label">{{ data.label }}</div>
<img v-if="data.icon" :src="BASE + data.icon" class="today-icon" alt="weather" />
</div>
<div class="flex-r align-items-center gap-3">
<div class="fs-6">
0°C
</div>
<div class="flex-c fg-muted">
<span class="hi">↑ {{ high }}</span>
<span class="lo">↓ {{ low }}</span>
</div>
@@ -142,27 +133,13 @@ const solarSum = computed(() => d.value.light_solar_wm2_sum != null ? `${(d.va
<div class="divider" />
<!-- Sun -->
<div class="section-label">☀️ Sun</div>
<div class="stat-grid">
<div class="stat"><span class="stat-label">Sunrise</span><span class="stat-value">{{ sunrise }}</span></div>
<div class="stat"><span class="stat-label">Sunset</span><span class="stat-value">{{ sunset }}</span></div>
<div class="stat"><span class="stat-label">Day Length</span><span class="stat-value">{{ dayLen }}</span></div>
<div class="stat"><span class="stat-label">UV Max</span><span class="stat-value">{{ uviMax }}</span></div>
<div class="stat"><span class="stat-label">Golden AM</span><span class="stat-value">{{ ghMornEnd }}</span></div>
<div class="stat"><span class="stat-label">Golden PM</span><span class="stat-value">{{ ghEveStart }}</span></div>
<div v-if="solarSum" class="stat"><span class="stat-label">Solar</span><span class="stat-value">{{ solarSum }}</span></div>
</div>
<div class="divider" />
<!-- Precip & Wind -->
<div class="section-label">🌧️ Precipitation & Wind</div>
<div class="stat-grid">
<div class="stat"><span class="stat-label">Chance</span><span class="stat-value">{{ precipProb }}</span></div>
<div class="stat"><span class="stat-label">Amount</span><span class="stat-value">{{ precipMm }}</span><span v-if="precipHrs" class="stat-sub">over {{ precipHrs }}</span></div>
<div class="stat"><span class="stat-label">Wind Max</span><span class="stat-value">{{ windMax }}</span></div>
<div class="stat"><span class="stat-label">Gust Max</span><span class="stat-value">{{ gustMax }}</span></div>
<div class="stat"><span class="stat-label">Precipitation</span><span class="stat-value">{{ precipProb }}</span></div>
<div class="stat"><span class="stat-label">Humidity</span><span class="stat-value">{{ humidity }}</span><span v-if="precipHrs" class="stat-sub">over {{ precipHrs }}</span></div>
<div class="stat"><span class="stat-label">Wind</span><span class="stat-value">{{ windMax }}</span></div>
<div class="stat"><span class="stat-label">Clouds</span><span class="stat-value">{{ windMax }}</span></div>
<div class="stat"><span class="stat-label">Air Quality</span><span class="stat-value">{{ windMax }}</span></div>
<div class="stat"><span class="stat-label">UV index</span><span class="stat-value">{{ windMax }}</span></div>
</div>
</div>