From 0e42e8174fd7a9fb0bfb55ccf447e45b34ab7775 Mon Sep 17 00:00:00 2001
From: bwees <brandonwees@gmail.com>
Date: Tue, 30 Jan 2024 17:38:17 -0600
Subject: [PATCH] add bus ID to callout (see #110)

---
 app/components/map/BusCallout.tsx        | 4 +++-
 app/components/map/markers/BusMarker.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/map/BusCallout.tsx b/app/components/map/BusCallout.tsx
index 262c353..820b069 100644
--- 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
index e673294..2d07a1d 100644
--- 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>
     );
 };