DCSOlympus/client/views/other/contextmenus.ejs

<div id="map-contextmenu" class="ol-context-menu" oncontextmenu="return false;">
    <div id="active-coalition-label" data-coalition="blue"></div>
    <div class="upper-bar ol-panel">
        <div id="coalition-switch" class="ol-switch ol-coalition-switch"></div> 
        <button data-coalition="blue" id="aircraft-spawn-button" title="Spawn aircraft" data-on-click="mapContextMenuShow"
            data-on-click-params='{ "type": "aircraft" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/aircraft.svg" inject-svg></button>
        <button data-coalition="blue" id="helicopter-spawn-button" title="Spawn helicopter" data-on-click="mapContextMenuShow"
            data-on-click-params='{ "type": "helicopter" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/helicopter.svg" inject-svg></button>
        <button data-coalition="blue" id="groundunit-spawn-button" title="Spawn ground unit" data-on-click="mapContextMenuShow"
            data-on-click-params='{ "type": "groundunit" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/groundunit.svg" inject-svg></button>
        <button data-coalition="blue" id="coalition-area-button" title="Edit coalition area" data-on-click="editCoalitionArea"
            class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/other/edit.svg" inject-svg></button>
        <button data-coalition="blue" id="more-options-button" title="More options" data-on-click="mapContextMenuShow"
            data-on-click-params='{ "type": "more" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/more.svg" inject-svg></button>
    </div>
    <div id="more-options-button-bar" class="upper-bar ol-panel hide">
        <div id="coalition-switch" class="ol-switch ol-coalition-switch"></div>
        <button data-coalition="blue" id="navyunit-spawn-button" title="Spawn navy unit" data-on-click="mapContextMenuShow"
            data-on-click-params='{ "type": "navyunit" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/navyunit.svg" inject-svg></button> 
        <button data-coalition="blue" id="smoke-spawn-button" title="Spawn smoke" data-on-click="mapContextMenuShow"
            data-on-click-params='{ "type": "smoke" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/smoke.svg" inject-svg></button>
        <button data-coalition="blue" id="explosion-spawn-button" title="Explosion" data-on-click="mapContextMenuShow"
            data-on-click-params='{ "type": "explosion" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/explosion.svg" inject-svg></button>
        <button data-coalition="blue" id="polygon-draw-button" title="Enter polygon draw mode" data-on-click="toggleCoalitionAreaDraw" 
            data-on-click-params='{"type": "polygon"}' class="ol-contexmenu-button"><img src="resources/theme/images/buttons/tools/draw-polygon-solid.svg" inject-svg></button>
        </div>
    <div id="aircraft-spawn-menu" class="ol-contexmenu-panel 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-label-options" class="ol-select">
                <div class="ol-select-value">Aircraft name</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="aircraft-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 class="ol-select-container contextmenu-options-container">
            <div>Group members</div>
            <div id="aircraft-count-options" class="ol-select">
                <div class="ol-select-value"></div>
                <div class="ol-select-options">
                    <!-- This is where all the aircraft count buttons will be shown-->
                </div>
            </div>
        </div>
        <div id="aircraft-spawn-altitude-slider" class="ol-slider-container flight-control-ol-slider">
            <dl class="ol-data-grid">
                <dt> Spawn altitude
                </dt>
                <dd>
                    <div class="ol-slider-value"></div>
                </dd>
            </dl>
            <input type="range" min="0" max="100" value="0" class="ol-slider">
            
        </div>
        <div id="aircraft-loadout-preview">
            <img id="aircraft-unit-image" class="hide">
            <div id="aircraft-loadout-list">
            </div>
        </div>
        <button class="deploy-unit-button" title="" data-coalition="blue" data-on-click="contextMenuDeployAircrafts" disabled>Deploy unit</button>
    </div>
    <div id="helicopter-spawn-menu" class="ol-contexmenu-panel ol-panel hide">
        <div class="ol-select-container">
            <div id="helicopter-role-options" class="ol-select">
                <div class="ol-select-value">Helicopter role</div>
                <div class="ol-select-options">
                    <!-- This is where all the helicopter roles buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container">
            <div id="helicopter-label-options" class="ol-select">
                <div class="ol-select-value">Helicopter name</div>
                <div class="ol-select-options">
                    <div>Select role first</div>
                    <!-- This is where all the helicopter types buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container">
            <div id="helicopter-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 helicopter loadouts buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container contextmenu-options-container">
            <div>Group members</div>
            <div id="helicopter-count-options" class="ol-select">
                <div class="ol-select-value"></div>
                <div class="ol-select-options">
                    <!-- This is where all the helicopter count buttons will be shown-->
                </div>
            </div>
        </div>
        <div id="helicopter-spawn-altitude-slider" class="ol-slider-container flight-control-ol-slider">
            <dl class="ol-data-grid">
                <dt> Spawn altitude
                </dt>
                <dd>
                    <div class="ol-slider-value"></div>
                </dd>
            </dl>
            <input type="range" min="0" max="100" value="0" class="ol-slider">
            
        </div>
        <div id="helicopter-loadout-preview">
            <img id="helicopter-unit-image" class="hide">
            <div id="helicopter-loadout-list">
            </div>
        </div>
        <button class="deploy-unit-button" title="" data-coalition="blue" data-on-click="contextMenuDeployHelicopters" disabled>Deploy unit</button>
    </div>
    <div id="groundunit-spawn-menu" class="ol-panel ol-contexmenu-panel hide">
        <div class="ol-select-container">
            <div id="groundunit-type-options" class="ol-select">
                <div class="ol-select-value">Ground unit type</div>
                <div class="ol-select-options">
                    <!-- This is where all the groundunit roles buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container">
            <div id="groundunit-label-options" class="ol-select">
                <div class="ol-select-value">Ground unit name</div>
                <div class="ol-select-options">
                    <div>Select role first</div>
                    <!-- This is where all the groundunit types buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container contextmenu-options-container">
            <div>Group members</div>
            <div id="groundunit-count-options" class="ol-select">
                <div class="ol-select-value"></div>
                <div class="ol-select-options">
                    <!-- This is where all the groundunit count buttons will be shown-->
                </div>
            </div>
        </div>
        <button class="deploy-unit-button" title="" data-coalition="blue" data-on-click="contextMenuDeployGroundUnits" disabled>Deploy unit</button>
    </div>
    <div id="navyunit-spawn-menu" class="ol-panel ol-contexmenu-panel hide">
        <div class="ol-select-container">
            <div id="navyunit-type-options" class="ol-select">
                <div class="ol-select-value">Navy unit type</div>
                <div class="ol-select-options">
                    <!-- This is where all the navyunit roles buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container">
            <div id="navyunit-label-options" class="ol-select">
                <div class="ol-select-value">Navy unit name</div>
                <div class="ol-select-options">
                    <div>Select role first</div>
                    <!-- This is where all the navyunit types buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container contextmenu-options-container">
            <div>Group members</div>
            <div id="navyunit-count-options" class="ol-select">
                <div class="ol-select-value"></div>
                <div class="ol-select-options">
                    <!-- This is where all the navyunit count buttons will be shown-->
                </div>
            </div>
        </div>
        <button class="deploy-unit-button" title="" data-coalition="blue" data-on-click="contextMenuDeployNavyUnits" disabled>Deploy unit</button>
    </div>
    <div id="smoke-spawn-menu" class="ol-panel ol-contexmenu-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 id="explosion-menu" class="ol-panel ol-contexmenu-panel hide">
        <button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "strength": 1 }'>Small explosion</button>
        <button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "strength": 2 }'>Medium explosion</button>
        <button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "strength": 3 }'>Big explosion</button>
        <button class="explosion-button" title="" data-on-click="contextMenuExplosion" data-on-click-params='{ "strength": 4 }'>Huge explosion</button>
    </div>
</div>

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

<div id="airbase-contextmenu" class="ol-panel" oncontextmenu="return false;">
    <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-coalition="blue" 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>

<div id="coalition-area-contextmenu" class="ol-context-menu" oncontextmenu="return false;">
    <div id="area-coalition-label" data-coalition="blue"></div>
    <div class="upper-bar ol-panel">
        <div id="coalition-area-switch" class="ol-switch ol-coalition-switch"></div>
        <button data-coalition="blue" id="iads-button" title="Create Integrated Air Defense System" data-on-click="coalitionAreaContextMenuShow"
            data-on-click-params='{ "type": "iads" }' class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/spawn/sam.svg" inject-svg></button>
        <!--<button data-coalition="blue" id="cap-button" title="Create Combat Air Patrols" data-on-click="coalitionAreaContextMenuShow"
            data-on-click-params='{ "type": "cap" }' class="ol-contexmenu-button"></button>-->
        <button data-coalition="blue" id="coalitionarea-back-button" title="Bring area to back" data-on-click="coalitionAreaBringToBack"
             class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/other/back.svg" inject-svg></button>
        <button data-coalition="blue" id="coalitionarea-delete-button" title="Delete area" data-on-click="coalitionAreaDelete"
             class="ol-contexmenu-button"><img src="/resources/theme/images/buttons/other/delete.svg" inject-svg></button>
    </div>
    <div id="iads-menu" class="ol-panel ol-contexmenu-panel hide">
        <div id="iads-units-type-options" class="ol-select">
            <div class="ol-select-value">Unit types</div>
            <div class="ol-select-options">
                    <!-- This is where all the iads unit types checkboxes will be shown-->
            </div>
        </div>
        <div class="ol-select-container">
            <div id="iads-era-options" class="ol-select">
                <div class="ol-select-value">Units eras</div>
                <div class="ol-select-options">
                    <!-- This is where all the iads unit era buttons will be shown-->
                </div>
            </div>
        </div>
        <div class="ol-select-container">
            <div id="iads-range-options" class="ol-select">
                <div class="ol-select-value">Units ranges</div>
                <div class="ol-select-options">
                    <!-- This is where all the iads unit range buttons will be shown-->
                </div>
            </div>
        </div>
    
        <!--
        <div id="coalition-units-checkbox" class="ol-checkbox">
            <label title="Use coalition specific units only (e.g. Patriot sites for blue coalition, SA-2s for red coalition)">
                <input type="checkbox"/>
                Coalition specific units
            </label>
        </div>
        -->
        
        <div id="iads-density-slider" class="ol-slider-container">
            <dl class="ol-data-grid">
                <dt> IADS density </dt> <dd> <div class="ol-slider-value"></div> </dd>
            </dl>
            <input title="An high density value will cause more units to be deployed" type="range" min="0" max="100" value="0" class="ol-slider">
        </div>
        <div id="iads-distribution-slider" class="ol-slider-container">
            <dl class="ol-data-grid">
                <dt> IADS distribution </dt> <dd> <div class="ol-slider-value"></div> </dd>
            </dl>
            <input title="If distrubution is low units will be concentrated around towns, otherwise they will spread around the map more evenly" type="range" min="0" max="100" value="0" class="ol-slider">
        </div>
        <button class="create-iads-button" title="" data-coalition="blue" data-on-click="contextMenuCreateIads">Add units to IADS</button>
    </div>
</div>