Finished Sonde support

client/src/services/sats.ts

@@ -16,6 +16,7 @@ const EARTH_R = 6371;
 const AUTO_ELEVATION = 70;
 
 interface TinyGSReading {
+	id: number;
 	timestamp: number;
 	freqMHz: number;
 	satellite: string;
@@ -137,7 +138,7 @@ export class SatsLayer {
 			this.clickHandler = null;
 		}
 
-		for (const name of Object.keys(this.popups)) this._closePopup(name);
+		for (const name of Object.keys(this.popups).map(Number)) this._closePopup(name);
 		if (this.layer) this.map.removeLayer(this.layer);
 	}
 
@@ -199,16 +200,16 @@ export class SatsLayer {
 		return this._calcRange(sat)?.slantRange ?? null;
 	}
 
-	getById(name: string): TinyGSSatellite | null {
-		return this.data.find(s => s.satellite === name) ?? null;
+	getById(id: number): TinyGSSatellite | null {
+		return this.data.find(s => s.id === id) ?? null;
 	}
 
 	openAutoPopup(sat: TinyGSSatellite) {
 		this._openPopup(sat);
 	}
 
-	closeAutoPopup(name: string) {
-		this._closePopup(name);
+	closeAutoPopup(id: number) {
+		this._closePopup(id);
 	}
 
 	private async _fetch() {
@@ -238,7 +239,7 @@ export class SatsLayer {
 			}
 
 			const marker = new Feature({geometry: new Point(points[points.length - 1])});
-			marker.set('satellite', sat.satellite);
+			marker.set('satellite', sat.id);
 			marker.set('satData', sat);
 			marker.setStyle(new Style({
 				image: new Icon({
@@ -258,7 +259,7 @@ export class SatsLayer {
 	}
 
 	private _drawReceptionCircle(sat: TinyGSSatellite, radiusKm?: number | null) {
-		this._removeReceptionCircle(sat.satellite);
+		this._removeReceptionCircle(sat.id);
 		if (!radiusKm) return;
 
 		const feature = new Feature({
@@ -279,20 +280,20 @@ export class SatsLayer {
 		});
 
 		this.map.addLayer(layer);
-		this.receptionCircles[sat.satellite] = layer;
+		this.receptionCircles[sat.id] = layer;
 	}
 
-	private _removeReceptionCircle(name: string) {
-		const layer = this.receptionCircles[name];
+	private _removeReceptionCircle(id: number) {
+		const layer = this.receptionCircles[id];
 
 		if (layer) {
 			this.map.removeLayer(layer);
-			delete this.receptionCircles[name];
+			delete this.receptionCircles[id];
 		}
 	}
 
 	private _openPopup(sat: TinyGSSatellite) {
-		if (this.popups[sat.satellite]) return;
+		if (this.popups[sat.id]) return;
 
 		const history = [...sat.history, sat];
 		const range = this._calcRange(sat);
@@ -311,13 +312,13 @@ export class SatsLayer {
 			position: mobile
 				? {x: window.innerWidth / 2 - 180, y: window.innerHeight - 540 - 16}
 				: {x: 16, y: 16},
-			onClose: () => this._closePopup(sat.satellite),
+			onClose: () => this._closePopup(sat.id),
 			onBringToFront: () => bringToFront(container),
 		});
 
 		vueRender(h(TinyGSPopup, makeProps(history, range, eta)), container);
 
-		this.popups[sat.satellite] = {
+		this.popups[sat.id] = {
 			container,
 			update: (h_: TinyGSReading[], r: RangeEstimate | null, e: number | null) => vueRender(h(TinyGSPopup, makeProps(h_, r, e)), container),
 			unmount: () => {
@@ -327,21 +328,18 @@ export class SatsLayer {
 		};
 	}
 
-	private _closePopup(name: string) {
-		const popup = this.popups[name];
-
-		if (popup) {
+	private _closePopup(id: number) {
+		const popup = this.popups[id];
+		if(popup) {
 			popup.unmount();
-			delete this.popups[name];
+			delete this.popups[id];
 		}
-
-		this._removeReceptionCircle(name);
+		this._removeReceptionCircle(id);
 	}
 
 	private _refreshPopups() {
-		for (const name of Object.keys(this.popups)) {
-			const sat = this.data.find(s => s.satellite === name);
-
+		for (const name of Object.keys(this.popups).map(Number)) {
+			const sat = this.data.find(s => s.id == name);
 			if (!sat) {
 				this._closePopup(name);
 				continue;
@@ -349,13 +347,7 @@ export class SatsLayer {
 
 			const history = [...sat.history, sat];
 			const range = this._calcRange(sat);
-
-			this.popups[name].update(
-				history,
-				range,
-				estimateEtaOut(history),
-			);
-
+			this.popups[name].update(history, range, estimateEtaOut(history),);
 			this._drawReceptionCircle(sat, range?.horizonRadius);
 		}
 	}
@@ -364,14 +356,8 @@ export class SatsLayer {
 		this.clickHandler = evt => {
 			const f = this.map.forEachFeatureAtPixel(evt.pixel, f => f.get('satData') ? f : null);
 			if (!f) return;
-
 			const sat = f.get('satData') as TinyGSSatellite;
-
-			if (this.popups[sat.satellite]) {
-				this._closePopup(sat.satellite);
-				return;
-			}
-
+			if(this.popups[sat.id]) return this._closePopup(sat.id);
 			this._openPopup(sat);
 		};