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