Updated UI
This commit is contained in:
@@ -3,97 +3,167 @@ import { computed } from 'vue'
|
||||
import type { DataRow } from '../services/api'
|
||||
|
||||
const props = defineProps<{ data: DataRow }>()
|
||||
const d = computed(() => props.data)
|
||||
|
||||
const temp = computed(() => props.data.env_temp_c != null ? `${(props.data.env_temp_c as number).toFixed(1)}°C` : '—')
|
||||
const feels = computed(() => props.data.env_heat_index_c != null ? `Feels ${(props.data.env_heat_index_c as number).toFixed(1)}°C` : '')
|
||||
const icon = computed(() => props.data.forecast_weather_icon as string | null)
|
||||
const label = computed(() => props.data.forecast_weather_label as string | null)
|
||||
const humidity = computed(() => props.data.env_humidity != null ? `${(props.data.env_humidity as number).toFixed(0)}%` : '—')
|
||||
const wind = computed(() => props.data.wind_speed_kmh != null ? `${(props.data.wind_speed_kmh as number).toFixed(1)} km/h` : '—')
|
||||
const uvi = computed(() => props.data.light_uvi != null ? `UV ${(props.data.light_uvi as number).toFixed(1)}` : null)
|
||||
const sunrise = computed(() => props.data.sun_sunrise ? new Date(props.data.sun_sunrise as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—')
|
||||
const sunset = computed(() => props.data.sun_sunset ? new Date(props.data.sun_sunset as string).toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit' }) : '—')
|
||||
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' }) : '—'
|
||||
|
||||
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">
|
||||
.hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
.today-card {
|
||||
border-radius: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.today-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.weather-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: contain;
|
||||
.today-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
object-fit: contain;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.temps {
|
||||
flex: 1;
|
||||
.today-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.temp-main {
|
||||
font-size: 42px;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: var(--text);
|
||||
.today-date {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.temp-feel {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
.today-label {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.weather-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
.hi-lo {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin-top: 2px;
|
||||
|
||||
.hi { color: var(--text); }
|
||||
.lo { color: var(--text-muted); font-weight: 400; }
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
border-top: 1px solid var(--border);
|
||||
padding-top: 10px;
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.stat {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; }
|
||||
.stat-value { font-size: 14px; font-weight: 600; color: var(--text); }
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.stat-sub {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="hero">
|
||||
<div class="top">
|
||||
<img v-if="icon" :src="icon" class="weather-icon" alt="weather" />
|
||||
<div class="temps">
|
||||
<div class="temp-main">{{ temp }}</div>
|
||||
<div class="temp-feel">{{ feels }}</div>
|
||||
<div class="weather-label">{{ label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stats">
|
||||
<div class="stat"><span class="stat-label">Humidity</span><span class="stat-value">{{ humidity }}</span></div>
|
||||
<div class="stat"><span class="stat-label">Wind</span><span class="stat-value">{{ wind }}</span></div>
|
||||
<div v-if="uvi" class="stat"><span class="stat-label">UV</span><span class="stat-value">{{ uvi }}</span></div>
|
||||
<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>
|
||||
</div>
|
||||
<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">
|
||||
<span class="hi">↑ {{ high }}</span>
|
||||
<span class="lo">↓ {{ low }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user