DCSOlympus/client/views/contextmenus.ejs

<div id="map-contextmenu">
    <div id="active-coalition-label" data-active-coalition="blue"></div>
    <div id="upper-bar" class="ol-panel">
        <label id="context-menu-switch" class="toggle" for="context-menu-toggle">
            <input class="toggle-input" name="" type="checkbox" id="context-menu-toggle">
            <div data-active-coalition="blue" class="toggle-fill"></div>
        </label>
        <button data-active-coalition="blue" id="aircraft-spawn-button" title="Spawn aircraft" data-on-click="contextMenuShow"
            data-on-click-params='{ "type": "aircraft" }' class="unit-spawn-button"></button>
        <button data-active-coalition="blue" id="ground-unit-spawn-button" title="Spawn ground unit" data-on-click="contextMenuShow"
            data-on-click-params='{ "type": "ground-unit" }' class="unit-spawn-button"></button>
        <button data-active-coalition="blue" id="smoke-spawn-button" title="Spawn smoke" data-on-click="contextMenuShow"
            data-on-click-params='{ "type": "smoke" }' class="unit-spawn-button"></button>
    </div>
    <div id="aircraft-spawn-menu" class="ol-panel hide">
        <div class="ol-select-container">
            <div id="aircraft-role-options" class="ol-select">
                <div class="ol-select-value">Aircraft role</div>
                <div class="ol-select-options">
                    <!-- This is where all the aircraft roles buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container">
            <div id="aircraft-type-options" class="ol-select">
                <div class="ol-select-value">Aircraft type</div>
                <div class="ol-select-options">
                    <div>Select role first</div>
                    <!-- This is where all the aircraft types buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container">
            <div id="loadout-options" class="ol-select">
                <div class="ol-select-value">Loadout</div>
                <div class="ol-select-options">
                    <div>Select type first</div>
                    <!-- This is where all the aircraft loadouts buttons will be shown-->
                </div>
            </div>
        </div>
        <div id="loadout-preview">
            <img id="unit-image" class="hide">
            <div id="loadout-list">
            </div>
        </div>
        <button class="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployAircraft" disabled>Deploy unit</button>
    </div>
    <div id="ground-unit-spawn-menu" class="ol-panel hide">
        <div class="ol-select-container">
            <div id="ground-unit-role-options" class="ol-select">
                <div class="ol-select-value">Ground unit role</div>
                <div class="ol-select-options">
                    <!-- This is where all the ground unit roles buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container">
            <div id="ground-unit-type-options" class="ol-select">
                <div class="ol-select-value">Ground unit type</div>
                <div class="ol-select-options">
                    <div>Select role first</div>
                    <!-- This is where all the ground unit types buttons will be shown-->
                </div>
            </div>
        </div>
        <button class="deploy-unit-button" title="" data-active-coalition="blue" data-on-click="contextMenuDeployGroundUnit" disabled>Deploy unit</button>
    </div>
    <div id="smoke-spawn-menu" class="ol-panel hide">
        <button class="smoke-button" title="" data-smoke-color="white" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "white" }'>White smoke</button>
        <button class="smoke-button" title="" data-smoke-color="blue" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "blue" }'>Blue smoke</button>
        <button class="smoke-button" title="" data-smoke-color="red" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "red" }'>Red smoke</button>
        <button class="smoke-button" title="" data-smoke-color="green" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "green" }'>Green smoke</button>
        <button class="smoke-button" title="" data-smoke-color="orange" data-on-click="contextMenuDeploySmoke" data-on-click-params='{ "color": "orange" }'>Orange smoke</button>
    </div>
</div>

<div id="unit-contextmenu" class="ol-panel">
    <!-- Here the available unit options will be shown -->
</div>

<div id="custom-formation-dialog" class="ol-panel ol-dialog">
    <div class="ol-dialog-close" data-on-click="closeDialog"></div>

    <div class="ol-dialog-header">
        <h3 id="unit-name">Custom formation</h3>
    </div>

    <div class="ol-dialog-content">
        <div style="position: relative; height: 100px; width: 100px; margin-bottom: 25px;">
            <div class="formation-position-clock" style="top: 0px;   left: 50px;"><input  type="radio" id="formation-1" name="formation-position" value="1"></div>
            <div class="formation-position-clock" style="top: 14px;  left: 14px;"><input  type="radio" id="formation-2" name="formation-position" value="2"></div>
            <div class="formation-position-clock" style="top: 50px;  left: 0px; "><input  type="radio" id="formation-3" name="formation-position" value="3"></div>
            <div class="formation-position-clock" style="top: 86px;  left: 14px;"><input  type="radio" id="formation-4" name="formation-position" value="4"></div>
            <div class="formation-position-clock" style="top: 100px; left: 50px;"><input  type="radio" id="formation-5" name="formation-position" value="5"></div>
            <div class="formation-position-clock" style="top: 86px;  left: 86px;"><input  type="radio" id="formation-6" name="formation-position" value="6"></div>
            <div class="formation-position-clock" style="top: 50px;  left: 100px"><input  type="radio" id="formation-7" name="formation-position" value="7"></div>
            <div class="formation-position-clock" style="top: 14px;  left: 86px;"><input  type="radio" id="formation-8" name="formation-position" value="8"></div>
            <div style="top: 50px; left: 50px;" id="reference-system"></div>
        </div>

        <div class="ol-group">
            <label>Distance: </label>
            
            <div class="ol-group">
                <div id="distance" class="ol-text-input">
                    <input type="number" min="0" max="99999" step="1" value="150">
                </div>
                <label>ft</label>
            </div>
        </div>
    </div>

    <div class="ol-dialog-footer ol-group">
        <button class="ol-button-apply" data-on-click="applyCustomFormation">Apply</button>
        <button class="ol-button-close" data-on-click="closeDialog">Close</button>
    </div>
</div>

<div id="airbase-contextmenu" class="ol-panel">
    
    <h3 id="airbase-name"></h3>
    
    <div id="airbase-properties"></div>
    
    <hr />
    
    <h4>Parking available:</h4> 
    <div id="airbase-parking"></div>

    <button id="spawn-airbase-aircraft-button" data-active-coalition="red" title="Spawn aircraft" data-on-click="contextMenuSpawnAirbase" class="deploy-unit-button">Spawn</button>
    <button id="land-here-button" title="Land here" data-on-click="contextMenuLandAirbase" class="hide">Land here</button>
    
</div>