-
-
-
Suspicios Vessel Finder
- { opened &&
-
-
Simulation settings
-
-
-
- manageSpeedChange(e.target.value)} value={myClockSpeed} />
-
-
-
- manageDateChange(e.target.value)} value={convertedMyDateTime} />
-
-
- }
-
+ return (
+
+
+
+
Suspicios Vessel Finder
+ {opened && (
+
+
Simulation settings
+
+
+
+ manageSpeedChange(e.target.value)}
+ value={myClockSpeed}
+ />
+
+
+
+ manageDateChange(e.target.value)}
+ value={convertedMyDateTime}
+ />
-
- )
-}
\ No newline at end of file
+
+ )}
+
+
+
+ )
+}
diff --git a/src/components/path.tsx b/src/components/path.tsx
index d8eb623..9b65f3e 100644
--- a/src/components/path.tsx
+++ b/src/components/path.tsx
@@ -1,34 +1,34 @@
-import { useEffect } from 'react';
-import { useVesselGuiContext } from '../contexts/vesselGuiContext';
-import { ILocation } from '../models/location';
-import L from "leaflet"
+import { useEffect } from 'react'
+import { useVesselGuiContext } from '../contexts/vesselGuiContext'
+import { ILocation } from '../models/location'
+import L from 'leaflet'
interface IPathProps {
- path: ILocation[];
+ path: ILocation[]
map: L.Map
}
export default function Path({ path, map }: IPathProps) {
useEffect(() => {
- const points = path.map(loc => L.latLng(loc.point.lat, loc.point.lon))
+ const points = path.map((loc) => L.latLng(loc.point.lat, loc.point.lon))
const polyline = new L.Polyline(points, {
color: 'red',
weight: 3,
opacity: 0.5,
- smoothFactor: 1
- });
-
- polyline.addTo(map);
-
+ smoothFactor: 1,
+ })
+
+ polyline.addTo(map)
+
return () => {
- map.eachLayer(layer => {
- if(layer instanceof L.Polyline) {
+ map.eachLayer((layer) => {
+ if (layer instanceof L.Polyline) {
map.removeLayer(layer)
}
- })
+ })
}
}, [path])
- return null
+ return null
}
diff --git a/src/components/timeline.tsx b/src/components/timeline.tsx
index 5793050..4ebe591 100644
--- a/src/components/timeline.tsx
+++ b/src/components/timeline.tsx
@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react'
import { useVesselGuiContext } from '../contexts/vesselGuiContext'
interface ITimelineProps {
- timestamps: Date[];
- onChange(index: number): void;
+ timestamps: Date[]
+ onChange(index: number): void
}
export default function Timeline({ timestamps, onChange }: ITimelineProps) {
@@ -29,11 +29,15 @@ export default function Timeline({ timestamps, onChange }: ITimelineProps) {
- Timestamp: {timelineVal && timestamps[timelineVal] ? timestamps[timelineVal].toISOString().replace("T", " ").replace("Z", "").slice(0, 19) : "unknown"}
+ Timestamp:{' '}
+ {timelineVal && timestamps[timelineVal]
+ ? timestamps[timelineVal].toISOString().replace('T', ' ').replace('Z', '').slice(0, 19)
+ : 'unknown'}
diff --git a/src/contexts/appcontext.tsx b/src/contexts/appcontext.tsx
index 7dc2293..39963c3 100644
--- a/src/contexts/appcontext.tsx
+++ b/src/contexts/appcontext.tsx
@@ -1,53 +1,55 @@
-import { createContext, RefObject, useContext, useEffect, useRef, useState } from 'react';
-import { IClientHandler } from '../interfaces/IClientHandler';
-import { AISServiceClientImpl, GrpcWebImpl } from '../../proto/AIS-protobuf/ais';
-import GRPCClientHandler from '../implementations/GRPCClientHandler';
+import { createContext, RefObject, useContext, useEffect, useRef, useState } from 'react'
+import { IClientHandler } from '../interfaces/IClientHandler'
+import { AISServiceClientImpl, GrpcWebImpl } from '../../proto/AIS-protobuf/ais'
+import GRPCClientHandler from '../implementations/GRPCClientHandler'
interface IAppContext {
- myDateTime: Date;
- myDateTimeRef: RefObject
;
- setMyDateTime: React.Dispatch>;
- myClockSpeed: number;
- setMyClockSpeed: React.Dispatch>;
- clientHandler: IClientHandler;
+ myDateTime: Date
+ myDateTimeRef: RefObject
+ setMyDateTime: React.Dispatch>
+ myClockSpeed: number
+ setMyClockSpeed: React.Dispatch>
+ clientHandler: IClientHandler
}
-const AppContext = createContext(undefined);
+const AppContext = createContext(undefined)
export const useAppContext = () => {
- const context = useContext(AppContext);
+ const context = useContext(AppContext)
if (context === undefined) {
- throw new Error('useAppContext must be used within an AppContextProvider');
+ throw new Error('useAppContext must be used within an AppContextProvider')
}
- return context;
-};
+ return context
+}
export const AppContextProvider = ({ children }: { children: React.ReactNode }) => {
- const [myDateTime, setMyDateTime] = useState(new Date(1725844950 * 1000)); // Initialized with current time
- const [myClockSpeed, setMyClockSpeed] = useState(100);
- const myDateTimeRef = useRef(new Date(1725844950 * 1000)); // Initialize ref with current time
+ const [myDateTime, setMyDateTime] = useState(new Date(1725844950 * 1000)) // Initialized with current time
+ const [myClockSpeed, setMyClockSpeed] = useState(100)
+ const myDateTimeRef = useRef(new Date(1725844950 * 1000)) // Initialize ref with current time
- const grpcWeb = new GrpcWebImpl('http://localhost:8080', {});
- const client = new AISServiceClientImpl(grpcWeb);
- const clientHandler = new GRPCClientHandler(client);
+ const grpcWeb = new GrpcWebImpl('http://localhost:8080', {})
+ const client = new AISServiceClientImpl(grpcWeb)
+ const clientHandler = new GRPCClientHandler(client)
// Manage "fake" global clock
useEffect(() => {
const manageTimeChange = () => {
- setMyDateTime((prevDateTime) => new Date(prevDateTime.getTime() + myClockSpeed * 1000));
- myDateTimeRef.current = new Date(myDateTimeRef.current.getTime() + myClockSpeed * 1000);
- };
+ setMyDateTime((prevDateTime) => new Date(prevDateTime.getTime() + myClockSpeed * 1000))
+ myDateTimeRef.current = new Date(myDateTimeRef.current.getTime() + myClockSpeed * 1000)
+ }
- const interval = setInterval(manageTimeChange, 1000);
+ const interval = setInterval(manageTimeChange, 1000)
- return () => clearInterval(interval); // Clean up the interval on unmount
- }, [myClockSpeed]); // Re-run the effect if myClockSpeed changes
+ return () => clearInterval(interval) // Clean up the interval on unmount
+ }, [myClockSpeed]) // Re-run the effect if myClockSpeed changes
return (
-
+
{children}
- );
-};
+ )
+}
-export default AppContext;
+export default AppContext
diff --git a/src/contexts/vesselGuiContext.tsx b/src/contexts/vesselGuiContext.tsx
index 503a904..8a52d67 100644
--- a/src/contexts/vesselGuiContext.tsx
+++ b/src/contexts/vesselGuiContext.tsx
@@ -60,10 +60,10 @@ export const VesselGuiContextProvider = ({ children }: { children: React.ReactNo
setActiveTime,
selectionArea,
setSelectionArea,
- selectedVesselmmsi,
+ selectedVesselmmsi,
setSelectedVesselmmsi,
- selectedVesselPath,
- setSelectedVesselPath
+ selectedVesselPath,
+ setSelectedVesselPath,
}}
>
{children}
diff --git a/src/implementations/GRPCClientHandler.ts b/src/implementations/GRPCClientHandler.ts
index da05c0a..4f03d01 100644
--- a/src/implementations/GRPCClientHandler.ts
+++ b/src/implementations/GRPCClientHandler.ts
@@ -102,20 +102,24 @@ export default class GRPCClientHandler implements IClientHandler {
}
}
- private convertToVesselPath(grpcVesselPath: VesselPathResponse): IVesselPath{
+ private convertToVesselPath(grpcVesselPath: VesselPathResponse): IVesselPath {
return {
mmsi: grpcVesselPath.mmsi,
pathForecast: {
- locations: []
+ locations: [],
// grpcVesselPath.pathForecast!.locations.map((loc) => {
// return { point: { lon: loc.point!.lon, lat: loc.point!.lat }, heading: loc.heading, timestamp: new Date(loc.timestamp) }
// })
},
pathHistory: {
locations: grpcVesselPath.pathHistory!.locations.map((loc) => {
- return { point: { lon: loc.point!.lon, lat: loc.point!.lat }, heading: loc.heading, timestamp: new Date(loc.timestamp) }
- })
- }
+ return {
+ point: { lon: loc.point!.lon, lat: loc.point!.lat },
+ heading: loc.heading,
+ timestamp: new Date(loc.timestamp),
+ }
+ }),
+ },
}
}
diff --git a/src/implementations/GraphicOverlayHandler.ts b/src/implementations/GraphicOverlayHandler.ts
index 7c4724d..3d6572c 100644
--- a/src/implementations/GraphicOverlayHandler.ts
+++ b/src/implementations/GraphicOverlayHandler.ts
@@ -8,7 +8,10 @@ export default class GraphicOverlayHandler implements IMapOverlay {
private readonly overlay: L.LeafletPixiOverlayDefnition
private isGraphicsUpdated = true
- constructor(private readonly pixiContainer: PIXI.Container, private readonly graphicOptions: IGraphicOptions[]) {
+ constructor(
+ private readonly pixiContainer: PIXI.Container,
+ private readonly graphicOptions: IGraphicOptions[]
+ ) {
this.overlay = L.pixiOverlay(this.getDrawCallback(), pixiContainer, {
doubleBuffering: true,
autoPreventDefault: false,
diff --git a/src/implementations/SpriteMarkerOverlayHandler.ts b/src/implementations/SpriteMarkerOverlayHandler.ts
index 269ce14..5ed2dc4 100644
--- a/src/implementations/SpriteMarkerOverlayHandler.ts
+++ b/src/implementations/SpriteMarkerOverlayHandler.ts
@@ -8,7 +8,10 @@ export default class SpriteMarkerOverlayHandler implements IMapOverlay {
private readonly overlay: L.LeafletPixiOverlayDefnition
private isMarkersUpdated = true
- constructor(private readonly markerOptions: ISpriteMarkerOptions[], private readonly pixiContainer: PIXI.Container) {
+ constructor(
+ private readonly markerOptions: ISpriteMarkerOptions[],
+ private readonly pixiContainer: PIXI.Container
+ ) {
this.overlay = L.pixiOverlay(this.getDrawCallback(), pixiContainer, {
doubleBuffering: true,
autoPreventDefault: false,
diff --git a/src/index.css b/src/index.css
index 0fd44d4..660a6b8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,9 +3,8 @@
@tailwind utilities;
body {
- font-family: -apple-system, BlinkMacSystemFont, 'Gabarito', 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
+ 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;
}
diff --git a/src/interfaces/IClientHandler.ts b/src/interfaces/IClientHandler.ts
index 538a7dd..4fa5417 100644
--- a/src/interfaces/IClientHandler.ts
+++ b/src/interfaces/IClientHandler.ts
@@ -13,7 +13,7 @@ export interface IClientHandler {
getVesselInfo(request: { mmsi: number; timestamp: number }): Promise
getSimpleVessles(request: { timestamp: number }): Promise
getMonitoredVessels(request: { timestamp: number; selection: ISelectionArea }): Promise
- getVesselPath(request: {mmsi: number, starttime: number, endtime: number}): Promise
+ getVesselPath(request: { mmsi: number; starttime: number; endtime: number }): Promise
//Deprecated cant close stream
startStreaming(request: {
diff --git a/src/models/location.ts b/src/models/location.ts
index b1b84e8..bc06d21 100644
--- a/src/models/location.ts
+++ b/src/models/location.ts
@@ -7,5 +7,9 @@ export interface ILocation {
}
export default class Location implements ILocation {
- constructor(public point: IPoint, public heading: number, public timestamp: Date) {}
+ constructor(
+ public point: IPoint,
+ public heading: number,
+ public timestamp: Date
+ ) {}
}
diff --git a/src/models/monitoredVessel.ts b/src/models/monitoredVessel.ts
index 9fe9662..5b72f43 100644
--- a/src/models/monitoredVessel.ts
+++ b/src/models/monitoredVessel.ts
@@ -5,5 +5,9 @@ export interface IMonitoredVessel {
}
export default class MonitoredVessel implements IMonitoredVessel {
- constructor(public mmsi: number, public trustworthiness: number, public reason?: string) { }
+ constructor(
+ public mmsi: number,
+ public trustworthiness: number,
+ public reason?: string
+ ) {}
}
diff --git a/src/models/point.ts b/src/models/point.ts
index 1d1684c..aff8c68 100644
--- a/src/models/point.ts
+++ b/src/models/point.ts
@@ -1,8 +1,11 @@
export interface IPoint {
- lat: number;
- lon: number;
+ lat: number
+ lon: number
}
export default class Point implements IPoint {
- constructor(public lat: number, public lon: number) { }
-}
\ No newline at end of file
+ constructor(
+ public lat: number,
+ public lon: number
+ ) {}
+}
diff --git a/src/models/selectionArea.ts b/src/models/selectionArea.ts
index 5ba4143..298396b 100644
--- a/src/models/selectionArea.ts
+++ b/src/models/selectionArea.ts
@@ -1,9 +1,9 @@
import { IPoint } from './point'
export interface ISelectionArea {
- points: IPoint[];
+ points: IPoint[]
}
export default class SelectionArea implements ISelectionArea {
- constructor(public points: IPoint[]) { }
-}
\ No newline at end of file
+ constructor(public points: IPoint[]) {}
+}
diff --git a/src/models/simpleVessel.ts b/src/models/simpleVessel.ts
index 95131b1..9ae6e19 100644
--- a/src/models/simpleVessel.ts
+++ b/src/models/simpleVessel.ts
@@ -7,5 +7,9 @@ export interface ISimpleVessel {
}
export default class SimpleVessel implements ISimpleVessel {
- constructor(public location: ILocation, public mmsi: number, public heading?: number) {}
+ constructor(
+ public location: ILocation,
+ public mmsi: number,
+ public heading?: number
+ ) {}
}
diff --git a/src/models/vesselPath.ts b/src/models/vesselPath.ts
index 4efb9ed..bca5906 100644
--- a/src/models/vesselPath.ts
+++ b/src/models/vesselPath.ts
@@ -1,7 +1,7 @@
import { ILocation } from './location'
interface IPath {
- locations: ILocation[]
+ locations: ILocation[]
}
export interface IVesselPath {
@@ -11,5 +11,9 @@ export interface IVesselPath {
}
export default class VesselPath implements IVesselPath {
- constructor(public mmsi: number, public pathForecast: IPath, public pathHistory: IPath) {}
+ constructor(
+ public mmsi: number,
+ public pathForecast: IPath,
+ public pathHistory: IPath
+ ) {}
}
diff --git a/src/svgs/chevronSVG.tsx b/src/svgs/chevronSVG.tsx
index 3d6134d..395bfc5 100644
--- a/src/svgs/chevronSVG.tsx
+++ b/src/svgs/chevronSVG.tsx
@@ -1,23 +1,26 @@
interface IChevronProps {
- width?:number
+ width?: number
height?: number
rotate?: number
}
-export default function ChevronSVG({width, height, rotate }: IChevronProps) {
+export default function ChevronSVG({ width, height, rotate }: IChevronProps) {
width = width ? width : 24
height = height ? height : 24
-
+
return (
+ xmlns="http://www.w3.org/2000/svg"
+ width={width}
+ height={height}
+ fill="currentColor"
+ className={'bi bi-chevron-down' + (rotate ? ' rotate-' + rotate : '')}
+ viewBox="0 0 16 16"
+ >
+
+
)
}
diff --git a/src/svgs/clearSVG.tsx b/src/svgs/clearSVG.tsx
index 26bd8fe..6d7c1f8 100644
--- a/src/svgs/clearSVG.tsx
+++ b/src/svgs/clearSVG.tsx
@@ -1,22 +1,22 @@
interface IClearProps {
- width?:number
+ width?: number
height?: number
}
-export default function ClearSVG({width, height }: IClearProps) {
+export default function ClearSVG({ width, height }: IClearProps) {
width = width ? width : 32
height = height ? height : 32
-
+
return (
+ xmlns="http://www.w3.org/2000/svg"
+ width={width}
+ height={height}
+ fill="currentColor"
+ className="bi bi-eraser"
+ viewBox="0 0 16 16"
+ >
+
+
)
}
diff --git a/src/svgs/closeSVG.tsx b/src/svgs/closeSVG.tsx
index 79cacd2..765dcdf 100644
--- a/src/svgs/closeSVG.tsx
+++ b/src/svgs/closeSVG.tsx
@@ -1,15 +1,15 @@
interface ICloseProps {
- width?:number
+ width?: number
height?: number
}
-export default function CloseSVG({width, height }: ICloseProps) {
+export default function CloseSVG({ width, height }: ICloseProps) {
width = width ? width : 25
height = height ? height : 25
-
+
return (
)
}
diff --git a/src/svgs/eyeSVG.tsx b/src/svgs/eyeSVG.tsx
index cc9a5b5..3c7e101 100644
--- a/src/svgs/eyeSVG.tsx
+++ b/src/svgs/eyeSVG.tsx
@@ -1,23 +1,23 @@
interface IEyeProps {
- width?:number
+ width?: number
height?: number
}
-export default function EyeSVG({width, height }: IEyeProps) {
+export default function EyeSVG({ width, height }: IEyeProps) {
width = width ? width : 20
height = height ? height : 20
-
+
return (
+ xmlns="http://www.w3.org/2000/svg"
+ width={width}
+ height={height}
+ fill="currentColor"
+ className="bi bi-eye"
+ viewBox="0 0 16 16"
+ >
+
+
+
)
}
diff --git a/src/svgs/faviconSVG.tsx b/src/svgs/faviconSVG.tsx
index 7d0daa9..9cd7b90 100644
--- a/src/svgs/faviconSVG.tsx
+++ b/src/svgs/faviconSVG.tsx
@@ -1,22 +1,25 @@
interface IFaviconProps {
- width?:number
+ width?: number
height?: number
}
-export default function FaviconSVG({width, height }: IFaviconProps) {
+export default function FaviconSVG({ width, height }: IFaviconProps) {
width = width ? width : 30
height = height ? height : 30
-
+
return (
)
}
diff --git a/src/svgs/hamburgerSVG.tsx b/src/svgs/hamburgerSVG.tsx
index b4850bc..fabed8d 100644
--- a/src/svgs/hamburgerSVG.tsx
+++ b/src/svgs/hamburgerSVG.tsx
@@ -1,15 +1,15 @@
interface IHamburgerProps {
- width?:number
+ width?: number
height?: number
}
-export default function HamburgerSVG({width, height }: IHamburgerProps) {
+export default function HamburgerSVG({ width, height }: IHamburgerProps) {
width = width ? width : 25
height = height ? height : 25
-
+
return (
)
}
diff --git a/src/svgs/infoSVG.tsx b/src/svgs/infoSVG.tsx
index 518d904..0c9f56c 100644
--- a/src/svgs/infoSVG.tsx
+++ b/src/svgs/infoSVG.tsx
@@ -1,15 +1,15 @@
interface IInfoProps {
- width?:number
+ width?: number
height?: number
}
-export default function InfoSVG({width, height}: IInfoProps) {
+export default function InfoSVG({ width, height }: IInfoProps) {
width = width ? width : 24
height = height ? height : 24
-
+
return (
+
+
)
}
diff --git a/src/svgs/polygonSVG.tsx b/src/svgs/polygonSVG.tsx
index 344cfc5..8dd1f70 100644
--- a/src/svgs/polygonSVG.tsx
+++ b/src/svgs/polygonSVG.tsx
@@ -1,22 +1,22 @@
interface IPolygonProps {
- width?:number
+ width?: number
height?: number
}
-export default function PolygonSVG({width, height }: IPolygonProps) {
+export default function PolygonSVG({ width, height }: IPolygonProps) {
width = width ? width : 32
height = height ? height : 32
-
+
return (
+ xmlns="http://www.w3.org/2000/svg"
+ width={width}
+ height={height}
+ fill="currentColor"
+ className="bi bi-heptagon"
+ viewBox="0 0 16 16"
+ >
+
+
)
}
diff --git a/src/svgs/rectangleSVG.tsx b/src/svgs/rectangleSVG.tsx
index 8b29860..0f80891 100644
--- a/src/svgs/rectangleSVG.tsx
+++ b/src/svgs/rectangleSVG.tsx
@@ -1,22 +1,22 @@
interface IRectangleProps {
- width?:number
+ width?: number
height?: number
}
-export default function RectangleSVG({width, height }: IRectangleProps) {
+export default function RectangleSVG({ width, height }: IRectangleProps) {
width = width ? width : 32
height = height ? height : 32
-
+
return (
+ xmlns="http://www.w3.org/2000/svg"
+ width={width}
+ height={height}
+ fill="currentColor"
+ className="bi bi-square"
+ viewBox="0 0 16 16"
+ >
+
+
)
}
diff --git a/tailwind.config.js b/tailwind.config.js
index 04923cc..891c3d9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,14 +4,14 @@ export default {
theme: {
extend: {
colors: {
- primary: "#f97316",
- secondary: "#ca8a04",
- neutral_1: "#f1f5f9",
- neutral_2: "#cbd5e1",
- neutral_3: "#64748b",
- neutral_4: "#334155",
- neutral_5: "#1e293b"
- }
+ primary: '#f97316',
+ secondary: '#ca8a04',
+ neutral_1: '#f1f5f9',
+ neutral_2: '#cbd5e1',
+ neutral_3: '#64748b',
+ neutral_4: '#334155',
+ neutral_5: '#1e293b',
+ },
},
},
plugins: [],
diff --git a/tsconfig.json b/tsconfig.json
index 1ffef60..d32ff68 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,4 @@
{
"files": [],
- "references": [
- { "path": "./tsconfig.app.json" },
- { "path": "./tsconfig.node.json" }
- ]
+ "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
}