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

Disabled options and applied faded styling

Browse Source
This commit is contained in:
PeekabooSteam
2023-12-31 14:04:54 +00:00
parent 6d18e25232
commit 4d6bd6c6e9
5 changed files with 52 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,9 @@ export class Dropdown {
if (options != null) this.setOptions(options);
(this.#container.querySelector(".ol-select-value") as HTMLElement)?.addEventListener("click", (ev) => { this.#toggle(); });
(this.#container.querySelector(".ol-select-value") as HTMLElement)?.addEventListener("click", (ev) => {
if (!this.#container.hasAttribute("disabled") && !this.#container.closest("disabled")) this.#toggle();
});
document.addEventListener("click", (ev) => {
if (!(this.#value.contains(ev.target as Node) || this.#options.contains(ev.target as Node) || this.#container.contains(ev.target as Node))) {

27
client/src/mission/missionmanager.ts
View File

@@ -26,13 +26,16 @@ export class MissionManager {
#coalitions: {red: string[], blue: string[]} = {red: [], blue: []};
constructor() {
document.addEventListener("showCommandModeDialog", () => this.showCommandModeDialog());
document.addEventListener("applycommandModeOptions", () => this.#applycommandModeOptions());
document.addEventListener("showCommandModeDialog", () => this.showCommandModeDialog());
document.addEventListener("toggleSpawnRestrictions", (ev:CustomEventInit) => {
this.#toggleSpawnRestrictions(ev.detail._element.checked)
});
/* command-mode settings dialog */
this.#commandModeDialog = document.querySelector("#command-mode-settings-dialog") as HTMLElement;
this.#commandModeErasDropdown = new Dropdown("command-mode-era-options", () => {});
}
/** Update location of bullseyes
@@ -211,6 +214,10 @@ export class MissionManager {
}
showCommandModeDialog() {
const options = this.getCommandModeOptions()
const { restrictSpawns, restrictToCoalition, setupTime } = options;
this.#toggleSpawnRestrictions(restrictSpawns);
/* Create the checkboxes to select the unit eras */
var eras = aircraftDatabase.getEras().concat(helicopterDatabase.getEras()).concat(groundUnitDatabase.getEras()).concat(navyUnitDatabase.getEras());
eras = eras.filter((item: string, index: number) => eras.indexOf(item) === index).sort();
@@ -226,11 +233,11 @@ export class MissionManager {
const redSpawnPointsInput = this.#commandModeDialog.querySelector("#red-spawn-points")?.querySelector("input") as HTMLInputElement;
const setupTimeInput = this.#commandModeDialog.querySelector("#setup-time")?.querySelector("input") as HTMLInputElement;
restrictSpawnsCheckbox.checked = this.getCommandModeOptions().restrictSpawns;
restrictToCoalitionCheckbox.checked = this.getCommandModeOptions().restrictToCoalition;
blueSpawnPointsInput.value = String(this.getCommandModeOptions().spawnPoints.blue);
redSpawnPointsInput.value = String(this.getCommandModeOptions().spawnPoints.red);
setupTimeInput.value = String(Math.floor(this.getCommandModeOptions().setupTime / 60.0));
restrictSpawnsCheckbox.checked = restrictSpawns;
restrictToCoalitionCheckbox.checked = restrictToCoalition;
blueSpawnPointsInput.value = String(options.spawnPoints.blue);
redSpawnPointsInput.value = String(options.spawnPoints.red);
setupTimeInput.value = String(Math.floor(setupTime / 60.0));
}
#applycommandModeOptions() {
@@ -309,4 +316,10 @@ export class MissionManager {
};
xhr.send();
}
#toggleSpawnRestrictions(restrictionsEnabled:boolean) {
this.#commandModeDialog.querySelectorAll("input, label, .ol-select").forEach( el => {
if (!el.closest("#restrict-spawns")) el.toggleAttribute("disabled", !restrictionsEnabled);
});
}
}