Dt 5348

app/component/itinerary/Itinerary.js

@@ -89,7 +89,6 @@ export function RouteLeg(
   const isCallAgency = isCallAgencyPickupType(leg);
   let routeNumber;
   const mode = getRouteMode(leg.route);
-
   const getOccupancyStatus = () => {
     if (hasOneTransitLeg) {
       return getCapacityForLeg(config, leg);

app/component/itinerary/ItineraryDetails.js

@@ -391,6 +391,16 @@ const withRelay = createFragmentContainer(
           legGeometry {
             points
           }
+          steps {
+            entity {
+              __typename
+              ... on Entrance {
+                code
+                }
+              }
+              lat
+              lon
+            }
           nextLegs(
             numberOfLegs: 2
             originModesWithParentStation: [RAIL]

app/component/itinerary/Legs.js

@@ -83,7 +83,6 @@ export default class Legs extends React.Component {
     const { itinerary, fares, showBikeBoardingInformation, relayEnvironment } =
       this.props;
     const { waitThreshold } = this.context.config.itinerary;
-
     const compressedLegs = compressLegs(itinerary.legs, true).map(leg => ({
       showBikeBoardingInformation,
       ...leg,
@@ -174,7 +173,7 @@ export default class Legs extends React.Component {
         legs.push(<CarParkLeg {...legProps} carPark={carPark} />);
       } else if (isLegOnFoot(leg)) {
         legs.push(
-          <WalkLeg {...legProps} previousLeg={previousLeg}>
+          <WalkLeg {...legProps} previousLeg={previousLeg} nextLeg={nextLeg}>
             {stopCode(leg.from.stop)}
           </WalkLeg>,
         );
@@ -281,6 +280,7 @@ export default class Legs extends React.Component {
           index={numberOfLegs}
           leg={compressedLegs[numberOfLegs - 1]}
           previousLeg={compressedLegs[numberOfLegs - 2]}
+          nextLeg={compressedLegs[numberOfLegs]}
           focusAction={this.focus(compressedLegs[numberOfLegs - 1].to)}
           focusToLeg={this.focusToLeg(compressedLegs[numberOfLegs - 1])}
         >

app/component/itinerary/PlanConnection.js

@@ -76,6 +76,16 @@ const planConnection = graphql`
             route {
               gtfsId
             }
+            steps {
+              entity {
+                __typename
+                ... on Entrance {
+                  code
+                }
+              }
+              lat
+              lon
+            }
             trip {
               gtfsId
               directionId

app/component/itinerary/WalkLeg.js

@@ -22,15 +22,14 @@ import { splitStringToAddressAndPlace } from '../../util/otpStrings';
 import VehicleRentalLeg from './VehicleRentalLeg';
 
 function WalkLeg(
-  { children, focusAction, focusToLeg, index, leg, previousLeg },
+  { children, focusAction, focusToLeg, index, leg, previousLeg, nextLeg },
   { config, intl },
 ) {
   const distance = displayDistance(
     parseInt(leg.mode !== 'WALK' ? 0 : leg.distance, 10),
     config,
     intl.formatNumber,
   );
-  //
   const duration = durationToString(
     leg.mode !== 'WALK' ? 0 : leg.duration * 1000,
   );
@@ -74,6 +73,10 @@ function WalkLeg(
           defaultMessage: 'scooter',
         })
       : leg.to?.name;
+  const entranceName = leg?.steps?.find(
+    // eslint-disable-next-line no-underscore-dangle
+    step => step?.entity?.__typename === 'Entrance' || step?.entity?.code,
+  )?.entity?.code;
 
   return (
     <div key={index} className="row itinerary-row">
@@ -229,6 +232,17 @@ function WalkLeg(
         )}
 
         <div className="itinerary-leg-action">
+          {previousLeg?.mode === 'SUBWAY' && (
+            <div>
+              <FormattedMessage id="station-exit" defaultMessage="Exit" />
+              <Icon img="icon-icon_subway" />
+              {entranceName && (
+                <Icon
+                  img={`icon-icon_subway_entrance_${entranceName.toLowerCase()}`}
+                />
+              )}
+            </div>
+          )}
           <div className="itinerary-leg-action-content">
             <FormattedMessage
               id="walk-distance-duration"
@@ -248,6 +262,20 @@ function WalkLeg(
               focusAction={focusToLeg}
             />
           </div>
+          {nextLeg?.mode === 'SUBWAY' && (
+            <div>
+              <FormattedMessage
+                id="station-entrance"
+                defaultMessage="Entrance"
+              />
+              <Icon img="icon-icon_subway" />
+              {entranceName && (
+                <Icon
+                  img={`icon-icon_subway_entrance_${entranceName.toLowerCase()}`}
+                />
+              )}
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -260,11 +288,13 @@ WalkLeg.propTypes = {
   index: PropTypes.number.isRequired,
   leg: legShape.isRequired,
   previousLeg: legShape,
+  nextLeg: legShape,
   focusToLeg: PropTypes.func.isRequired,
 };
 
 WalkLeg.defaultProps = {
   previousLeg: undefined,
+  nextLeg: undefined,
   children: undefined,
 };
 

app/component/map/ItineraryLine.js

@@ -68,6 +68,7 @@ class ItineraryLine extends React.Component {
         return;
       }
       const nextLeg = this.props.legs[i + 1];
+      const previousLeg = this.props.legs[i - 1];
 
       let mode = getRouteMode({ mode: leg.mode, type: leg.route?.type });
 
@@ -108,15 +109,94 @@ class ItineraryLine extends React.Component {
         end = interliningLegs[interliningLegs.length - 1].end;
       }
 
-      objs.push(
-        <Line
-          color={leg.route && leg.route.color ? `#${leg.route.color}` : null}
-          key={`${this.props.hash}_${i}_${mode}`}
-          geometry={geometry}
-          mode={isCallAgencyPickupType(leg) ? 'call' : mode.toLowerCase()}
-          passive={this.props.passive}
-        />,
-      );
+      if (
+        leg.mode === 'WALK' &&
+        (nextLeg?.mode === 'SUBWAY' || previousLeg?.mode === 'SUBWAY')
+      ) {
+        const entranceObjects = leg?.steps?.filter(
+          // eslint-disable-next-line no-underscore-dangle
+          step => step?.entity?.__typename === 'Entrance' || step?.entity?.code,
+        );
+
+        // Select the entrance to the outside if there are multiple entrances
+        const entranceObject =
+          previousLeg?.mode === 'SUBWAY'
+            ? entranceObjects[entranceObjects.length - 1]
+            : entranceObjects[0];
+
+        if (entranceObject) {
+          const entranceCoordinates = [entranceObject.lat, entranceObject.lon];
+          // eslint-disable-next-line no-console
+          console.log('steps', leg.steps);
+          const getDistance = (coord1, coord2) => {
+            const [lat1, lon1] = coord1;
+            const [lat2, lon2] = coord2;
+            return Math.sqrt((lat1 - lat2) ** 2 + (lon1 - lon2) ** 2);
+          };
+
+          const entranceIndex = geometry.reduce(
+            (closestIdx, currentCoord, currentIdx) => {
+              const currentDistance = getDistance(
+                entranceCoordinates,
+                currentCoord,
+              );
+              const closestDistance = getDistance(
+                entranceCoordinates,
+                geometry[closestIdx],
+              );
+              return currentDistance < closestDistance
+                ? currentIdx
+                : closestIdx;
+            },
+            0,
+          );
+
+          objs.push(
+            <Line
+              color={
+                leg.route && leg.route.color ? `#${leg.route.color}` : null
+              }
+              key={`${this.props.hash}_${i}_${mode}_0`}
+              geometry={geometry.slice(0, entranceIndex + 1)}
+              mode={nextLeg?.mode === 'SUBWAY' ? 'walk' : 'walk-inside'}
+              passive={this.props.passive}
+            />,
+          );
+          objs.push(
+            <Line
+              color={
+                leg.route && leg.route.color ? `#${leg.route.color}` : null
+              }
+              key={`${this.props.hash}_${i}_${mode}_1`}
+              geometry={geometry.slice(entranceIndex)}
+              mode={nextLeg?.mode === 'SUBWAY' ? 'walk-inside' : 'walk'}
+              passive={this.props.passive}
+            />,
+          );
+        } else {
+          objs.push(
+            <Line
+              color={
+                leg.route && leg.route.color ? `#${leg.route.color}` : null
+              }
+              key={`${this.props.hash}_${i}_${mode}`}
+              geometry={geometry}
+              mode={isCallAgencyPickupType(leg) ? 'call' : mode.toLowerCase()}
+              passive={this.props.passive}
+            />,
+          );
+        }
+      } else {
+        objs.push(
+          <Line
+            color={leg.route && leg.route.color ? `#${leg.route.color}` : null}
+            key={`${this.props.hash}_${i}_${mode}`}
+            geometry={geometry}
+            mode={isCallAgencyPickupType(leg) ? 'call' : mode.toLowerCase()}
+            passive={this.props.passive}
+          />,
+        );
+      }
 
       if (
         this.props.showDurationBubble ||
@@ -257,6 +337,16 @@ export default createFragmentContainer(ItineraryLine, {
       legGeometry {
         points
       }
+      steps {
+        entity {
+          __typename
+          ... on Entrance {
+            code
+          }
+        }
+        lat
+        lon
+      }
       transitLeg
       interlineWithPreviousLeg
       route {

app/component/map/Line.js

@@ -99,6 +99,11 @@ export default class Line extends React.Component {
     if (this.props.mode === 'walk') {
       legWeight *= 0.8;
     }
+
+    if (this.props.mode === 'walk-inside') {
+      legWeight *= 0.8;
+    }
+
     if (this.props.passive) {
       haloWeight *= 0.5;
       legWeight *= 0.5;

app/component/map/map.scss

@@ -1250,6 +1250,16 @@ div.origin-popup {
   stroke-opacity: 0.5;
 }
 
+.map-line.walk-inside.leg {
+  color: #fff;
+  stroke: round;
+  stroke-dasharray: 0.1 11;
+}
+
+.leg-halo.walk-inside.map-line {
+  stroke: $walk-inside-color;
+}
+
 /* Fix to default leaflet behavior */
 .leaflet-map-pane svg {
   position: relative;

app/translations.js

@@ -877,6 +877,8 @@ const translations = {
     'set-time-earlier-button-label': 'Set travel time to earlier',
     'set-time-later-button-label': 'Set travel time to later',
     'set-time-now-button-label': 'Set travel time to current',
+    'station-entrance': 'Entrance',
+    'station-exit': 'Exit',
     'time-navigation-buttons': 'Time navigation buttons',
     'time-selector-form': 'Edit time',
     // eslint-disable-next-line sort-keys
@@ -2095,6 +2097,8 @@ const translations = {
     'set-time-earlier-button-label': 'Aikaista matkustusajankohtaa',
     'set-time-later-button-label': 'Myöhäistä matkustusajankohtaa',
     'set-time-now-button-label': 'Aseta matkustusajankohdaksi nyt',
+    'station-entrance': 'Sisäänkäynti',
+    'station-exit': 'Uloskäynti',
     'time-navigation-buttons': 'Matkustusajankohdan muokkausnapit',
     'time-selector-form': 'Muokkaa Matkustusajankohtaa',
     // eslint-disable-next-line sort-keys
@@ -4956,6 +4960,8 @@ const translations = {
     'set-time-earlier-button-label': 'Ställ in restid till tidigare',
     'set-time-later-button-label': 'Ställ in restid till senare',
     'set-time-now-button-label': 'Ställ in restid till nu',
+    'station-entrance': 'Ingång',
+    'station-exit': 'Utgång',
     'time-navigation-buttons': 'Tidsnavigeringsknappar',
     'time-selector-form': 'Redigera tid',
     // eslint-disable-next-line sort-keys

app/util/shapes.js

@@ -219,6 +219,13 @@ export const legShape = PropTypes.shape({
   trip: tripShape,
   agency: agencyShape,
   fare: fareShape,
+  steps: PropTypes.arrayOf(
+    PropTypes.shape({
+      entrance: PropTypes.string,
+      lat: PropTypes.number,
+      lon: PropTypes.number,
+    }),
+  ),
   from: PropTypes.shape({
     name: PropTypes.string,
     stop: stopShape,

build/schema.graphql

@@ -2590,6 +2590,12 @@ type serviceTimeRange {
   start: Long
 }
 
+type Entrance {
+  code: String
+}
+
+union StepEntity = Entrance
+
 type step {
   "The cardinal (compass) direction (e.g. north, northeast) taken when engaging this step."
   absoluteDirection: AbsoluteDirection
@@ -2623,6 +2629,7 @@ type step {
   streetName: String
   "Is this step walking with a bike?"
   walkingBike: Boolean
+  entity: StepEntity
 }
 
 type stopAtDistance implements Node {

sass/themes/default/_theme.scss

@@ -81,6 +81,7 @@ $bicycle-color: #666;
 $car-color: #333;
 $scooter-color: #bababa;
 $call-agency-color: #666;
+$walk-inside-color: #666;
 
 /* Fonts */
 $font-family: 'Roboto', arial, georgia, serif;