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

Slightly nicer PoC.

Browse Source
This commit is contained in:
PeekabooSteam
2023-04-04 23:38:08 +01:00
parent 6f64bd1622
commit 071942b632
8 changed files with 122 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,12 @@
import { Draggable } from "leaflet";
import { Dropdown } from "../controls/dropdown";
import { zeroAppend } from "../other/utils";
import { ATC } from "./atc";
export interface ATCTemplateInterface {
"template": string
export interface StripBoardStripInterface {
"id": string,
"element": HTMLElement,
"dropdowns": {[key:string]: Dropdown}
}
export abstract class ATCBoard {
@@ -14,6 +18,9 @@ export abstract class ATCBoard {
#boardElement:HTMLElement;
#clockElement:HTMLElement;
#stripBoardElement:HTMLElement;
// Content
#strips:{[key:string]: StripBoardStripInterface} = {};
// Update timing
#updateInterval:number|undefined = undefined;
@@ -27,6 +34,18 @@ export abstract class ATCBoard {
this.#stripBoardElement = <HTMLElement>this.getBoardElement().querySelector( ".ol-strip-board-strips" );
this.#clockElement = <HTMLElement>this.getBoardElement().querySelector( ".ol-strip-board-clock" );
if ( this.#boardElement.classList.contains( "ol-draggable" ) ) {
let options:any = {};
let handle = this.#boardElement.querySelector( ".handle" );
if ( handle instanceof HTMLElement ) {
options.handle = handle;
}
}
setInterval( () => {
this.updateClock();
@@ -35,17 +54,30 @@ export abstract class ATCBoard {
}
addStrip( strip:StripBoardStripInterface ) {
this.#strips[ strip.id ] = strip;
}
calculateTimeToGo( fromTimestamp:number, toTimestamp:number ) {
let timestamp = ( toTimestamp - fromTimestamp ) / 1000;
const hours = zeroAppend( Math.floor( timestamp / 3600 ), 2 );
const hasElapsed = ( timestamp < 0 ) ? true : false;
if ( hasElapsed ) {
timestamp = -( timestamp );
}
const hours = ( timestamp < 3600 ) ? "00" : zeroAppend( Math.floor( timestamp / 3600 ), 2 );
const rMinutes = timestamp % 3600;
const minutes = zeroAppend( Math.floor( rMinutes / 60 ), 2 );
const minutes = ( timestamp < 60 ) ? "00" : zeroAppend( Math.floor( rMinutes / 60 ), 2 );
const seconds = zeroAppend( Math.floor( rMinutes % 60 ), 2 );
return {
"elapsedMarker": ( hasElapsed ) ? "+" : "-",
"hasElapsed": hasElapsed,
"hours": hours,
"minutes": minutes,
"seconds": seconds,
@@ -56,6 +88,16 @@ export abstract class ATCBoard {
}
deleteStrip( id:string ) {
if ( this.#strips.hasOwnProperty( id ) ) {
this.#strips[ id ].element.remove();
delete this.#strips[ id ];
}
}
getATC() {
return this.#atc;
}
@@ -71,6 +113,16 @@ export abstract class ATCBoard {
}
getStrips() {
return this.#strips;
}
getStrip( id:string ) {
return this.#strips[ id ] || false;
}
getTemplate( key:string ) {
return this.#templates[ key ] || false;
@@ -115,7 +167,9 @@ export abstract class ATCBoard {
timeToGo( timestamp:number ) {
return ( timestamp === -1 ) ? "-" : this.calculateTimeToGo( this.getATC().getMissionDateTime().getTime(), timestamp ).time;
const timeData = this.calculateTimeToGo( this.getATC().getMissionDateTime().getTime(), timestamp );
return ( timestamp === -1 ) ? "-" : timeData.elapsedMarker + timeData.time;
}

38
client/src/atc/board/flight.ts
View File

@@ -1,7 +1,7 @@
import { getMissionData } from "../..";
import { Dropdown } from "../../controls/dropdown";
import { ATC } from "../atc";
import { ATCBoard } from "../atcboard";
import { ATCBoard, StripBoardStripInterface } from "../atcboard";
export class ATCBoardFlight extends ATCBoard {
@@ -83,7 +83,7 @@ export class ATCBoardFlight extends ATCBoard {
flights.forEach( flight => {
let strip = stripBoard.querySelector( `[data-flight-id="${flight.id}"]`);
let strip = this.getStrip( flight.id );
if ( !strip ) {
@@ -104,15 +104,20 @@ export class ATCBoardFlight extends ATCBoard {
stripBoard.insertAdjacentHTML( "beforeend", template );
strip = <HTMLElement>stripBoard.lastElementChild;
strip.querySelectorAll( ".ol-select" ).forEach( select => {
strip = {
"id": flight.id,
"element": <HTMLElement>stripBoard.lastElementChild,
"dropdowns": {}
};
strip.element.querySelectorAll( ".ol-select" ).forEach( select => {
switch( select.getAttribute( "data-point" ) ) {
case "status":
new Dropdown( select.id, ( value:string, ev:MouseEvent ) => {
strip.dropdowns.status = new Dropdown( select.id, ( value:string, ev:MouseEvent ) => {
fetch( '/api/atc/flight/' + flight.id, {
method: 'PATCH',
@@ -135,10 +140,7 @@ export class ATCBoardFlight extends ATCBoard {
});
strip.querySelectorAll( `input[type="text"]` ).forEach( input => {
strip.element.querySelectorAll( `input[type="text"]` ).forEach( input => {
if ( input instanceof HTMLInputElement ) {
@@ -190,22 +192,26 @@ export class ATCBoardFlight extends ATCBoard {
});
this.addStrip( strip );
} else {
// TODO: change status dropdown if status is different
strip.setAttribute( "data-flight-status", flight.status );
if ( flight.status !== strip.element.getAttribute( "data-flight-status" ) ) {
strip.element.setAttribute( "data-flight-status", flight.status );
strip.dropdowns.status.selectText( flight.status );
}
strip.querySelectorAll( `input[name="takeoffTime"]:not(:focus)` ).forEach( el => {
strip.element.querySelectorAll( `input[name="takeoffTime"]:not(:focus)` ).forEach( el => {
if ( el instanceof HTMLInputElement ) {
el.value = this.timestampToLocaleTime( flight.takeoffTime );
el.dataset.previousValue = el.value;
}
});
strip.querySelectorAll( `[data-point="timeToGo"]` ).forEach( el => {
strip.element.querySelectorAll( `[data-point="timeToGo"]` ).forEach( el => {
if ( flight.takeoffTime > 0 && this.calculateTimeToGo( missionTime, flight.takeoffTime ).totalSeconds <= 120 ) {
strip?.setAttribute( "data-time-warning", "level-1" );
strip.element.setAttribute( "data-time-warning", "level-1" );
}
if ( el instanceof HTMLElement ) {
@@ -217,12 +223,12 @@ export class ATCBoardFlight extends ATCBoard {
}
strip.toggleAttribute( "data-updating", false );
strip.element.toggleAttribute( "data-updating", false );
});
stripBoard.querySelectorAll( `[data-updating]` ).forEach( strip => {
strip.remove();
this.deleteStrip( strip.getAttribute( "data-flight-id" ) || "" );
});
}

9
client/src/controls/dropdown.ts
View File

@@ -54,6 +54,15 @@ export class Dropdown {
}));
}
selectText( text:string ) {
const index = [].slice.call( this.#options.children ).findIndex( ( opt:Element ) => opt.querySelector( "button" )?.innerText === text );
if ( index > -1 ) {
this.selectValue( index );
}
}
selectValue(idx: number)
{
if (idx < this.#optionsList.length)