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}
+
+ );
+ })}
)}