Merge pull request #1075 from Pax1601/1074-qol-unit-type-exclusive-filter

1074 qol unit type exclusive filter

frontend/react/src/ui/components/ollocation.tsx

@@ -29,7 +29,7 @@ export function OlLocation(props: { location: LatLng; className?: string; refere
         >
           MGRS
         </span>
-        {MGRS ? MGRS.string : "Error"}
+        {MGRS ? MGRS.groups.join(" ") : "Error"}
       </div>
     );
   } else if (referenceSystem === "LatLngDec") {

frontend/react/src/ui/components/olstatebutton.tsx

@@ -21,6 +21,7 @@ export function OlStateButton(props: {
 }) {
   const [hover, setHover] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
+  const [isMouseHovering, setIsMouseHovering] = useState(false);
   var buttonRef = useRef(null);
 
   const className =
@@ -48,11 +49,12 @@ export function OlStateButton(props: {
         style={{
           border: props.buttonColor ? "2px solid " + props.buttonColor : "0px solid transparent",
           background: setOpacity(
-            props.checked || hover ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE,
-            !props.checked && hover ? 0.3 : 1
+            props.checked || isMouseHovering ? (props.buttonColor ? props.buttonColor : colors.OLYMPUS_LIGHT_BLUE) : colors.OLYMPUS_BLUE,
+            !props.checked && isMouseHovering ? 0.3 : 1
           ),
         }}
         onMouseEnter={() => {
+          setIsMouseHovering(true);
           setHoverTimeout(
             window.setTimeout(() => {
               setHover(true);
@@ -61,6 +63,7 @@ export function OlStateButton(props: {
           );
         }}
         onMouseLeave={() => {
+          setIsMouseHovering(false);
           setHover(false);
           if (hoverTimeout) {
             window.clearTimeout(hoverTimeout);
@@ -100,7 +103,7 @@ export function OlRoundStateButton(props: {
   icon: IconProp;
   tooltip?: string | (() => JSX.Element | JSX.Element[]);
   tooltipPosition?: string;
-  onClick: () => void;
+  onClick: (event) => void;
 }) {
   const [hover, setHover] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState(null as number | null);
@@ -123,8 +126,8 @@ export function OlRoundStateButton(props: {
     <>
       <button
         ref={buttonRef}
-        onClick={() => {
-          props.onClick();
+        onClick={(event) => {
+          props.onClick(event);
           setHover(false);
         }}
         data-checked={props.checked}

frontend/react/src/ui/panels/coordinatespanel.tsx

@@ -46,7 +46,7 @@ export function CoordinatesPanel(props: {}) {
         returnString = `${latlng.lat >= 0 ? "N" : "S"} ${DDToDDM(latlng.lat)}, ${latlng.lng >= 0 ? "E" : "W"} ${DDToDDM(latlng.lng)}`;
         break;
       case "MGRS":
-        returnString = latLngToMGRS(latlng.lat, latlng.lng, 6)?.string || "Error";
+        returnString = latLngToMGRS(latlng.lat, latlng.lng, 6)?.groups.join(" ") || "Error";
         break;
     }
 

frontend/react/src/ui/panels/header.tsx

@@ -61,6 +61,16 @@ export function Header() {
   const [enabledCommandModes, setEnabledCommandModes] = useState([] as string[]);
   const [loadingNewCommandMode, setLoadingNewCommandMode] = useState(false);
 
+  const unitViewTypesFilter = {
+    aircraft: olButtonsVisibilityAircraft,
+    helicopter: olButtonsVisibilityHelicopter,
+    "groundunit-sam": olButtonsVisibilityGroundunitSam,
+    groundunit: olButtonsVisibilityGroundunit,
+    navyunit: olButtonsVisibilityNavyunit,
+    airbase: olButtonsVisibilityAirbase,
+    dead: faSkull,
+  }
+
   useEffect(() => {
     HiddenTypesChangedEvent.on((hiddenTypes) => setMapHiddenTypes({ ...hiddenTypes }));
     MapOptionsChangedEvent.on((mapOptions) => {
@@ -424,24 +434,25 @@ export function Header() {
         </div>
         <div className={`h-8 w-0 border-l-[2px] border-gray-700`}></div>
         <div className={`flex h-fit flex-row items-center justify-start gap-1`}>
-          {Object.entries({
-            aircraft: olButtonsVisibilityAircraft,
-            helicopter: olButtonsVisibilityHelicopter,
-            "groundunit-sam": olButtonsVisibilityGroundunitSam,
-            groundunit: olButtonsVisibilityGroundunit,
-            navyunit: olButtonsVisibilityNavyunit,
-            airbase: olButtonsVisibilityAirbase,
-            dead: faSkull,
-          }).map((entry) => {
+          {Object.entries(unitViewTypesFilter).map((entry) => {
             return (
               <OlRoundStateButton
                 key={entry[0]}
-                onClick={() => {
-                  getApp().getMap().setHiddenType(entry[0], !mapHiddenTypes[entry[0]]);
+                onClick={(event) => {
+                  if (event.ctrlKey) {
+                    Object.entries(unitViewTypesFilter)
+                    .map(ut => ut[0])
+                    .filter(utName => utName !== entry[0])
+                    .forEach(utName => getApp().getMap().setHiddenType(utName, true));
+
+                    getApp().getMap().setHiddenType(entry[0], false);
+                  } else {
+                    getApp().getMap().setHiddenType(entry[0], !mapHiddenTypes[entry[0]]);
+                  }
                 }}
                 checked={!mapHiddenTypes[entry[0]]}
                 icon={entry[1]}
-                tooltip={"Hide/show " + entry[0] + " units"}
+                tooltip={"Hide/show " + entry[0] + " units. Tip: holding ctrl key while clicking will hide other unit categories."}
               />
             );
           })}