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

Merge pull request #113 from Pax1601/82-target-speed-and-altitude-sliders-dont-show-mixed-values-when-needed

Browse Source 
82 target speed and altitude sliders dont show mixed values when needed
This commit is contained in:
Pax1601 2023-03-21 14:40:21 +01:00 committed by GitHub
commit 09057c5d39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 64 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/demo.js
View File

@ -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"]:{
@ -91,12 +91,12 @@ const DEMO_UNIT_DATA = {
taskData: {
currentTask: "Example task",
activePath: undefined,
targetSpeed: 400,
targetSpeed: 300,
targetAltitude: 3000
},
optionsData: {
ROE: "None",
reactionToThreat: "None",
ROE: "Designated",
reactionToThreat: "Abort",
}
},
["3"]:{

59
client/src/controls/slider.ts
View File

@ -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 = <HTMLElement>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));
}
}

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

@ -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<Unit[]>) => {this.show(); this.update(e.detail)});
document.addEventListener("unitUpdated", (e: CustomEvent<Unit>) => {if (e.detail.getSelected()) this.update()});
document.addEventListener("unitsSelection", (e: CustomEvent<Unit[]>) => {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))
});
}
}
@ -105,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);