updated client

client/package.json

@@ -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": {

client/src/assets/main.css

@@ -1,9 +1,9 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
+  width: 100%;
-  margin: 0 auto;
+  margin: 0;
-  padding: 2rem;
+  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;
-  }
 }

client/src/components/MapView.vue

@@ -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 props  = defineProps<{ dark: boolean }>()
-const mapEl = ref<HTMLDivElement>()
+const mapEl  = ref<HTMLDivElement>()
-let map: Map
+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:    'rain',
-  { id: 'wind',        label: 'Wind',        icon: '💨',  url: (_: number)  => `https://tile.openweathermap.org/map/wind_new/{z}/{x}/{y}.png?appid=demo` },
+		label: 'Rain',
-  { id: 'temp',        label: 'Temperature', icon: '🌡️',  url: (_: number)  => `https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=demo` },
+		icon:  '🌧️',
-  { id: 'pressure',    label: 'Pressure',    icon: '📊',  url: (_: number)  => `https://tile.openweathermap.org/map/pressure_new/{z}/{x}/{y}.png?appid=demo` },
+		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({
+	return new TileLayer({
-    source: new XYZ({
+		source: new XYZ({
-      url: dark
+			url: dark
-        ? 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png'
+				? 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}.png'
-        : 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png',
+				: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}.png',
-      attributions: '© Stadia Maps © OpenMapTiles © OpenStreetMap',
+			attributions: '© Stadia Maps © OpenMapTiles © OpenStreetMap',
-    }),
+		}),
-  })
+		zIndex: 0,
+	})
 }
 
 function buildOverlayLayer(id: string): TileLayer<XYZ> {
-  const def = OVERLAYS.find(o => o.id === id)!
+	const def = OVERLAYS.find(o => o.id === id)!
-  return new TileLayer({
+	return new TileLayer({
-    source: new XYZ({ url: def.url(radarTs.value), attributions: '' }),
+		source: new XYZ({ url: def.url(radarTs.value), attributions: '' }),
-    opacity: 0.6,
+		opacity: 0.6,
-    zIndex: 10,
+		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)) {
+	if (activeOverlays.value.has(id)) {
-    activeOverlays.value.delete(id)
+		activeOverlays.value.delete(id)
-    const layer = overlayLayers.get(id)
+		const layer = overlayLayers.get(id)
-    if (layer) { map.removeLayer(layer); overlayLayers.delete(id) }
+		if (layer) { map.removeLayer(layer); overlayLayers.delete(id) }
-  } else {
+	} else {
-    activeOverlays.value.add(id)
+		activeOverlays.value.add(id)
-    const layer = buildOverlayLayer(id)
+		const layer = buildOverlayLayer(id)
-    overlayLayers.set(id, layer)
+		overlayLayers.set(id, layer)
-    map.addLayer(layer)
+		map.addLayer(layer)
-  }
+	}
 }
 
 onMounted(() => {
-  const lat = (current.value.gps_lat as number) || 0
+	const lat = (current.value.gps_lat as number) || 0
-  const lon = (current.value.gps_lon as number) || 0
+	const lon = (current.value.gps_lon as number) || 0
 
-  map = new Map({
+	stationLayer = buildStationLayer(lat, lon, props.dark)
-    target: mapEl.value!,
-    layers: [buildBaseLayer(props.dark)],
-    view: new View({
-      center: fromLonLat([lon, lat]),
-      zoom: 9,
-    }),
-    controls: [],
-  })
 
-  // Add default active overlays
+	map = new Map({
-  for (const id of activeOverlays.value) {
+		target:   mapEl.value!,
-    const layer = buildOverlayLayer(id)
+		layers:   [buildBaseLayer(props.dark), stationLayer],
-    overlayLayers.set(id, layer)
+		view:     new View({ center: fromLonLat([lon, lat]), zoom: 7 }),
-    map.addLayer(layer)
+		controls: [],
-  }
+	})
 
-  // Refresh radar every 5 min
+	for (const id of activeOverlays.value) {
-  radarInterval = setInterval(() => {
+		const layer = buildOverlayLayer(id)
-    radarTs.value = Math.floor(Date.now() / 1000)
+		overlayLayers.set(id, layer)
-    const layer = overlayLayers.get('rain')
+		map.addLayer(layer)
-    if (layer) {
+	}
-      layer.setSource(new XYZ({ url: OVERLAYS.find(o => o.id === 'rain')!.url(radarTs.value) }))
+
-    }
+	// Refresh radar every 5 min
-  }, 5 * 60 * 1000)
+	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) => {
+watch(() => props.dark, dark => {
-  const layers = map.getLayers()
+	map.getLayers().setAt(0, buildBaseLayer(dark))
-  layers.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;
+	position: relative;
-  width: 100%;
+	width: 100%;
-  height: 100%;
+	height: 100%;
-  border-radius: 12px;
+	border-radius: 12px;
-  overflow: hidden;
+	overflow: hidden;
 }
 
 .map-el {
-  width: 100%;
+	width: 100%;
-  height: 100%;
+	height: 100%;
 }
 
 .overlay-toggles {
-  position: absolute;
+	position: absolute;
-  bottom: 16px;
+	bottom: 16px;
-  left: 50%;
+	left: 50%;
-  transform: translateX(-50%);
+	transform: translateX(-50%);
-  display: flex;
+	display: flex;
-  gap: 8px;
+	gap: 8px;
-  z-index: 100;
+	z-index: 100;
-  background: var(--surface);
+	background: var(--surface);
-  border-radius: 99px;
+	border-radius: 99px;
-  padding: 6px 10px;
+	padding: 6px 10px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
+	box-shadow: 0 2px 12px rgba(0,0,0,0.2);
+	backdrop-filter: blur(8px);
 }
 
 .overlay-btn {
-  display: flex;
+	display: flex;
-  align-items: center;
+	align-items: center;
-  gap: 4px;
+	gap: 4px;
-  padding: 6px 12px;
+	padding: 6px 12px;
-  border-radius: 99px;
+	border-radius: 99px;
-  border: 1.5px solid var(--border);
+	border: 1.5px solid var(--border);
-  background: transparent;
+	background: transparent;
-  color: var(--text);
+	color: var(--text);
-  font-size: 13px;
+	font-size: 13px;
-  cursor: pointer;
+	cursor: pointer;
-  transition: all 0.15s;
+	transition: all 0.15s;
-  white-space: nowrap;
+	white-space: nowrap;
 
-  &.active {
+	&.active {
-    background: var(--accent);
+		background: var(--accent);
-    border-color: var(--accent);
+		border-color: var(--accent);
-    color: #fff;
+		color: #fff;
-  }
+	}
 
-  &:hover:not(.active) {
+	&:hover:not(.active) { background: var(--hover); }
-    background: var(--hover);
-  }
 }
 </style>
 
 <template>
-  <div class="map-wrap">
+	<div class="map-wrap">
-    <div ref="mapEl" class="map-el" />
+		<div ref="mapEl" class="map-el" />
-    <div class="overlay-toggles">
+		<div class="overlay-toggles">
-      <button
+			<button
-        v-for="o in OVERLAYS"
+				v-for="o in OVERLAYS"
-        :key="o.id"
+				:key="o.id"
-        class="overlay-btn"
+				class="overlay-btn"
-        :class="{ active: activeOverlays.has(o.id) }"
+				:class="{ active: activeOverlays.has(o.id) }"
-        @click="toggleOverlay(o.id)"
+				@click="toggleOverlay(o.id)"
-      >
+			>
-        {{ o.icon }} {{ o.label }}
+				{{ o.icon }} {{ o.label }}
-      </button>
+			</button>
-    </div>
+		</div>
-  </div>
+	</div>
 </template>

client/tsconfig.app.json

@@ -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": {