Merge pull request #190 from Pax1601/187-atc-tower-list-planes-being-monitored

Flights now listed by board.

client/public/stylesheets/atc.css

@@ -67,17 +67,26 @@
     border:1px solid #cc0000;
 }
 
-.ol-strip-board-headers :nth-child(1),
-.ol-strip-board-headers :nth-child(2),
-.ol-strip-board-strip :nth-child(1),
-.ol-strip-board-strip :nth-child(2) {
+[data-board-type="ground"] .ol-strip-board-headers :nth-child(1),
+[data-board-type="ground"] .ol-strip-board-headers :nth-child(2),
+[data-board-type="ground"] .ol-strip-board-strip :nth-child(1),
+[data-board-type="ground"] .ol-strip-board-strip :nth-child(2) {
     width:120px;
 }
 
-.ol-strip-board-strip :nth-child(4) {
+[data-board-type="ground"] .ol-strip-board-strip :nth-child(4) {
     text-align: center;
 }
 
+
+
+[data-board-type="tower"] .ol-strip-board-strip :nth-child(2) input {
+    width:25px;
+}
+
+
+
+
 .ol-strip-board-strip > [data-point="name"] {
     text-overflow: ellipsis;
     overflow:hidden;
@@ -111,4 +120,13 @@
 .ol-strip-board-add-flight input {
     border-bottom-left-radius: var( --border-radius-sm );
     border-top-left-radius: var( --border-radius-sm );
+}
+
+
+[data-board-type="ground"] {
+    translate: 0 100%;
+}
+
+[data-board-type="tower"] {
+    translate: 0 -100%;
 }

client/routes/api/atc.js

@@ -25,8 +25,9 @@ function uuidv4() {
 
 
 
-function Flight( name ) {
+function Flight( name, boardId ) {
     this.id          = uuidv4();
+    this.boardId     = boardId;
     this.name        = name;
     this.status      = "unknown";
     this.takeoffTime = -1;
@@ -35,6 +36,7 @@ function Flight( name ) {
 Flight.prototype.getData = function() {
     return {
         "id"          : this.id,
+        "boardId"     : this.boardId,
         "name"        : this.name,
         "status"      : this.status,
         "takeoffTime" : this.takeoffTime
@@ -116,7 +118,20 @@ const dataHandler = new ATCDataHandler( {
 
 app.get( "/flight", ( req, res ) => {
 
-    res.json( dataHandler.getFlights() );
+    let flights = Object.values( dataHandler.getFlights() );
+
+    if ( flights && req.query.boardId ) {
+        
+        flights = flights.reduce( ( acc, flight ) => {
+            if ( flight.boardId === req.query.boardId ) {
+                acc[ flight.id ] = flight;
+            }
+            return acc;
+        }, {} );
+
+    }
+
+    res.json( flights );
 
 });
 
@@ -157,11 +172,15 @@ app.patch( "/flight/:flightId", ( req, res ) => {
 
 app.post( "/flight", ( req, res ) => {
 
+    if ( !req.body.boardId ) {
+        res.status( 400 ).send( "Invalid/missing boardId" );
+    }
+
     if ( !req.body.name ) {
         res.status( 400 ).send( "Invalid/missing flight name" );
     }
 
-    const flight = new Flight( req.body.name );
+    const flight = new Flight( req.body.name, req.body.boardId );
 
     dataHandler.addFlight( flight );
 

client/src/atc/atc.ts

@@ -1,8 +1,10 @@
 import { ATCBoard } from "./atcboard";
-import { ATCBoardFlight } from "./board/flight";
+import { ATCBoardGround } from "./board/ground";
+import { ATCBoardTower } from "./board/tower";
 
 export interface FlightInterface {
     id          : string;
+    boardId     : string;
     name        : string;
     status      : "unknown";
     takeoffTime : number;
@@ -25,8 +27,16 @@ class ATCDataHandler {
     }
 
 
-    getFlights() {
-        return this.#flights;
+    getFlights( boardId:string ) {
+
+        return Object.values( this.#flights ).reduce( ( acc:{[key:string]: FlightInterface}, flight ) => {
+            
+            if ( flight.boardId === boardId ) {
+                acc[ flight.id ] = flight;
+            }
+
+            return acc;
+        }, {} );
     }
 
 
@@ -119,7 +129,22 @@ export class ATC {
         document.querySelectorAll( ".ol-strip-board" ).forEach( board => {
 
             if ( board instanceof HTMLElement ) {
-                this.addBoard( new ATCBoardFlight( this, board ) );
+
+                switch ( board.dataset.boardType ) {
+
+                    case "ground":
+                        this.addBoard( new ATCBoardGround( this, board ) );
+                        return;
+                    
+                    case "tower":
+                        this.addBoard( new ATCBoardTower( this, board ) );
+                        return;
+                    
+                    default:
+                        console.warn( "Unknown board type for ATC board, got: " + board.dataset.boardType );
+
+                }
+
             }
 
         });

client/src/atc/atcboard.ts

@@ -1,6 +1,6 @@
 import { Draggable } from "leaflet";
 import { Dropdown } from "../controls/dropdown";
-import { zeroAppend } from "../other/utils";
+import { generateUUIDv4, zeroAppend } from "../other/utils";
 import { ATC } from "./atc";
 
 export interface StripBoardStripInterface {
@@ -12,6 +12,7 @@ export interface StripBoardStripInterface {
 export abstract class ATCBoard {
 
     #atc:ATC;
+    #boardId:string = "";
     #templates: {[key:string]: string} = {};
 
     //  Elements
@@ -27,7 +28,9 @@ export abstract class ATCBoard {
     #updateIntervalDelay:number      = 1000;
 
 
-    constructor( atc:ATC, boardElement:HTMLElement ) {
+    constructor( atc:ATC, boardElement:HTMLElement, options?:{[key:string]: any} ) {
+
+        options = options || {};
 
         this.#atc          = atc;
         this.#boardElement = boardElement;
@@ -51,6 +54,24 @@ export abstract class ATCBoard {
             this.updateClock();
         }, 1000 );
 
+
+    }
+
+
+    addFlight( flightName:string ) {
+
+        return fetch( '/api/atc/flight/', {
+            method: 'POST',      
+            headers: { 
+                'Accept': '*/*',
+                'Content-Type': 'application/json' 
+            },
+            "body": JSON.stringify({
+                "boardId" : this.getBoardId(),
+                "name"    : flightName
+            })
+        });
+
     }
 
 
@@ -108,6 +129,11 @@ export abstract class ATCBoard {
     }
 
 
+    getBoardId(): string {
+        return this.getBoardElement().id;
+    }
+
+
     getStripBoardElement() {
         return this.#stripBoardElement;
     }
@@ -130,11 +156,6 @@ export abstract class ATCBoard {
     }
 
 
-    protected update() {
-        console.warn( "No custom update method defined." );
-    }
-
-
     setTemplates( templates:{[key:string]: string} ) {
         this.#templates = templates;
     }
@@ -174,6 +195,11 @@ export abstract class ATCBoard {
     }
 
 
+    protected update() {
+        console.warn( "No custom update method defined." );
+    }
+
+
     updateClock() {
 
         const now = this.#atc.getMissionDateTime();

client/src/atc/board/ground.ts

@@ -1,10 +1,9 @@
-import { getMissionData } from "../..";
 import { Dropdown } from "../../controls/dropdown";
 import { ATC } from "../atc";
-import { ATCBoard, StripBoardStripInterface } from "../atcboard";
+import { ATCBoard } from "../atcboard";
 
 
-export class ATCBoardFlight extends ATCBoard {
+export class ATCBoardGround extends ATCBoard {
 
     constructor( atc:ATC, element:HTMLElement ) {
 
@@ -45,16 +44,7 @@ export class ATCBoardFlight extends ATCBoard {
                             return;
                         }
                         
-                        fetch( '/api/atc/flight/', {
-                            method: 'POST',      
-                            headers: { 
-                                'Accept': '*/*',
-                                'Content-Type': 'application/json' 
-                            },
-                            "body": JSON.stringify({
-                                "name": flightName.value
-                            })
-                        });
+                        this.addFlight( flightName.value );
     
                         form.reset();
     
@@ -71,7 +61,7 @@ export class ATCBoardFlight extends ATCBoard {
 
     update() {
         
-        const flights    = Object.values( this.getATC().getDataHandler().getFlights() );
+        const flights    = Object.values( this.getATC().getDataHandler().getFlights( this.getBoardId() ) );
         const stripBoard = this.getStripBoardElement();
 
         const missionTime = this.getATC().getMissionDateTime().getTime();

client/src/other/utils.ts

@@ -69,6 +69,14 @@ export function distance(lat1: number, lon1: number, lat2: number, lon2: number)
 }
 
 
+export function generateUUIDv4() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+}
+
+
 export function keyEventWasInInput( event:KeyboardEvent ) {
 
     const target = event.target;

client/views/atc.ejs

@@ -1,8 +1,35 @@
-<div id="strip-board-ground" class="ol-panel ol-dialog ol-strip-board ol-draggable" data-feature-switch="atc">
+<div id="strip-board-tower" class="ol-panel ol-dialog ol-strip-board ol-draggable" data-board-type="tower" data-feature-switch="atc">
 
     <div class="ol-dialog-close" data-on-click="closeDialog"></div>
     
     <div class="ol-dialog-header">
+        <h3>Tower</h3>
+        <div class="ol-strip-board-clock"></div>
+    </div>
+
+    <div class="ol-dialog-content">
+        <div class="ol-strip-board-headers">
+            <div>Flight</div>
+        </div>
+        <div class="ol-strip-board-strips"></div>
+    </div>
+
+    <div class="ol-dialog-footer">
+        <form class="ol-strip-board-add-flight">
+            <input type="text" name="flightName" placeholder="Add a flight" />
+            <button type="submit">Add</button>
+        </form>
+    </div>
+
+</div>
+
+
+<div id="strip-board-ground" class="ol-panel ol-dialog ol-strip-board ol-draggable" data-board-type="ground" data-feature-switch="atc">
+
+    <div class="ol-dialog-close" data-on-click="closeDialog"></div>
+    
+    <div class="ol-dialog-header">
+        <h3>Ground</h3>
         <div class="ol-strip-board-clock"></div>
     </div>
 

client/views/navbar.ejs

@@ -56,7 +56,7 @@
         <div class="ol-group-header">ATC</div>
         <div class="ol-group">
             <button data-on-click="toggleElements" data-on-click-params='{"selector": "#strip-board-ground"}'>GND</button>
-            <button>TWR</button>
+            <button data-on-click="toggleElements" data-on-click-params='{"selector": "#strip-board-tower"}'>TWR</button>
         </div>
     </div>
 </nav>