Sat updates

client/src/services/adsb.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'
@@ -30,12 +30,6 @@ function getAltColor(alt: number): [number, number, number] {
 	return [Math.round(128 * r), 0, 139]
 }
 
-interface PopupInstance {
-	planeRef: ReturnType<typeof ref>
-	posRef:   ReturnType<typeof ref>
-	unmount:  () => void
-}
-
 export class AirTrafficLayer {
 	private map:          Map
 	private layer!:       VectorLayer<VectorSource>
@@ -167,27 +161,22 @@ export class AirTrafficLayer {
 		const icao = plane.icao
 		if (this.popups[icao]) return
 
-		const planeRef = ref(plane)
-		const posRef   = ref(this._calcPopupPos(plane))
-
 		const container = document.createElement('div')
 		document.body.appendChild(container)
+		const mobile = window.innerWidth <= 768
 
-		const mobile = window.innerWidth <= 768;
-
-		const app = createApp(AircraftPopup, {
-			plane:          planeRef.value,
-			position:       mobile ? {x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16} : {x: window.innerWidth - 360 - 16, y: 16},
+		const makeProps = (p: any) => ({
+			plane:          p,
+			position:       mobile ? { x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16 } : { x: window.innerWidth - 360 - 16, y: 16 },
 			onClose:        () => this._closePopup(icao),
 			onBringToFront: () => bringToFront(container),
 		})
 
-		app.mount(container)
+		vueRender(h(AircraftPopup, makeProps(plane)), container)
 
 		this.popups[icao] = {
-			planeRef,
-			posRef,
-			unmount: () => { app.unmount(); container.remove() },
+			update:  (p: any) => vueRender(h(AircraftPopup, makeProps(p)), container),
+			unmount: () => { vueRender(null, container); container.remove() },
 		}
 		this._fetchTrace(plane)
 	}
@@ -206,7 +195,7 @@ export class AirTrafficLayer {
 		for (const icao of Object.keys(this.popups)) {
 			const plane = this.data.find(p => p.icao === icao)
 			if (!plane) { this._closePopup(icao); continue }
-			this.popups[icao].planeRef.value = plane
+			this.popups[icao].update(plane)
 			this._fetchTrace(plane)
 		}
 	}