More work on advanced settings dialog

client/public/stylesheets/layout.css

@@ -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 );
+	content: url(/images/icons/speed.svg );
-	display:inline-block;
+	display: inline-block;
-	filter:invert(100%);
+	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;;
+	background-repeat: no-repeat;
-	border:1px solid var( --accent-light-blue );
+	;
-	color: var( --accent-light-blue );
+	border: 1px solid var(--accent-light-blue);
+	color: var(--accent-light-blue);
 }
 
-
-
-
-
 .ol-dialog {
 	align-self: center;
-	background-color: var( --background-slate-blue );
+	background-color: var(--background-slate-blue);
-	color:white;
+	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-size: 16px;
-	font-weight: var( --font-weight-bolder );
+	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 );
+	border-bottom: 1px solid var(--background-grey);
-	padding-bottom:10px;
+	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;
+	border: none;
-	margin:0;
+	margin: 0;
 }
 
 .ol-checkbox input[type="checkbox"]::before {
-	align-self:center;
+	align-self: center;
-	background-image: url( "/images/icons/square-check-solid.svg" );
+	background-image: url("/images/icons/square-check-solid.svg");
 	background-repeat: no-repeat;
 	content: "";
-	filter: invert( 100% );
+	filter: invert(100%);
-	display:flex;
+	display: flex;
-	height:16px;
+	height: 16px;
-	margin-right:10px;
+	margin-right: 10px;
-	width:16px;
+	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-image: url("/images/icons/gears-solid.svg");
-	background-position:0 50%;
+	background-position: 0 50%;
-	background-size:24px 24px;
+	background-size: 24px 24px;
 	content: "";
-	display:flex;
+	display: flex;
-	filter: invert( 100% );
+	filter: invert(100%);
 	height: 24px;
 	width: 24px;
 }

client/public/stylesheets/olympus.css

@@ -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 {

client/src/@types/unit.d.ts

@@ -46,6 +46,7 @@ interface TaskData {
     radioOn: boolean;
 	TACANOn: boolean;
 	radioFrequency: number;
+    radioCallsign: number;
 	TACANChannel: number;
 	TACANXY: string;
 	TACANCallsign: string;

client/src/controls/dropdown.ts

@@ -5,6 +5,7 @@ export class Dropdown {
     #callback: CallableFunction;
     #defaultValue: string;
     #optionsList: string[] = [];
+    #index: number = 0;
 
     constructor(ID: string, callback: CallableFunction, options: string[] | null = null)
     {
@@ -19,63 +20,33 @@ export class Dropdown {
         }          
 
         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();
+        }
+    }
 }

client/src/panels/unitcontrolpanel.ts

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

client/src/server/server.ts

@@ -183,14 +183,18 @@ export function refuel(ID: number) {
     POST(data, () => { });
 }
 
-export function setTanker(ID: number, state: boolean) {
+export function setAdvacedOptions(ID: number, isTanker: boolean, isAWACS: boolean, TACANChannel: number, TACANXY: string, TACANCallsign: string, radioFrequency: number, radioCallsign: number)
-    var command = { "ID": ID, "state": state };
+{
-    var data = { "setIsTanker": command }
+    var command = { "ID": ID,
-    POST(data, () => { });
+                    "isTanker": isTanker,
-}
+                    "isAWACS": isAWACS,
+                    "TACANChannel": TACANChannel,
+                    "TACANXY":  TACANXY,
+                    "TACANCallsign": TACANCallsign,
+                    "radioFrequency": radioFrequency,
+                    "radioCallsign": radioCallsign 
+    };
 
-export function setAWACS(ID: number, state: boolean) {
+    var data = { "setAdvancedOptions": command };
-    var command = { "ID": ID, "state": state };
-    var data = { "setIsAWACS": command }
     POST(data, () => { });
 }

client/src/units/unit.ts

@@ -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() {
+    setAdvancedOptions(isTanker: boolean, isAWACS: boolean, TACANChannel: number, TACANXY: string, TACANcallsign: string, radioFrequency: number, radioCallsign: number) {
-        setTanker(this.ID, !this.getTaskData().isTanker);
+        setAdvacedOptions(this.ID, isTanker, isAWACS, TACANChannel, TACANXY, TACANcallsign, radioFrequency, radioCallsign);
-    }
-
-    toggleAWACS() {
-        setAWACS(this.ID, !this.getTaskData().isAWACS);
     }
 
     #onClick(e: any) {

client/src/units/unitsmanager.ts

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

client/views/dialogs.ejs

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

client/views/unitcontrolpanel.ejs

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