Add time rules for airspaces (#352)

Author: vicb

apps/fxc-front/src/app/components/2d/airspace-element.ts

@@ -70,15 +70,16 @@ export class AirspaceElement extends connect(store)(LitElement) {
       if (
         changedProperties.has('maxAltitude') ||
         changedProperties.has('showClasses') ||
-        changedProperties.has('showTypes')
+        changedProperties.has('showTypes') ||
+        changedProperties.has('track')
       ) {
         this.removeOverlays();
         this.addOverlays();
       }
       if (this.track && changedProperties.has('timeSec') && !this.isMapClick) {
         const point = sel.getTrackLatLonAlt(store.getState())(this.timeSec) as common.LatLonAlt;
         const gndAlt = sel.getGndAlt(store.getState())(this.timeSec);
-        this.showAirspaceInfo(point, gndAlt);
+        this.showAirspaceInfo(point, { gndAlt, date: new Date(this.timeSec * 1000) });
       }
     }
     if (changedProperties.has('show')) {
@@ -100,10 +101,12 @@ export class AirspaceElement extends connect(store)(LitElement) {
 
   private async handleMapClick(latLng: google.maps.LatLng): Promise<void> {
     this.isMapClick = true;
-    this.showAirspaceInfo({ lat: latLng.lat(), lon: latLng.lng(), alt: this.maxAltitude });
+    // Use the track time or the current time
+    const date = this.track ? new Date(this.timeSec * 1000) : new Date();
+    this.showAirspaceInfo({ lat: latLng.lat(), lon: latLng.lng(), alt: this.maxAltitude }, { date });
   }
 
-  private async showAirspaceInfo(point: common.LatLonAlt, gndAlt = 0) {
+  private async showAirspaceInfo(point: common.LatLonAlt, { gndAlt = 0, date = new Date() } = {}) {
     if (this.show) {
       const html = await getAirspaceList(
         Math.round(this.map.getZoom() ?? 10),
@@ -112,6 +115,7 @@ export class AirspaceElement extends connect(store)(LitElement) {
         gndAlt,
         this.showClasses,
         this.showTypes,
+        date,
       );
       if (html !== '') {
         this.info?.setContent(html);
@@ -129,6 +133,9 @@ export class AirspaceElement extends connect(store)(LitElement) {
         o.setAltitude(this.maxAltitude);
         o.showClasses(this.showClasses);
         o.showTypes(this.showTypes);
+        // Use the track time or the current time
+        const date = this.track ? new Date(this.timeSec * 1000) : new Date();
+        o.setDate(date);
         this.map.overlayMapTypes.push(o as any);
       }
     });

apps/fxc-front/src/app/components/3d/airspace3d-element.ts

@@ -69,6 +69,8 @@ export class Airspace3dElement extends connect(store)(LitElement) {
       0,
       this.showClasses,
       this.showTypes,
+      // TODO: use track time when there is a track
+      new Date(),
     );
     if (html) {
       view.popup?.open({

apps/fxc-front/src/app/logic/airspaces.ts

@@ -1,6 +1,7 @@
 import type { AirspaceString, AirspaceTyped, Class, LatLon, Point, Type } from '@flyxc/common';
 import {
   AIRSPACE_TILE_SIZE,
+  applyTimeRule,
   getAirspaceCategory,
   getAirspaceColor,
   getAirspaceTileUrl,
@@ -37,6 +38,7 @@ export async function getAirspaceList(
   gndAltitude: number,
   showClasses: Class[],
   showTypes: Type[],
+  date: Date,
 ): Promise<string> {
   const tileZoom = Math.min(zoom, MAX_AIRSPACE_TILE_ZOOM);
   const { tile: tileCoords, px } = pixelCoordinates(latLon, tileZoom, AIRSPACE_TILE_SIZE);
@@ -62,7 +64,7 @@ export async function getAirspaceList(
   const info: string[] = [];
   for (let i = 0; i < layer.length; i++) {
     const f = layer.feature(i);
-    const airspace = toTypedAirspace(f.properties as AirspaceString);
+    const airspace = applyTimeRule(toTypedAirspace(f.properties as AirspaceString), date);
     const floor = airspace.floorM + (airspace.floorRefGnd ? gndAltitude : 0);
     const top = airspace.topM + (airspace.topRefGnd ? gndAltitude : 0);
     const onlyConsiderFloor = gndAltitude == 0;
@@ -99,6 +101,8 @@ export class AspMapType {
   classes: Class[] = [];
   types: Type[] = [];
   active_ = true;
+  date = new Date();
+
   // FetchInfo indexed by fetch key.
   fetchInfoMap: Map<number, FetchInfo> = new Map();
 
@@ -126,7 +130,18 @@ export class AspMapType {
   }
 
   getTile(coord: google.maps.Point, zoom: number, doc: Document): HTMLElement {
-    return getTile(coord, zoom, zoom, doc, this.altitude, this.classes, this.types, this.active, this.fetchInfoMap);
+    return getTile(
+      coord,
+      zoom,
+      zoom,
+      doc,
+      this.altitude,
+      this.classes,
+      this.types,
+      this.active,
+      this.fetchInfoMap,
+      this.date,
+    );
   }
 
   // @ts-ignore
@@ -168,6 +183,10 @@ export class AspMapType {
     this.types = types;
   }
 
+  setDate(date: Date): void {
+    this.date = date;
+  }
+
   // minZoom and maxZoom are not taken into account by the Google Maps API for overlay map types.
   // We need to manually activate the layers for the current zoom level.
   setCurrentZoom(zoom: number): void {
@@ -204,6 +223,7 @@ export class AspZoomMapType extends AspMapType {
       this.types,
       this.active,
       this.fetchInfoMap,
+      this.date,
     );
   }
 }
@@ -220,6 +240,7 @@ function getTile(
   showTypes: Type[],
   active: boolean,
   fetchInfoMap: Map<number, FetchInfo>,
+  date: Date,
 ): HTMLElement {
   if (!active) {
     return doc.createElement('div');
@@ -262,7 +283,7 @@ function getTile(
         return;
       }
       const vectorTile = new VectorTile(new Uint8Array(buffer));
-      renderTiles(fetchKey, fetchInfoMap, vectorTile, altitude, showClasses, showTypes, mapZoom, tileZoom);
+      renderTiles(fetchKey, fetchInfoMap, vectorTile, altitude, showClasses, showTypes, mapZoom, tileZoom, date);
     })
     .catch((e) => {
       // AbortError are expected when aborting a request.
@@ -288,6 +309,7 @@ function renderTiles(
   showTypes: Type[],
   mapZoom: number,
   tileZoom: number,
+  date: Date,
 ) {
   const fetchInfo = fetchInfoMap.get(fetchKey);
   if (fetchInfo == null) {
@@ -320,7 +342,7 @@ function renderTiles(
 
     for (let i = 0; i < vectorTile.layers.asp.length; i++) {
       const f = vectorTile.layers.asp.feature(i);
-      const airspace = toTypedAirspace(f.properties as any);
+      const airspace = applyTimeRule(toTypedAirspace(f.properties as any), date);
       const ratio = renderSize / f.extent;
       if (
         f.type === 3 &&

apps/run/src/app/airspace.ts

@@ -2,6 +2,7 @@ import type { AirspaceString, AirspaceTyped, Point } from '@flyxc/common';
 import {
   AIRSPACE_TILE_SIZE,
   AirspaceColorCategory,
+  applyTimeRule,
   fetchResponse,
   Flags,
   getAirspaceColorCategory,
@@ -100,9 +101,11 @@ export async function fetchAirspaces(track: protos.Track, altitude: protos.Groun
     }
     const aspLayer = new VectorTile(new Uint8Array(buffer)).layers.asp;
 
+    const startDate = track.timeSec[0] ? new Date(track.timeSec[0] * 1000) : new Date();
+
     for (let i = 0; i < aspLayer.length; i++) {
       const feature = aspLayer.feature(i);
-      const airspace = toTypedAirspace(feature.properties as AirspaceString);
+      const airspace = applyTimeRule(toTypedAirspace(feature.properties as AirspaceString), startDate);
       const airspaceId = getAirspaceFeatureId(airspace);
       for (const fixIdx of indexes) {
         // Do not check airspaces above the track.

libs/common/jest.config.ts

@@ -2,6 +2,7 @@ export default {
   displayName: 'common',
   preset: '../../jest.preset.js',
   globals: {},
+  testEnvironment: 'node',
   transform: {
     '^.+\\.[tj]s$': [
       'ts-jest',