diff --git a/frontend/react/src/ui/panels/components/radiosinkpanel.tsx b/frontend/react/src/ui/panels/components/radiosinkpanel.tsx index dba8ab17..83bbe62f 100644 --- a/frontend/react/src/ui/panels/components/radiosinkpanel.tsx +++ b/frontend/react/src/ui/panels/components/radiosinkpanel.tsx @@ -52,7 +52,7 @@ export const RadioSinkPanel = forwardRef((props: { radio: RadioSink; shortcutKey )} - {props.radio.getName()} + {!expanded && `${props.radio.getFrequency() / 1e6} MHz ${props.radio.getModulation() ? "FM" : "AM"}`}
{}} - onMouseDown={() => { - props.radio.setPtt(true); - }} - onMouseUp={() => { - props.radio.setPtt(false); - }} + onClick={() => {props.radio.setPtt(!props.radio.getPtt())}} tooltip="Talk on frequency" > diff --git a/frontend/react/src/ui/panels/coordinatespanel.tsx b/frontend/react/src/ui/panels/coordinatespanel.tsx index 0c034c55..3422079f 100644 --- a/frontend/react/src/ui/panels/coordinatespanel.tsx +++ b/frontend/react/src/ui/panels/coordinatespanel.tsx @@ -2,15 +2,17 @@ import React, { useEffect, useState } from "react"; import { OlLocation } from "../components/ollocation"; import { LatLng } from "leaflet"; import { FaBullseye, FaChevronDown, FaChevronUp, FaJetFighter, FaMountain } from "react-icons/fa6"; -import { BullseyesDataChanged, MouseMovedEvent } from "../../events"; +import { BullseyesDataChanged, MouseMovedEvent, SelectedUnitsChangedEvent } from "../../events"; import { bearing, mToFt } from "../../other/utils"; import { Bullseye } from "../../mission/bullseye"; +import { Unit } from "../../unit/unit"; export function CoordinatesPanel(props: {}) { const [open, setOpen] = useState(false); const [latlng, setLatlng] = useState(new LatLng(0, 0)); const [elevation, setElevation] = useState(0); const [bullseyes, setBullseyes] = useState(null as null | { [name: string]: Bullseye }); + const [selectedUnits, setSelectedUnits] = useState([] as Unit[]); useEffect(() => { MouseMovedEvent.on((latlng, elevation) => { @@ -19,6 +21,8 @@ export function CoordinatesPanel(props: {}) { }); BullseyesDataChanged.on((bullseyes) => setBullseyes(bullseyes)); + + SelectedUnitsChangedEvent.on((selectedUnits) => setSelectedUnits(selectedUnits)); }, []); return ( @@ -48,9 +52,9 @@ export function CoordinatesPanel(props: {}) { `} > - {bearing(bullseyes[2].getLatLng().lat, bullseyes[2].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° / {" "} - {(bullseyes[2].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} - + {" "} + {bearing(bullseyes[2].getLatLng().lat, bullseyes[2].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° /{" "} + {(bullseyes[2].getLatLng().distanceTo(latlng) / 1852).toFixed(0)}
- {bearing(bullseyes[1].getLatLng().lat, bullseyes[1].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° / {" "} + {bearing(bullseyes[1].getLatLng().lat, bullseyes[1].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° /{" "} {(bullseyes[1].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} -
- {/*}
- - - -
- {(bullseyes[1].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} /{" "} - {bearing(bullseyes[1].getLatLng().lat, bullseyes[1].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° + {selectedUnits.length == 1 && ( +
+ + + +
+ {(selectedUnits[0].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} /{" "} + {bearing(selectedUnits[0].getLatLng().lat, selectedUnits[0].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° +
-
- {*/} + )}
)} diff --git a/frontend/react/src/ui/panels/radiossummarypanel.tsx b/frontend/react/src/ui/panels/radiossummarypanel.tsx index fbb564a5..74562ddb 100644 --- a/frontend/react/src/ui/panels/radiossummarypanel.tsx +++ b/frontend/react/src/ui/panels/radiossummarypanel.tsx @@ -10,7 +10,7 @@ export function RadiosSummaryPanel(props: {}) { const [audioSinks, setAudioSinks] = useState([] as AudioSink[]); useEffect(() => { - AudioSinksChangedEvent.on((audioSinks) => setAudioSinks(audioSinks)); + AudioSinksChangedEvent.on((audioSinks) => setAudioSinks([...audioSinks])); }, []); return ( @@ -26,46 +26,57 @@ export function RadiosSummaryPanel(props: {}) { >
- {audioSinks - .filter((audioSinks) => audioSinks instanceof RadioSink) - .map((radioSink, idx) => { - return ( - {}} - onMouseDown={() => { - radioSink.setPtt(true); - }} - onMouseUp={() => { - radioSink.setPtt(false); - }} - tooltip="Click to talk, lights up when receiving" - > - {idx + 1} - - ); - })} + {audioSinks.filter((audioSinks) => audioSinks instanceof RadioSink).length > 0 && + audioSinks + .filter((audioSinks) => audioSinks instanceof RadioSink) + .map((radioSink, idx) => { + return ( + {}} + onMouseDown={() => { + radioSink.setPtt(true); + }} + onMouseUp={() => { + radioSink.setPtt(false); + }} + tooltip="Click to talk, lights up when receiving" + buttonColor={ + radioSink.getReceiving() + ? "white" + : null + } + > + {idx + 1} + + ); + })} - - {audioSinks - .filter((audioSinks) => audioSinks instanceof UnitSink) - .map((radioSink, idx) => { - return ( - {}} - onMouseDown={() => { - radioSink.setPtt(true); - }} - onMouseUp={() => { - radioSink.setPtt(false); - }} - tooltip="Click to talk" - > - {idx + 1} - - ); - })} + {audioSinks.filter((audioSinks) => audioSinks instanceof UnitSink).length > 0 && ( + + )} + {audioSinks.filter((audioSinks) => audioSinks instanceof UnitSink).length > 0 && + audioSinks + .filter((audioSinks) => audioSinks instanceof UnitSink) + .map((unitSink, idx) => { + return ( + {}} + onMouseDown={() => { + unitSink.setPtt(true); + }} + onMouseUp={() => { + unitSink.setPtt(false); + }} + tooltip="Click to talk" + > + {idx + 1} + + ); + })}
)}