updated client
This commit is contained in:
3804
client/package-lock.json
generated
Normal file
3804
client/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -15,10 +15,14 @@
|
||||
"@types/node": "^24.13.2",
|
||||
"@vitejs/plugin-vue": "^6.0.7",
|
||||
"@vue/tsconfig": "^0.9.1",
|
||||
"chart.js": "^4.5.1",
|
||||
"npm-run-all2": "^9.0.2",
|
||||
"ol": "^10.9.0",
|
||||
"sass-embedded": "^1.100.0",
|
||||
"typescript": "~6.0.0",
|
||||
"vite": "^8.0.16",
|
||||
"vite-plugin-vue-devtools": "^8.1.2",
|
||||
"vue-chartjs": "^5.3.3",
|
||||
"vue-tsc": "^3.3.5"
|
||||
},
|
||||
"engines": {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import './base.css';
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
@@ -26,10 +26,4 @@ a,
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,167 +3,254 @@ import { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import Map from 'ol/Map'
|
||||
import View from 'ol/View'
|
||||
import TileLayer from 'ol/layer/Tile'
|
||||
import VectorLayer from 'ol/layer/Vector'
|
||||
import VectorSource from 'ol/source/Vector'
|
||||
import XYZ from 'ol/source/XYZ'
|
||||
import Feature from 'ol/Feature'
|
||||
import Point from 'ol/geom/Point'
|
||||
import CircleGeom from 'ol/geom/Circle'
|
||||
import { fromLonLat } from 'ol/proj'
|
||||
import { Style, Fill, Stroke, Circle as CircleStyle } from 'ol/style'
|
||||
import { current } from '../services/weather'
|
||||
import 'ol/ol.css'
|
||||
|
||||
const props = defineProps<{ dark: boolean }>()
|
||||
const mapEl = ref<HTMLDivElement>()
|
||||
let map: Map
|
||||
const props = defineProps<{ dark: boolean }>()
|
||||
const mapEl = ref<HTMLDivElement>()
|
||||
const OWM_KEY = import.meta.env.VITE_OWM_API_KEY || ''
|
||||
|
||||
// Nautical miles to meters
|
||||
const NM = 1852
|
||||
|
||||
const OVERLAYS = [
|
||||
{ id: 'clouds', label: 'Clouds', icon: '☁️', url: (ts: number) => `https://tilecache.rainviewer.com/v2/coverage/0/256/{z}/{x}/{y}/1/1_1.png` },
|
||||
{ id: 'rain', label: 'Rain', icon: '🌧️', url: (ts: number) => `https://tilecache.rainviewer.com/v2/radar/${ts}/256/{z}/{x}/{y}/4/1_1.png` },
|
||||
{ id: 'wind', label: 'Wind', icon: '💨', url: (_: number) => `https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=demo` },
|
||||
{ id: 'temp', label: 'Temperature', icon: '🌡️', url: (_: number) => `https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=demo` },
|
||||
{ id: 'pressure', label: 'Pressure', icon: '📊', url: (_: number) => `https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=demo` },
|
||||
{
|
||||
id: 'rain',
|
||||
label: 'Rain',
|
||||
icon: '🌧️',
|
||||
url: (ts: number) => `https://tilecache.rainviewer.com/v2/radar/${ts}/256/{z}/{x}/{y}/4/1_1.png`,
|
||||
needsTs: true,
|
||||
},
|
||||
{
|
||||
id: 'clouds',
|
||||
label: 'Clouds',
|
||||
icon: '☁️',
|
||||
url: () => `https://tile.openweathermap.org/map/clouds_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
|
||||
needsTs: false,
|
||||
},
|
||||
{
|
||||
id: 'wind',
|
||||
label: 'Wind',
|
||||
icon: '💨',
|
||||
url: () => `https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
|
||||
needsTs: false,
|
||||
},
|
||||
{
|
||||
id: 'temp',
|
||||
label: 'Temp',
|
||||
icon: '🌡️',
|
||||
url: () => `https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
|
||||
needsTs: false,
|
||||
},
|
||||
{
|
||||
id: 'pressure',
|
||||
label: 'Pressure',
|
||||
icon: '📊',
|
||||
url: () => `https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=${OWM_KEY}`,
|
||||
needsTs: false,
|
||||
},
|
||||
]
|
||||
|
||||
const activeOverlays = ref<Set<string>>(new Set(['rain']))
|
||||
const radarTs = ref(Math.floor(Date.now() / 1000))
|
||||
const overlayLayers = new Map<string, TileLayer<XYZ>>()
|
||||
let radarInterval: ReturnType<typeof setInterval>
|
||||
|
||||
let map: Map
|
||||
let stationLayer: VectorLayer<VectorSource>
|
||||
let radarInterval: ReturnType<typeof setInterval>
|
||||
|
||||
function buildBaseLayer(dark: boolean) {
|
||||
return new TileLayer({
|
||||
source: new XYZ({
|
||||
url: dark
|
||||
? 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png'
|
||||
: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png',
|
||||
attributions: '© Stadia Maps © OpenMapTiles © OpenStreetMap',
|
||||
}),
|
||||
})
|
||||
return new TileLayer({
|
||||
source: new XYZ({
|
||||
url: dark
|
||||
? 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png'
|
||||
: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png',
|
||||
attributions: '© Stadia Maps © OpenMapTiles © OpenStreetMap',
|
||||
}),
|
||||
zIndex: 0,
|
||||
})
|
||||
}
|
||||
|
||||
function buildOverlayLayer(id: string): TileLayer<XYZ> {
|
||||
const def = OVERLAYS.find(o => o.id === id)!
|
||||
return new TileLayer({
|
||||
source: new XYZ({ url: def.url(radarTs.value), attributions: '' }),
|
||||
opacity: 0.6,
|
||||
zIndex: 10,
|
||||
})
|
||||
const def = OVERLAYS.find(o => o.id === id)!
|
||||
return new TileLayer({
|
||||
source: new XYZ({ url: def.url(radarTs.value), attributions: '' }),
|
||||
opacity: 0.6,
|
||||
zIndex: 5,
|
||||
})
|
||||
}
|
||||
|
||||
function buildStationLayer(lat: number, lon: number, dark: boolean): VectorLayer<VectorSource> {
|
||||
const center = fromLonLat([lon, lat])
|
||||
const source = new VectorSource()
|
||||
const ringColor = dark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.18)'
|
||||
const ringStroke = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.35)'
|
||||
|
||||
// Rings at 50, 100, 150, 200 nm
|
||||
for (const nm of [50, 100, 150, 200]) {
|
||||
const ring = new Feature(new CircleGeom(center, nm * NM))
|
||||
ring.setStyle(new Style({
|
||||
stroke: new Stroke({ color: ringStroke, width: 1, lineDash: [6, 4] }),
|
||||
fill: new Fill({ color: 'transparent' }),
|
||||
}))
|
||||
source.addFeature(ring)
|
||||
}
|
||||
|
||||
// Station dot
|
||||
const dot = new Feature(new Point(center))
|
||||
dot.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 7,
|
||||
fill: new Fill({ color: dark ? '#ffffff' : '#000000' }),
|
||||
stroke: new Stroke({ color: dark ? '#000000' : '#ffffff', width: 2 }),
|
||||
}),
|
||||
}))
|
||||
source.addFeature(dot)
|
||||
|
||||
// Pulsing outer ring — just a slightly larger static ring for now
|
||||
const pulse = new Feature(new Point(center))
|
||||
pulse.setStyle(new Style({
|
||||
image: new CircleStyle({
|
||||
radius: 13,
|
||||
fill: new Fill({ color: 'transparent' }),
|
||||
stroke: new Stroke({ color: dark ? 'rgba(255,255,255,0.4)' : 'rgba(0,0,0,0.3)', width: 1.5 }),
|
||||
}),
|
||||
}))
|
||||
source.addFeature(pulse)
|
||||
|
||||
return new VectorLayer({ source, zIndex: 20 })
|
||||
}
|
||||
|
||||
function toggleOverlay(id: string) {
|
||||
if (activeOverlays.value.has(id)) {
|
||||
activeOverlays.value.delete(id)
|
||||
const layer = overlayLayers.get(id)
|
||||
if (layer) { map.removeLayer(layer); overlayLayers.delete(id) }
|
||||
} else {
|
||||
activeOverlays.value.add(id)
|
||||
const layer = buildOverlayLayer(id)
|
||||
overlayLayers.set(id, layer)
|
||||
map.addLayer(layer)
|
||||
}
|
||||
if (activeOverlays.value.has(id)) {
|
||||
activeOverlays.value.delete(id)
|
||||
const layer = overlayLayers.get(id)
|
||||
if (layer) { map.removeLayer(layer); overlayLayers.delete(id) }
|
||||
} else {
|
||||
activeOverlays.value.add(id)
|
||||
const layer = buildOverlayLayer(id)
|
||||
overlayLayers.set(id, layer)
|
||||
map.addLayer(layer)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const lat = (current.value.gps_lat as number) || 0
|
||||
const lon = (current.value.gps_lon as number) || 0
|
||||
const lat = (current.value.gps_lat as number) || 0
|
||||
const lon = (current.value.gps_lon as number) || 0
|
||||
|
||||
map = new Map({
|
||||
target: mapEl.value!,
|
||||
layers: [buildBaseLayer(props.dark)],
|
||||
view: new View({
|
||||
center: fromLonLat([lon, lat]),
|
||||
zoom: 9,
|
||||
}),
|
||||
controls: [],
|
||||
})
|
||||
stationLayer = buildStationLayer(lat, lon, props.dark)
|
||||
|
||||
// Add default active overlays
|
||||
for (const id of activeOverlays.value) {
|
||||
const layer = buildOverlayLayer(id)
|
||||
overlayLayers.set(id, layer)
|
||||
map.addLayer(layer)
|
||||
}
|
||||
map = new Map({
|
||||
target: mapEl.value!,
|
||||
layers: [buildBaseLayer(props.dark), stationLayer],
|
||||
view: new View({ center: fromLonLat([lon, lat]), zoom: 7 }),
|
||||
controls: [],
|
||||
})
|
||||
|
||||
// Refresh radar every 5 min
|
||||
radarInterval = setInterval(() => {
|
||||
radarTs.value = Math.floor(Date.now() / 1000)
|
||||
const layer = overlayLayers.get('rain')
|
||||
if (layer) {
|
||||
layer.setSource(new XYZ({ url: OVERLAYS.find(o => o.id === 'rain')!.url(radarTs.value) }))
|
||||
}
|
||||
}, 5 * 60 * 1000)
|
||||
for (const id of activeOverlays.value) {
|
||||
const layer = buildOverlayLayer(id)
|
||||
overlayLayers.set(id, layer)
|
||||
map.addLayer(layer)
|
||||
}
|
||||
|
||||
// Refresh radar every 5 min
|
||||
radarInterval = setInterval(() => {
|
||||
radarTs.value = Math.floor(Date.now() / 1000)
|
||||
const layer = overlayLayers.get('rain')
|
||||
if (layer) {
|
||||
const def = OVERLAYS.find(o => o.id === 'rain')!
|
||||
layer.setSource(new XYZ({ url: def.url(radarTs.value) }))
|
||||
}
|
||||
}, 5 * 60 * 1000)
|
||||
})
|
||||
|
||||
onUnmounted(() => clearInterval(radarInterval))
|
||||
|
||||
watch(() => props.dark, (dark) => {
|
||||
const layers = map.getLayers()
|
||||
layers.setAt(0, buildBaseLayer(dark))
|
||||
watch(() => props.dark, dark => {
|
||||
map.getLayers().setAt(0, buildBaseLayer(dark))
|
||||
// Rebuild station layer with correct colors
|
||||
map.removeLayer(stationLayer)
|
||||
const lat = (current.value.gps_lat as number) || 0
|
||||
const lon = (current.value.gps_lon as number) || 0
|
||||
stationLayer = buildStationLayer(lat, lon, dark)
|
||||
map.addLayer(stationLayer)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.map-el {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.overlay-toggles {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 100;
|
||||
background: var(--surface);
|
||||
border-radius: 99px;
|
||||
padding: 6px 10px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 100;
|
||||
background: var(--surface);
|
||||
border-radius: 99px;
|
||||
padding: 6px 10px;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.2);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.overlay-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 99px;
|
||||
border: 1.5px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 99px;
|
||||
border: 1.5px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
|
||||
&.active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
&.active {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&:hover:not(.active) {
|
||||
background: var(--hover);
|
||||
}
|
||||
&:hover:not(.active) { background: var(--hover); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="map-wrap">
|
||||
<div ref="mapEl" class="map-el" />
|
||||
<div class="overlay-toggles">
|
||||
<button
|
||||
v-for="o in OVERLAYS"
|
||||
:key="o.id"
|
||||
class="overlay-btn"
|
||||
:class="{ active: activeOverlays.has(o.id) }"
|
||||
@click="toggleOverlay(o.id)"
|
||||
>
|
||||
{{ o.icon }} {{ o.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-wrap">
|
||||
<div ref="mapEl" class="map-el" />
|
||||
<div class="overlay-toggles">
|
||||
<button
|
||||
v-for="o in OVERLAYS"
|
||||
:key="o.id"
|
||||
class="overlay-btn"
|
||||
:class="{ active: activeOverlays.has(o.id) }"
|
||||
@click="toggleOverlay(o.id)"
|
||||
>
|
||||
{{ o.icon }} {{ o.label }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
"compilerOptions": {
|
||||
// Extra safety for array and object lookups, but may have false positives.
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"skipLibCheck": true,
|
||||
|
||||
// Path mapping for cleaner imports.
|
||||
"paths": {
|
||||
|
||||
Reference in New Issue
Block a user