add bus ID to callout (see #110)

Maroon-Rides · Jan 30, 2024 · 0e42e81 · 0e42e81
1 parent 3379182
commit 0e42e81
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/app/components/map/BusCallout.tsx b/app/components/map/BusCallout.tsx
@@ -10,15 +10,17 @@ interface Props {
     amenities: IAmenity[]
     tintColor: string
     routeName: string
+    busId: string
 }
 
 // Bus callout with amentities
-const BusCallout: React.FC<Props> = ({ directionName, fullPercentage, amenities, tintColor, routeName }) => {    
+const BusCallout: React.FC<Props> = ({ directionName, fullPercentage, amenities, tintColor, routeName, busId }) => {    
     return (
         <Callout>
             <View style={{ width: 160 }}>
                 <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginBottom: 4 }}>
                     <BusIcon name={routeName} color={tintColor} isCallout={true} />
+                    <Text style={{paddingLeft: 6, color: tintColor, fontWeight: "600"}}>{busId}</Text>
                     <View style={{ flex: 1 }} />
                     <AmenityRow amenities={amenities} color={"gray"} size={20} />
                 </View>

diff --git a/app/components/map/markers/BusMarker.tsx b/app/components/map/markers/BusMarker.tsx
@@ -33,7 +33,13 @@ const BusMarker: React.FC<Props> = ({ bus, tintColor, routeName }) => {
         >
             {/* Bus Icon on Map*/}
             <BusMapIcon color={busColor} borderColor={borderColor} heading={bus.location.heading} iconColor={iconColor} />
-            <BusCallout directionName={bus.directionName} fullPercentage={Math.round((bus.passengersOnboard / bus.passengerCapacity)*100)} amenities={bus.amenities} tintColor={tintColor ?? "#500000"} routeName={routeName} />
+            <BusCallout 
+                directionName={bus.directionName} 
+                fullPercentage={Math.round((bus.passengersOnboard / bus.passengerCapacity)*100)}
+                amenities={bus.amenities} tintColor={tintColor ?? "#500000"} 
+                routeName={routeName} 
+                busId={bus.name}
+            />
         </Marker>
     );
 };