Sat updates

client/src/services/ais.ts

@@ -1,5 +1,5 @@
 import { BASE } from '@/services/api.ts'
-import { createApp, ref } from 'vue'
+import { h, render as vueRender } from 'vue'
 import Map from 'ol/Map'
 import { Feature } from 'ol'
 import Point from 'ol/geom/Point'
@@ -123,26 +123,22 @@ export class AISLayer {
 		const mmsi = String(boat.mmsi)
 		if (this.popups[mmsi]) return
 
-		const boatRef = ref(boat)
-		const posRef  = ref(this._calcPopupPos(boat))
-
 		const container = document.createElement('div')
 		document.body.appendChild(container)
+		const mobile = window.innerWidth <= 768
 
-		const mobile = window.innerWidth <= 768;
-
-		const app = createApp(ShipPopup, {
-			boat:           boatRef.value,
-			position:       mobile ? {x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16} : {x: window.innerWidth - 360 - 16, y: 16},
+		const makeProps = (b: any) => ({
+			boat:           b,
+			position:       mobile ? { x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16 } : { x: window.innerWidth - 360 - 16, y: 16 },
 			onClose:        () => this._closePopup(mmsi),
 			onBringToFront: () => bringToFront(container),
 		})
 
-		app.mount(container)
+		vueRender(h(ShipPopup, makeProps(boat)), container)
+
 		this.popups[mmsi] = {
-			boatRef,
-			posRef,
-			unmount: () => { app.unmount(); container.remove() },
+			update:  (b: any) => vueRender(h(ShipPopup, makeProps(b)), container),
+			unmount: () => { vueRender(null, container); container.remove() },
 		}
 	}
 
@@ -155,7 +151,7 @@ export class AISLayer {
 		for (const mmsi of Object.keys(this.popups)) {
 			const boat = this.data.find(b => String(b.mmsi) === mmsi)
 			if (!boat) { this._closePopup(mmsi); continue }
-			this.popups[mmsi].boatRef.value = boat
+			this.popups[mmsi].update(boat)
 		}
 	}