Minor radio panel changes

frontend/react/src/ui/panels/components/radiosinkpanel.tsx

@@ -52,7 +52,7 @@ export const RadioSinkPanel = forwardRef((props: { radio: RadioSink; shortcutKey
             </kbd>
           </>
         )}
-        <span className="my-auto w-full">{props.radio.getName()}</span>
+        <span className="my-auto w-full">{!expanded && `${props.radio.getFrequency() / 1e6} MHz ${props.radio.getModulation() ? "FM" : "AM"}`}</span>
         <div
           className={`
             mb-auto ml-auto aspect-square cursor-pointer rounded-md p-2
@@ -87,13 +87,7 @@ export const RadioSinkPanel = forwardRef((props: { radio: RadioSink; shortcutKey
               className="ml-auto"
               checked={props.radio.getPtt()}
               icon={faMicrophoneLines}
-              onClick={() => {}}
-              onMouseDown={() => {
-                props.radio.setPtt(true);
-              }}
-              onMouseUp={() => {
-                props.radio.setPtt(false);
-              }}
+              onClick={() => {props.radio.setPtt(!props.radio.getPtt())}}
               tooltip="Talk on frequency"
             ></OlStateButton>
 

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: {}) {
                     `}
                   >
                     <FaBullseye />
-                  </span> {bearing(bullseyes[2].getLatLng().lat, bullseyes[2].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° / {" "}
-                  {(bullseyes[2].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} 
-                  
+                  </span>{" "}
+                  {bearing(bullseyes[2].getLatLng().lat, bullseyes[2].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}° /{" "}
+                  {(bullseyes[2].getLatLng().distanceTo(latlng) / 1852).toFixed(0)}
                 </div>
                 <div className="flex w-[50%] justify-start gap-2">
                   <span
@@ -61,26 +65,26 @@ export function CoordinatesPanel(props: {}) {
                   >
                     <FaBullseye />
                   </span>
-                  {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)}
-                  
                 </div>
               </div>
-              {/*}<div className="flex justify-start gap-2">
-                <span
-                  className={`
-                    rounded-sm bg-white px-1 py-1 text-center font-bold
-                    text-olympus-700
-                  `}
-                >
-                  <FaJetFighter />
-                </span>
-                <div>
-                  {(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 && (
+                <div className="flex justify-start gap-2">
+                  <span
+                    className={`
+                      rounded-sm bg-white px-1 py-1 text-center font-bold
+                      text-olympus-700
+                    `}
+                  >
+                    <FaJetFighter />
+                  </span>
+                  <div>
+                    {(selectedUnits[0].getLatLng().distanceTo(latlng) / 1852).toFixed(0)} /{" "}
+                    {bearing(selectedUnits[0].getLatLng().lat, selectedUnits[0].getLatLng().lng, latlng.lat, latlng.lng).toFixed()}°
+                  </div>
                 </div>
-              </div>
-              {*/}
+              )}
             </div>
           )}
         </>

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: {}) {
         >
           <div className="flex w-full items-center justify-between gap-2">
             <FaRadio className="text-xl" />
-            {audioSinks
-              .filter((audioSinks) => audioSinks instanceof RadioSink)
-              .map((radioSink, idx) => {
-                return (
-                  <OlStateButton
-                    checked={radioSink.getReceiving()}
-                    onClick={() => {}}
-                    onMouseDown={() => {
-                      radioSink.setPtt(true);
-                    }}
-                    onMouseUp={() => {
-                      radioSink.setPtt(false);
-                    }}
-                    tooltip="Click to talk, lights up when receiving"
-                  >
-                    <span className={`font-bold text-gray-200`}>{idx + 1}</span>
-                  </OlStateButton>
-                );
-              })}
+            {audioSinks.filter((audioSinks) => audioSinks instanceof RadioSink).length > 0 &&
+              audioSinks
+                .filter((audioSinks) => audioSinks instanceof RadioSink)
+                .map((radioSink, idx) => {
+                  return (
+                    <OlStateButton
+                      checked={radioSink.getPtt()}
+                      onClick={() => {}}
+                      onMouseDown={() => {
+                        radioSink.setPtt(true);
+                      }}
+                      onMouseUp={() => {
+                        radioSink.setPtt(false);
+                      }}
+                      tooltip="Click to talk, lights up when receiving"
+                      buttonColor={
+                        radioSink.getReceiving()
+                          ? "white"
+                          : null
+                      }
+                    >
+                      <span className={`font-bold text-gray-200`}>{idx + 1}</span>
+                    </OlStateButton>
+                  );
+                })}
 
-            <FaJetFighter className="text-xl" />
-            {audioSinks
-              .filter((audioSinks) => audioSinks instanceof UnitSink)
-              .map((radioSink, idx) => {
-                return (
-                  <OlStateButton
-                    checked={false}
-                    onClick={() => {}}
-                    onMouseDown={() => {
-                      radioSink.setPtt(true);
-                    }}
-                    onMouseUp={() => {
-                      radioSink.setPtt(false);
-                    }}
-                    tooltip="Click to talk"
-                  >
-                    <span className={`font-bold text-gray-200`}>{idx + 1}</span>
-                  </OlStateButton>
-                );
-              })}
+            {audioSinks.filter((audioSinks) => audioSinks instanceof UnitSink).length > 0 && (
+              <FaJetFighter
+                className={`text-xl`}
+              />
+            )}
+            {audioSinks.filter((audioSinks) => audioSinks instanceof UnitSink).length > 0 &&
+              audioSinks
+                .filter((audioSinks) => audioSinks instanceof UnitSink)
+                .map((unitSink, idx) => {
+                  return (
+                    <OlStateButton
+                      checked={unitSink.getPtt()}
+                      onClick={() => {}}
+                      onMouseDown={() => {
+                        unitSink.setPtt(true);
+                      }}
+                      onMouseUp={() => {
+                        unitSink.setPtt(false);
+                      }}
+                      tooltip="Click to talk"
+                    >
+                      <span className={`font-bold text-gray-200`}>{idx + 1}</span>
+                    </OlStateButton>
+                  );
+                })}
           </div>
         </div>
       )}