Merge pull request #201 from Pax1601/194-atc-tower-assign-altitude

Adding missing files.

client/public/images/icons/arrow-pointer-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 55.2V426c0 12.2 9.9 22 22 22c6.3 0 12.4-2.7 16.6-7.5L121.2 346l58.1 116.3c7.9 15.8 27.1 22.2 42.9 14.3s22.2-27.1 14.3-42.9L179.8 320H297.9c12.2 0 22.1-9.9 22.1-22.1c0-6.3-2.7-12.3-7.4-16.5L38.6 37.9C34.3 34.1 28.9 32 23.2 32C10.4 32 0 42.4 0 55.2z"/></svg>

client/public/images/icons/bullseye-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M448 256A192 192 0 1 0 64 256a192 192 0 1 0 384 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 80a80 80 0 1 0 0-160 80 80 0 1 0 0 160zm0-224a144 144 0 1 1 0 288 144 144 0 1 1 0-288zM224 256a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>

client/public/images/icons/grip-lines-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M32 288c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 288zm0-128c-17.7 0-32 14.3-32 32s14.3 32 32 32l384 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L32 160z"/></svg>

client/public/images/icons/trash-can-regular.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg>

client/src/atc/board/tower.ts

@@ -0,0 +1,193 @@
+import { getUnitsManager } from "../..";
+import { Dropdown } from "../../controls/dropdown";
+import { ATC } from "../atc";
+import { ATCBoard } from "../atcboard";
+
+
+export class ATCBoardTower extends ATCBoard {
+
+    constructor( atc:ATC, element:HTMLElement ) {
+
+        super( atc, element );
+
+    }
+
+
+    update() {
+        
+        const flights         = this.sortFlights( Object.values( this.getATC().getDataHandler().getFlights( this.getBoardId() ) ) );
+        const missionTime     = this.getATC().getMissionDateTime().getTime();
+        const selectableUnits = getUnitsManager().getSelectableAircraft();
+        const stripBoard      = this.getStripBoardElement();
+
+        for( const strip of stripBoard.children ) {
+            strip.toggleAttribute( "data-updating", true );
+        }
+
+
+        flights.forEach( flight => {
+
+            let strip = this.getStrip( flight.id );
+
+            if ( strip.isDeleted === true ) {
+                return;
+            }
+
+            const flightData:FlightData = {
+                latitude: -1,
+                longitude: -1,
+                altitude: -1,
+                heading: -1,
+                speed: -1,
+                ...( selectableUnits.hasOwnProperty( flight.unitId ) ? selectableUnits[flight.unitId].getFlightData() : {} )
+            };
+
+            if ( !strip ) {
+
+                const template = `<div class="ol-strip-board-strip" data-flight-id="${flight.id}" data-flight-status="${flight.status}">
+                    <div class="handle"></div>
+                    <div data-point="name"><a href="#" class="select-unit">${flight.name}</a></div>
+
+                    <div data-point="assignedAltitude"><input type="text" name="assignedAltitude" value="${flight.assignedAltitude}" size="2" /> 000</div>
+                    <div data-point="altitude">-</div>
+
+                    <div data-point="assignedSpeed"><input type="text" name="assignedSpeed" value="${flight.assignedSpeed}" size="3" /></div>
+                    <div data-point="speed">-</div>
+                    
+                    <button class="deleteFlight">&times;</button>
+                </div>`;
+
+                stripBoard.insertAdjacentHTML( "beforeend", template );
+
+
+                strip = {
+                    "id": flight.id,
+                    "element": <HTMLElement>stripBoard.lastElementChild,
+                    "dropdowns": {},
+                    "unitId": flight.unitId
+                };
+
+
+                strip.element.querySelectorAll( `input[type="text"]` ).forEach( input => {
+
+                    if ( input instanceof HTMLInputElement ) {
+
+                        switch ( input.name ) {
+
+                            case "assignedAltitude":
+
+                                input.addEventListener( "change", ( ev ) => {
+
+                                    let val = parseInt( input.value.replace( /[^\d]/g, "" ) );
+
+                                    if ( isNaN( val ) || val < 0 || val > 40 ) {
+                                        val = 0;
+                                    }
+                                    
+                                    this.updateFlight( flight.id, {
+                                        "assignedAltitude": val
+                                    });
+
+                                });
+
+                            break;
+
+                            case "assignedSpeed":
+
+                                input.addEventListener( "change", ( ev ) => {
+
+                                    let val =   parseInt( input.value.replace( /[^\d]/g, "" ) );
+
+                                    if ( isNaN( val ) || val < 0 || val > 750 ) {
+                                        val = 0;
+                                    }
+                                    
+                                    this.updateFlight( flight.id, {
+                                        "assignedSpeed": val
+                                    });
+
+                                });
+
+                            break;
+                                
+                        }
+
+                    }
+
+                });
+
+                strip.element.querySelectorAll( ".select-unit" ).forEach( el => {
+
+                    el.addEventListener( "click", ev => {
+                        ev.preventDefault();
+                        getUnitsManager().selectUnit( flight.unitId );
+                    });
+
+                });
+
+                this.addStrip( strip );
+
+            } else {
+
+                //
+                //  Altitude
+                //
+
+                let assignedAltitude = <HTMLInputElement>strip.element.querySelector( `input[name="assignedAltitude"]`);
+
+                if ( !assignedAltitude.matches( ":focus" ) && assignedAltitude.value !== flight.assignedAltitude ) {
+                    assignedAltitude.value = flight.assignedAltitude;
+                }
+
+                flightData.altitude = Math.floor( flightData.altitude / 0.3048 );
+
+                strip.element.querySelectorAll( `[data-point="altitude"]` ).forEach( el => {
+                    if ( el instanceof HTMLElement ) {
+                        el.innerText = "" + flightData.altitude;
+                    }
+                });
+
+                const altitudeDelta = ( flight.assignedAltitude === 0 ) ? 0 : ( flight.assignedAltitude * 1000 ) - flightData.altitude;
+                
+                strip.element.toggleAttribute( "data-altitude-assigned", ( flight.assignedAltitude > 0 ) );
+                strip.element.toggleAttribute( "data-warning-altitude", ( altitudeDelta >= 300 || altitudeDelta <= -300  ) );
+
+                
+                //
+                //  Speed
+                //
+
+                let assignedSpeed = <HTMLInputElement>strip.element.querySelector( `input[name="assignedSpeed"]`);
+
+                if ( !assignedSpeed.matches( ":focus" ) && assignedSpeed.value !== flight.assignedSpeed ) {
+                    assignedSpeed.value = flight.assignedSpeed;
+                }
+
+                flightData.speed = Math.floor( flightData.speed * 1.94384 );
+
+                strip.element.querySelectorAll( `[data-point="speed"]` ).forEach( el => {
+                    if ( el instanceof HTMLElement ) {
+                        el.innerText = "" + flightData.speed;
+                    }
+                });
+
+                const speedDelta = ( flight.assignedSpeed === 0 ) ? 0 : flight.assignedSpeed - flightData.speed;
+                
+                strip.element.toggleAttribute( "data-speed-assigned", ( flight.assignedSpeed > 0 ) );
+                strip.element.toggleAttribute( "data-warning-speed", ( speedDelta >= 25 || speedDelta <= -25  ) );
+
+
+
+            }
+
+            strip.element.toggleAttribute( "data-updating", false );
+
+        });
+        
+        stripBoard.querySelectorAll( `[data-updating]` ).forEach( strip => {
+            this.deleteStrip( strip.getAttribute( "data-flight-id" ) || "" );
+        });
+
+    }
+
+}

client/views/atc/addflight.ejs

@@ -0,0 +1,5 @@
+<form class="ol-strip-board-add-flight">
+    <div class="ol-auto-suggest"></div>
+    <input type="text" name="unitName" placeholder="Flight search" />
+    <button class="add-flight-by-click" title="Add unit via click"><img src="/images/icons/bullseye-solid.svg" /></button>
+</form>

client/views/atc/board.ejs

@@ -0,0 +1,25 @@
+<div id="<%= boardId %>" class="ol-panel ol-dialog ol-strip-board ol-draggable" data-board-type="<%= boardType %>" data-feature-switch="atc">
+
+    <div class="ol-dialog-close" data-on-click="closeDialog"></div>
+    
+    <div class="ol-dialog-header">
+        <h3><%= boardType %></h3>
+        <div class="ol-strip-board-clock"></div>
+    </div>
+
+    <div class="ol-dialog-content">
+        <div class="ol-strip-board-headers">
+            <div><!-- handles --></div>
+            <% headers.forEach( header => { %>
+                <div><%= header %></div>
+            <% }); %>
+            <div><!-- delete  --></div>
+        </div>
+        <div class="ol-strip-board-strips ol-sortable"></div>
+    </div>
+
+    <div class="ol-dialog-footer">
+        <%- include('addflight.ejs') %>
+    </div>
+
+</div>