From ff877f9e3be4a713c0ebb09ee413eada5da573df Mon Sep 17 00:00:00 2001 From: mikkelklitlund Date: Tue, 22 Oct 2024 10:24:34 +0200 Subject: [PATCH 01/10] small performance gain Co-authored-by: AndersToft20 --- src/components/vesselMarker.tsx | 22 +++++++++------------- src/index.css | 19 ++++++++++++++++--- 2 files changed, 25 insertions(+), 16 deletions(-) diff --git a/src/components/vesselMarker.tsx b/src/components/vesselMarker.tsx index 355b977..81a3c27 100644 --- a/src/components/vesselMarker.tsx +++ b/src/components/vesselMarker.tsx @@ -19,21 +19,17 @@ export default function VesselMarker({ vessel, popup }: IVesselMarker) { className: 'custom-div-icon', html: vessel.location.heading ? ` - - - - - ` +
+ ` : ` - - - +
`, - iconAnchor: [0, 0], + iconAnchor: [10, 10], popupAnchor: [0, -25], }) diff --git a/src/index.css b/src/index.css index 740bb98..3a6abab 100644 --- a/src/index.css +++ b/src/index.css @@ -2,8 +2,6 @@ @tailwind components; @tailwind utilities; - - /* width */ ::-webkit-scrollbar { width: 8px; @@ -24,4 +22,19 @@ /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #555; -} \ No newline at end of file +} + +/* Vessel shape using the correct polygon */ +.vessel-shape { + width: 16px; + height: 16px; + background-color: currentColor; + clip-path: polygon(0% 20%, 50% 20%, 50% 20%, 80% 50%, 50% 80%, 50% 80%, 0% 80%); +} + +.circle { + width: 8px; + height: 8px; + border-radius: 50%; + background-color: currentColor; +} From 70e1427b1c58e4a52fa4f9b8ce08781934c010a4 Mon Sep 17 00:00:00 2001 From: mikkelklitlund Date: Tue, 22 Oct 2024 10:49:20 +0200 Subject: [PATCH 02/10] optimized render --- src/components/toolbar.tsx | 8 ++++++-- src/components/vessel.tsx | 32 ++++++++++++++++++++++---------- src/components/vesselMarker.tsx | 2 +- src/pages/vesselMapPage.tsx | 20 +++++++++++--------- 4 files changed, 40 insertions(+), 22 deletions(-) diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx index b388d69..793e329 100644 --- a/src/components/toolbar.tsx +++ b/src/components/toolbar.tsx @@ -14,7 +14,6 @@ export default function Toolbar({ map, onMonitoringAreaChange }: IToolbarProps) const clearTool = useCallback(() => { if (map !== null) { - onMonitoringAreaChange(undefined) //no monitoring area active map.eachLayer(function (layer: L.Layer) { if (!(layer instanceof L.TileLayer || layer instanceof L.Marker)) { map.removeLayer(layer) @@ -23,6 +22,11 @@ export default function Toolbar({ map, onMonitoringAreaChange }: IToolbarProps) } }, [map, onMonitoringAreaChange]) + function clearOnClick() { + clearTool() + onMonitoringAreaChange(undefined) + } + useEffect(() => { if (activeTool !== ActiveGuiTool.Mouse) { clearTool() @@ -81,7 +85,7 @@ export default function Toolbar({ map, onMonitoringAreaChange }: IToolbarProps) - - - - + ) } diff --git a/src/components/vesselMarker.tsx b/src/components/vesselMarker.tsx index 1a0edab..0c173e7 100644 --- a/src/components/vesselMarker.tsx +++ b/src/components/vesselMarker.tsx @@ -3,8 +3,9 @@ import L from 'leaflet' import { Marker, Popup as LPopup } from 'react-leaflet' import IVesselDetail from '../models/detailedVessel' import React, { useState } from 'react' +import ReactDOMServer from 'react-dom/server' import { useVesselGuiContext } from '../contexts/vesselGuiContext' - +import VesselSVG from '../svgs/vesselSVG' interface IVesselMarker { vessel: ISimpleVessel popup: React.ReactNode @@ -15,18 +16,15 @@ export default function VesselMarker({ vessel, popup }: IVesselMarker) { const { selectedVesselmmsi, setSelectedVesselmmsi } = useVesselGuiContext() const [markerRef, setMarkerRef] = useState(null) + const selectedColour = "green" + const icon = L.divIcon({ className: 'custom-div-icon', html: vessel.location.heading - ? ` -
- ` + ? `${ReactDOMServer.renderToString()}` : `
`, iconAnchor: [0, 0], diff --git a/src/index.css b/src/index.css index 3a6abab..d899c10 100644 --- a/src/index.css +++ b/src/index.css @@ -26,10 +26,10 @@ /* Vessel shape using the correct polygon */ .vessel-shape { - width: 16px; - height: 16px; + width: 20px; + height: 10px; background-color: currentColor; - clip-path: polygon(0% 20%, 50% 20%, 50% 20%, 80% 50%, 50% 80%, 50% 80%, 0% 80%); + clip-path: polygon(0% 0%, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 50% 100%, 0% 100%); } .circle { diff --git a/src/pages/vesselMapPage.tsx b/src/pages/vesselMapPage.tsx index f636036..9b2edbb 100644 --- a/src/pages/vesselMapPage.tsx +++ b/src/pages/vesselMapPage.tsx @@ -56,7 +56,7 @@ export default function VesselMapPage() { return (
-
+
{map !== null && }
diff --git a/src/svgs/vesselSVG.tsx b/src/svgs/vesselSVG.tsx new file mode 100644 index 0000000..8d732d4 --- /dev/null +++ b/src/svgs/vesselSVG.tsx @@ -0,0 +1,31 @@ +interface IVesselSVGProps { + bgColour?: string + width?:string + height?: string + strokeColour?: string + strokeWidth?: string + heading: number + selected: boolean +} + +export default function VesselSVG({ bgColour, width, height, strokeColour, strokeWidth, heading, selected }: IVesselSVGProps) { + const defaultWidth = "20px" + const defaultHeight = "20px" + const defaultStrokeColour = "white" + const defaultStrokeWidth = "1" + const defaultBgColour = "black" + + if (selected) { + bgColour = "green" + strokeColour = "green" + } else { + bgColour = bgColour ? bgColour : defaultBgColour + strokeColour = strokeColour ? strokeColour : defaultStrokeColour + } + + return ( + + + + ) +} diff --git a/test.txt b/test.txt deleted file mode 100644 index e69de29..0000000 From 27120013ba6b97d148888700e09c6fcda1c15d15 Mon Sep 17 00:00:00 2001 From: Jonas Geertsen Lund Date: Thu, 24 Oct 2024 10:41:36 +0200 Subject: [PATCH 05/10] Added Google Font and new colour for toolbar --- index.html | 3 ++ src/components/toolbar.tsx | 80 +++++++++++++++++++------------------- src/index.css | 8 ++++ 3 files changed, 51 insertions(+), 40 deletions(-) diff --git a/index.html b/index.html index 569251f..d78a116 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,9 @@ + + + AIS Analyzer diff --git a/src/components/toolbar.tsx b/src/components/toolbar.tsx index b65467a..1750140 100644 --- a/src/components/toolbar.tsx +++ b/src/components/toolbar.tsx @@ -58,49 +58,49 @@ export default function Toolbar({ map, onMonitoringAreaChange }: IToolbarProps) }, [map, setActiveTool, onMonitoringAreaChange]) return ( -
-

- Toolbar -

+
+

Focus area tools

- +
+ - + - + +
) } diff --git a/src/index.css b/src/index.css index d899c10..c8c1d28 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,14 @@ @tailwind components; @tailwind utilities; +body { + font-family: -apple-system, BlinkMacSystemFont, 'Gabarito', 'Segoe UI', 'Roboto', 'Oxygen', + 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + /* width */ ::-webkit-scrollbar { width: 8px; From dd38b6cd9d50d8e44d445973651e11921c5a9a68 Mon Sep 17 00:00:00 2001 From: mikkelklitlund Date: Thu, 24 Oct 2024 10:44:52 +0200 Subject: [PATCH 06/10] optimized render --- src/components/map.tsx | 2 +- src/components/vessel.tsx | 7 ++---- src/components/vesselMap.tsx | 40 +++++++++++++++++++++++++++++++++ src/components/vesselMarker.tsx | 6 ++--- src/pages/vesselMapPage.tsx | 11 ++------- test.txt | 0 6 files changed, 48 insertions(+), 18 deletions(-) create mode 100644 src/components/vesselMap.tsx delete mode 100644 test.txt diff --git a/src/components/map.tsx b/src/components/map.tsx index 970fee1..7d55eb8 100644 --- a/src/components/map.tsx +++ b/src/components/map.tsx @@ -1,4 +1,4 @@ -import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet' +import { MapContainer, TileLayer, useMap } from 'react-leaflet' import L from 'leaflet' diff --git a/src/components/vessel.tsx b/src/components/vessel.tsx index 7d99c27..ebbd81a 100644 --- a/src/components/vessel.tsx +++ b/src/components/vessel.tsx @@ -1,21 +1,18 @@ import { ISimpleVessel } from '../models/simpleVessel' -import { useEffect, useState } from 'react' +import { useState } from 'react' import { ILocation } from '../models/location' import { IDetailedVessel } from '../models/detailedVessel' import Popup from './popup' -import Path from './path' -import { Marker } from 'react-leaflet' import { useAppContext } from '../contexts/appcontext' import VesselMarker from './vesselMarker' import React from 'react' interface IVesselProps { vessel: ISimpleVessel - isMonitored: boolean } const Vessel = React.memo( - ({ vessel, isMonitored }: IVesselProps) => { + ({ vessel }: IVesselProps) => { const [history, setHistory] = useState(undefined) const [vesselDetail, setVesselDetail] = useState(undefined) const { clientHandler } = useAppContext() diff --git a/src/components/vesselMap.tsx b/src/components/vesselMap.tsx new file mode 100644 index 0000000..89b61ee --- /dev/null +++ b/src/components/vesselMap.tsx @@ -0,0 +1,40 @@ +import L from 'leaflet' +import { useState, useEffect } from 'react' +import { useMapEvents } from 'react-leaflet' +import { ISimpleVessel } from '../models/simpleVessel' +import Vessel from './vessel' + +interface IVesselMapProps { + vessels: ISimpleVessel[] +} + +export default function VesselMap({ vessels }: IVesselMapProps) { + const [mapBounds, setMapBounds] = useState(null) + + const map = useMapEvents({ + moveend() { + setMapBounds(map.getBounds()) + }, + zoomend() { + setMapBounds(map.getBounds()) + }, + }) + + useEffect(() => { + setMapBounds(map.getBounds()) + }, [map]) + + const visibleVessels = vessels.filter((vessel) => { + if (!mapBounds) return true + const vesselLatLng = new L.LatLng(vessel.location.point.lat, vessel.location.point.lon) + return mapBounds.contains(vesselLatLng) + }) + + return ( + <> + {visibleVessels.map((vessel) => ( + + ))} + + ) +} diff --git a/src/components/vesselMarker.tsx b/src/components/vesselMarker.tsx index 1a0edab..5e1e5af 100644 --- a/src/components/vesselMarker.tsx +++ b/src/components/vesselMarker.tsx @@ -1,8 +1,8 @@ -import { ISimpleVessel } from '../models/simpleVessel' -import L from 'leaflet' import { Marker, Popup as LPopup } from 'react-leaflet' -import IVesselDetail from '../models/detailedVessel' import React, { useState } from 'react' +import L from 'leaflet' +import { ISimpleVessel } from '../models/simpleVessel' +import IVesselDetail from '../models/detailedVessel' import { useVesselGuiContext } from '../contexts/vesselGuiContext' interface IVesselMarker { diff --git a/src/pages/vesselMapPage.tsx b/src/pages/vesselMapPage.tsx index 87daeac..048ce9e 100644 --- a/src/pages/vesselMapPage.tsx +++ b/src/pages/vesselMapPage.tsx @@ -14,6 +14,7 @@ import Vessel from '../components/vessel' import { useAppContext } from '../contexts/appcontext' import TimeLine from '../components/timeline' import StreamManager from '../implementations/StreamManager' +import VesselMap from '../components/vesselMap' export default function VesselMapPage() { const [allVessels, setAllVessels] = useState(undefined) @@ -85,15 +86,7 @@ export default function VesselMapPage() {
- {allVessels?.map((vessel) => { - return ( - mv.mmsi).includes(vessel.mmsi) || false} - > - ) - })} + {allVessels && allVessels.length > 0 ? : <>}
{/*
diff --git a/test.txt b/test.txt deleted file mode 100644 index e69de29..0000000 From b1d93e0db960030b794d8e66cd38de5520ac5dd4 Mon Sep 17 00:00:00 2001 From: mikkelklitlund Date: Thu, 24 Oct 2024 13:26:52 +0200 Subject: [PATCH 07/10] popup start Co-authored-by: Jonas Geertsen Lund --- src/components/popup.tsx | 10 ++++++---- src/components/vessel.tsx | 7 +------ src/components/vesselMap.tsx | 2 +- src/components/vesselMarker.tsx | 33 ++++++++++++++++++++++----------- src/models/detailedVessel.ts | 30 +++++++++++++++++++----------- 5 files changed, 49 insertions(+), 33 deletions(-) diff --git a/src/components/popup.tsx b/src/components/popup.tsx index 1bf559b..5a902b7 100644 --- a/src/components/popup.tsx +++ b/src/components/popup.tsx @@ -7,12 +7,14 @@ interface IPopupProps { export default function Popup({ vessel }: IPopupProps) { return (
-

ID: {vessel.id}

Name: {vessel.name}

-

Callsign: {vessel.callSign}

-

Length: {vessel.length}

-

pos fixing device: {vessel.positionFixingDevice}

MMSI: {vessel.mmsi}

+

IMO: {vessel.imo}

+

Ship type: {vessel.shipType}

+

Width: {vessel.width}

+

Length: {vessel.length}

+

Callsign: {vessel.callSign}

+

Pos fixing device: {vessel.positionFixingDevice}

) } diff --git a/src/components/vessel.tsx b/src/components/vessel.tsx index ebbd81a..acab00b 100644 --- a/src/components/vessel.tsx +++ b/src/components/vessel.tsx @@ -1,9 +1,6 @@ import { ISimpleVessel } from '../models/simpleVessel' import { useState } from 'react' import { ILocation } from '../models/location' -import { IDetailedVessel } from '../models/detailedVessel' -import Popup from './popup' -import { useAppContext } from '../contexts/appcontext' import VesselMarker from './vesselMarker' import React from 'react' @@ -14,12 +11,10 @@ interface IVesselProps { const Vessel = React.memo( ({ vessel }: IVesselProps) => { const [history, setHistory] = useState(undefined) - const [vesselDetail, setVesselDetail] = useState(undefined) - const { clientHandler } = useAppContext() return ( <> - : <>}> + ) }, diff --git a/src/components/vesselMap.tsx b/src/components/vesselMap.tsx index 89b61ee..c3cf2f8 100644 --- a/src/components/vesselMap.tsx +++ b/src/components/vesselMap.tsx @@ -33,7 +33,7 @@ export default function VesselMap({ vessels }: IVesselMapProps) { return ( <> {visibleVessels.map((vessel) => ( - + ))} ) diff --git a/src/components/vesselMarker.tsx b/src/components/vesselMarker.tsx index 5e1e5af..dff0468 100644 --- a/src/components/vesselMarker.tsx +++ b/src/components/vesselMarker.tsx @@ -1,19 +1,20 @@ import { Marker, Popup as LPopup } from 'react-leaflet' -import React, { useState } from 'react' +import { useState } from 'react' import L from 'leaflet' import { ISimpleVessel } from '../models/simpleVessel' import IVesselDetail from '../models/detailedVessel' import { useVesselGuiContext } from '../contexts/vesselGuiContext' +import { useAppContext } from '../contexts/appcontext' +import Popup from './popup' interface IVesselMarker { vessel: ISimpleVessel - popup: React.ReactNode } -export default function VesselMarker({ vessel, popup }: IVesselMarker) { - const [vesselDetails, setVesselDetails] = useState(undefined) +export default function VesselMarker({ vessel }: IVesselMarker) { + const [vesselDetails, setVesselDetails] = useState({ mmsi: 0 }) const { selectedVesselmmsi, setSelectedVesselmmsi } = useVesselGuiContext() - const [markerRef, setMarkerRef] = useState(null) + const { clientHandler, myDateTime } = useAppContext() const icon = L.divIcon({ className: 'custom-div-icon', @@ -30,18 +31,28 @@ export default function VesselMarker({ vessel, popup }: IVesselMarker) { ">
`, iconAnchor: [0, 0], - popupAnchor: [0, -25], + popupAnchor: [0, -10], }) - if (markerRef) { - markerRef.on('click', function (e) { + const handleVesselClick = async () => { + if (selectedVesselmmsi === vessel.mmsi) { + setSelectedVesselmmsi(undefined) + } else { + const details = await clientHandler.GetVesselInfo({ mmsi: vessel.mmsi, timestamp: myDateTime.getTime() }) + setVesselDetails(details) setSelectedVesselmmsi(vessel.mmsi) - }) + } } return ( - - {vesselDetails && {popup}} + + + + ) } diff --git a/src/models/detailedVessel.ts b/src/models/detailedVessel.ts index 8b8e064..5766cc4 100644 --- a/src/models/detailedVessel.ts +++ b/src/models/detailedVessel.ts @@ -1,15 +1,23 @@ - export interface IDetailedVessel { - mmsi: number, - name?: string, - shipType?: string, - imo?: number, - callSign?: string, - width?: number, - length?: number, - positionFixingDevice?: string; + mmsi: number + name?: string + shipType?: string + imo?: number + callSign?: string + width?: number + length?: number + positionFixingDevice?: string } export default class DetailedVessel implements IDetailedVessel { - constructor(public name: string, public mmsi: number, public shipType?: string, public imo?: number, public callSign?: string, public width?: number, public length?: number, public positionFixingDevice?: string) { } -} \ No newline at end of file + constructor( + public mmsi: number, + public name?: string, + public shipType?: string, + public imo?: number, + public callSign?: string, + public width?: number, + public length?: number, + public positionFixingDevice?: string + ) {} +} From a7d332b6a9121c33b986e276433becd0c3b68c4f Mon Sep 17 00:00:00 2001 From: Jonas Geertsen Lund Date: Thu, 24 Oct 2024 15:12:47 +0200 Subject: [PATCH 08/10] Moved getVesselInfo to popup Co-authored-by: mikkelklitlund --- src/components/popup.tsx | 44 ++++++++++++++++++++++++--------- src/components/vesselMarker.tsx | 30 +++++++++------------- src/index.css | 15 ----------- src/svgs/circleSVG.tsx | 22 +++++++++++++++++ src/svgs/vesselSVG.tsx | 16 ++++++------ 5 files changed, 74 insertions(+), 53 deletions(-) create mode 100644 src/svgs/circleSVG.tsx diff --git a/src/components/popup.tsx b/src/components/popup.tsx index 5a902b7..fc08556 100644 --- a/src/components/popup.tsx +++ b/src/components/popup.tsx @@ -1,20 +1,42 @@ +import { useEffect, useState } from 'react' +import { useAppContext } from '../contexts/appcontext' import { IDetailedVessel } from '../models/detailedVessel' interface IPopupProps { - vessel: IDetailedVessel + mmsi: number } -export default function Popup({ vessel }: IPopupProps) { +export default function Popup({ mmsi }: IPopupProps) { + const { clientHandler, myDateTime } = useAppContext() + const [ vesselDetails, setVesselDetails ] = useState(undefined) + const [ loading, setLoading ] = useState(true) + + useEffect(() => { + const fetchDetails = async () => { + const details = await clientHandler.GetVesselInfo({ mmsi, timestamp: myDateTime.getTime() }) + setVesselDetails(details) + } + + fetchDetails() + setLoading(false) + },[]) + return ( -
-

Name: {vessel.name}

-

MMSI: {vessel.mmsi}

-

IMO: {vessel.imo}

-

Ship type: {vessel.shipType}

-

Width: {vessel.width}

-

Length: {vessel.length}

-

Callsign: {vessel.callSign}

-

Pos fixing device: {vessel.positionFixingDevice}

+ ) } diff --git a/src/components/vesselMarker.tsx b/src/components/vesselMarker.tsx index 9748b6d..c3474c2 100644 --- a/src/components/vesselMarker.tsx +++ b/src/components/vesselMarker.tsx @@ -1,23 +1,17 @@ import { Marker, Popup as LPopup } from 'react-leaflet' -import { useState } from 'react' import L from 'leaflet' import { ISimpleVessel } from '../models/simpleVessel' -import IVesselDetail from '../models/detailedVessel' import ReactDOMServer from 'react-dom/server' import { useVesselGuiContext } from '../contexts/vesselGuiContext' -import { useAppContext } from '../contexts/appcontext' import Popup from './popup' import VesselSVG from '../svgs/vesselSVG' +import CircleSVG from '../svgs/circleSVG' interface IVesselMarker { vessel: ISimpleVessel } export default function VesselMarker({ vessel }: IVesselMarker) { - const [vesselDetails, setVesselDetails] = useState({ mmsi: 0 }) const { selectedVesselmmsi, setSelectedVesselmmsi } = useVesselGuiContext() - const { clientHandler, myDateTime } = useAppContext() - - const selectedColour = 'green' const icon = L.divIcon({ className: 'custom-div-icon', @@ -25,21 +19,17 @@ export default function VesselMarker({ vessel }: IVesselMarker) { ? `${ReactDOMServer.renderToString( )}` - : ` -
- `, + : `${ReactDOMServer.renderToString( + + )}`, iconAnchor: [0, 0], - popupAnchor: [0, -10], + popupAnchor: [0, -15], }) - const handleVesselClick = async () => { + const handleVesselClick = () => { if (selectedVesselmmsi === vessel.mmsi) { setSelectedVesselmmsi(undefined) } else { - const details = await clientHandler.GetVesselInfo({ mmsi: vessel.mmsi, timestamp: myDateTime.getTime() }) - setVesselDetails(details) setSelectedVesselmmsi(vessel.mmsi) } } @@ -50,9 +40,11 @@ export default function VesselMarker({ vessel }: IVesselMarker) { position={[vessel.location.point.lat, vessel.location.point.lon]} icon={icon} > - - - + { selectedVesselmmsi === vessel.mmsi && + + + + } ) } diff --git a/src/index.css b/src/index.css index c8c1d28..0fd44d4 100644 --- a/src/index.css +++ b/src/index.css @@ -31,18 +31,3 @@ body { ::-webkit-scrollbar-thumb:hover { background: #555; } - -/* Vessel shape using the correct polygon */ -.vessel-shape { - width: 20px; - height: 10px; - background-color: currentColor; - clip-path: polygon(0% 0%, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 50% 100%, 0% 100%); -} - -.circle { - width: 8px; - height: 8px; - border-radius: 50%; - background-color: currentColor; -} diff --git a/src/svgs/circleSVG.tsx b/src/svgs/circleSVG.tsx new file mode 100644 index 0000000..c09adf2 --- /dev/null +++ b/src/svgs/circleSVG.tsx @@ -0,0 +1,22 @@ +interface ICircleSVGProps { + bgColour?: string + selected: boolean + diameter?:number +} + +export default function CircleSVG({ bgColour, selected, diameter }: ICircleSVGProps) { + const defaultBgColour = "black" + diameter = diameter ? diameter : 8 + + if (selected) { + bgColour = "green" + } else { + bgColour = bgColour ? bgColour : defaultBgColour + } + + return ( + + + + ) +} diff --git a/src/svgs/vesselSVG.tsx b/src/svgs/vesselSVG.tsx index 8d732d4..aa1f250 100644 --- a/src/svgs/vesselSVG.tsx +++ b/src/svgs/vesselSVG.tsx @@ -1,18 +1,18 @@ interface IVesselSVGProps { bgColour?: string - width?:string - height?: string + width?:number + height?: number strokeColour?: string - strokeWidth?: string + strokeWidth?: number heading: number selected: boolean } export default function VesselSVG({ bgColour, width, height, strokeColour, strokeWidth, heading, selected }: IVesselSVGProps) { - const defaultWidth = "20px" - const defaultHeight = "20px" + width = width ? width : 20 + height = height ? height : 20 const defaultStrokeColour = "white" - const defaultStrokeWidth = "1" + const defaultStrokeWidth = 0 const defaultBgColour = "black" if (selected) { @@ -24,8 +24,8 @@ export default function VesselSVG({ bgColour, width, height, strokeColour, strok } return ( - - + + ) } From c2ac443f276001e509c25de9b1230bc9a7b37262 Mon Sep 17 00:00:00 2001 From: mikkelklitlund Date: Thu, 24 Oct 2024 15:29:32 +0200 Subject: [PATCH 09/10] working popup Co-authored-by: Jonas Geertsen Lund --- src/components/popup.tsx | 20 +++++++++++--------- src/components/vesselMarker.tsx | 10 ++-------- 2 files changed, 13 insertions(+), 17 deletions(-) diff --git a/src/components/popup.tsx b/src/components/popup.tsx index fc08556..94b8ae3 100644 --- a/src/components/popup.tsx +++ b/src/components/popup.tsx @@ -8,24 +8,25 @@ interface IPopupProps { export default function Popup({ mmsi }: IPopupProps) { const { clientHandler, myDateTime } = useAppContext() - const [ vesselDetails, setVesselDetails ] = useState(undefined) - const [ loading, setLoading ] = useState(true) + const [vesselDetails, setVesselDetails] = useState(undefined) + const [loading, setLoading] = useState(true) useEffect(() => { const fetchDetails = async () => { const details = await clientHandler.GetVesselInfo({ mmsi, timestamp: myDateTime.getTime() }) setVesselDetails(details) } - + fetchDetails() setLoading(false) - },[]) + }, []) return ( -