DCSOlympus/client/views/unitcontrolpanel.ejs

<div id="unit-control-panel" class="ol-panel ol-panel-padding-lg"> 

    <h3>Selected Units</h3>

    <div id="unit-selection">

        <div id="selected-units-container" class="ol-scrollable">
            <!-- This is where all the unit selection buttons will be shown-->
            <!-- <button class="pill highlight-coalition" data-coalition="blue" data-short-label="18">Olympus 1-1</button> -->
        </div>

        <hr />

        <div id="flight-data">
            <h4>Flight controls</h4>
            <div class="slider-container flight-control-slider" id="airspeed-slider">
                <dl class="ol-data-grid">
                    <dt>Speed</dt>
                    <dd class="flight-control-value" id="value">451kts</dd>
                </dl>
                <input type="range" min="0" max="100" value="0" class="slider">
            </div>

            <div class="slider-container flight-control-slider" id="altitude-slider">
                <dl class="ol-data-grid">
                    <dt>Altitude</dt>
                    <dd class="flight-control-value" id="value">21,594ft</dd>
                </dl>
                <input type="range" min="0" max="100" value="0" class="slider">
            </div>
            
            <h5 id="categories-tooltip" class="hide">Multiple categories selected</h5>
        </div>
    </div>

    <!-- <h3>Formation</h3> -->
    <!-- <div id="formation-buttons-container"> -->
         <!-- This is where all the formation control buttons will be shown -->
    <!-- </div> -->

    <div id="roe">
        <h4>Rules of engagement</h4>
        <div id="roe-buttons-container" class="ol-group ol-button-box">
             <!-- This is where the roe buttons will be shown -->
        </div>
    </div>

    <div id="threat">
        <h4>Reaction to threat</h4>
        <div id="reaction-to-threat-buttons-container" class="ol-group ol-button-box">
             <!-- This is where the reaction to threat buttons will be shown -->
        </div>
    </div>

    <hr />

    <div id="advanced-settings-div">
        <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>