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>

9
client/src/services/api.ts
View File

@@ -2,15 +2,18 @@ export const BASE = import.meta.env.DEV ? 'http://10.69.5.23' : ''
export type DataRow = Record<string, number | string | null>
const cache: any = {};
async function get<T>(path: string, params: Record<string, string> = {}): Promise<T> {
const url = new URL(`${BASE}${path}`, window.location.origin)
Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v))
const res = await fetch(url.toString())
return res.json()
if(cache[url.toString()]) return cache[url.toString()];
cache[url.toString()] = await fetch(url.toString()).then(resp => resp.json()).finally(() => { delete cache[url.toString()]; });
return cache[url.toString()]
}
export const api = {
current: (fields?: string) => get<DataRow>('/api/data', fields ? { fields } : {}),
current: (fields?: string) => get<DataRow>('/api/current', fields ? { fields } : {}),
hourly: (start?: string, end?: string, fields?: string) => get<DataRow[]>('/api/hourly', { ...(start ? { start } : {}), ...(end ? { end } : {}), ...(fields ? { fields } : {}) }),
daily: (start?: string, end?: string, fields?: string) => get<DataRow[]>('/api/daily', { ...(start ? { start } : {}), ...(end ? { end } : {}), ...(fields ? { fields } : {}) }),
}