This commit is contained in:
dpassoni 2023-03-21 10:45:27 +01:00
parent 79d8ca260a
commit ca3ce60ac7
3 changed files with 48 additions and 27 deletions

View File

@ -91,7 +91,7 @@ const DEMO_UNIT_DATA = {
taskData: {
currentTask: "Example task",
activePath: undefined,
targetSpeed: 400,
targetSpeed: 300,
targetAltitude: 3000
},
optionsData: {

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));
}
}

View File

@ -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);