weyne/DCSOlympus
1
0
Fork 0
mirror of https://github.com/Pax1601/DCSOlympus.git synced 2025-10-29 16:56:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Readded map options, simplified ShortcutManager

Browse Source
This commit is contained in:
Davide Passoni
2024-06-27 14:46:28 +02:00
parent fb96926d1e
commit 222a296b4f
19 changed files with 1363 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/react/src/ui/panels/header.tsx
View File

@@ -78,9 +78,10 @@ export function Header() {
</div>
<OlLabelToggle toggled={false} leftLabel={"Live"} rightLabel={"Map"} onClick={() => {}}></OlLabelToggle>
<OlStateButton checked={false} icon={faCamera} onClick={() => {}} tooltip="Activate/deactivate camera plugin" />
<OlDropdown label="DCS Sat" className="w-40">
<OlDropdownItem className="w-full">DCS Sat</OlDropdownItem>
<OlDropdownItem className="w-full">DCS Alt</OlDropdownItem>
<OlDropdown label={appState.activeMapSource} className="w-80">
{appState.mapSources.map((source) => {
return <OlDropdownItem className="w-full" onClick={() => getApp().getMap().setLayerName(source)}>{ source }</OlDropdownItem>
})}
</OlDropdown>
</div>
</nav>

73
frontend/react/src/ui/panels/options.tsx
View File

@@ -1,16 +1,15 @@
import React from "react";
import { Menu } from "./components/menu";
import { faArrowRightLong, faCheckCircle, faDatabase, faExternalLink, faExternalLinkAlt, faFile, faFileAlt, faFileExport, faFileImport, faTimesCircle } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { OlCheckbox } from "../components/olcheckbox";
import { OlLabelToggle } from "../components/ollabeltoggle";
import { OlRangeSlider } from "../components/olrangeslider";
import { OlNumberInput } from "../components/olnumberinput";
import { MapOptions } from "../../types/types";
import { getApp } from "../../olympusapp";
export function Options(props: {
open: boolean,
onClose: () => void,
options: MapOptions,
children?: JSX.Element | JSX.Element[],
}) {
return <Menu
@@ -19,31 +18,57 @@ export function Options(props: {
showBackButton={false}
onClose={props.onClose}
>
<div className="flex flex-col p-5 gap-2 font-normal text-gray-900 text-gray-800 dark:text-white ">
<div className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer">
<OlCheckbox checked={true} onChange={() => { }}></OlCheckbox>
<span>Toggle Unit Labels</span>
<div className="flex flex-col p-5 gap-2 font-normal text-gray-800 dark:text-white ">
<div
className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer"
onClick={() => { getApp().getMap().setOption("showUnitLabels", !props.options.showUnitLabels) }}
>
<OlCheckbox checked={props.options.showUnitLabels} onChange={() => { }}></OlCheckbox>
<span>Show Unit Labels</span>
<kbd className="ml-auto px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">L</kbd>
</div>
<div className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer">
<OlCheckbox checked={true} onChange={() => { }}></OlCheckbox>
<span>Toggle Threat Rings</span>
<div
className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer"
onClick={() => { getApp().getMap().setOption("showUnitsEngagementRings", !props.options.showUnitsEngagementRings) }}
>
<OlCheckbox checked={props.options.showUnitsEngagementRings} onChange={() => { }}></OlCheckbox>
<span>Show Threat Rings</span>
<kbd className="ml-auto px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">Q</kbd>
</div>
<div className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer">
<OlCheckbox checked={true} onChange={() => { }}></OlCheckbox>
<span>Toggle Detection rings</span>
<div
className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer"
onClick={() => { getApp().getMap().setOption("showUnitsAcquisitionRings", !props.options.showUnitsAcquisitionRings) }}
>
<OlCheckbox checked={props.options.showUnitsAcquisitionRings} onChange={() => { }}></OlCheckbox>
<span>Show Detection rings</span>
<kbd className="ml-auto px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">E</kbd>
</div>
<div className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer">
<OlCheckbox checked={true} onChange={() => { }}></OlCheckbox>
<span>Toggle Detection lines</span>
<div
className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer"
onClick={() => { getApp().getMap().setOption("showUnitTargets", !props.options.showUnitTargets) }}
>
<OlCheckbox checked={props.options.showUnitTargets} onChange={() => { }}></OlCheckbox>
<span>Show Detection lines</span>
<kbd className="ml-auto px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">F</kbd>
</div>
<div className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer">
<OlCheckbox checked={true} onChange={() => { }}></OlCheckbox>
<span>Toggle Radar lines</span>
<div
className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer"
onClick={() => { getApp().getMap().setOption("hideUnitsShortRangeRings", !props.options.hideUnitsShortRangeRings) }}
>
<OlCheckbox checked={props.options.hideUnitsShortRangeRings} onChange={() => { }}></OlCheckbox>
<span>Hide Short range Rings</span>
<kbd className="ml-auto px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">R</kbd>
</div>
<div className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer">
<OlCheckbox checked={true} onChange={() => { }}></OlCheckbox>
<span>Toggle Something Else</span>
<div
className="group flex flex-row rounded-md justify-content gap-4 p-2 dark:hover:bg-olympus-400 cursor-pointer"
onClick={() => { getApp().getMap().setOption("hideGroupMembers", !props.options.hideGroupMembers) }}
>
<OlCheckbox checked={props.options.hideGroupMembers} onChange={() => { }}></OlCheckbox>
<span>Hide Group members</span>
<kbd className="ml-auto px-2 py-1.5 text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500">G</kbd>
</div>
{/*
<hr className="w-auto m-2 my-1 bg-gray-700 border-[1px] dark:border-olympus-500"></hr>
<div className="flex flex-col content-center items-start justify-between p-2 gap-2">
<div className="flex flex-col">
@@ -71,7 +96,7 @@ export function Options(props: {
onChange={(ev) => { }}
/>
</div>
</div>
</div> */}
</div>
</Menu>
}

21
frontend/react/src/ui/ui.tsx
View File

@@ -42,6 +42,8 @@ export function UI() {
var [checkingPassword, setCheckingPassword] = useState(false);
var [loginError, setLoginError] = useState(false);
var [commandMode, setCommandMode] = useState(null as null | string);
var [mapSources, setMapSources] = useState([] as string[]);
var [activeMapSource, setActiveMapSource] = useState("");
document.addEventListener("hiddenTypesChanged", (ev) => {
setMapHiddenTypes({ ...getApp().getMap().getHiddenTypes() });
@@ -57,6 +59,20 @@ export function UI() {
}
})
document.addEventListener("mapSourceChanged", (ev) => {
var source = (ev as CustomEvent).detail;
if (source !== activeMapSource)
setActiveMapSource(source);
})
document.addEventListener("configLoaded", (ev) => {
let config = getApp().getConfig();
var sources = Object.keys(config.mapMirrors).concat(Object.keys(config.mapLayers));
setMapSources(sources);
setActiveMapSource(sources[0]);
})
function hideAllMenus() {
setMainMenuVisible(false);
setSpawnMenuVisible(false);
@@ -111,7 +127,9 @@ export function UI() {
drawingMenuVisible: drawingMenuVisible,
optionsMenuVisible: optionsMenuVisible,
mapOptions: mapOptions,
mapHiddenTypes: mapHiddenTypes
mapHiddenTypes: mapHiddenTypes,
mapSources: mapSources,
activeMapSource: activeMapSource
}}>
<EventsProvider value={
{
@@ -157,6 +175,7 @@ export function UI() {
<Options
open={optionsMenuVisible}
onClose={() => setOptionsMenuVisible(false)}
options={mapOptions}
/>
<MiniMapPanel />
<UnitControlMenu />