ATC stuff.

client/routes/api/atc.js

@@ -26,8 +26,9 @@ function uuidv4() {
 
 
 function Flight( name ) {
-    this.id = uuidv4();
-    this.name = name;
+    this.id     = uuidv4();
+    this.name   = name;
+    this.status = "unknown";
 }
 
 Flight.prototype.getData = function() {

client/src/atc/atc.ts

@@ -2,14 +2,16 @@ import { ATCBoard } from "./atcboard";
 import { ATCBoardFlight } from "./board/flight";
 
 export interface FlightInterface {
-    id   : string;
-    name : string;
+    id     : string;
+    name   : string;
+    status : "unknown";
 }
 
 
 class ATCDataHandler {
 
     #atc:ATC;
+    #flights:{[key:string]: FlightInterface} = {};
 
     #updateInterval:number|undefined = undefined;
     #updateIntervalDelay:number      = 1000;
@@ -21,6 +23,12 @@ class ATCDataHandler {
 
     }
 
+
+    getFlights() {
+        return this.#flights;
+    }
+
+
     startUpdates() {
         
         this.#updateInterval = setInterval( () => {
@@ -34,13 +42,21 @@ class ATCDataHandler {
             })
             .then( response => response.json() )
             .then( data => {
-                this.#atc.setFlights( data );
+                this.setFlights( data );
             });
 
         }, this.#updateIntervalDelay );
 
     }
 
+
+    setFlights( flights:{[key:string]: any} ) {
+
+        this.#flights = flights;
+
+    }
+
+
     stopUpdates() {
         
         clearInterval( this.#updateInterval );
@@ -54,9 +70,8 @@ class ATCDataHandler {
 
 export class ATC {
 
-    #boards<T extends ATCBoard>:<T>[] = [];
+    #boards:ATCBoard[] = [];
     #dataHandler:ATCDataHandler;
-    #flights:{[key:string]: FlightInterface} = {};
 
 
     constructor() {
@@ -69,30 +84,31 @@ export class ATC {
 
 
     addBoard<T extends ATCBoard>( board:T ) {
+
+        board.startUpdates();
+
+        this.#boards.push( board );
         
     }
 
 
+    getDataHandler() {
+        return this.#dataHandler;
+    }
+
+
     lookForBoards() {
 
-        document.querySelectorAll( "ol-atc-board" ).forEach( board => {
+        document.querySelectorAll( ".ol-atc-board" ).forEach( board => {
 
             if ( board instanceof HTMLElement ) {
-                this.addBoard( new ATCBoardFlight( board ) );
+                this.addBoard( new ATCBoardFlight( this, board ) );
             }
 
         });
 
     }
 
-
-    setFlights( flights:{[key:string]: any} ) {
-
-        this.#flights = flights;
-
-    }
-
-
     startUpdates() {
 
         this.#dataHandler.startUpdates();

client/src/atc/atcboard.ts

@@ -1,15 +1,80 @@
+import { ATC } from "./atc";
+
+export interface ATCTemplateInterface {
+    "template": string
+}
+
 export abstract class ATCBoard {
 
+    #atc:ATC;
+    #templates: {[key:string]: string} = {};
+
+    //  Elements
     #boardElement:HTMLElement;
+    #stripBoardElement:HTMLElement;
+    
+    //  Update timing
+    #updateInterval:number|undefined = undefined;
+    #updateIntervalDelay:number      = 1000;
 
-    constructor( boardElement:HTMLElement ) {
 
+    constructor( atc:ATC, boardElement:HTMLElement ) {
+
+        this.#atc          = atc;
         this.#boardElement = boardElement;
+        this.#stripBoardElement = <HTMLElement>this.getBoardElement().querySelector( ".atc-strip-board" );
 
     }
 
+
+    getATC() {
+        return this.#atc;
+    }
+
+
     getBoardElement() {
         return this.#boardElement;
     }
+
+
+    getStripBoardElement() {
+        return this.#stripBoardElement;
+    }
+
+
+    getTemplate( key:string ) {
+
+        return this.#templates[ key ] || false;
+
+    }
+
+
+    protected update() {
+        console.warn( "No custom update method defined." );
+    }
+
+
+    setTemplates( templates:{[key:string]: string} ) {
+        this.#templates = templates;
+    }
+
+
+    startUpdates() {
+
+        this.#updateInterval = setInterval( () => {
+
+            this.update();
+
+        }, this.#updateIntervalDelay );
+
+    }
+
+
+    stopUpdates() {
+
+        clearInterval( this.#updateInterval );
+
+    }
+
     
 }

client/src/atc/board/flight.ts

@@ -1,11 +1,71 @@
+import { getMissionData } from "../..";
+import { ATC } from "../atc";
 import { ATCBoard } from "../atcboard";
 
 export class ATCBoardFlight extends ATCBoard {
 
-    constructor( element:HTMLElement ) {
+    constructor( atc:ATC, element:HTMLElement ) {
 
-        super( element );
+        super( atc, element );
+
+        console.log( getMissionData() );
+
+        document.addEventListener( "deleteFlightStrip", ( ev:CustomEventInit ) => {
+
+            if ( ev.detail.id ) {
+                
+                fetch( '/api/atc/flight/' + ev.detail.id, {
+                    method: 'DELETE',      
+                    headers: { 
+                        'Accept': '*/*',
+                        'Content-Type': 'application/json' 
+                    }
+                });
+                
+            }
+
+        });
 
     }
-    
+
+
+    update() {
+        
+        const flights    = Object.values( this.getATC().getDataHandler().getFlights() );
+        const stripBoard = this.getStripBoardElement();
+
+
+        for( const strip of stripBoard.children ) {
+            strip.toggleAttribute( "data-updating", true );
+        }
+
+
+        flights.forEach( flight => {
+
+            let strip = stripBoard.querySelector( `[data-flight-id="${flight.id}"]`);
+
+            if ( !strip ) {
+
+                const template = `<div data-flight-id="${flight.id}">
+                    <div data-point="name">${flight.name}</div>
+                    <div data-point="status">${flight.status}</div>
+                    <button data-on-click="deleteFlightStrip" data-on-click-params='{"id":"${flight.id}"}'>Delete</button>
+                </div>`;
+
+                stripBoard.insertAdjacentHTML( "beforeend", template );
+
+                strip = <HTMLElement>stripBoard.lastElementChild;
+
+            }
+
+            strip.toggleAttribute( "data-updating", false );
+
+        });
+        
+        stripBoard.querySelectorAll( `[data-updating]` ).forEach( strip => {
+            strip.remove();
+        });
+
+    }
+
 }

client/views/atc.ejs

@@ -1,5 +1,5 @@
 <div class="ol-panel ol-dialog ol-atc-board" data-feature-switch="atc">
     
-    <div class="atc-stripboard"></div>
+    <div class="atc-strip-board"></div>
 
 </div>