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

Placeholder wind/rain measurements

Browse Source
This commit is contained in:
Zakary Timson
2026-06-23 23:11:15 -04:00
parent 40ec87d356
commit a174864ddb
5 changed files with 140 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,19 @@
<script setup lang="ts">
import {computed, onMounted, ref} from 'vue';
import {api, BASE, type DataRow} from '../services/api';
import {onMounted, ref} from 'vue';
import {api, BASE} from '../services/api';
const data = ref<any>({});
const precipitation = '';
const humidity = computed(() => data.value.humidity || '—');
const label = computed(() => data.value.forecast_weather_label || '');
function dir(deg: number) {
if(deg > 0 && deg <= 22.5 || deg > 337.5) return 'N';
if(deg > 22.5 && deg <= 67.5) return 'NE';
if(deg > 67.5 && deg <= 112.5) return 'E';
if(deg > 112.5 && deg <= 157.5) return 'SE';
if(deg > 157.5 && deg <= 202.5) return 'S';
if(deg > 202.5 && deg <= 247.5) return 'SW';
if(deg > 247.5 && deg <= 292.5) return 'W';
if(deg > 292.5 && deg <= 337.5) return 'NW';
}
onMounted(async () => {
data.value = await api.current();
@@ -120,13 +128,13 @@ onMounted(async () => {
<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="flex-r align-items-center gap-2">
<div class="fs-6">
0°C
{{ data.temperature.toFixed(0) }}°C
</div>
<div class="flex-c fg-muted">
<span class="hi">↑ {{ high }}</span>
<span class="lo">↓ {{ low }}</span>
<span class="hi">↑ {{ 0 }}°</span>
<span class="lo">↓ {{ 0 }}°</span>
</div>
</div>
</div>
@@ -135,12 +143,11 @@ onMounted(async () => {
<div class="stat-grid">
<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 class="stat"><span class="stat-label">Humidity</span><span class="stat-value">{{ data.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">{{ data.wind_gusts }} ({{ dir(data.wind_direction) }})</span></div>
<div class="stat"><span class="stat-label">Clouds</span><span class="stat-value">{{ data.clouds }}</span></div>
<div class="stat"><span class="stat-label">Air Quality</span><span class="stat-value">{{ data.air_quality }}</span></div>
<div class="stat"><span class="stat-label">UV index</span><span class="stat-value">{{ data.uv_index }}</span></div>
</div>
</div>
</template>