extendedroutetypes for transit

HSLdevcom · Dec 10, 2024 · ab5f35b · ab5f35b
1 parent c37ff25
commit ab5f35b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 15 deletions.
diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js
@@ -1,12 +1,13 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import { legShape } from '../../../util/shapes';
+import { legShape, configShape } from '../../../util/shapes';
 import Icon from '../../Icon';
 import { isRental } from '../../../util/legUtils';
 import NaviInstructions from './NaviInstructions';
 import NaviCardExtension from './NaviCardExtension';
 import { LEGTYPE } from './NaviUtils';
+import { ExtendedRouteTypes } from '../../../constants';
 
 const iconMap = {
   BICYCLE: 'icon-icon_cyclist',
@@ -19,18 +20,14 @@ const iconMap = {
   SUBWAY: 'icon-icon_subway',
   TRAM: 'icon-icon_tram',
   FERRY: 'icon-icon_ferry',
+  BUS_EXPRESS: 'icon-icon_bus-express',
+  SPEED_TRAM: 'icon-icon_speed-tram',
 };
 
-export default function NaviCard({
-  leg,
-  nextLeg,
-  legType,
-  cardExpanded,
-  startTime,
-  time,
-  position,
-  origin,
-}) {
+export default function NaviCard(
+  { leg, nextLeg, legType, cardExpanded, startTime, time, position, origin },
+  { config },
+) {
   if (legType === LEGTYPE.PENDING) {
     return (
       <FormattedMessage
@@ -45,7 +42,7 @@ export default function NaviCard({
   if (!leg && !nextLeg) {
     return null;
   }
-  const iconName = legType === LEGTYPE.WAIT ? iconMap.WAIT : iconMap[leg.mode];
+  let iconName;
 
   let instructions = '';
   if (legType === LEGTYPE.TRANSIT) {
@@ -59,11 +56,21 @@ export default function NaviCard({
   } else if (legType === LEGTYPE.MOVE) {
     instructions = `navileg-${leg?.mode.toLowerCase()}`;
   }
+  let iconColor = 'currentColor';
+  if (leg?.route?.type === ExtendedRouteTypes.BusExpress) {
+    iconColor = config.colors.iconColors['mode-bus-express'];
+    iconName = iconMap.BUS_EXPRESS;
+  } else if (leg?.route?.type === ExtendedRouteTypes.SpeedTram) {
+    iconColor = config.colors.iconColors['mode-speedtram'];
+    iconName = iconMap.SPEED_TRAM;
+  } else {
+    iconName = legType === LEGTYPE.WAIT ? iconMap.WAIT : iconMap[leg.mode];
+  }
 
   return (
     <div className="navi-top-card">
       <div className="main-card">
-        <Icon img={iconName} className="mode" />
+        <Icon img={iconName} className="mode" color={iconColor} />
         <div className={`instructions ${cardExpanded ? 'expanded' : ''}`}>
           <NaviInstructions
             leg={leg}
@@ -117,3 +124,7 @@ NaviCard.defaultProps = {
   startTime: '',
   position: undefined,
 };
+
+NaviCard.contextTypes = {
+  config: configShape.isRequired,
+};
diff --git a/app/component/itinerary/navigator/NaviCardExtension.js b/app/component/itinerary/navigator/NaviCardExtension.js
@@ -9,6 +9,7 @@ import { getZoneLabel, legTime } from '../../../util/legUtils';
 import ZoneIcon from '../../ZoneIcon';
 import { legShape, configShape } from '../../../util/shapes';
 import { getDestinationProperties, LEGTYPE } from './NaviUtils';
+import { ExtendedRouteTypes } from '../../../constants';
 
 import RouteNumberContainer from '../../RouteNumberContainer';
 
@@ -34,7 +35,7 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
   }
 
   if (legType === LEGTYPE.TRANSIT) {
-    const { intermediatePlaces, headsign, trip, realtimeState } = leg;
+    const { intermediatePlaces, headsign, trip, realtimeState, route } = leg;
     const hs = headsign || trip.tripHeadsign;
     const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > time);
     const count = idx > -1 ? intermediatePlaces.length - idx : 0;
@@ -45,7 +46,15 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => {
     );
     const translationId =
       count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining';
-    const mode = leg.mode.toLowerCase();
+    let mode;
+    if (route.type === ExtendedRouteTypes.BusExpress) {
+      mode = 'bus-express';
+    } else if (route.type === ExtendedRouteTypes.SpeedTram) {
+      mode = 'speedtram';
+    } else {
+      mode = leg.mode.toLowerCase();
+    }
+
     return (
       <div className="extension">
         <div className="extension-divider" />

diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss
@@ -257,6 +257,14 @@
           color: $bus-color;
         }
 
+        &.bus-express {
+          color: $bus-express-color;
+        }
+
+        &.speedtram {
+          color: $speedtram-color;
+        }
+
         &.tram-stop {
           color: $tram-color;
         }