#36 and UI touchups

P7-AIS · Nov 7, 2024 · af446d6 · af446d6
1 parent 8a19b08
commit af446d6
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 34 deletions.
diff --git a/src/components/monitoringMenu.tsx b/src/components/monitoringMenu.tsx
@@ -16,15 +16,20 @@ export default function MonitoringMenu({ monitoredVessels, zoomToVessel }: IMoni
 
   return (
     <div className="flex flex-col h-full rounded-lg bg-gray-700 text-white p-4">
-      <div className={`flex flex-row justify-between items-center gap-4 pb-2`}>
-        <h1 className="text-lg font-bold pb-2">Monitored vessels</h1>
-        <p className="text-sm rounded-md bg-gray-800 px-2 py-1">
-          {monitoredVessels.length} {monitoredVessels.length == 1 ? 'vessel' : 'vessels'}
-        </p>
+      <div className={`flex flex-row justify-between items-center gap-4`}>
+        <h1 className="text-lg font-bold">Monitored vessels</h1>
+        <div className="flex gap-1">
+          <p className="text-sm rounded-md bg-gray-800 px-2 py-1">
+            {monitoredVessels.length} {monitoredVessels.length == 1 ? 'vessel' : 'vessels'}
+          </p>
+          <button title="Show/hide list of monitored vessels" onClick={() => setIsCollapsed(!isCollapsed)} className="">
+            {isCollapsed ? <ChevronSVG rotate={180} /> : <ChevronSVG />}
+          </button>
+        </div>
       </div>
       {!isCollapsed && (
         <>
-          <div id="title-row" className="px-2 pr-6 pb-2 grid grid-cols-4 gap-4 font-medium">
+          <div id="title-row" className="px-2 pr-6 py-2 grid grid-cols-4 gap-4 font-medium">
             <p className="text-left">MMSI</p>
             <p className="text-right">Trust</p>
             <p className="text-left">Reason</p>
@@ -43,13 +48,6 @@ export default function MonitoringMenu({ monitoredVessels, zoomToVessel }: IMoni
           </div>
         </>
       )}
-      <button
-        title="Show/hide list of monitored vessels"
-        onClick={() => setIsCollapsed(!isCollapsed)}
-        className={`w-full flex flex-cols items-center justify-center bottom-0 ${!isCollapsed && "mt-4"}`}
-      >
-        {isCollapsed ? <ChevronSVG rotate={180} /> : <ChevronSVG />}
-      </button>
     </div>
   )
 }
diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx
@@ -78,7 +78,7 @@ export default function Toolbar({ map, onMonitoringAreaChange, setSelectionArea
   }
 
   return (
-    <div className="flex flex-row gap-4 bg-gray-700 text-gray-300 rounded-lg p-4 justify-between w-full">
+    <div className="flex flex-row gap-4 bg-gray-700 text-gray-300 rounded-lg p-4 justify-between items-center w-full">
       <h2 className="text-white text-lg font-bold">Focus area tools</h2>
 
       <div id="tools" className="flex gap-4 items-center">

diff --git a/src/components/vesselDetailsBox.tsx b/src/components/vesselDetailsBox.tsx
@@ -81,17 +81,25 @@ export default function VesselDetailsBox() {
       ) : (
         vesselDetails && (
           <div>
-            <h2 className="text-lg font-bold pb-3">Vessel Details</h2>
-            <button
-              title="Close vessel details"
-              className="absolute top-4 right-4"
-              onClick={() => setSelectedVesselmmsi(undefined)}
-            >
-              <CloseSVG />
-            </button>
+            <h2 className="text-lg font-bold">Vessel Details</h2>
+            <div className="absolute top-4 right-4 flex gap-1 items-center">
+              <button title="Hide/show vessel details" onClick={() => setIsCollapsed(!isCollapsed)} className="">
+                {isCollapsed ? <ChevronSVG rotate={180} /> : <ChevronSVG />}
+              </button>
+              <button
+                title="Close vessel details"
+                className=""
+                onClick={() => {
+                  setSelectedVesselmmsi(undefined)
+                  setPathIsShown(false)
+                }}
+              >
+                <CloseSVG />
+              </button>
+            </div>
             {!isCollapsed && (
               <>
-                <div id="vessel-info" className="flex flex-col">
+                <div id="vessel-info" className="flex flex-col pt-3">
                   {vesselDetailsContent.map((content, index) => (
                     <div
                       className="flex flex-row gap-3 py-1 px-2 rounded-md even:bg-gray-700 odd:bg-gray-600 text-sm"
@@ -125,13 +133,6 @@ export default function VesselDetailsBox() {
                 </div>
               </>
             )}
-            <button
-              title="Hide/show vessel details"
-              onClick={() => setIsCollapsed(!isCollapsed)}
-              className={`w-full flex flex-cols items-center justify-center bottom-0 ${!isCollapsed && 'mt-4'}`}
-            >
-              {isCollapsed ? <ChevronSVG rotate={180} /> : <ChevronSVG />}
-            </button>
           </div>
         )
       )}

diff --git a/src/components/vesselMarkerOverlay.tsx b/src/components/vesselMarkerOverlay.tsx
@@ -16,15 +16,15 @@ interface IVesselMarkerOverlayProps {
 }
 
 export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }: IVesselMarkerOverlayProps) {
-  const { selectedVesselmmsi, setSelectedVesselmmsi } = useVesselGuiContext()
+  const { selectedVesselmmsi, setSelectedVesselmmsi, pathIsShown } = useVesselGuiContext()
   const [markerOptions] = useState<ISpriteMarkerOptions[]>([])
   const [pixiContainer] = useState(new PIXI.Container())
   const [overlay] = useState(new SpriteMarkerOverlayHandler(markerOptions, pixiContainer))
   const [arrowTexture, setArrowTexture] = useState<PIXI.Texture | null>(null)
   const [selectedArrowTexture, setSelectedArrowTexture] = useState<PIXI.Texture | null>(null)
   const [circleTexture, setCircleTexture] = useState<PIXI.Texture | null>(null)
   const [selectedCircleTexture, setSelectedCircleTexture] = useState<PIXI.Texture | null>(null)
-  const { clientHandler } = useAppContext()
+  const { clientHandler, hideShips } = useAppContext()
 
   const map = useMap()
 
@@ -87,7 +87,9 @@ export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }:
     })
 
     if (markerOptions.length !== 0) {
-      pixiContainer.addChild(...markerOptions.map((option) => option.sprite))
+      if ((!hideShips && pathIsShown) || !pathIsShown) {
+        pixiContainer.addChild(...markerOptions.map((option) => option.sprite))
+      }
       overlay.updated()
       overlay.redraw()
     }
@@ -104,6 +106,8 @@ export default function VesselMarkerOverlay({ simpleVessels, monitoredVessels }:
     setSelectedVesselmmsi,
     simpleVessels,
     selectedVesselmmsi,
+    pathIsShown,
+    hideShips,
   ])
 
   return null

diff --git a/src/contexts/appcontext.tsx b/src/contexts/appcontext.tsx
@@ -25,7 +25,7 @@ export const useAppContext = () => {
 export const AppContextProvider = ({ children }: { children: React.ReactNode }) => {
   const [myClockSpeed, setMyClockSpeed] = useState<number>(100)
   const [hideShips, setHideShips] = useState<boolean>(true)
-  const myDateTimeRef = useRef(new Date(1725844950 * 1000)) // Initialize ref with current time
+  const myDateTimeRef = useRef(new Date(1725874950 * 1000)) // Initialize ref with current time
 
   const grpcWeb = new GrpcWebImpl('http://localhost:8080', {})
   const client = new AISServiceClientImpl(grpcWeb)