dynamic endpoint links

src/components/Canvas/Canvas.tsx

@@ -8,8 +8,8 @@ import { useSimulation } from '~/hooks/useSimulation';
 import { createId } from '~/id';
 import {
   BASE_SIMULATION_DATA_TOPIC,
+  BASE_SIMULATION_DESTINATION_PATH,
   BASE_SIMULATION_ERROR_TOPIC,
-  SIMULATION_DESTINATION_PATH,
   SIMULATION_SOCKET_URL,
 } from '~/simulation-urls';
 import { useNetworkStore } from '~/zustand/useNetworkStore';
@@ -64,6 +64,8 @@ export function Canvas() {
       '_',
       simulationId ?? '',
     );
+    const SIMULATION_DESTINATION_PATH = `${BASE_SIMULATION_DESTINATION_PATH}/${simulationId}`;
+
     if (isPlaying && isConnected) {
       console.warn('Subscribing to simulation data');
 

src/components/FloatingPlayPause.tsx

@@ -6,7 +6,7 @@ import { usePlaying } from '~/zustand/usePlaying';
 
 const FloatingPlayPause = () => {
   const network = useNetworkStore();
-  const { play, changeSimulationId } = usePlaying();
+  const { isPlaying, play, changeSimulationId, pause } = usePlaying();
 
   const handleUpload = async () => {
     const requestBody = {
@@ -43,18 +43,19 @@ const FloatingPlayPause = () => {
 
     const res = await response.json();
     changeSimulationId(res.id);
-    console.log({ res });
     play();
   };
 
   return (
     <div className="absolute bottom-4 right-4 items-center justify-center rounded-md flex py-2 px-3 z-10 bg-orange-500">
       <button
-        onClick={handleUpload}
+        onClick={() => {
+          isPlaying ? pause() : handleUpload();
+        }}
         className="text-white font-sans font-medium"
         style={{ display: 'flex', alignItems: 'center' }}
       >
-        Play
+        {isPlaying ? 'Pause' : 'Play'}
         <PlayIcon className="h-5 ml-2" />
       </button>
     </div>

src/simulation-urls.ts

@@ -2,4 +2,4 @@ export const BASE_URL = 'http://localhost:8080';
 export const SIMULATION_SOCKET_URL = 'ws://localhost:8080/simulation-socket';
 export const BASE_SIMULATION_DATA_TOPIC = '/topic/simulation';
 export const BASE_SIMULATION_ERROR_TOPIC = '/topic/simulation/_/error';
-export const SIMULATION_DESTINATION_PATH = '/app/simulation';
+export const BASE_SIMULATION_DESTINATION_PATH = '/app/simulation';

src/types/Network.ts

@@ -48,6 +48,4 @@ export type Flow = {
   begin: number;
   end: number;
   period: number;
-  // TODO: need to add field in the server
-  // vehsPerHour: number;
 };

src/zustand/helpers/NetworkStoreHelpers.ts

@@ -174,7 +174,6 @@ export function updateAssociatesOnNewEdge(
         begin: 0,
         end: 86400,
         period: 1,
-        // vehsPerHour: 3600,
       };
     }
   }