Merge pull request #155 from Reveille-Rides/starter-projects/tap-othe…

…r-direction Starter projects/tap other direction, LGTM, closes #127
Maroon-Rides · Mar 14, 2024 · f6ec61f · f6ec61f
2 parents 0e92699 + 7437e3f
commit f6ec61f
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 4 deletions.
diff --git a/app/components/map/MapView.tsx b/app/components/map/MapView.tsx
@@ -11,7 +11,7 @@ import { useVehicles } from "../../data/api_query";
 
 const Map: React.FC = () => {
     const mapViewRef = useRef<MapView>(null);
-
+    const setSelectedDirection = useAppStore(state => state.setSelectedRouteDirection);
     const selectedRoute = useAppStore((state) => state.selectedRoute);
     const setSelectedRoute = useAppStore((state) => state.setSelectedRoute);
     const setDrawnRoutes = useAppStore((state) => state.setDrawnRoutes);
@@ -33,12 +33,21 @@ const Map: React.FC = () => {
         longitudeDelta: 0.01
     };
 
+
+
     function selectRoute(route: IMapRoute, directionKey: string) {
+
+        if (selectedRouteDirection !== directionKey) {
+            setSelectedDirection(directionKey);
+            return;
+        }
+
         if (selectedRoute?.key === route.key) return;
-        console.log(directionKey)
+
         setSelectedRoute(route);
         setDrawnRoutes([route]);
         presentSheet("routeDetails");
+
     }
 
     // center the view on the drawn routes

diff --git a/app/components/map/markers/BusMarker.tsx b/app/components/map/markers/BusMarker.tsx
@@ -3,7 +3,6 @@ import { Marker } from 'react-native-maps';
 import BusMapIcon from '../BusMapIcon';
 import BusCallout from '../BusCallout';
 import { IVehicle } from 'utils/interfaces';
-
 import useAppStore from '../../../data/app_state';
 
 interface Props {
@@ -15,7 +14,17 @@ interface Props {
 // Bus Marker with icon and callout
 const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
     const selectedRouteDirection = useAppStore(state => state.selectedRouteDirection);
+    const setSelectedDirection = useAppStore(state => state.setSelectedRouteDirection);
 
+    //if direction is not selected and route is inactive, then call setSelectedDirection w/ parameter bus.directionKey
+    const busDefaultDirection = () => {
+        if (selectedRouteDirection !== bus.directionKey)
+    {
+        setSelectedDirection(bus.directionKey);
+    }
+    }
+
+
     return (
         <Marker
             key={bus.key}
@@ -24,6 +33,7 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
             anchor={{x: 1, y: 1}}
             pointerEvents="auto"
             style={{ zIndex: 100, elevation: 100 }}
+            onPress={() => busDefaultDirection()}
         >
             {/* Bus Icon on Map*/}
             <BusMapIcon 
@@ -35,7 +45,8 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
             <BusCallout 
                 directionName={bus.directionName} 
                 fullPercentage={Math.round((bus.passengersOnboard / bus.passengerCapacity)*100)}
-                amenities={bus.amenities} tintColor={tintColor ?? "#500000"} 
+                amenities={bus.amenities} 
+                tintColor={tintColor} 
                 routeName={routeName} 
                 busId={bus.name}
             />

diff --git a/app/components/map/markers/StopMarker.tsx b/app/components/map/markers/StopMarker.tsx
@@ -5,6 +5,8 @@ import StopCallout from '../StopCallout';
 import { View } from 'react-native';
 import { getLighterColor } from 'app/utils';
 
+import useAppStore from '../../../data/app_state';
+
 interface Props {
     point: IPatternPoint
     tintColor: string
@@ -17,6 +19,7 @@ interface Props {
 // Stop marker with callout
 const StopMarker: React.FC<Props> = ({ point, tintColor, route, direction, isCalloutShown=false, active }) => {
     const markerRef = React.useRef<MapMarker>(null);
+    const setSelectedDirection = useAppStore(state => state.setSelectedRouteDirection);
 
     // If the global poppedUpStopCallout is the same as the current stop, show the callout on screen
     useEffect(() => {
@@ -25,6 +28,13 @@ const StopMarker: React.FC<Props> = ({ point, tintColor, route, direction, isCal
         }
     }, [isCalloutShown])
 
+    const defaultDirection = () => {
+        if (active == false)
+    {
+        setSelectedDirection(direction.key);
+    }
+    }
+
     return (
         <Marker
             ref={markerRef}
@@ -35,6 +45,7 @@ const StopMarker: React.FC<Props> = ({ point, tintColor, route, direction, isCal
             tracksViewChanges={false}
             anchor={{x: 1, y: 1}}
             pointerEvents="auto"
+            onPress={() => defaultDirection()}
         >
             <View
                 style={{

diff --git a/app/components/sheets/RouteDetails.tsx b/app/components/sheets/RouteDetails.tsx
@@ -24,6 +24,7 @@ const RouteDetails: React.FC<SheetProps> = ({ sheetRef }) => {
     const setSelectedRouteDirection = useAppStore(state => state.setSelectedRouteDirection);
     const setSelectedStop = useAppStore(state => state.setSelectedStop);
     const setPoppedUpStopCallout = useAppStore(state => state.setPoppedUpStopCallout);
+    const selectedRouteDirection = useAppStore(state => state.selectedRouteDirection);
     const theme = useAppStore(state => state.theme);
 
     const { data: stopEstimates } = useStopEstimate(
@@ -87,6 +88,18 @@ const RouteDetails: React.FC<SheetProps> = ({ sheetRef }) => {
 
     }, [currentSelectedRoute])
 
+
+    // update the segmented control when the selected direction changes
+    useEffect(() => {
+        if (!selectedRoute) return;
+
+        const directionIndex = selectedRoute.directionList.findIndex(direction => direction.direction.key === selectedRouteDirection);
+
+        if (directionIndex === -1) return;
+
+        setSelectedDirectionIndex(directionIndex);
+    }, [selectedRouteDirection]);
+
     useEffect(() => {
         return () => setSelectedRouteDirection(null);
     }, []);