Client fixes
This commit is contained in:
@@ -60,9 +60,9 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.today-label {
|
||||
font-size: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.hi-lo {
|
||||
@@ -125,8 +125,8 @@ onMounted(async () => {
|
||||
<div class="today-card">
|
||||
<div class="flex-r align-items-center justify-between px-3">
|
||||
<div class="flex-c justify-center align-items-center">
|
||||
<img v-if="data.icon" :src="'https://openweathermap.org/img/wn/' + data.icon + '@2x.png'" class="today-icon" alt="weather" />
|
||||
<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-2">
|
||||
<div class="fs-6">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { AirTrafficLayer } from '@/services/airtraffic.ts'
|
||||
import {api} from '@/services/api.ts';
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import Map from 'ol/Map'
|
||||
import View from 'ol/View'
|
||||
@@ -176,9 +177,10 @@ function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer
|
||||
|
||||
onMounted(async () => {
|
||||
await fetchRadarFrames()
|
||||
const position = await api.position();
|
||||
|
||||
const lat = (current.value.latitude as number) || 0
|
||||
const lon = (current.value.longitude as number) || 0
|
||||
const lat = position?.latitude || 0
|
||||
const lon = position?.longitude || 0
|
||||
|
||||
stationLayer = buildStationLayer(lat, lon, props.dark)
|
||||
|
||||
@@ -226,19 +228,6 @@ watch(() => props.dark, dark => {
|
||||
stationLayer = buildStationLayer(lat, lon, dark)
|
||||
map.addLayer(stationLayer)
|
||||
})
|
||||
|
||||
let positioned = false
|
||||
watch(() => current.value, () => {
|
||||
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 })
|
||||
map.removeLayer(stationLayer)
|
||||
stationLayer = buildStationLayer(lat, lon, props.dark)
|
||||
map.addLayer(stationLayer)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -27,6 +27,7 @@ const label = computed(() => props.data[`${props.metricKey.replace(/_[^_]+$/, ''
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover { background: var(--hover); }
|
||||
&:active { transform: scale(0.97); }
|
||||
|
||||
@@ -13,6 +13,7 @@ async function get<T>(path: string, params: Record<string, string> = {}): Promis
|
||||
}
|
||||
|
||||
export const api = {
|
||||
position: (fields?: string) => get<{latitude: number, longitude: number, altitude: number}>('/api/position', 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 } : {}) }),
|
||||
|
||||
@@ -144,7 +144,7 @@ export async function getCoords() {
|
||||
`;
|
||||
const rows = await query(flux);
|
||||
if(rows.length && rows[0].latitude && rows[0].longitude) {
|
||||
return {lat: rows[0].latitude, lon: rows[0].longitude, alt: rows[0].altitude || c.ALTITUDE};
|
||||
return {latitude: rows[0].latitude, longitude: rows[0].longitude, altitude: rows[0].altitude || c.ALTITUDE};
|
||||
}
|
||||
return {latitude: c.LATITUDE, longitude: c.LONGITUDE, altitude: c.ALTITUDE};
|
||||
}
|
||||
|
||||
@@ -31,12 +31,6 @@ export const WMO = {
|
||||
99: { label: 'Thunderstorm w/ Hail', icon: '11d' },
|
||||
}
|
||||
|
||||
export function weatherFromCode(code, isDay = true) {
|
||||
const w = WMO[code] ?? { label: 'Unknown', icon: '01d' }
|
||||
const icon = isDay ? w.icon : w.icon.replace('d', 'n')
|
||||
return { weather_code: code, weather_label: w.label, weather_icon: `/icons/${icon}.png` }
|
||||
}
|
||||
|
||||
export async function downloadIcons() {
|
||||
if (!existsSync(DIR)) mkdirSync(DIR, { recursive: true })
|
||||
const icons = new Set(Object.values(WMO).map(w => [w.icon, w.icon.replace('d','n')]).flat())
|
||||
|
||||
Reference in New Issue
Block a user