change stream method, highligt used tool, and bøvl

src/components/toolbar.tsx

@@ -24,6 +24,8 @@ export default function Toolbar({ map, onMonitoringAreaChange }: IToolbarProps)
 
   function clearOnClick() {
     clearTool()
+    setActiveTool(ActiveGuiTool.Mouse)
+    map.pm.disableDraw()
     onMonitoringAreaChange(undefined)
   }
 
@@ -62,7 +64,7 @@ export default function Toolbar({ map, onMonitoringAreaChange }: IToolbarProps)
       <p className="text-white">Focus area tools</p>
 
       <div id="tools" className="flex gap-4 items-center">
-        <button title="Draw monitoring area as rectangle" className="hover:text-gray-100" onClick={() => setActiveTool(ActiveGuiTool.Rectangle)}>
+        <button title="Draw monitoring area as rectangle" className={`hover:text-gray-100 ${activeTool===ActiveGuiTool.Rectangle ? "text-blue-500" : ""}`} onClick={() => setActiveTool(ActiveGuiTool.Rectangle)}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="32"
@@ -75,7 +77,7 @@ export default function Toolbar({ map, onMonitoringAreaChange }: IToolbarProps)
           </svg>
         </button>
 
-        <button title="Draw monitoring area as polygon" className="hover:text-gray-100" onClick={() => setActiveTool(ActiveGuiTool.Polygon)}>
+        <button title="Draw monitoring area as polygon" className={`hover:text-gray-100 ${activeTool===ActiveGuiTool.Polygon ? "text-blue-500" : ""}`} onClick={() => setActiveTool(ActiveGuiTool.Polygon)}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="32"
@@ -88,7 +90,7 @@ export default function Toolbar({ map, onMonitoringAreaChange }: IToolbarProps)
           </svg>
         </button>
 
-        <button title="Clear monitoring area" className="bi bi-eraser hover:text-gray-100" onClick={clearOnClick}>
+        <button title="Clear monitoring area" className="bi bi-eraser hover:text-gray-100 " onClick={clearOnClick}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="32"

src/implementations/StreamManager.ts

@@ -8,8 +8,9 @@ export default class StreamManager implements IStreamManager {
   private allVessels: ISimpleVessel[] | undefined
   private monitoredVessels: IMonitoredVessel[] | undefined
   private zone: IPoint[] = []
-  private myClockSpeed: number
   private myDateTime: Date
+  private simpleVesselTimeout: NodeJS.Timeout | undefined = undefined
+  private monitoredVesselTimeout: NodeJS.Timeout | undefined = undefined
 
   constructor(
     private readonly clientHandler: IClientHandler,
@@ -28,48 +29,77 @@ export default class StreamManager implements IStreamManager {
   public syncMyDatetime(date: Date) {
     this.myDateTime = date
   }
-  public syncMyClockSpeed(speed: number) {
-    this.myClockSpeed = speed
-  }
 
-  public async fetchNewVesselData() {
+  private async fetchSimpleVesselData() {
     const simpleVessels = await this.clientHandler.getSimpleVessles({
-      timestamp: 1725844950,
+      timestamp: 1725844950, // myDateTime.getTime() / 1000
     })
 
-    let monitoredVessels: IMonitoredVessel[] = []
+    console.log(simpleVessels)
+    this.manageNewSimpleVessels(simpleVessels)
+  }
 
-    if (this.zone.length >= 4) {
-      monitoredVessels = await this.clientHandler.getMonitoredVessels({
-        selection: { points: this.zone },
-        timestamp: 1725844950,
-      })
+  private async simpleVesselLoop() {
+    try {
+      await this.fetchSimpleVesselData()
+    } catch(e) {
+      console.log(e)
     }
-    console.log(simpleVessels)
-    console.log(monitoredVessels)
+    this.simpleVesselTimeout = setTimeout(this.simpleVesselLoop.bind(this), 10000)
+  }
 
-    this.manageNewSimpleVessels(simpleVessels)
-    this.manageNewMonitoredVessels(monitoredVessels)
+  public async startSimpleVesselFetching() {
+    this.simpleVesselLoop()
   }
 
+  public async stopSimpleVesselFetching() {
+    clearTimeout(this.simpleVesselTimeout)
+  }
+
+
   public onMonitoringZoneChange(zone: IPoint[] | undefined) {
     this.zone = zone || []
-    this.setAllVessels(undefined)
-    this.setMonitoredVessels(undefined)
-    this.fetchNewVesselData()
+    if (this.monitoredVesselTimeout || !zone || zone.length < 4) {
+      this.stopMonitoredVesselFetching()
+      this.setMonitoredVessels(undefined)
+    } else {
+      this.startMonitoredVesselFetching()
+    }
+  }
+
+  private async fetchMonitoredVessels() {
+    const monitoredvessels = await this.clientHandler.getMonitoredVessels({
+      timestamp: Math.round(this.myDateTime.getTime()/1000),
+      selection: {points: this.zone}
+    })
+    console.log(monitoredvessels)
+    this.manageNewMonitoredVessels(monitoredvessels)
+  }
+
+  private async startMonitoredVesselFetching() {
+    try {
+      await this.fetchMonitoredVessels()
+    } catch(e) {
+      console.error(e)
+    }
+    this.monitoredVesselTimeout = setTimeout(this.startMonitoredVesselFetching.bind(this), 10000)
+  }
+
+  private async stopMonitoredVesselFetching() {
+    clearTimeout(this.monitoredVesselTimeout)
   }
 
   private manageNewSimpleVessels(vessels: ISimpleVessel[]) {
-    const newVessels = this.manageVesselsFromStream(vessels, this.allVessels)
+    const newVessels = this.manageVesselsFromFetch(vessels, this.allVessels)
     this.setAllVessels(newVessels)
   }
 
   private manageNewMonitoredVessels(vessels: IMonitoredVessel[]) {
-    const newVessels = this.manageVesselsFromStream(vessels, this.monitoredVessels)
+    const newVessels = this.manageVesselsFromFetch(vessels, this.monitoredVessels)
     this.setMonitoredVessels(newVessels)
   }
 
-  private manageVesselsFromStream<T extends ISimpleVessel | IMonitoredVessel>(
+  private manageVesselsFromFetch<T extends ISimpleVessel | IMonitoredVessel>(
     vessels: T[],
     curVessels: T[] | undefined
   ): T[] {

src/interfaces/IStreamManager.ts

@@ -1,6 +1,7 @@
 import { IPoint } from '../models/point'
 
 export interface IStreamManager {
-  fetchNewVesselData(): void
+  startSimpleVesselFetching(): void
+  stopSimpleVesselFetching(): void
   onMonitoringZoneChange(zone: IPoint[] | undefined): void
 }

src/pages/vesselMapPage.tsx

@@ -1,5 +1,5 @@
 import { useVesselGuiContext } from '../contexts/vesselGuiContext'
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, useRef } from 'react'
 import { ISimpleVessel } from '../models/simpleVessel'
 import { IMonitoredVessel } from '../models/monitoredVessel'
 import LMap from '../components/map'
@@ -25,15 +25,15 @@ export default function VesselMapPage() {
 
   const { pathHistory } = useVesselGuiContext()
   const [streamManager] = useState(new StreamManager(clientHandler, setAllVessels, setMonitoredVessels))
+  const streamStarted = useRef(false)
 
   useEffect(() => {
-    streamManager.fetchNewVesselData()
+    if (!streamStarted.current) {
+      streamManager.startSimpleVesselFetching()
+      streamStarted.current = true
+    }
   }, [])
 
-  useEffect(() => {
-    streamManager.syncMyClockSpeed(myClockSpeed)
-  }, [myClockSpeed, streamManager])
-
   useEffect(() => {
     streamManager.syncMyDatetime(myDateTime)
   }, [myDateTime, streamManager])