refactor part 1

client/src/components/CurrentWeather.vue

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

client/src/components/ForecastStrip.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { DataRow } from '../services/api'
+import {BASE, type DataRow} from '../services/api';
 
 const props = defineProps<{ days: DataRow[] }>()
 
@@ -57,7 +57,7 @@ const items = computed(() => props.days.slice(0, 7).map(d => ({
 		<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" />
+				<img v-if="item.icon" :src="BASE + item.icon" class="day-icon" :alt="item.label" />
 				<div class="day-label">{{ item.label }}</div>
 				<div class="day-temps">
 					<span>{{ item.high }}</span>

client/src/components/MapView.vue

@@ -177,8 +177,8 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
 onMounted(async () => {
 	await fetchRadarFrames()
 
-	const lat = (current.value.gps_lat as number) || 0
-	const lon = (current.value.gps_lon as number) || 0
+	const lat = (current.value.latitude as number) || 0
+	const lon = (current.value.longitude as number) || 0
 
 	stationLayer = buildStationLayer(lat, lon, props.dark)
 
@@ -221,16 +221,16 @@ onUnmounted(() => {
 watch(() => props.dark, dark => {
 	map.getLayers().setAt(0, buildBaseLayer(dark))
 	map.removeLayer(stationLayer)
-	const lat = (current.value.gps_lat as number) || 0
-	const lon = (current.value.gps_lon as number) || 0
+	const lat = (current.value.latitude as number) || 0
+	const lon = (current.value.longitude as number) || 0
 	stationLayer = buildStationLayer(lat, lon, dark)
 	map.addLayer(stationLayer)
 })
 
 let positioned = false
 watch(() => current.value, () => {
-	const lat = (current.value.gps_lat as number) || 0
-	const lon = (current.value.gps_lon as number) || 0
+	const lat = (current.value.latitude as number) || 0
+	const lon = (current.value.longitude as number) || 0
 	if (!positioned) {
 		positioned = true
 		map.getView().animate({ center: fromLonLat([lon, lat]), duration: 500 })