From 79d8ca260ab7f585706aae5e2ec48fdd2845443d Mon Sep 17 00:00:00 2001 From: dpassoni Date: Tue, 21 Mar 2023 10:32:11 +0100 Subject: [PATCH 1/2] ROE and reaction to threat buttons are now updated to reflect the state of the selected units --- client/demo.js | 10 ++++----- client/src/panels/unitcontrolpanel.ts | 32 +++++++++------------------ 2 files changed, 16 insertions(+), 26 deletions(-) diff --git a/client/demo.js b/client/demo.js index f6e70fe0..283b7166 100644 --- a/client/demo.js +++ b/client/demo.js @@ -11,7 +11,7 @@ const DEMO_UNIT_DATA = { }, flightData: { latitude: 37.20, - longitude: -115.8, + longitude: -115.80, altitude: 2000, heading: 0.5, speed: 300 @@ -52,8 +52,8 @@ const DEMO_UNIT_DATA = { targetAltitude: 3000 }, optionsData: { - ROE: "None", - reactionToThreat: "None", + ROE: "Designated", + reactionToThreat: "Abort", } }, ["2"]:{ @@ -95,8 +95,8 @@ const DEMO_UNIT_DATA = { targetAltitude: 3000 }, optionsData: { - ROE: "None", - reactionToThreat: "None", + ROE: "Designated", + reactionToThreat: "Abort", } }, ["3"]:{ diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index daa87e01..66dd70b5 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -3,6 +3,7 @@ import { Slider } from "../controls/slider"; import { aircraftDatabase } from "../units/aircraftdatabase"; import { groundUnitsDatabase } from "../units/groundunitsdatabase"; import { Aircraft, GroundUnit, Unit } from "../units/unit"; +import { UnitsManager } from "../units/unitsmanager"; import { Panel } from "./panel"; const ROEs: string[] = ["Free", "Designated free", "Designated", "Return", "Hold"]; @@ -28,42 +29,31 @@ export class UnitControlPanel extends Panel { this.#optionButtons["ROE"] = ROEs.map((option: string, index:number) => { var button = document.createElement("button"); button.title = option; - if ( index === 0 ) { - button.classList.add( "selected" ); - } - button.addEventListener("click", () => { - this.getElement().querySelector("#roe-buttons-container button.selected")?.classList.remove( "selected" ); - button.classList.add( "selected" ); - getUnitsManager().selectedUnitsSetROE(button.title); - }); + button.value = option; + button.addEventListener("click", () => {getUnitsManager().selectedUnitsSetROE(button.title);}); return button; }); this.#optionButtons["reactionToThreat"] = reactionsToThreat.map((option: string, index:number) => { var button = document.createElement("button"); button.title = option; - if ( index === 0 ) { - button.classList.add( "selected" ); - } - button.addEventListener("click", () => { - this.getElement().querySelector("#reaction-to-threat-buttons-container button.selected")?.classList.remove( "selected" ); - button.classList.add( "selected" ); - - getUnitsManager().selectedUnitsSetROE(button.title); - }); + button.value = option; + button.addEventListener("click", () => {getUnitsManager().selectedUnitsSetROE(button.title);}); return button; }); this.getElement().querySelector("#roe-buttons-container")?.append(...this.#optionButtons["ROE"]); this.getElement().querySelector("#reaction-to-threat-buttons-container")?.append(...this.#optionButtons["reactionToThreat"]); - document.addEventListener("unitsSelection", (e: CustomEvent) => {this.show(); this.update(e.detail)}); + document.addEventListener("unitUpdated", (e: CustomEvent) => {if (e.detail.getSelected()) this.update()}); + document.addEventListener("unitsSelection", (e: CustomEvent) => {this.show(); this.update()}); document.addEventListener("clearSelection", () => {this.hide()}); this.hide(); } - update(units: Unit[]) { + update() { + var units = getUnitsManager().getSelectedUnits(); if (this.getElement() != null && units.length > 0) { this.#showFlightControlSliders(units); @@ -87,11 +77,11 @@ export class UnitControlPanel extends Panel { })); this.#optionButtons["ROE"].forEach((button: HTMLButtonElement) => { - button.classList.toggle("active", units.every((unit: Unit) => unit.getOptionsData().ROE === button.value)) + button.classList.toggle("selected", units.every((unit: Unit) => unit.getOptionsData().ROE === button.value)) }); this.#optionButtons["reactionToThreat"].forEach((button: HTMLButtonElement) => { - button.classList.toggle("active", units.every((unit: Unit) => unit.getOptionsData().reactionToThreat === button.value)) + button.classList.toggle("selected", units.every((unit: Unit) => unit.getOptionsData().reactionToThreat === button.value)) }); } } From ca3ce60ac7a55757120495ee806b9b1a5318c281 Mon Sep 17 00:00:00 2001 From: dpassoni Date: Tue, 21 Mar 2023 10:45:27 +0100 Subject: [PATCH 2/2] Fixed --- client/demo.js | 2 +- client/src/controls/slider.ts | 59 +++++++++++++++++---------- client/src/panels/unitcontrolpanel.ts | 14 ++++--- 3 files changed, 48 insertions(+), 27 deletions(-) diff --git a/client/demo.js b/client/demo.js index 283b7166..e525059f 100644 --- a/client/demo.js +++ b/client/demo.js @@ -91,7 +91,7 @@ const DEMO_UNIT_DATA = { taskData: { currentTask: "Example task", activePath: undefined, - targetSpeed: 400, + targetSpeed: 300, targetAltitude: 3000 }, optionsData: { diff --git a/client/src/controls/slider.ts b/client/src/controls/slider.ts index b1564e9a..d2a17f81 100644 --- a/client/src/controls/slider.ts +++ b/client/src/controls/slider.ts @@ -9,6 +9,7 @@ export class Slider { #maxValueDiv: HTMLElement | null = null; #unit: string; #display: string = ""; + #dragged: boolean = false; constructor(ID: string, minValue: number, maxValue: number, unit: string, callback: CallableFunction) { this.#container = document.getElementById(ID); @@ -22,30 +23,13 @@ export class Slider { if (this.#slider != null) { this.#slider.addEventListener("input", (e: any) => this.#onInput()); + this.#slider.addEventListener("mousedown", (e: any) => this.#onStart()); this.#slider.addEventListener("mouseup", (e: any) => this.#onFinalize()); } this.#value = this.#container.querySelector("#value"); } } - #onValue() - { - if (this.#value != null && this.#slider != null) - this.#value.innerHTML = this.#minValue + Math.round(parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue)) + this.#unit - this.setActive(true); - } - - #onInput() - { - this.#onValue(); - } - - #onFinalize() - { - if (this.#slider != null) - this.#callback(this.#minValue + parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue)); - } - show() { if (this.#container != null) @@ -60,7 +44,7 @@ export class Slider { setActive(newActive: boolean) { - if (this.#container) + if (this.#container && !this.#dragged) { this.#container.classList.toggle("active", newActive); if (!newActive && this.#value != null) @@ -76,8 +60,41 @@ export class Slider { setValue(newValue: number) { + // Disable value setting if the user is dragging the element + if (!this.#dragged) + { + if (this.#slider != null) + this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * 100); + this.#onValue() + } + } + + getDragged() + { + return this.#dragged; + } + + #onValue() + { + if (this.#value != null && this.#slider != null) + this.#value.innerHTML = this.#minValue + Math.round(parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue)) + this.#unit + this.setActive(true); + } + + #onInput() + { + this.#onValue(); + } + + #onStart() + { + this.#dragged = true; + } + + #onFinalize() + { + this.#dragged = false; if (this.#slider != null) - this.#slider.value = String((newValue - this.#minValue) / (this.#maxValue - this.#minValue) * 100); - this.#onValue() + this.#callback(this.#minValue + parseFloat(this.#slider.value) / 100 * (this.#maxValue - this.#minValue)); } } \ No newline at end of file diff --git a/client/src/panels/unitcontrolpanel.ts b/client/src/panels/unitcontrolpanel.ts index 66dd70b5..4e5bc7e2 100644 --- a/client/src/panels/unitcontrolpanel.ts +++ b/client/src/panels/unitcontrolpanel.ts @@ -95,17 +95,21 @@ export class UnitControlPanel extends Panel { var targetAltitude = getUnitsManager().getSelectedUnitsTargetAltitude(); var targetSpeed = getUnitsManager().getSelectedUnitsTargetSpeed(); - if (unitsType != undefined && targetAltitude != undefined && targetSpeed != undefined) + if (unitsType != undefined) { if (["GroundUnit", "NavyUnit"].includes(unitsType)) this.#altitudeSlider.hide() this.#airspeedSlider.setMinMax(minSpeedValues[unitsType], maxSpeedValues[unitsType]); this.#altitudeSlider.setMinMax(minAltitudeValues[unitsType], maxAltitudeValues[unitsType]); - this.#airspeedSlider.setActive(true); - this.#airspeedSlider.setValue(targetSpeed * 1.94384); - this.#altitudeSlider.setActive(true); - this.#altitudeSlider.setValue(targetAltitude / 0.3048); + + this.#airspeedSlider.setActive(targetSpeed != undefined); + if (targetSpeed != undefined) + this.#airspeedSlider.setValue(targetSpeed * 1.94384); + + this.#altitudeSlider.setActive(targetAltitude != undefined); + if (targetAltitude != undefined) + this.#altitudeSlider.setValue(targetAltitude / 0.3048); } else { this.#airspeedSlider.setActive(false);