Filter live tracks by name

vicb · Mar 20, 2024 · a1fb6a5 · a1fb6a5
1 parent e60bb60
commit a1fb6a5
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/apps/fxc-front/src/app/components/ui/ionic.ts b/apps/fxc-front/src/app/components/ui/ionic.ts
@@ -48,8 +48,9 @@ import { defineCustomElement as d44 } from '@ionic/core/components/ion-title';
 import { defineCustomElement as d45 } from '@ionic/core/components/ion-toast';
 import { defineCustomElement as d46 } from '@ionic/core/components/ion-toggle';
 import { defineCustomElement as d47 } from '@ionic/core/components/ion-toolbar';
+import { defineCustomElement as d48 } from '@ionic/core/components/ion-searchbar';
 
-import { defineCustomElement as d48 } from './ion-router';
+import { defineCustomElement as d49 } from './ion-router';
 
 export function ionicInit(): void {
   initialize();
@@ -101,4 +102,5 @@ export function ionicInit(): void {
   d46();
   d47();
   d48();
+  d49();
 }
diff --git a/apps/fxc-front/src/app/components/ui/live-modal.ts b/apps/fxc-front/src/app/components/ui/live-modal.ts
@@ -13,7 +13,7 @@ import { RootState, store } from '../../redux/store';
 import { getUniqueContrastColor } from '../../styles/track';
 
 // Maximum number of pilots to list.
-const MAX_PILOTS = 100;
+const MAX_PILOTS = 200;
 
 // How long tracks are considered recent.
 const RECENT_PILOTS_HOUR = 3;
@@ -37,6 +37,8 @@ export class LiveModal extends connect(store)(LitElement) {
   private location!: common.LatLon;
   @state()
   private currentLiveId?: string;
+  @state()
+  private filter = '';
 
   private watchLocationId = 0;
 
@@ -83,6 +85,9 @@ export class LiveModal extends connect(store)(LitElement) {
             ></ion-fab-button>
           </ion-buttons>
         </ion-toolbar>
+        <ion-toolbar color="light">
+          <ion-searchbar placeholder="Filter" debounce="300" @ionInput=${this.filterPilots}></ion-searchbar>
+        </ion-toolbar>
       </ion-header>
       <ion-content>
         <ion-list>${this.getPilotItems()}</ion-list>
@@ -107,6 +112,10 @@ export class LiveModal extends connect(store)(LitElement) {
     store.dispatch(setCenterOnLocation(watch));
   }
 
+  private filterPilots(e: CustomEvent): void {
+    this.filter = e.detail.value;
+  }
+
   private async watchLocation(watch: boolean): Promise<void> {
     if ('geolocation' in navigator) {
       if (watch) {
@@ -156,6 +165,13 @@ export class LiveModal extends connect(store)(LitElement) {
     let pilots = [...this.pilots];
     const distances = new Map<string, number>();
 
+    if (this.filter.length > 0) {
+      const escapedFilter = this.filter.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      pilots = pilots.filter((pilot) => {
+        return pilot.isEmergency || pilot.name.match(new RegExp(escapedFilter, 'i'));
+      });
+    }
+
     pilots.forEach((pilot) => {
       const distance = Math.round(getDistance(this.location, pilot.position));
       distances.set(pilot.id, distance);