From 8961911386c31b95f6eccda87ad62833f2ea61b8 Mon Sep 17 00:00:00 2001 From: Jonas Geertsen Lund Date: Wed, 20 Nov 2024 15:35:31 +0100 Subject: [PATCH 1/2] Fix width of reason column of monitoring menu --- src/components/monitoringMenu.tsx | 9 +++---- src/components/monitoringMenuRow.tsx | 37 ++++++++++++++++++++-------- 2 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src/components/monitoringMenu.tsx b/src/components/monitoringMenu.tsx index 3c14629..60b3fe1 100644 --- a/src/components/monitoringMenu.tsx +++ b/src/components/monitoringMenu.tsx @@ -29,11 +29,10 @@ export default function MonitoringMenu({ monitoredVessels, zoomToVessel }: IMoni {!isCollapsed && ( <> -
-

MMSI

-

Trust

-

Reason

-

Find vessel

+
+

MMSI

+

Trust

+

Reason

{sortedMonitoredVessels.map((vessel, index) => ( diff --git a/src/components/monitoringMenuRow.tsx b/src/components/monitoringMenuRow.tsx index 3fe090d..b420a53 100644 --- a/src/components/monitoringMenuRow.tsx +++ b/src/components/monitoringMenuRow.tsx @@ -19,29 +19,46 @@ export default function MonitoringMenuRow({ monitoredVessel, zoomToCallback }: I } } + function convertToReasons(reason: string | undefined): string[] { + const separator = ' | ' + if (reason === undefined || reason.length === 0) { + return [] + } + return reason.split(separator) + } + function handleClick(e: React.MouseEvent) { e.stopPropagation() setSelectedVesselmmsi(monitoredVessel.mmsi) zoomToCallback(monitoredVessel) } + return (
-

{monitoredVessel.mmsi}

-

{(Math.round(monitoredVessel.trustworthiness * 1000) / 10).toFixed(2)}%

-

- {monitoredVessel.reason} -

+

{monitoredVessel.mmsi}

+

{(Math.round(monitoredVessel.trustworthiness * 1000) / 10).toFixed(2)}%

+ {selectedVesselmmsi === monitoredVessel.mmsi ? ( +
+ {convertToReasons(monitoredVessel.reason).map((reason, index) => ( + + {reason} + + ))} +
+ ) : ( +

+ {monitoredVessel.reason} +

+ )} - {selectedVesselmmsi === monitoredVessel.mmsi && ( + {selectedVesselmmsi === monitoredVessel.mmsi ? ( - )} - - {selectedVesselmmsi !== monitoredVessel.mmsi && ( + ) : (
Zoom
)}
From d455165b30e15f56cef42ac6cd1b11bf4c617c7d Mon Sep 17 00:00:00 2001 From: Jonas Geertsen Lund Date: Thu, 21 Nov 2024 13:54:09 +0100 Subject: [PATCH 2/2] Add setting for filtering out base stations and AtoN --- src/__tests__/StreamManager.test.ts | 4 +-- src/components/navbar.tsx | 42 +++++++++++++++++++++++++++- src/contexts/appcontext.tsx | 19 ++++++++++++- src/implementations/StreamManager.ts | 1 - src/pages/vesselMapPage.tsx | 28 ++++++++++++++++--- src/svgs/faviconSVG.tsx | 8 +++--- 6 files changed, 89 insertions(+), 13 deletions(-) diff --git a/src/__tests__/StreamManager.test.ts b/src/__tests__/StreamManager.test.ts index 85d3557..c6720a3 100644 --- a/src/__tests__/StreamManager.test.ts +++ b/src/__tests__/StreamManager.test.ts @@ -18,9 +18,9 @@ beforeEach(() => { getSimpleVessles: jest .fn() .mockResolvedValue([ - { mmsi: 123456, location: { point: { lon: 1, lat: 2 }, timestamp: new Date(), heading: 45 } }, + { mmsi: 123456789, location: { point: { lon: 1, lat: 2 }, timestamp: new Date(), heading: 45 } }, ]), - getMonitoredVessels: jest.fn().mockResolvedValue([{ mmsi: 123456, trustworthiness: 0.9, reason: 'Test' }]), + getMonitoredVessels: jest.fn().mockResolvedValue([{ mmsi: 123456789, trustworthiness: 0.9, reason: 'Test' }]), } as unknown as jest.Mocked setAllVessels = jest.fn() diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index 323e440..3f89992 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -5,7 +5,17 @@ import HamburgerSVG from '../svgs/hamburgerSVG' import CloseSVG from '../svgs/closeSVG' export default function Navbar() { - const { myClockSpeed, setMyClockSpeed, myDateTimeRef, hideVessels, setHideVessels } = useAppContext() + const { + myClockSpeed, + setMyClockSpeed, + myDateTimeRef, + hideVessels, + setHideVessels, + showBaseStations, + setShowBaseStations, + showAtoNs, + setShowAtoNs, + } = useAppContext() const [opened, setOpened] = useState(false) const [localClock, setLocalClock] = useState(myDateTimeRef.current) const [localSpeed, setLocalSpeed] = useState(myClockSpeed.toString()) @@ -92,6 +102,36 @@ export default function Navbar() {
+ +
+ +

Filtering

+
+ Show base stations + +
+
+ Show AtoN (navigational aids) + +
)}