mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
More work on advanced settings dialog
This commit is contained in:
Pax1601
parent
316261e01e
commit
7eee469bed
@ -1,4 +1,3 @@
|
||||
|
||||
/* Page style */
|
||||
#map-container {
|
||||
height: 100%;
|
||||
@ -14,32 +13,30 @@
|
||||
}
|
||||
|
||||
#olympus-toolbar-summary {
|
||||
background-image: url( "/images/icon-round.png" );
|
||||
background-image: url("/images/icon-round.png");
|
||||
background-position: 25px 20px;
|
||||
background-repeat: no-repeat;
|
||||
background-size:36px 36px;
|
||||
background-size: 36px 36px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-indent: 44px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
dl.ol-data-grid {
|
||||
align-items: center;
|
||||
display:flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin:0;
|
||||
margin: 0;
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
dl.ol-data-grid dt {
|
||||
width:60%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
dl.ol-data-grid dd {
|
||||
width:40%;
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
|
||||
@ -48,24 +45,23 @@ dl.ol-data-grid dt.icon {
|
||||
}
|
||||
|
||||
dl.ol-data-grid dt.icon::before {
|
||||
content: url( /images/icons/speed.svg );
|
||||
display:inline-block;
|
||||
filter:invert(100%);
|
||||
content: url(/images/icons/speed.svg );
|
||||
display: inline-block;
|
||||
filter: invert(100%);
|
||||
width: 20px;
|
||||
translate:-20px 2px;
|
||||
translate: -20px 2px;
|
||||
}
|
||||
|
||||
|
||||
dl.ol-data-grid dt.icon-speed::before {
|
||||
content: url( /images/icons/speed.svg );
|
||||
content: url(/images/icons/speed.svg );
|
||||
}
|
||||
|
||||
|
||||
dl.ol-data-grid dt.icon-altitude::before {
|
||||
content: url( /images/icons/altitude.svg );
|
||||
content: url(/images/icons/altitude.svg );
|
||||
}
|
||||
|
||||
|
||||
dl.ol-data-grid dd {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
@ -73,56 +69,50 @@ dl.ol-data-grid dd {
|
||||
}
|
||||
|
||||
.br-info::after {
|
||||
content: attr( data-bearing ) '\00B0 / ' attr( data-distance ) attr( data-distance-units );
|
||||
content: attr(data-bearing) '\00B0 / ' attr(data-distance) attr(data-distance-units);
|
||||
}
|
||||
|
||||
.br-info[data-message]::after {
|
||||
content: attr( data-message );
|
||||
content: attr(data-message);
|
||||
}
|
||||
|
||||
.coordinates::after {
|
||||
content: attr( data-dd ) "\00b0 " attr( data-mm ) "'" attr( data-ss ) "." attr( data-sss ) '"' attr( data-label );
|
||||
content: attr(data-dd) "\00b0 " attr(data-mm) "'" attr(data-ss) "." attr(data-sss) '"' attr(data-label);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.ol-button-box {
|
||||
column-gap: 6px;
|
||||
display:flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin:5px 0;
|
||||
margin: 5px 0;
|
||||
row-gap: 5px;
|
||||
}
|
||||
|
||||
.ol-button-box button {
|
||||
background-repeat: no-repeat;;
|
||||
border:1px solid var( --accent-light-blue );
|
||||
color: var( --accent-light-blue );
|
||||
background-repeat: no-repeat;
|
||||
;
|
||||
border: 1px solid var(--accent-light-blue);
|
||||
color: var(--accent-light-blue);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.ol-dialog {
|
||||
align-self: center;
|
||||
background-color: var( --background-slate-blue );
|
||||
color:white;
|
||||
background-color: var(--background-slate-blue);
|
||||
color: white;
|
||||
justify-self: center;
|
||||
position: absolute;
|
||||
z-index:1000;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.ol-panel.ol-dialog {
|
||||
padding:20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.ol-dialog-close {
|
||||
cursor: pointer;
|
||||
font-size:16px;
|
||||
font-weight: var( --font-weight-bolder );
|
||||
font-size: 16px;
|
||||
font-weight: var(--font-weight-bolder);
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 25px;
|
||||
@ -133,12 +123,12 @@ dl.ol-data-grid dd {
|
||||
}
|
||||
|
||||
.ol-dialog-header {
|
||||
border-bottom:1px solid var( --background-grey );
|
||||
padding-bottom:10px;
|
||||
border-bottom: 1px solid var(--background-grey);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.ol-dialog-footer {
|
||||
border-top: 1px solid var( --background-grey );
|
||||
border-top: 1px solid var(--background-grey);
|
||||
padding-top: 15px;
|
||||
display: flex;
|
||||
row-gap: 10px;
|
||||
@ -157,46 +147,67 @@ dl.ol-data-grid dd {
|
||||
}
|
||||
|
||||
.ol-checkbox input[type="checkbox"] {
|
||||
appearance:none;
|
||||
appearance: none;
|
||||
background-color: transparent;
|
||||
border:none;
|
||||
margin:0;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.ol-checkbox input[type="checkbox"]::before {
|
||||
align-self:center;
|
||||
background-image: url( "/images/icons/square-check-solid.svg" );
|
||||
align-self: center;
|
||||
background-image: url("/images/icons/square-check-solid.svg");
|
||||
background-repeat: no-repeat;
|
||||
content: "";
|
||||
filter: invert( 100% );
|
||||
display:flex;
|
||||
height:16px;
|
||||
margin-right:10px;
|
||||
width:16px;
|
||||
filter: invert(100%);
|
||||
display: flex;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
|
||||
.ol-checkbox input[type="checkbox"]:checked::before {
|
||||
background-image: url( "/images/icons/square-regular.svg" );
|
||||
background-image: url("/images/icons/square-regular.svg");
|
||||
}
|
||||
|
||||
.ol-text-input input {
|
||||
height: 40px;
|
||||
border-radius: 5px;
|
||||
color: var(--background-offwhite);
|
||||
background-color: var(--background-grey);
|
||||
border: 1px solid var(--background-grey);
|
||||
border-radius: var(--border-radius-sm);
|
||||
text-align: center;
|
||||
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
appearance: textfield;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[class|="ol-button"] {
|
||||
align-items: center;
|
||||
background-repeat: no-repeat;
|
||||
display:flex;
|
||||
display: flex;
|
||||
font-weight: normal;
|
||||
padding:8px 10px;
|
||||
padding: 8px 10px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
[class|="ol-button"]::before {
|
||||
margin-right:8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.ol-button-close {
|
||||
background: transparent;
|
||||
border:1px solid white;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
.ol-button-close::before {
|
||||
@ -213,16 +224,16 @@ dl.ol-data-grid dd {
|
||||
}
|
||||
|
||||
.ol-button-settings {
|
||||
background-color: var( --background-slate-blue );
|
||||
background-color: var(--background-slate-blue);
|
||||
}
|
||||
|
||||
.ol-button-settings::before {
|
||||
background-image: url( "/images/icons/gears-solid.svg" );
|
||||
background-position:0 50%;
|
||||
background-size:24px 24px;
|
||||
background-image: url("/images/icons/gears-solid.svg");
|
||||
background-position: 0 50%;
|
||||
background-size: 24px 24px;
|
||||
content: "";
|
||||
display:flex;
|
||||
filter: invert( 100% );
|
||||
display: flex;
|
||||
filter: invert(100%);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
@ -348,6 +348,7 @@ nav.ol-panel> :last-child {
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
row-gap: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ol-panel .ol-group.wrap {
|
||||
|
||||
1
client/src/@types/unit.d.ts
vendored
1
client/src/@types/unit.d.ts
vendored
@ -46,6 +46,7 @@ interface TaskData {
|
||||
radioOn: boolean;
|
||||
TACANOn: boolean;
|
||||
radioFrequency: number;
|
||||
radioCallsign: number;
|
||||
TACANChannel: number;
|
||||
TACANXY: string;
|
||||
TACANCallsign: string;
|
||||
|
||||
@ -5,7 +5,8 @@ export class Dropdown {
|
||||
#callback: CallableFunction;
|
||||
#defaultValue: string;
|
||||
#optionsList: string[] = [];
|
||||
|
||||
#index: number = 0;
|
||||
|
||||
constructor(ID: string, callback: CallableFunction, options: string[] | null = null)
|
||||
{
|
||||
this.#element = <HTMLElement>document.getElementById(ID);
|
||||
@ -13,69 +14,39 @@ export class Dropdown {
|
||||
this.#value = <HTMLElement>this.#element.querySelector(".ol-select-value");
|
||||
this.#defaultValue = this.#value.innerText;
|
||||
this.#callback = callback;
|
||||
|
||||
|
||||
if (options != null) {
|
||||
this.setOptions(options);
|
||||
}
|
||||
|
||||
this.#value.addEventListener( "click", ev => {
|
||||
|
||||
this.#element.classList.toggle( "is-open" );
|
||||
this.#clip();
|
||||
|
||||
});
|
||||
|
||||
this.#element.addEventListener("mouseleave", ev => {
|
||||
this.#close();
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
#clip() {
|
||||
|
||||
const options = this.#options;
|
||||
const bounds = options.getBoundingClientRect();
|
||||
|
||||
this.#element.dataset.position = ( bounds.bottom > window.innerHeight ) ? "top" : "";
|
||||
|
||||
}
|
||||
|
||||
|
||||
#close() {
|
||||
this.#element.classList.remove( "is-open" );
|
||||
this.#element.dataset.position = "";
|
||||
}
|
||||
|
||||
|
||||
#open() {
|
||||
this.#element.classList.add( "is-open" );
|
||||
}
|
||||
|
||||
|
||||
#toggle() {
|
||||
|
||||
if ( this.#element.classList.contains( "is-open" ) ) {
|
||||
this.#close();
|
||||
} else {
|
||||
this.#open();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
setOptions(optionsList: string[])
|
||||
{
|
||||
this.#optionsList = optionsList;
|
||||
this.#options.replaceChildren(...optionsList.map((option: string) => {
|
||||
this.#options.replaceChildren(...optionsList.map((option: string, idx: number) => {
|
||||
var div = document.createElement("div");
|
||||
var button = document.createElement("button");
|
||||
button.textContent = option;
|
||||
div.appendChild(button);
|
||||
|
||||
if (option === this.#defaultValue)
|
||||
this.#index = idx;
|
||||
|
||||
button.addEventListener("click", (e: MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
this.#value.innerText = option;
|
||||
this.#close();
|
||||
this.#callback( option, e );
|
||||
this.#callback(option, e);
|
||||
this.#index = idx;
|
||||
});
|
||||
return div;
|
||||
}));
|
||||
@ -87,6 +58,8 @@ export class Dropdown {
|
||||
{
|
||||
var option = this.#optionsList[idx];
|
||||
this.#value.innerText = option;
|
||||
this.#index = idx;
|
||||
this.#close();
|
||||
this.#callback(option);
|
||||
}
|
||||
}
|
||||
@ -95,4 +68,35 @@ export class Dropdown {
|
||||
this.#options.replaceChildren();
|
||||
this.#value.innerText = this.#defaultValue;
|
||||
}
|
||||
|
||||
getValue() {
|
||||
return this.#value.innerText;
|
||||
}
|
||||
|
||||
getIndex() {
|
||||
return this.#index;
|
||||
}
|
||||
|
||||
#clip() {
|
||||
const options = this.#options;
|
||||
const bounds = options.getBoundingClientRect();
|
||||
this.#element.dataset.position = ( bounds.bottom > window.innerHeight ) ? "top" : "";
|
||||
}
|
||||
|
||||
#close() {
|
||||
this.#element.classList.remove( "is-open" );
|
||||
this.#element.dataset.position = "";
|
||||
}
|
||||
|
||||
#open() {
|
||||
this.#element.classList.add( "is-open" );
|
||||
}
|
||||
|
||||
#toggle() {
|
||||
if ( this.#element.classList.contains( "is-open" ) ) {
|
||||
this.#close();
|
||||
} else {
|
||||
this.#open();
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,5 @@
|
||||
import { getUnitsManager } from "..";
|
||||
import { Dropdown } from "../controls/dropdown";
|
||||
import { Slider } from "../controls/slider";
|
||||
import { dataPointMap } from "../other/utils";
|
||||
import { aircraftDatabase } from "../units/aircraftdatabase";
|
||||
@ -20,6 +21,9 @@ const altitudeIncrements: { [key: string]: number } = { Aircraft: 2500, Helicopt
|
||||
export class UnitControlPanel extends Panel {
|
||||
#altitudeSlider: Slider;
|
||||
#airspeedSlider: Slider;
|
||||
#TACANXYDropdown: Dropdown;
|
||||
#radioDecimalsDropdown: Dropdown;
|
||||
#radioCallsignDropdown: Dropdown;
|
||||
#expectedAltitude: number = -1;
|
||||
#expectedSpeed: number = -1;
|
||||
#optionButtons: { [key: string]: HTMLButtonElement[] } = {}
|
||||
@ -39,6 +43,13 @@ export class UnitControlPanel extends Panel {
|
||||
getUnitsManager().selectedUnitsSetSpeed(value / 1.94384)
|
||||
});
|
||||
|
||||
/* Advanced settings dropdowns */
|
||||
this.#TACANXYDropdown = new Dropdown("TACAN-XY", () => {});
|
||||
this.#TACANXYDropdown.setOptions(["X", "Y"]);
|
||||
this.#radioDecimalsDropdown = new Dropdown("radio-decimals", () => {});
|
||||
this.#radioDecimalsDropdown.setOptions([".000", ".250", ".500", ".750"]);
|
||||
this.#radioCallsignDropdown = new Dropdown("radio-callsign", () => {});
|
||||
|
||||
/* Option buttons */
|
||||
this.#optionButtons["ROE"] = ROEs.map((option: string, index: number) => {
|
||||
var button = document.createElement("button");
|
||||
@ -64,6 +75,11 @@ export class UnitControlPanel extends Panel {
|
||||
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() });
|
||||
document.addEventListener("applyAdvancedSettings", () => {this.#applyAdvancedSettings();})
|
||||
document.addEventListener("showAdvancedSettings", () => {
|
||||
this.#updateAdvancedSettingsDialog(getUnitsManager().getSelectedUnits());
|
||||
this.#advancedSettingsDialog.classList.remove("hide");
|
||||
})
|
||||
|
||||
this.hide();
|
||||
}
|
||||
@ -97,7 +113,6 @@ export class UnitControlPanel extends Panel {
|
||||
var units = getUnitsManager().getSelectedUnits();
|
||||
if (this.getElement() != null && units.length > 0) {
|
||||
this.#showFlightControlSliders(units);
|
||||
this.#updateAdvancedSettingsDialog(units);
|
||||
|
||||
this.getElement().querySelector("#selected-units-container")?.replaceChildren(...units.map((unit: Unit, index: number) => {
|
||||
let database: UnitDatabase | null;
|
||||
@ -195,10 +210,15 @@ export class UnitControlPanel extends Panel {
|
||||
(<HTMLElement>this.#advancedSettingsDialog.querySelector("#unit-name")).innerText = unit.getBaseData().unitName;
|
||||
|
||||
if (getUnitsManager().getSelectedUnits().length == 1){
|
||||
this.#radioCallsignDropdown.setOptions(["Enfield", "Springfield", "Uzi", "Colt", "Dodge", "Ford", "Chevy", "Pontiac"]);
|
||||
this.#radioCallsignDropdown.selectValue(unit.getTaskData().radioCallsign);
|
||||
|
||||
var roles = aircraftDatabase.getByName(unit.getBaseData().name)?.loadouts.map((loadout) => {return loadout.roles})
|
||||
if (roles != undefined && Array.prototype.concat.apply([], roles)?.includes("Tanker")){
|
||||
this.#advancedSettingsDialog.querySelector("#tanker-checkbox")?.querySelector("input")?.setAttribute('checked', String(unit.getTaskData().isTanker));
|
||||
this.#advancedSettingsDialog.querySelector("#tanker-checkbox")?.classList.remove("hide");
|
||||
this.#radioCallsignDropdown.setOptions(["Texaco", "Arco", "Shell"]);
|
||||
this.#radioCallsignDropdown.selectValue(unit.getTaskData().radioCallsign);
|
||||
}
|
||||
else {
|
||||
this.#advancedSettingsDialog.querySelector("#tanker-checkbox")?.classList.add("hide");
|
||||
@ -207,10 +227,32 @@ export class UnitControlPanel extends Panel {
|
||||
if (roles != undefined && Array.prototype.concat.apply([], roles)?.includes("AWACS")){
|
||||
this.#advancedSettingsDialog.querySelector("#AWACS-checkbox")?.querySelector("input")?.setAttribute('checked', String(unit.getTaskData().isAWACS));
|
||||
this.#advancedSettingsDialog.querySelector("#AWACS-checkbox")?.classList.remove("hide");
|
||||
this.#radioCallsignDropdown.setOptions(["Overlord", "Magic", "Wizard", "Focus", "Darkstar"]);
|
||||
this.#radioCallsignDropdown.selectValue(unit.getTaskData().radioCallsign);
|
||||
} else {
|
||||
this.#advancedSettingsDialog.querySelector("#AWACS-checkbox")?.classList.add("hide");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#applyAdvancedSettings()
|
||||
{
|
||||
this.#advancedSettingsDialog.classList.add("hide");
|
||||
|
||||
const isTanker = <boolean> this.#advancedSettingsDialog.querySelector("#tanker-checkbox")?.querySelector("input")?.checked;
|
||||
const isAWACS= <boolean> this.#advancedSettingsDialog.querySelector("#AWACS-checkbox")?.querySelector("input")?.checked;
|
||||
const TACANChannel = Number(this.#advancedSettingsDialog.querySelector("#TACAN-channel")?.querySelector("input")?.value);
|
||||
const TACANXY = this.#TACANXYDropdown.getValue();
|
||||
const TACANCallsign = <string> this.#advancedSettingsDialog.querySelector("#tacan-callsign")?.querySelector("input")?.value
|
||||
const radioMHz = Number(this.#advancedSettingsDialog.querySelector("#radio-mhz")?.querySelector("input")?.value);
|
||||
const radioDecimals = this.#radioDecimalsDropdown.getValue();
|
||||
const radioCallsign = this.#radioCallsignDropdown.getIndex();
|
||||
|
||||
var radioFrequency = (radioMHz * 1000 + Number(radioDecimals.substring(1))) * 1000;
|
||||
|
||||
var units = getUnitsManager().getSelectedUnits();
|
||||
if (units.length > 0)
|
||||
units[0].setAdvancedOptions(isTanker, isAWACS, TACANChannel, TACANXY, TACANCallsign, radioFrequency, radioCallsign);
|
||||
}
|
||||
}
|
||||
@ -183,14 +183,18 @@ export function refuel(ID: number) {
|
||||
POST(data, () => { });
|
||||
}
|
||||
|
||||
export function setTanker(ID: number, state: boolean) {
|
||||
var command = { "ID": ID, "state": state };
|
||||
var data = { "setIsTanker": command }
|
||||
POST(data, () => { });
|
||||
}
|
||||
export function setAdvacedOptions(ID: number, isTanker: boolean, isAWACS: boolean, TACANChannel: number, TACANXY: string, TACANCallsign: string, radioFrequency: number, radioCallsign: number)
|
||||
{
|
||||
var command = { "ID": ID,
|
||||
"isTanker": isTanker,
|
||||
"isAWACS": isAWACS,
|
||||
"TACANChannel": TACANChannel,
|
||||
"TACANXY": TACANXY,
|
||||
"TACANCallsign": TACANCallsign,
|
||||
"radioFrequency": radioFrequency,
|
||||
"radioCallsign": radioCallsign
|
||||
};
|
||||
|
||||
export function setAWACS(ID: number, state: boolean) {
|
||||
var command = { "ID": ID, "state": state };
|
||||
var data = { "setIsAWACS": command }
|
||||
var data = { "setAdvancedOptions": command };
|
||||
POST(data, () => { });
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,7 @@
|
||||
import { Marker, LatLng, Polyline, Icon, DivIcon } from 'leaflet';
|
||||
import { getMap, getUnitsManager } from '..';
|
||||
import { rad2deg } from '../other/utils';
|
||||
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, deleteUnit, getUnits, landAt, setAltitude, setReactionToThreat, setROE, setSpeed, refuel, setTanker, setAWACS } from '../server/server';
|
||||
import { addDestination, attackUnit, changeAltitude, changeSpeed, createFormation as setLeader, deleteUnit, getUnits, landAt, setAltitude, setReactionToThreat, setROE, setSpeed, refuel, setAdvacedOptions } from '../server/server';
|
||||
import { aircraftDatabase } from './aircraftdatabase';
|
||||
import { groundUnitsDatabase } from './groundunitsdatabase';
|
||||
|
||||
@ -55,6 +55,7 @@ export class Unit extends Marker {
|
||||
radioOn: false,
|
||||
TACANOn: false,
|
||||
radioFrequency: 0,
|
||||
radioCallsign: 0,
|
||||
TACANChannel: 0,
|
||||
TACANXY: "X",
|
||||
TACANCallsign: "",
|
||||
@ -375,12 +376,8 @@ export class Unit extends Marker {
|
||||
refuel(this.ID);
|
||||
}
|
||||
|
||||
toggleTanker() {
|
||||
setTanker(this.ID, !this.getTaskData().isTanker);
|
||||
}
|
||||
|
||||
toggleAWACS() {
|
||||
setAWACS(this.ID, !this.getTaskData().isAWACS);
|
||||
setAdvancedOptions(isTanker: boolean, isAWACS: boolean, TACANChannel: number, TACANXY: string, TACANcallsign: string, radioFrequency: number, radioCallsign: number) {
|
||||
setAdvacedOptions(this.ID, isTanker, isAWACS, TACANChannel, TACANXY, TACANcallsign, radioFrequency, radioCallsign);
|
||||
}
|
||||
|
||||
#onClick(e: any) {
|
||||
|
||||
@ -334,24 +334,6 @@ export class UnitsManager {
|
||||
}
|
||||
}
|
||||
|
||||
selectedUnitsToggleTanker()
|
||||
{
|
||||
var selectedUnits = this.getSelectedUnits();
|
||||
for (let idx in selectedUnits)
|
||||
{
|
||||
selectedUnits[idx].toggleTanker();
|
||||
}
|
||||
}
|
||||
|
||||
selectedUnitsToggleAWACS()
|
||||
{
|
||||
var selectedUnits = this.getSelectedUnits();
|
||||
for (let idx in selectedUnits)
|
||||
{
|
||||
selectedUnits[idx].toggleAWACS();
|
||||
}
|
||||
}
|
||||
|
||||
copyUnits()
|
||||
{
|
||||
this.#copiedUnits = this.getSelectedUnits();
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div id="app-summary">
|
||||
<h2>DCS Olympus</h2>
|
||||
<h4>Dynamic Unit Command</h4>
|
||||
<div class="app-version">Version <span class="app-version-number">v0.1.0</span></div>
|
||||
<div class="app-version">Version <span class="app-version-number">v0.1.2</span></div>
|
||||
</div>
|
||||
|
||||
<div id="legal-stuff">
|
||||
@ -16,171 +16,3 @@
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="advanced-settings-dialog" class="ol-panel ol-dialog hide">
|
||||
<div class="ol-dialog-close" data-on-click="closeDialog"></div>
|
||||
|
||||
<div class="ol-dialog-header">
|
||||
<h3 id="unit-name">Olympus 1-1</h3>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-content">
|
||||
<form>
|
||||
<!--
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Use ECM when available
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit jettison
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit afterburner
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit A/A
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit A/G
|
||||
</label>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div id="tanker-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox"/>
|
||||
Tanker
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="AWACS-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
AWACS
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="TACAN-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Enable TACAN:
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<div class="ol-select">
|
||||
<div class="ol-select-value">40</div>
|
||||
<div class="ol-select-options">
|
||||
<div>
|
||||
<button>40</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>41</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>42</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>43</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>44</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>45</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-select">
|
||||
<div class="ol-select-value">X</div>
|
||||
<div class="ol-select-options">
|
||||
<div>
|
||||
<button>X</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>Y</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="radio-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Use radio frequency:
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<div class="ol-select">
|
||||
<div class="ol-select-value">120</div>
|
||||
<div class="ol-select-options">
|
||||
<div>
|
||||
<button>120</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>121</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>122</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>123</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>124</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>125</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-select">
|
||||
<div class="ol-select-value">.750</div>
|
||||
<div class="ol-select-options">
|
||||
<div>
|
||||
<button>.000</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>.250</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>.500</button>
|
||||
</div>
|
||||
<div>
|
||||
<button>.750</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-footer">
|
||||
<button class="ol-button-apply" data-on-click="applyDialog">Apply</button>
|
||||
<button class="ol-button-close" data-on-click="closeDialog">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -55,10 +55,145 @@
|
||||
<hr />
|
||||
|
||||
<div id="advanced-settings-div">
|
||||
<button id="advanced-settings-button" class="ol-button-settings" data-on-click="toggleElements" data-on-click-params='{"selector": "#advanced-settings-dialog"}'>Adjust settings</button>
|
||||
<button id="advanced-settings-button" class="ol-button-settings" data-on-click="showAdvancedSettings">Adjust settings</button>
|
||||
<hr />
|
||||
</div>
|
||||
|
||||
<button class="ol-button-warning" data-on-click="deleteSelectedUnits">Delete unit</button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div id="advanced-settings-dialog" class="ol-panel ol-dialog hide">
|
||||
<div class="ol-dialog-close" data-on-click="closeDialog"></div>
|
||||
|
||||
<div class="ol-dialog-header">
|
||||
<h3 id="unit-name">Olympus 1-1</h3>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-content">
|
||||
<form onsubmit="return false">
|
||||
<!--
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Use ECM when available
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit jettison
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit afterburner
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit A/A
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Prohibit A/G
|
||||
</label>
|
||||
</div>
|
||||
-->
|
||||
|
||||
<div id="tanker-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox"/>
|
||||
Operate as tanker
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="AWACS-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
<input type="checkbox" />
|
||||
Operate as AWACS
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="TACAN-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
A/A TACAN:
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="TACAN-channel" class="ol-text-input">
|
||||
<input type="number" min="1" max="126" step="1" value="40">
|
||||
</div>
|
||||
|
||||
<div id="TACAN-XY" class="ol-select">
|
||||
<div class="ol-select-value">X</div>
|
||||
<div class="ol-select-options">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
Morse:
|
||||
</label>
|
||||
|
||||
<div id="TACAN-callsign" class="ol-text-input">
|
||||
<input type="text" maxlength="3" value="TKR" style="width: 50px">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<div id="radio-checkbox" class="ol-checkbox">
|
||||
<label>
|
||||
Radio frequency:
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div id="radio-mhz" class="ol-text-input">
|
||||
<input type="number" min="1" max="999" step="1" value="260">
|
||||
</div>
|
||||
|
||||
<div id="radio-decimals" class="ol-select">
|
||||
<div class="ol-select-value">.000</div>
|
||||
<div class="ol-select-options">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ol-group">
|
||||
<label>
|
||||
Radio callsign:
|
||||
</label>
|
||||
|
||||
<div id="radio-callsign" class="ol-select">
|
||||
<div class="ol-select-value"></div>
|
||||
<div class="ol-select-options">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label>
|
||||
-
|
||||
</label>
|
||||
|
||||
<div id="radio-callsign-number" class="ol-text-input">
|
||||
<input type="number" min="1" max="999" step="1" value="1">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="ol-dialog-footer ol-group">
|
||||
<button class="ol-button-apply" data-on-click="applyAdvancedSettings">Apply</button>
|
||||
<button class="ol-button-close" data-on-click="closeDialog">Close</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Loading…
x
Reference in New Issue
Block a user