Switched from influx to victoria metrics (more light weight for pi)
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import {computed, ref, watch} from 'vue';
|
||||
import {computed, nextTick, ref, watch} from 'vue';
|
||||
import {api} from '../services/api';
|
||||
|
||||
const props = defineProps<{metricKey: string | null}>();
|
||||
@@ -49,8 +49,9 @@ async function fetchData() {
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
watch([() => props.metricKey, mode], () => {
|
||||
watch([() => props.metricKey, mode], async () => {
|
||||
setDefaults();
|
||||
await nextTick();
|
||||
fetchData();
|
||||
}, {immediate: true});
|
||||
|
||||
@@ -201,9 +202,11 @@ svg { width: 100%; overflow: visible; cursor: crosshair; }
|
||||
<button class="close-btn" @click="emit('close')">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="controls gap-0">
|
||||
<button :class="{active: mode === 'hourly'}" style="border-radius: 6px 0 0 6px" @click="mode = 'hourly'">Hourly</button>
|
||||
<button :class="{active: mode === 'daily'}" style="border-radius: 0 6px 6px 0" @click="mode = 'daily'">Daily</button>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<button :class="{active: mode === 'hourly'}" @click="mode = 'hourly'">Hourly</button>
|
||||
<button :class="{active: mode === 'daily'}" @click="mode = 'daily'">Daily</button>
|
||||
<input :type="mode === 'hourly' ? 'datetime-local' : 'date'" v-model="customStart"/>
|
||||
<span style="font-size:11px;color:var(--text-muted)">to</span>
|
||||
<input :type="mode === 'hourly' ? 'datetime-local' : 'date'" v-model="customEnd"/>
|
||||
@@ -212,7 +215,6 @@ svg { width: 100%; overflow: visible; cursor: crosshair; }
|
||||
|
||||
<div v-if="chart.dot" class="current-val">
|
||||
<span>{{ (chart.dot.v as number).toFixed(2) }}</span>
|
||||
<span class="val-time">{{ new Date(chart.dot.t).toLocaleString() }}</span>
|
||||
</div>
|
||||
|
||||
<div class="chart-wrap">
|
||||
|
||||
362
client/src/components/Ship.vue
Normal file
362
client/src/components/Ship.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const props = defineProps<{ boat: any; position: { x: number; y: number } }>()
|
||||
const emit = defineEmits<{ (e: 'close'): void; (e: 'bringToFront'): void }>()
|
||||
|
||||
const SPEED_UNITS = {
|
||||
knots: { label: 'KTS', convert: (v: number) => v.toFixed(1) },
|
||||
kph: { label: 'KPH', convert: (v: number) => (v * 1.852).toFixed(1) },
|
||||
mph: { label: 'MPH', convert: (v: number) => (v * 1.15078).toFixed(1) },
|
||||
}
|
||||
const UNIT_KEY = 'ais_units'
|
||||
function loadUnits() {
|
||||
const s = localStorage.getItem(UNIT_KEY)
|
||||
return s ? JSON.parse(s) : { speed: 'knots' }
|
||||
}
|
||||
const prefs = ref(loadUnits())
|
||||
function cycleSpeed() {
|
||||
const keys = Object.keys(SPEED_UNITS)
|
||||
const p = loadUnits()
|
||||
p.speed = keys[(keys.indexOf(p.speed) + 1) % keys.length]
|
||||
prefs.value = { ...p }
|
||||
localStorage.setItem(UNIT_KEY, JSON.stringify(p))
|
||||
}
|
||||
const speed = computed(() => SPEED_UNITS[prefs.value.speed as keyof typeof SPEED_UNITS])
|
||||
|
||||
// ── Derived data ──────────────────────────────────────────────────────────────
|
||||
const name = computed(() => props.boat.name?.trim() || props.boat.callsign?.trim() || `MMSI: ${props.boat.mmsi}`)
|
||||
const heading = computed(() => props.boat.heading ?? props.boat.course ?? 0)
|
||||
const speedVal = computed(() => speed.value.convert(props.boat.speed ?? 0))
|
||||
const rows = computed(() => [
|
||||
['MMSI', props.boat.mmsi],
|
||||
['Country', props.boat.country],
|
||||
['Callsign', props.boat.callsign || '-'],
|
||||
['IMO', props.boat.imo || '-'],
|
||||
['Ship Type', props.boat.ship_type ?? '-'],
|
||||
['Lat / Lon', `${props.boat.lat?.toFixed(5)}, ${props.boat.lon?.toFixed(5)}`],
|
||||
['Distance', props.boat.distance != null ? `${props.boat.distance.toFixed(2)} nmi` : '-'],
|
||||
['Bearing', props.boat.bearing != null ? `${props.boat.bearing}°` : '-'],
|
||||
['Destination', props.boat.destination || '-'],
|
||||
['ETA', props.boat.eta || '-'],
|
||||
['Draught', props.boat.draught != null ? `${props.boat.draught}m` : '-'],
|
||||
['RSSI', props.boat.rssi != null ? `${props.boat.rssi.toFixed(1)} dB` : '-'],
|
||||
['Channels', props.boat.channels || '-'],
|
||||
['Last Signal', props.boat.last_signal != null ? `${props.boat.last_signal}s ago` : '-'],
|
||||
])
|
||||
|
||||
// ── Compass HUD ───────────────────────────────────────────────────────────────
|
||||
const compass = computed(() => {
|
||||
const hdg = heading.value
|
||||
const spd = props.boat.speed ?? 0
|
||||
const course = props.boat.course ?? hdg
|
||||
const bearing = props.boat.bearing ?? 0
|
||||
|
||||
// Compass tape: show ±60° window
|
||||
const tapeTicks: string[] = []
|
||||
for (let offset = -60; offset <= 60; offset += 5) {
|
||||
const deg = ((hdg + offset) % 360 + 360) % 360
|
||||
const x = 100 + (offset / 60) * 90
|
||||
const major = offset % 30 === 0
|
||||
const mid = offset % 15 === 0
|
||||
|
||||
if (major) {
|
||||
const lbl = ({ 0: 'N', 45: 'NE', 90: 'E', 135: 'SE', 180: 'S', 225: 'SW', 270: 'W', 315: 'NW' } as any)[deg]
|
||||
?? String(deg).padStart(3, '0')
|
||||
tapeTicks.push(`
|
||||
<line x1="${x}" y1="22" x2="${x}" y2="38" stroke="#0ff" stroke-width="2"/>
|
||||
<text x="${x}" y="50" text-anchor="middle" fill="#0ff" font-size="11" font-weight="bold">${lbl}</text>
|
||||
`)
|
||||
} else if (mid) {
|
||||
tapeTicks.push(`<line x1="${x}" y1="26" x2="${x}" y2="38" stroke="#0ff" stroke-width="1.5"/>`)
|
||||
} else {
|
||||
tapeTicks.push(`<line x1="${x}" y1="30" x2="${x}" y2="38" stroke="#0ff" stroke-width="1"/>`)
|
||||
}
|
||||
}
|
||||
|
||||
// Depth/rudder gauge (visual only, based on course vs heading difference)
|
||||
const rudder = Math.max(-30, Math.min(30, ((course - hdg + 540) % 360) - 180))
|
||||
const rudX = 100 + (rudder / 30) * 40
|
||||
|
||||
// Speed arc (0–30 kts range)
|
||||
const spdPct = Math.min(spd / 30, 1)
|
||||
const arcEnd = 160 + spdPct * 140 // degrees on a 160–300° arc
|
||||
function polarToXY(cx: number, cy: number, r: number, deg: number) {
|
||||
const rad = (deg - 90) * Math.PI / 180
|
||||
return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) }
|
||||
}
|
||||
function describeArc(cx: number, cy: number, r: number, startDeg: number, endDeg: number) {
|
||||
const s = polarToXY(cx, cy, r, startDeg)
|
||||
const e = polarToXY(cx, cy, r, endDeg)
|
||||
const lg = endDeg - startDeg > 180 ? 1 : 0
|
||||
return `M ${s.x} ${s.y} A ${r} ${r} 0 ${lg} 1 ${e.x} ${e.y}`
|
||||
}
|
||||
const spdArcPath = describeArc(100, 145, 52, 160, Math.max(161, arcEnd))
|
||||
|
||||
// Course indicator needle angle (relative to up = heading)
|
||||
const courseRel = ((course - hdg + 540) % 360) - 180
|
||||
const courseRad = courseRel * Math.PI / 180
|
||||
const cNeedleX = 100 + 44 * Math.sin(courseRad)
|
||||
const cNeedleY = 145 - 44 * Math.cos(courseRad)
|
||||
|
||||
// Bearing indicator
|
||||
const bearRel = ((bearing - hdg + 540) % 360) - 180
|
||||
const bearRad = bearRel * Math.PI / 180
|
||||
const bNeedleX = 100 + 52 * Math.sin(bearRad)
|
||||
const bNeedleY = 145 - 52 * Math.cos(bearRad)
|
||||
|
||||
return `
|
||||
<svg width="200" height="200" viewBox="0 0 200 200" style="background:#000;border-radius:4px">
|
||||
<!-- Compass tape -->
|
||||
<rect x="10" y="18" width="180" height="40" fill="rgba(0,20,40,0.95)" rx="3"/>
|
||||
<line x1="10" y1="18" x2="190" y2="18" stroke="#0ff" stroke-width="1"/>
|
||||
<line x1="10" y1="58" x2="190" y2="58" stroke="#0ff" stroke-width="1"/>
|
||||
${tapeTicks.join('')}
|
||||
<!-- Centre lubber line -->
|
||||
<polygon points="100,12 96,20 104,20" fill="#ff0"/>
|
||||
|
||||
<!-- Heading readout -->
|
||||
<rect x="72" y="60" width="56" height="20" fill="rgba(0,0,0,0.9)" stroke="#0ff" stroke-width="1" rx="2"/>
|
||||
<text x="100" y="75" text-anchor="middle" fill="#0ff" font-size="13" font-weight="bold">${String(Math.round(hdg)).padStart(3, '0')}°</text>
|
||||
|
||||
<!-- Rose ring -->
|
||||
<circle cx="100" cy="145" r="55" fill="rgba(0,20,40,0.6)" stroke="#0ff" stroke-width="1.5"/>
|
||||
<circle cx="100" cy="145" r="40" fill="none" stroke="rgba(0,255,255,0.15)" stroke-width="1"/>
|
||||
|
||||
<!-- Ring tick marks -->
|
||||
${Array.from({ length: 36 }, (_, i) => {
|
||||
const a = i * 10
|
||||
const rad = (a - 90) * Math.PI / 180
|
||||
const r1 = a % 30 === 0 ? 44 : 50
|
||||
const sw = a % 30 === 0 ? 2 : 1
|
||||
const x1 = 100 + r1 * Math.cos(rad)
|
||||
const y1 = 145 + r1 * Math.sin(rad)
|
||||
const x2 = 100 + 55 * Math.cos(rad)
|
||||
const y2 = 145 + 55 * Math.sin(rad)
|
||||
return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#0ff" stroke-width="${sw}" opacity="0.5"/>`
|
||||
}).join('')}
|
||||
|
||||
<!-- Cardinal labels -->
|
||||
${(['N','E','S','W'] as const).map((lbl, i) => {
|
||||
const a = i * 90
|
||||
const rad = (a - 90) * Math.PI / 180
|
||||
const x = 100 + 47 * Math.cos(rad)
|
||||
const y = 145 + 47 * Math.sin(rad) + 4
|
||||
return `<text x="${x}" y="${y}" text-anchor="middle" fill="#0ff" font-size="9" font-weight="bold" opacity="0.7">${lbl}</text>`
|
||||
}).join('')}
|
||||
|
||||
<!-- Course needle (green) -->
|
||||
<line x1="100" y1="145" x2="${cNeedleX}" y2="${cNeedleY}" stroke="#0f0" stroke-width="2.5"/>
|
||||
<circle cx="${cNeedleX}" cy="${cNeedleY}" r="3" fill="#0f0"/>
|
||||
|
||||
<!-- Bearing needle (yellow dashed) -->
|
||||
<line x1="100" y1="145" x2="${bNeedleX}" y2="${bNeedleY}" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||
<circle cx="${bNeedleX}" cy="${bNeedleY}" r="2.5" fill="#ff0"/>
|
||||
|
||||
<!-- Ship symbol -->
|
||||
<polygon points="100,138 96,152 100,149 104,152" fill="#fff" stroke="#0ff" stroke-width="1"/>
|
||||
|
||||
<!-- Speed arc -->
|
||||
<path d="${spdArcPath}" fill="none" stroke="#0f0" stroke-width="4" stroke-linecap="round"/>
|
||||
<path d="${describeArc(100, 145, 52, 160, 300)}" fill="none" stroke="rgba(0,255,0,0.15)" stroke-width="4"/>
|
||||
|
||||
<!-- Speed readout -->
|
||||
<text x="100" y="190" text-anchor="middle" fill="#0f0" font-size="11" font-weight="bold">${speedVal.value} ${speed.value.label}</text>
|
||||
|
||||
<!-- Rudder bar -->
|
||||
<rect x="60" y="175" width="80" height="6" fill="rgba(0,40,60,0.9)" rx="3"/>
|
||||
<line x1="100" y1="173" x2="100" y2="183" stroke="#0ff" stroke-width="1" opacity="0.5"/>
|
||||
<rect x="${rudX - 4}" y="174" width="8" height="8" fill="#ff0" rx="1"/>
|
||||
|
||||
<!-- Legend -->
|
||||
<line x1="12" y1="163" x2="24" y2="163" stroke="#0f0" stroke-width="2"/>
|
||||
<text x="27" y="167" fill="#888" font-size="9">COG</text>
|
||||
<line x1="12" y1="173" x2="24" y2="173" stroke="#ff0" stroke-width="1.5" stroke-dasharray="4,3"/>
|
||||
<text x="27" y="177" fill="#888" font-size="9">BRG</text>
|
||||
</svg>
|
||||
`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ship-popup" :style="{ left: pos.x + 'px', top: pos.y + 'px' }">
|
||||
|
||||
<!-- Header -->
|
||||
<div ref="header" class="sp-header" @mousedown="onMouseDown" @touchstart.passive="onTouchStart">
|
||||
<h3 class="sp-name">
|
||||
🚢
|
||||
<span>{{ name.toUpperCase() }}</span>
|
||||
<span class="sp-mmsi"> / {{ boat.mmsi }}</span>
|
||||
</h3>
|
||||
<button class="sp-close" @click.stop="emit('close')">×</button>
|
||||
</div>
|
||||
|
||||
<!-- Meta -->
|
||||
<div class="sp-meta">
|
||||
<div class="flex-c">
|
||||
<span>{{ boat.operator || boat.owner || '' }}</span>
|
||||
<span>{{ boat.country || 'Unknown Country' }}</span>
|
||||
</div>
|
||||
<div class="flex-c align-x-end">
|
||||
<span>{{ boat.ship_type || '' }}</span>
|
||||
<span style="text-transform:capitalize">{{ boat.type || 'Unknown' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="sp-body">
|
||||
<!-- Gauges -->
|
||||
<div class="sp-gauges">
|
||||
<div class="sp-gauge-wrap">
|
||||
<div class="sp-gauge-label">Speed</div>
|
||||
<div class="sp-gauge" @click.stop="cycleSpeed">
|
||||
<span class="sp-gauge-val">{{ speedVal }}</span>
|
||||
<span class="sp-gauge-unit">{{ speed.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sp-gauge-wrap">
|
||||
<div class="sp-gauge-label">Course</div>
|
||||
<div class="sp-gauge">
|
||||
<span class="sp-gauge-val">{{ boat.course != null ? boat.course.toFixed(0) : '-' }}</span>
|
||||
<span class="sp-gauge-unit">°</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sp-gauge-wrap">
|
||||
<div class="sp-gauge-label">Heading</div>
|
||||
<div class="sp-gauge">
|
||||
<span class="sp-gauge-val">{{ boat.heading != null ? boat.heading.toFixed(0) : '-' }}</span>
|
||||
<span class="sp-gauge-unit">°</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sp-gauge-wrap">
|
||||
<div class="sp-gauge-label">Distance</div>
|
||||
<div class="sp-gauge">
|
||||
<span class="sp-gauge-val">{{ boat.distance?.toFixed(1) ?? '-' }}</span>
|
||||
<span class="sp-gauge-unit">NMI</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Compass HUD -->
|
||||
<div class="sp-compass" v-html="compass"/>
|
||||
</div>
|
||||
|
||||
<!-- Details table -->
|
||||
<div class="sp-details">
|
||||
<div v-for="[label, val] in rows" :key="label" class="sp-detail-row">
|
||||
<span class="sp-detail-label">{{ label }}</span>
|
||||
<span class="sp-detail-val">{{ val ?? '-' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ship-popup {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
pointer-events: auto;
|
||||
background: rgba(0,10,20,0.92);
|
||||
border: 1px solid rgba(0,200,255,0.3);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.6);
|
||||
overflow: hidden;
|
||||
font-family: monospace;
|
||||
color: #ccc;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.sp-header {
|
||||
position: relative;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(0,200,255,0.2);
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
background: rgba(0,20,40,0.6);
|
||||
}
|
||||
|
||||
.sp-name {
|
||||
margin: 0 24px 0 0;
|
||||
color: #7eeee1;
|
||||
font-size: 16px;
|
||||
}
|
||||
.sp-mmsi { color: white; }
|
||||
|
||||
.sp-meta {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border-bottom: 1px solid rgba(0,200,255,0.15);
|
||||
}
|
||||
|
||||
.sp-close {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none;
|
||||
color: white;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.sp-close:hover { background: rgba(255,255,255,0.25); }
|
||||
|
||||
.sp-body {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid rgba(0,200,255,0.15);
|
||||
}
|
||||
|
||||
.sp-gauges { flex: 0 0 110px; display: flex; flex-direction: column; gap: 8px; }
|
||||
.sp-gauge-wrap {}
|
||||
|
||||
.sp-gauge-label {
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.sp-gauge {
|
||||
padding: 5px 6px;
|
||||
background: rgba(0,0,0,0.95);
|
||||
border: 2px solid #0ff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.sp-gauge:hover { border-color: #0f0; }
|
||||
.sp-gauge-val { font-size: 18px; font-weight: bold; color: #0ff; }
|
||||
.sp-gauge-unit { font-size: 10px; color: #0ff; margin-bottom: 2px; }
|
||||
|
||||
.sp-compass { flex: 1; }
|
||||
|
||||
.sp-details {
|
||||
padding: 8px 16px 12px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 5px 16px;
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sp-detail-row { display: flex; flex-direction: column; }
|
||||
.sp-detail-label { color: #888; font-size: 9px; font-weight: bold; }
|
||||
.sp-detail-val { color: #0ff; font-size: 12px; }
|
||||
</style>
|
||||
@@ -45,7 +45,7 @@ const arc = computed(() => {
|
||||
const { x: cx, y: cy } = <any>pts[Math.min(splitIdx, 200)];
|
||||
|
||||
const traveledPts: any = pts.slice(0, splitIdx + 1);
|
||||
const filledPath = traveledPts.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ')
|
||||
const filledPath = traveledPts.map((p: any, i: any) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(' ')
|
||||
+ ` L${traveledPts[traveledPts.length - 1].x.toFixed(1)},${horizonY}`
|
||||
+ ` L${x1},${horizonY} Z`;
|
||||
|
||||
|
||||
@@ -1,30 +1,33 @@
|
||||
import {BASE} from '@/services/api.ts';
|
||||
import { BASE } from '@/services/api.ts'
|
||||
import { createApp, ref } from 'vue'
|
||||
import Map from 'ol/Map'
|
||||
import { Feature } from 'ol'
|
||||
import Point from 'ol/geom/Point'
|
||||
import { fromLonLat } from 'ol/proj'
|
||||
import { Style, Icon, Text, Fill, Stroke } from 'ol/style'
|
||||
import { Style, Icon } from 'ol/style'
|
||||
import { Vector as VectorLayer } from 'ol/layer'
|
||||
import { Vector as VectorSource } from 'ol/source'
|
||||
import { adjustedInterval } from '@ztimson/utils'
|
||||
import ShipPopup from '@/components/Ship.vue'
|
||||
|
||||
const API = BASE + '/api'
|
||||
|
||||
let highestZIndex = 1000
|
||||
|
||||
const SHIP_COLORS: Record<string, string> = {
|
||||
'Base Station': '#00aaff',
|
||||
'Class A': '#00ff00',
|
||||
'Class B': '#8450ea',
|
||||
'SAR Aircraft': '#ff6600',
|
||||
'Aid to Navigation': '#ffff00',
|
||||
'Class B CS': '#8450ea',
|
||||
'Sart/Epirb/MOB': '#ff0000',
|
||||
'Unknown': '#fad106',
|
||||
'Base Station': '#00aaff',
|
||||
'Class A': '#00ff00',
|
||||
'Class B': '#8450ea',
|
||||
'SAR Aircraft': '#ff0000',
|
||||
'AtoN': '#00aaff',
|
||||
'Class B/CS': '#8450ea',
|
||||
'Sart/Epirb/MOB': '#00aaff',
|
||||
'Unknown': '#fad106',
|
||||
}
|
||||
|
||||
function buildBoatIcon(boat: any): string {
|
||||
const color = SHIP_COLORS[boat.type] || SHIP_COLORS['Unknown']
|
||||
|
||||
if (boat.type === 'Base Station') {
|
||||
if (['Base Station', 'AtoN'].includes(boat.type)) {
|
||||
return `data:image/svg+xml,${encodeURIComponent(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<polygon points="16,2 30,16 16,30 2,16" fill="${color}" stroke="#000" stroke-width="1.5"/>
|
||||
@@ -35,10 +38,9 @@ function buildBoatIcon(boat: any): string {
|
||||
</svg>
|
||||
`)}`
|
||||
}
|
||||
|
||||
return `data:image/svg+xml,${encodeURIComponent(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="32" viewBox="0 0 24 32">
|
||||
<polygon points="12,0 24,28 12,22 0,28" fill="${color}" stroke="#000" stroke-width="1.5"/>
|
||||
<polygon points="12,0 24,30 12,24 0,30" fill="${color}" stroke="#000" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="12" r="1.5" fill="#000"/>
|
||||
<line x1="12" y1="12" x2="12" y2="22" stroke="#000" stroke-width="1.5"/>
|
||||
<line x1="8" y1="14" x2="16" y2="14" stroke="#000" stroke-width="1.5"/>
|
||||
@@ -47,77 +49,25 @@ function buildBoatIcon(boat: any): string {
|
||||
`)}`
|
||||
}
|
||||
|
||||
function buildPopupHtml(boat: any): string {
|
||||
const name = boat.name?.trim() || boat.callsign?.trim() || `MMSI: ${boat.mmsi}`
|
||||
const rows: [string, any][] = [
|
||||
['Type', boat.type],
|
||||
['MMSI', boat.mmsi],
|
||||
['Country', boat.country],
|
||||
['Callsign', boat.callsign || '-'],
|
||||
['IMO', boat.imo || '-'],
|
||||
['Ship Type', boat.ship_type ?? '-'],
|
||||
['Speed', boat.speed != null ? `${boat.speed} kts` : '-'],
|
||||
['Heading', boat.heading != null ? `${boat.heading}°` : '-'],
|
||||
['Course', boat.course != null ? `${boat.course}°` : '-'],
|
||||
['Lat / Lon', `${boat.lat?.toFixed(5)}, ${boat.lon?.toFixed(5)}`],
|
||||
['Distance', `${boat.distance?.toFixed(2)} nmi`],
|
||||
['Bearing', `${boat.bearing}°`],
|
||||
['Destination', boat.destination || '-'],
|
||||
['ETA', boat.eta || '-'],
|
||||
['Draught', boat.draught != null ? `${boat.draught}m` : '-'],
|
||||
['RSSI', `${boat.rssi?.toFixed(1)} dB`],
|
||||
['Drift', `${boat.drift?.toFixed(2)} ppm`],
|
||||
['Msg Types', boat.msg_type?.join(', ') || '-'],
|
||||
['Channels', boat.channels || '-'],
|
||||
['Sources', boat.sources],
|
||||
['Receiver', boat.receiver],
|
||||
['Count', boat.count],
|
||||
['Last Signal', boat.last_signal != null ? `${boat.last_signal}s ago` : '-'],
|
||||
['In Range', boat.in_range],
|
||||
]
|
||||
|
||||
return `
|
||||
<div style="font-family:monospace;color:#ccc;min-width:280px">
|
||||
<div style="padding:12px 16px;border-bottom:1px solid rgba(200,200,220,0.2)">
|
||||
<h3 style="margin:0;color:#7eeee1;font-size:16px">🚢 ${name}</h3>
|
||||
<div style="font-size:11px;color:#888;margin-top:4px">${boat.type || 'Unknown'}</div>
|
||||
</div>
|
||||
<div style="padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:6px 16px">
|
||||
${rows.map(([label, val]) => `
|
||||
<div>
|
||||
<div style="color:#888;font-size:10px;font-weight:bold">${label}</div>
|
||||
<div style="color:#0f0;font-size:13px">${val ?? '-'}</div>
|
||||
</div>
|
||||
`).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
export class AISLayer {
|
||||
private map: Map
|
||||
private layer!: VectorLayer<VectorSource>
|
||||
private popups: Record<string, { el: HTMLDivElement, destroy: () => void }> = {}
|
||||
private data: any[] = []
|
||||
private popups: any = {}
|
||||
private data: any[] = []
|
||||
private clickHandler: ((e: any) => void) | null = null
|
||||
private refreshTimer: any = null
|
||||
private refreshTimer: any = null
|
||||
visible = false
|
||||
|
||||
constructor(map: Map) { this.map = map }
|
||||
|
||||
// ── Public ────────────────────────────────────────────────────────────────
|
||||
|
||||
async show() {
|
||||
if (this.visible) return
|
||||
this.visible = true
|
||||
|
||||
this.layer = new VectorLayer({ source: new VectorSource(), zIndex: 100 })
|
||||
this.layer = new VectorLayer({ source: new VectorSource(), zIndex: 100 })
|
||||
this.map.addLayer(this.layer)
|
||||
|
||||
await this._fetch()
|
||||
this._draw()
|
||||
this._attachClick()
|
||||
|
||||
this.refreshTimer = adjustedInterval(async () => {
|
||||
await this._fetch()
|
||||
this._draw()
|
||||
@@ -128,16 +78,12 @@ export class AISLayer {
|
||||
hide() {
|
||||
if (!this.visible) return
|
||||
this.visible = false
|
||||
|
||||
if (this.refreshTimer) { clearInterval(this.refreshTimer); this.refreshTimer = null }
|
||||
if (this.clickHandler) { this.map.un('singleclick', this.clickHandler); this.clickHandler = null }
|
||||
|
||||
for (const mmsi of Object.keys(this.popups)) this._closePopup(mmsi)
|
||||
this.map.removeLayer(this.layer)
|
||||
}
|
||||
|
||||
// ── Private ───────────────────────────────────────────────────────────────
|
||||
|
||||
private async _fetch() {
|
||||
this.data = await fetch(`${API}/ais`).then(r => r.json()) || []
|
||||
}
|
||||
@@ -145,17 +91,16 @@ export class AISLayer {
|
||||
private _draw() {
|
||||
const source = this.layer.getSource()!
|
||||
source.clear()
|
||||
|
||||
for (const boat of this.data) {
|
||||
if (boat.lat == null || boat.lon == null) continue
|
||||
const coord = fromLonLat([boat.lon, boat.lat])
|
||||
const f = new Feature({ geometry: new Point(coord) })
|
||||
const f = new Feature({ geometry: new Point(coord) })
|
||||
f.set('mmsi', boat.mmsi)
|
||||
f.set('boatData', boat)
|
||||
f.setStyle(new Style({
|
||||
image: new Icon({
|
||||
src: buildBoatIcon(boat),
|
||||
scale: 1,
|
||||
scale: 0.8,
|
||||
rotation: (boat.heading ?? boat.course ?? 0) * (Math.PI / 180),
|
||||
anchor: [0.5, 0.5],
|
||||
}),
|
||||
@@ -164,55 +109,51 @@ export class AISLayer {
|
||||
}
|
||||
}
|
||||
|
||||
private _calcPopupPos(boat: any): { x: number; y: number } {
|
||||
const pixel: any = this.map.getPixelFromCoordinate(fromLonLat([boat.lon, boat.lat]))
|
||||
if (!pixel) return { x: 10, y: 60 }
|
||||
const rect = (this.map.getTargetElement() as HTMLElement).getBoundingClientRect()
|
||||
return { x: rect.left + pixel[0] + 16, y: rect.top + pixel[1] - 16 }
|
||||
}
|
||||
|
||||
private _openPopup(boat: any) {
|
||||
const mmsi = String(boat.mmsi)
|
||||
if (this.popups[mmsi]) return
|
||||
|
||||
const el = document.createElement('div')
|
||||
el.style.cssText = `
|
||||
position:absolute; z-index:9999; pointer-events:auto;
|
||||
background:rgba(0,0,0,0.88); border:1px solid rgba(200,200,220,0.3);
|
||||
border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,0.5); overflow:hidden;
|
||||
`
|
||||
const boatRef = ref(boat)
|
||||
const posRef = ref(this._calcPopupPos(boat))
|
||||
|
||||
const close = document.createElement('button')
|
||||
close.innerHTML = '✕'
|
||||
close.style.cssText = 'position:absolute;top:8px;right:8px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;z-index:1'
|
||||
close.onclick = () => this._closePopup(mmsi)
|
||||
const container = document.createElement('div')
|
||||
document.body.appendChild(container)
|
||||
|
||||
el.innerHTML = buildPopupHtml(boat)
|
||||
el.appendChild(close)
|
||||
document.body.appendChild(el)
|
||||
this._positionPopup(el, boat)
|
||||
const app = createApp(ShipPopup, {
|
||||
boat: boatRef.value,
|
||||
position: posRef.value,
|
||||
onClose: () => this._closePopup(mmsi),
|
||||
onBringToFront: () => {
|
||||
highestZIndex++
|
||||
container.style.zIndex = String(highestZIndex)
|
||||
},
|
||||
})
|
||||
|
||||
this.popups[mmsi] = { el, destroy: () => el.remove() }
|
||||
}
|
||||
|
||||
private _positionPopup(el: HTMLDivElement, boat: any) {
|
||||
const pixel: any = this.map.getPixelFromCoordinate(fromLonLat([boat.lon, boat.lat]))
|
||||
if (!pixel) return
|
||||
const rect = (this.map.getTargetElement() as HTMLElement).getBoundingClientRect()
|
||||
el.style.left = `${rect.left + pixel[0] + 16}px`
|
||||
el.style.top = `${rect.top + pixel[1] - 16}px`
|
||||
app.mount(container)
|
||||
this.popups[mmsi] = {
|
||||
boatRef,
|
||||
posRef,
|
||||
unmount: () => { app.unmount(); container.remove() },
|
||||
}
|
||||
}
|
||||
|
||||
private _closePopup(mmsi: string) {
|
||||
const popup = this.popups[mmsi]
|
||||
if (popup) { popup.destroy(); delete this.popups[mmsi] }
|
||||
if (popup) { popup.unmount(); delete this.popups[mmsi] }
|
||||
}
|
||||
|
||||
private _refreshPopups() {
|
||||
for (const mmsi of Object.keys(this.popups)) {
|
||||
const boat = this.data.find(b => String(b.mmsi) === mmsi)
|
||||
if (!boat) { this._closePopup(mmsi); continue }
|
||||
const { el } = <any>this.popups[mmsi]
|
||||
el.innerHTML = buildPopupHtml(boat)
|
||||
const close = document.createElement('button')
|
||||
close.innerHTML = '✕'
|
||||
close.style.cssText = 'position:absolute;top:8px;right:8px;background:none;border:none;color:#888;font-size:14px;cursor:pointer;z-index:1'
|
||||
close.onclick = () => this._closePopup(mmsi)
|
||||
el.appendChild(close)
|
||||
this._positionPopup(el, boat)
|
||||
this.popups[mmsi].boatRef.value = boat
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user