weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Can add flights by click.

Browse Source
This commit is contained in:
PeekabooSteam 2023-04-16 12:58:14 +01:00
parent a3d919bad9
commit e84fa7caaa
7 changed files with 180 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
client/public/stylesheets/atc.css
View File

@ -80,10 +80,22 @@
[data-board-type="tower"] .ol-strip-board-strip > * {
text-align: center;
}
[data-board-type="tower"] .ol-strip-board-strip > :first-child {
text-align: left;
}
[data-board-type="tower"] .ol-strip-board-strip :nth-child(2) input {
width:25px;
}
[data-board-type="tower"] .ol-strip-board-strip :nth-child(2) {
font-size:10px;
}
@ -109,7 +121,12 @@
padding:4px 8px;
}
.ol-strip-board-add-flight button {
.add-flight-by-click img {
filter:invert();
height: 12px;
}
.ol-strip-board-add-flight button[type="submit"] {
background-color: darkgreen;
border-bottom-right-radius: var( --border-radius-sm );
border-bottom-left-radius: 0;

12
client/routes/api/atc.js
View File

@ -25,12 +25,13 @@ function uuidv4() {
function Flight( name, boardId ) {
function Flight( name, boardId, unitId ) {
this.id = uuidv4();
this.boardId = boardId;
this.name = name;
this.status = "unknown";
this.takeoffTime = -1;
this.unitId = parseInt( unitId );
}
Flight.prototype.getData = function() {
@ -39,7 +40,8 @@ Flight.prototype.getData = function() {
"boardId" : this.boardId,
"name" : this.name,
"status" : this.status,
"takeoffTime" : this.takeoffTime
"takeoffTime" : this.takeoffTime,
"unitId" : this.unitId
};
}
@ -180,7 +182,11 @@ app.post( "/flight", ( req, res ) => {
res.status( 400 ).send( "Invalid/missing flight name" );
}
const flight = new Flight( req.body.name, req.body.boardId );
if ( !req.body.unitId || isNaN( req.body.unitId ) ) {
res.status( 400 ).send( "Invalid/missing unitId" );
}
const flight = new Flight( req.body.name, req.body.boardId, req.body.unitId );
dataHandler.addFlight( flight );

1
client/src/atc/atc.ts
View File

@ -8,6 +8,7 @@ export interface FlightInterface {
name : string;
status : "unknown";
takeoffTime : number;
unitId : number;
}

151
client/src/atc/atcboard.ts
View File

@ -1,12 +1,14 @@
import { Draggable } from "leaflet";
import { Dropdown } from "../controls/dropdown";
import { generateUUIDv4, zeroAppend } from "../other/utils";
import { zeroAppend } from "../other/utils";
import { ATC } from "./atc";
import { Unit } from "../units/unit";
export interface StripBoardStripInterface {
"id": string,
"element": HTMLElement,
"dropdowns": {[key:string]: Dropdown}
"dropdowns": {[key:string]: Dropdown},
"isDeleted"?: boolean,
"unitId": number
}
export abstract class ATCBoard {
@ -15,13 +17,16 @@ export abstract class ATCBoard {
#boardId:string = "";
#templates: {[key:string]: string} = {};
// Elements
#boardElement:HTMLElement;
#clockElement:HTMLElement;
#stripBoardElement:HTMLElement;
// Content
#isAddFlightByClickEnabled:boolean = false;
#strips:{[key:string]: StripBoardStripInterface} = {};
#unitIdsBeingMonitored:number[] = [];
// Update timing
#updateInterval:number|undefined = undefined;
@ -37,6 +42,12 @@ export abstract class ATCBoard {
this.#stripBoardElement = <HTMLElement>this.getBoardElement().querySelector( ".ol-strip-board-strips" );
this.#clockElement = <HTMLElement>this.getBoardElement().querySelector( ".ol-strip-board-clock" );
setInterval( () => {
this.updateClock();
}, 1000 );
if ( this.#boardElement.classList.contains( "ol-draggable" ) ) {
let options:any = {};
@ -50,15 +61,37 @@ export abstract class ATCBoard {
}
setInterval( () => {
this.updateClock();
}, 1000 );
this.#setupAddFlight();
}
addFlight( flightName:string ) {
addFlight( unit:Unit ) {
const baseData = unit.getBaseData();
const unitCanBeAdded = () => {
if ( baseData.category !== "Aircraft" ) {
return false;
}
if ( baseData.AI === true ) {
// return false;
}
if ( this.#unitIdsBeingMonitored.includes( unit.ID ) ) {
return false;
}
return true;
}
if ( !unitCanBeAdded() ) {
return;
}
this.#unitIdsBeingMonitored.push( unit.ID );
return fetch( '/api/atc/flight/', {
method: 'POST',
@ -68,7 +101,8 @@ export abstract class ATCBoard {
},
"body": JSON.stringify({
"boardId" : this.getBoardId(),
"name" : flightName
"name" : baseData.unitName,
"unitId" : unit.ID
})
});
@ -76,7 +110,16 @@ export abstract class ATCBoard {
addStrip( strip:StripBoardStripInterface ) {
this.#strips[ strip.id ] = strip;
strip.element.querySelectorAll( "button.deleteFlight" ).forEach( btn => {
btn.addEventListener( "click", ev => {
ev.preventDefault();
this.deleteFlight( strip.id );
});
});
}
@ -109,16 +152,37 @@ export abstract class ATCBoard {
}
deleteStrip( id:string ) {
deleteStrip( flightId:string ) {
if ( this.#strips.hasOwnProperty( flightId ) ) {
this.#strips[ flightId ].element.remove();
this.#strips[ flightId ].isDeleted = true;
setTimeout( () => {
delete this.#strips[ flightId ];
}, 10000 );
if ( this.#strips.hasOwnProperty( id ) ) {
this.#strips[ id ].element.remove();
delete this.#strips[ id ];
}
}
deleteFlight( flightId:string ) {
this.deleteStrip( flightId );
fetch( '/api/atc/flight/' + flightId, {
method: 'DELETE',
headers: {
'Accept': '*/*',
'Content-Type': 'application/json'
}
});
}
getATC() {
return this.#atc;
}
@ -161,6 +225,67 @@ export abstract class ATCBoard {
}
#setupAddFlight() {
const toggleIsAddFlightByClickEnabled = () => {
this.#isAddFlightByClickEnabled = ( !this.#isAddFlightByClickEnabled );
this.getBoardElement().classList.toggle( "add-flight-by-click", this.#isAddFlightByClickEnabled );
}
document.addEventListener( "unitSelection", ( ev:CustomEventInit ) => {
if ( this.#isAddFlightByClickEnabled !== true ) {
return;
}
this.addFlight( ev.detail );
toggleIsAddFlightByClickEnabled();
});
this.getBoardElement().querySelectorAll( "form.ol-strip-board-add-flight" ).forEach( form => {
if ( form instanceof HTMLFormElement ) {
form.addEventListener( "submit", ev => {
ev.preventDefault();
if ( ev.target instanceof HTMLFormElement ) {
const elements = ev.target.elements;
const flightName = <HTMLInputElement>elements[1];
if ( flightName.value === "" ) {
return;
}
// this.addFlight( -1, flightName.value );
form.reset();
}
});
}
});
this.getBoardElement().querySelectorAll( ".add-flight-by-click" ).forEach( el => {
el.addEventListener( "click", () => {
toggleIsAddFlightByClickEnabled();
});
});
}
startUpdates() {
this.#updateInterval = setInterval( () => {

53
client/src/atc/board/ground.ts
View File

@ -9,53 +9,6 @@ export class ATCBoardGround extends ATCBoard {
super( atc, element );
document.addEventListener( "deleteFlightStrip", ( ev:CustomEventInit ) => {
if ( ev.detail.id ) {
fetch( '/api/atc/flight/' + ev.detail.id, {
method: 'DELETE',
headers: {
'Accept': '*/*',
'Content-Type': 'application/json'
}
});
}
});
this.getBoardElement().querySelectorAll( "form.ol-strip-board-add-flight" ).forEach( form => {
if ( form instanceof HTMLFormElement ) {
form.addEventListener( "submit", ev => {
ev.preventDefault();
if ( ev.target instanceof HTMLFormElement ) {
const elements = ev.target.elements;
const flightName = <HTMLInputElement>elements[0];
if ( flightName.value === "" ) {
return;
}
this.addFlight( flightName.value );
form.reset();
}
});
}
});
}
@ -89,7 +42,7 @@ export class ATCBoardGround extends ATCBoard {
<div data-point="timeToGo">${this.timeToGo( flight.takeoffTime )}</div>
<button data-on-click="deleteFlightStrip" data-on-click-params='{"id":"${flight.id}"}'>Delete</button>
<button class="deleteFlight">Delete</button>
</div>`;
stripBoard.insertAdjacentHTML( "beforeend", template );
@ -98,7 +51,8 @@ export class ATCBoardGround extends ATCBoard {
strip = {
"id": flight.id,
"element": <HTMLElement>stripBoard.lastElementChild,
"dropdowns": {}
"dropdowns": {},
"unitId": -1
};
strip.element.querySelectorAll( ".ol-select" ).forEach( select => {
@ -217,6 +171,7 @@ export class ATCBoardGround extends ATCBoard {
});
stripBoard.querySelectorAll( `[data-updating]` ).forEach( strip => {
this.deleteStrip( strip.getAttribute( "data-flight-id" ) || "" );
});

2
client/src/panels/unitcontrolpanel.ts
View File

@ -115,8 +115,6 @@ export class UnitControlPanel extends Panel {
else
database = null; // TODO add databases for other unit types
console.log( unit.getBaseData() );
var button = document.createElement("button");
var callsign = unit.getBaseData().unitName || "";

62
client/views/atc.ejs
View File

@ -1,53 +1,11 @@
<div id="strip-board-tower" class="ol-panel ol-dialog ol-strip-board ol-draggable" data-board-type="tower" data-feature-switch="atc">
<%- include('atc/board.ejs', {
"boardId": "strip-board-tower",
"boardType": "tower",
"headers": [ "Flight", "a-Alt", "alt" ]
}) %>
<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>
<div class="ol-dialog-content">
<div class="ol-strip-board-headers">
<div>Flight</div>
<div>Status</div>
<div>T/O Time</div>
<div>TTG</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>
<%- include('atc/board.ejs', {
"boardId": "strip-board-ground",
"boardType": "ground",
"headers": [ "Flight", "Status", "T/O Time", "TTG" ]
}) %>