This commit is contained in:
2026-07-05 02:32:55 -04:00
parent d4cdb15737
commit 11012afbe9
11 changed files with 971 additions and 226 deletions
+41 -13
View File
@@ -108,47 +108,75 @@ onMounted(async () => {
<div class="stat" @click="openGraph?.('heat_index')">
<span class="stat-label">Feels Like</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ ~~(data.heat_index) }}<span class="fg-muted">°C</span></span>
<span v-else class="stat-value">
<template v-if="data.heat_index == null"></template>
<template v-else>{{ ~~(data.heat_index) }}<span class="fg-muted">°C</span></template>
</span>
</div>
<div class="stat" @click="openGraph?.('humidity')">
<span class="stat-label">Humidity</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ Math.round(data.humidity) }}%</span>
<span v-else class="stat-value">
<template v-if="data.humidity == null"></template>
<template v-else>{{ Math.round(data.humidity) }}<span class="fg-muted">%</span></template>
</span>
</div>
<div class="stat" @click="openGraph?.('precipitation_chance')">
<span class="stat-label">Rain</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading /></div>
<span v-else class="stat-value">
<template v-if="data.raining == null"></template>
<template v-else-if="data.raining">Raining</template>
<template v-else>{{data.precipitation_chance}}<span class="fg-muted">%</span></template>
</span>
</div>
<div class="stat" @click="openGraph?.('clouds')">
<span class="stat-label">Cloud Cover</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ Math.round(data.clouds) }}%</span>
</div>
<div class="stat" @click="openGraph?.('pressure_hpa')">
<span class="stat-label">Pressure</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ data.pressure_hpa?.toFixed(1) }} <span class="fg-muted">hPa</span></span>
<span v-else class="stat-value">
<template v-if="data.clouds == null"></template>
<template v-else>{{ Math.round(data.clouds) }}<span class="fg-muted">%</span></template>
</span>
</div>
<div class="stat" @click="openGraph?.('pressure_slp')">
<span class="stat-label">Sea Level</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ data.pressure_slp?.toFixed(1) }} <span class="fg-muted">({{ getPressureTrend(data.pressure_trend) }})</span></span>
<span v-else class="stat-value">
<template v-if="data.pressure_slp == null"></template>
<template v-else>{{ data.pressure_slp?.toFixed(1) }} <span class="fg-muted">({{ getPressureTrend(data.pressure_trend) }})</span></template>
</span>
</div>
<div class="stat" @click="openGraph?.('vapor_pressure_deficit')">
<span class="stat-label">VPD KPA</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ data.vapor_pressure_deficit?.toFixed(2) }} <span class="fg-muted">kPa</span></span>
<span v-else class="stat-value">
<template v-if="data.vapor_pressure_deficit == null"></template>
<template v-else>{{ data.vapor_pressure_deficit?.toFixed(2) }} <span class="fg-muted">kPa</span></template>
</span>
</div>
<div class="stat" @click="openGraph?.('air_quality')">
<span class="stat-label">Air Quality</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ data.air_quality }} <span class="fg-muted">/ 500</span></span>
<span v-else class="stat-value">
<template v-if="data.air_quality == null"></template>
<template v-else>{{ data.air_quality }} <span class="fg-muted">/ 500</span></template>
</span>
</div>
<div class="stat" @click="openGraph?.('air_quality_ohms')">
<span class="stat-label">Gas Resistance</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ data.air_quality_ohms }} <span class="fg-muted">Ω</span></span>
<span v-else class="stat-value">
<template v-if="data.air_quality_ohms == null"></template>
<template v-else>{{ data.air_quality_ohms }} <span class="fg-muted">Ω</span></template>
</span>
</div>
<div class="stat" @click="openGraph?.('visibility')">
<span class="stat-label">Visibility</span>
<div v-if="!data" class="w-100 pos-rel br-2 overflow-hidden" style="height: 1.75em"><Loading/></div>
<span v-else class="stat-value">{{ data.visibility?.toFixed(1) }} <span class="fg-muted">km</span></span>
<span v-else class="stat-value">
<template v-if="data.visibility == null"></template>
<template v-else>{{ data.visibility?.toFixed(1) }} <span class="fg-muted">km</span></template>
</span>
</div>
</div>
</div>