diff --git a/apps/roadrunner-view/src/App.tsx b/apps/roadrunner-view/src/App.tsx index d658090..74d93a1 100644 --- a/apps/roadrunner-view/src/App.tsx +++ b/apps/roadrunner-view/src/App.tsx @@ -27,6 +27,28 @@ const HomeRedirect = () => { return ; }; +const ProviderEnforcedRoute = ({ requiredProvider, component: Component }: { requiredProvider: 'google' | 'mapbox'; component: React.ComponentType }) => { + const provider = (localStorage.getItem('roadrunner_map_provider') as 'google' | 'mapbox') || 'google'; + if (provider !== requiredProvider) { + const search = window.location.search; + const path = window.location.pathname; + let newPath = ''; + if (requiredProvider === 'mapbox') { + if (path === '/home') newPath = '/google/home'; + else if (path === '/3d-view') newPath = '/google/3d-view'; + else if (path.startsWith('/driver-view/')) newPath = `/google/driver-view/${path.substring('/driver-view/'.length)}`; + else newPath = '/google/home'; + } else { + if (path === '/google/home') newPath = '/home'; + else if (path === '/google/3d-view') newPath = '/3d-view'; + else if (path.startsWith('/google/driver-view/')) newPath = `/driver-view/${path.substring('/google/driver-view/'.length)}`; + else newPath = '/home'; + } + return ; + } + return ; +}; + const WrappedGoogleHomePage = () => ( @@ -53,34 +75,40 @@ export const App = () => { } /> } /> + path='/home' + element={ } />} + /> } /> + path='/google/home' + element={ } />} + /> } /> + path='/google/3d-view' + element={ } />} + /> } /> + path='/google/driver-view/:vehicleId' + element={ } />} + /> } /> + path='/about' + element={} + /> } /> + path='/guide/:guideId' + element={} + /> } + path="/profile" + element={} /> } + path='/driver-view/:vehicleId' + element={ } />} /> } + path='/3d-view' + element={ } />} /> diff --git a/apps/roadrunner-view/src/components/AboutPage/AboutPage.tsx b/apps/roadrunner-view/src/components/AboutPage/AboutPage.tsx index f157f22..53a77ee 100644 --- a/apps/roadrunner-view/src/components/AboutPage/AboutPage.tsx +++ b/apps/roadrunner-view/src/components/AboutPage/AboutPage.tsx @@ -5,7 +5,8 @@ export function AboutPage() { const navigate = useNavigate(); const goHome = () => { - navigate(`/home`); + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? '/google/home' : '/home'); } return { }); } - navigate('/home'); + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? '/google/home' : '/home'); }, [navigate, vehicleState, homeMapViewState, setHomeMapViewState, goingHome]); // Check if vehicle is absent in active tracking and query historical session if needed @@ -462,7 +463,10 @@ export const DriverViewPage = () => { navigate(`/3d-view?vehicleId=${vehicleId}`)} + onClick={() => { + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? `/google/3d-view?vehicleId=${vehicleId}` : `/3d-view?vehicleId=${vehicleId}`); + }} title="Switch to 3D Map View" > diff --git a/apps/roadrunner-view/src/components/GoogleDriverViewPage/GoogleDriverViewPage.tsx b/apps/roadrunner-view/src/components/GoogleDriverViewPage/GoogleDriverViewPage.tsx index 7248cfa..6088044 100644 --- a/apps/roadrunner-view/src/components/GoogleDriverViewPage/GoogleDriverViewPage.tsx +++ b/apps/roadrunner-view/src/components/GoogleDriverViewPage/GoogleDriverViewPage.tsx @@ -186,7 +186,8 @@ export const GoogleDriverViewPage = () => { }); } - navigate('/google/home'); + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? '/google/home' : '/home'); }, [navigate, vehicleState, homeMapViewState, setHomeMapViewState, goingHome]); // Import Maps 3D library programmatically @@ -466,7 +467,10 @@ export const GoogleDriverViewPage = () => { navigate(`/google/3d-view?vehicleId=${vehicleId}`)} + onClick={() => { + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? `/google/3d-view?vehicleId=${vehicleId}` : `/3d-view?vehicleId=${vehicleId}`); + }} className="shadow-sm border border-primary animate-pulse" title="Switch to 3D Map View" > diff --git a/apps/roadrunner-view/src/components/GoogleHomePage/GoogleHomePage.tsx b/apps/roadrunner-view/src/components/GoogleHomePage/GoogleHomePage.tsx index 9df09c1..3b05915 100644 --- a/apps/roadrunner-view/src/components/GoogleHomePage/GoogleHomePage.tsx +++ b/apps/roadrunner-view/src/components/GoogleHomePage/GoogleHomePage.tsx @@ -180,7 +180,8 @@ export const GoogleHomePage = () => { const sessionTime = new Date(startTime).toLocaleTimeString([], timeFormatOptions) + 'Z'; setPlaybackSession(sessionTime); - navigate(`/google/driver-view/${vehicleId}`); + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? `/google/driver-view/${vehicleId}` : `/driver-view/${vehicleId}`); setShowBookmarksPanel(false); }, [navigate, setPlaybackSession]); diff --git a/apps/roadrunner-view/src/components/GoogleHomePage/GoogleVehicleIcon.tsx b/apps/roadrunner-view/src/components/GoogleHomePage/GoogleVehicleIcon.tsx index 693451f..dc754d9 100644 --- a/apps/roadrunner-view/src/components/GoogleHomePage/GoogleVehicleIcon.tsx +++ b/apps/roadrunner-view/src/components/GoogleHomePage/GoogleVehicleIcon.tsx @@ -175,7 +175,8 @@ export const GoogleVehicleIcon: React.FC<{ size="sm" onClick={(e) => { e.stopPropagation(); - navigate(`/google/driver-view/${props.vehicleState.id}`); + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? `/google/driver-view/${props.vehicleState.id}` : `/driver-view/${props.vehicleState.id}`); }} > Jump into vehicle diff --git a/apps/roadrunner-view/src/components/GoogleVehicle3DMapPage/GoogleVehicle3DMapPage.tsx b/apps/roadrunner-view/src/components/GoogleVehicle3DMapPage/GoogleVehicle3DMapPage.tsx index bc6decb..dd91463 100644 --- a/apps/roadrunner-view/src/components/GoogleVehicle3DMapPage/GoogleVehicle3DMapPage.tsx +++ b/apps/roadrunner-view/src/components/GoogleVehicle3DMapPage/GoogleVehicle3DMapPage.tsx @@ -756,7 +756,10 @@ export const GoogleVehicle3DMapPage = () => { navigate('/google/home')} + onClick={() => { + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? '/google/home' : '/home'); + }} title="Home" > @@ -766,7 +769,10 @@ export const GoogleVehicle3DMapPage = () => { navigate(`/google/driver-view/${focusedVehicleId}`)} + onClick={() => { + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? `/google/driver-view/${focusedVehicleId}` : `/driver-view/${focusedVehicleId}`); + }} title="Switch to Driver View" > diff --git a/apps/roadrunner-view/src/components/HomePage/HomePage.tsx b/apps/roadrunner-view/src/components/HomePage/HomePage.tsx index 712ab88..b497993 100644 --- a/apps/roadrunner-view/src/components/HomePage/HomePage.tsx +++ b/apps/roadrunner-view/src/components/HomePage/HomePage.tsx @@ -233,7 +233,8 @@ export const HomePage = () => { const sessionTime = new Date(startTime).toLocaleTimeString([], timeFormatOptions) + 'Z' setPlaybackSession(sessionTime); - navigate(`/driver-view/${vehicleId}`); + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? `/google/driver-view/${vehicleId}` : `/driver-view/${vehicleId}`); setShowBookmarksPanel(false); }, [navigate, setPlaybackSession]); diff --git a/apps/roadrunner-view/src/components/HomePage/VehicleIcon.tsx b/apps/roadrunner-view/src/components/HomePage/VehicleIcon.tsx index 3cc97fa..a44cd13 100644 --- a/apps/roadrunner-view/src/components/HomePage/VehicleIcon.tsx +++ b/apps/roadrunner-view/src/components/HomePage/VehicleIcon.tsx @@ -3,6 +3,7 @@ import { getCachedAuthToken } from "../Utils/AuthUtils"; import type { LayerProps } from "react-map-gl"; import type { Feature } from "geojson"; import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; import { VehicleDisplay } from "../../models/VehicleDisplay"; import { VehicleState } from "../../models/VehicleState"; import { Button, Card } from "react-bootstrap"; @@ -13,6 +14,7 @@ export const VehicleIcon: React.FC<{ vehicleState: VehicleState, vehicleDisplay: VehicleDisplay }> = (props) => { + const navigate = useNavigate(); const { dataSource } = usePlayback(); const [token, setToken] = useState(""); const [directionsGeometry, setDirectionsGeometry] = useState([]); @@ -136,7 +138,13 @@ export const VehicleIcon: React.FC<{ Speed: {(Math.round(MPS_TO_MPH * props.vehicleState.metersPerSecond * 10) / 10).toFixed(1)} MPH Bearing: {(Math.round(props.vehicleState.degBearing * 10) / 10).toFixed(1)}° - + { + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? `/google/driver-view/${props.vehicleState.id}` : `/driver-view/${props.vehicleState.id}`); + }} + > Jump into vehicle diff --git a/apps/roadrunner-view/src/components/NavBar/NavBarBrand.tsx b/apps/roadrunner-view/src/components/NavBar/NavBarBrand.tsx index 640fbca..a447381 100644 --- a/apps/roadrunner-view/src/components/NavBar/NavBarBrand.tsx +++ b/apps/roadrunner-view/src/components/NavBar/NavBarBrand.tsx @@ -7,7 +7,10 @@ export const NavBarBrand: React.FC = () => { return ( navigate('/home')} + onClick={() => { + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? '/google/home' : '/home'); + }} style={{ cursor: 'pointer' }} > { navigate('/home')} + onClick={() => { + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? '/google/home' : '/home'); + }} title="Home" > @@ -606,7 +609,10 @@ export const Vehicle3DMapPage = () => { navigate(`/driver-view/${focusedVehicleId}`)} + onClick={() => { + const provider = localStorage.getItem('roadrunner_map_provider') || 'google'; + navigate(provider === 'google' ? `/google/driver-view/${focusedVehicleId}` : `/driver-view/${focusedVehicleId}`); + }} title="Switch to Driver View" >