send the precedence field (#126)

Author: massimosiani

src/components/stats.vue

@@ -39,7 +39,7 @@ import TopSelectedItem from '@/libs/classes/top-selected-item';
       } else {
         this.$data.selectedItem = item;
       }
-      store.commit('topSelectedItem', this.$data.selectedItem);
+      store.dispatch('topSelectedItem', this.$data.selectedItem);
     },
   },
 })

src/components/world-map.vue

@@ -13,12 +13,13 @@ import { streamWS } from '@/libs/endpoints';
 import { AirportList, AirportListEvent } from '@/interfaces/airport';
 import { AirportInfo, Flight, FlightList, FlightListEvent } from '@/interfaces/flight';
 import MapEngine from '@/libs/map-engine';
-import { CoordinatesBox, types } from '@/interfaces/serverProtocol';
+import { CoordinatesBox, types, Precedence } from '@/interfaces/serverProtocol';
 import { store } from '@/store';
 import TopSelectedItem from '../libs/classes/top-selected-item';
 import MaxSpeedFlight from '../libs/classes/max-speed-flight';
 import { Airport } from '../interfaces/stats';
 import DVSEvent from '../interfaces/dvs.event';
+import { fromTopSelectedItem } from '../libs/precedence.factory';
 
 @Component({
   name: 'world-map',
@@ -116,9 +117,9 @@ export default class extends Vue {
             share(),
           );
         messages.pipe(filter<FlightListEvent>((event: DVSEvent) => event.eventType === 'FlightList'))
-          .subscribe((event: FlightListEvent) => this.manageFlightList(event.eventPayload));
+          .subscribe((event) => this.manageFlightList(event.eventPayload));
         messages.pipe(filter<AirportListEvent>((event: DVSEvent) => event.eventType === 'AirportList'))
-          .subscribe((event: AirportListEvent) => this.manageAirportList(event.eventPayload));
+          .subscribe((event) => this.manageAirportList(event.eventPayload));
       });
       this.isListening = true;
     }
@@ -155,24 +156,20 @@ export default class extends Vue {
   }
 
   private createCommand(): CoordinatesBox {
-    const {
-      leftHighLat,
-      leftHighLon,
-      rightLowLat,
-      rightLowLon,
-    } = this.map!.getBoundingBox();
-
+    const { leftHighLat, leftHighLon, rightLowLat, rightLowLon } = this.map!.getBoundingBox();
     const zoom = this.map!.getZoom();
     const updateRate = this.getUpdateRate(Math.max(0, 10 - zoom));
+    const precedence: Precedence = fromTopSelectedItem(store.getters.topSelectedItem);
 
     return {
       '@type': types.startFlightList,
       'maxFlights': store.getters.maxFlights,
-      'updateRate': updateRate,
-      'leftHighLat': leftHighLat,
-      'leftHighLon': leftHighLon,
-      'rightLowLat': rightLowLat,
-      'rightLowLon': rightLowLon,
+      precedence,
+      updateRate,
+      leftHighLat,
+      leftHighLon,
+      rightLowLat,
+      rightLowLon,
     };
   }
 

src/interfaces/dvs.event.ts

@@ -1,3 +1,3 @@
 export default interface DVSEvent {
     eventType: 'FlightList' | 'AirportList';
-};
+}

src/interfaces/serverProtocol.ts

@@ -11,9 +11,16 @@ interface ServerProtocol {
   readonly '@type': keyof typeof types;
 }
 
+export interface Precedence {
+  readonly airline?: string;
+  readonly arrivalAirport?: string;
+  readonly departureAirport?: string;
+}
+
 export interface CoordinatesBox extends ServerProtocol {
   readonly '@type': typeof types.startFlightList;
   readonly maxFlights?: number;
+  readonly precedence: Precedence;
   readonly updateRate?: number;
   readonly leftHighLat: number;
   readonly leftHighLon: number;

src/interfaces/store.ts

@@ -1,6 +1,7 @@
 import { WebSocketSubject } from 'rxjs/webSocket';
 import TopSelectedItem from '@/libs/classes/top-selected-item';
 import MaxSpeedFlight from '@/libs/classes/max-speed-flight';
+import { CoordinatesBox } from './serverProtocol';
 
 interface SocketConfiguration {
   maxFlights: number;
@@ -10,6 +11,7 @@ interface SocketConfiguration {
 export interface State {
   configuration: SocketConfiguration;
   paused: boolean;
+  latestBox?: CoordinatesBox;
   maxSpeed: number;
   maximized: boolean;
   socket?: WebSocketSubject<unknown>;

src/libs/precedence.factory.ts

@@ -0,0 +1,22 @@
+import { Precedence } from '@/interfaces/serverProtocol';
+import TopSelectedItem from './classes/top-selected-item';
+
+export function fromTopSelectedItem(topSelectedItem: TopSelectedItem | undefined): Precedence {
+    let precedence: Precedence = {};
+    const typeOfPrecedence = topSelectedItem?.type;
+    switch (typeOfPrecedence) {
+        case 'originAirport':
+            precedence = { departureAirport: topSelectedItem!.value };
+            break;
+        case 'destinationAirport':
+            precedence = { arrivalAirport: topSelectedItem!.value };
+            break;
+        case 'airlines':
+            precedence = { airline: topSelectedItem!.value };
+            break;
+        case 'fastestFlights':
+            precedence = {};
+            break;
+    }
+    return precedence;
+}

src/store/actions.ts

@@ -1,8 +1,9 @@
-import { ActionTree } from 'vuex';
+import { ActionTree, ActionContext } from 'vuex';
 import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
 import { State } from '@/interfaces/store';
-import { CoordinatesBox, types } from '@/interfaces/serverProtocol';
-import { store } from '@/store';
+import { CoordinatesBox, Precedence, types } from '@/interfaces/serverProtocol';
+import TopSelectedItem from '@/libs/classes/top-selected-item';
+import { fromTopSelectedItem } from '@/libs/precedence.factory';
 
 const actions: ActionTree<State, any> = {
   attachWebSocket({ state }, url: string): WebSocketSubject<unknown> {
@@ -11,36 +12,58 @@ const actions: ActionTree<State, any> = {
     }
     return state.socket;
   },
-  startFlightList({ state: { socket } }, message: CoordinatesBox): void {
+  startFlightList({ commit, state: { socket } }, message: CoordinatesBox): void {
     if (socket) {
       socket.next(message);
+      commit('latestBox', message);
     }
   },
   stopFlightList({ state: { socket } }): void {
     if (socket) {
       socket.next({ '@type': types.stopFlightList });
     }
   },
-  startTop({ state: { socket } }): void {
+  startTop({ getters, state: { socket } }): void {
     if (socket) {
-      socket.next({ '@type': types.startTop, 'updateRate': store.getters.updateRate });
+      socket.next({ '@type': types.startTop, 'updateRate': getters.updateRate });
     }
   },
   stopTop({ state: { socket } }): void {
     if (socket) {
       socket.next({ '@type': types.stopTop });
     }
   },
-  startTotal({ state: { socket } }): void {
+  startTotal({ getters, state: { socket } }): void {
     if (socket) {
-      socket.next({ '@type': types.startTotal, 'updateRate': store.getters.updateRate });
+      socket.next({ '@type': types.startTotal, 'updateRate': getters.updateRate });
     }
   },
   stopTotal({ state: { socket } }): void {
     if (socket) {
       socket.next({ '@type': types.stopTotal });
     }
   },
+  toggleMaximize({ dispatch, state }: ActionContext<State, any>) {
+    state.maximized = !state.maximized;
+    if (state.maximized) {
+      dispatch(types.startTop);
+      dispatch(types.startTotal);
+    } else {
+      dispatch(types.stopTop);
+      dispatch(types.stopTotal);
+    }
+  },
+  topSelectedItem({ dispatch, getters, state }: ActionContext<State, any>, item?: TopSelectedItem) {
+    state.topSelectedItem = item;
+    if (!!item) {
+      dispatch(types.stopTop);
+    } else {
+      dispatch(types.startTop);
+    }
+    if (!state.paused) {
+      dispatch(types.startFlightList, { ...state.latestBox, precedence: fromTopSelectedItem(getters.topSelectedItem) });
+    }
+  },
 };
 
 export {

src/store/getters.ts

@@ -1,4 +1,5 @@
 import { State } from '@/interfaces/store';
+import TopSelectedItem from '@/libs/classes/top-selected-item';
 import { GetterTree } from 'vuex';
 import { WebSocketSubject } from 'rxjs/webSocket';
 
@@ -7,6 +8,7 @@ const getters: GetterTree<State, any> = {
   maxFlights: (state: State): number => state.configuration.maxFlights,
   maxSpeed: (state: State): number => state.maxSpeed,
   socket: (state: State): (WebSocketSubject<unknown> | undefined) => state.socket,
+  topSelectedItem: (state: State): (TopSelectedItem | undefined) => state.topSelectedItem,
   updateRate: (state: State): number => state.configuration.updateRate,
 };
 

src/store/index.ts

@@ -12,6 +12,7 @@ const state: State = {
     maxFlights: 1500,
     updateRate: 30,
   },
+  latestBox: undefined,
   maximized: true,
   paused: false,
   maxSpeed: 0,

src/store/mutations.ts

@@ -1,35 +1,18 @@
 import { State } from '@/interfaces/store';
-import { types } from '@/interfaces/serverProtocol';
-import { store } from '@/store';
 import { MutationTree } from 'vuex';
-import TopSelectedItem from '@/libs/classes/top-selected-item';
 import MaxSpeedFlight from '@/libs/classes/max-speed-flight';
+import { CoordinatesBox } from '@/interfaces/serverProtocol';
 
 const mutations: MutationTree<State> = {
+  latestBox(currentState: State, latestBox: CoordinatesBox) {
+    currentState.latestBox = latestBox;
+  },
   togglePause(currentState: State) {
     currentState.paused = !currentState.paused;
   },
-  toggleMaximize(currentState: State) {
-    currentState.maximized = !currentState.maximized;
-    if (currentState.maximized) {
-      store.dispatch(types.startTop);
-      store.dispatch(types.startTotal);
-    } else {
-      store.dispatch(types.stopTop);
-      store.dispatch(types.stopTotal);
-    }
-  },
   setMaxSpeed(currentState: State, speed: number) {
     currentState.maxSpeed = speed;
   },
-  topSelectedItem(currentState: State, item?: TopSelectedItem) {
-    currentState.topSelectedItem = item;
-    if (!!item) {
-      store.dispatch(types.stopTop);
-    } else {
-      store.dispatch(types.startTop);
-    }
-  },
   toggleBoxedMaxSpeedFlightPopup(currentState: State, maxSpeedFlight?: MaxSpeedFlight) {
     currentState.boxedMapSpeedFlight = maxSpeedFlight;
   },