HSLdevcom · HenrikSundell · Sep 11, 2024 · Sep 13, 2024 · Oct 16, 2024 · Oct 16, 2024
diff --git a/app/component/itinerary/Itinerary.js b/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);

diff --git a/app/component/itinerary/ItineraryDetails.js b/app/component/itinerary/ItineraryDetails.js
@@ -391,6 +391,16 @@ const withRelay = createFragmentContainer(
           legGeometry {
             points
           }
+          steps {
+            feature {
+              __typename
+              ... on Entrance {
+                code
+                }
+              }
+              lat
+              lon
+            }
           nextLegs(
             numberOfLegs: 2
             originModesWithParentStation: [RAIL]

diff --git a/app/component/itinerary/Legs.js b/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])}
         >

diff --git a/app/component/itinerary/PlanConnection.js b/app/component/itinerary/PlanConnection.js
@@ -76,6 +76,17 @@ const planConnection = graphql`
             route {
               gtfsId
             }
+            steps {
+              feature {
+                __typename
+                ... on Entrance {
+                  code
+                  wheelchairAccessible
+                }
+              }
+              lat
+              lon
+            }
             trip {
               gtfsId
               directionId

diff --git a/app/component/itinerary/WalkLeg.js b/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,7 +73,20 @@ function WalkLeg(
           defaultMessage: 'scooter',
         })
       : leg.to?.name;
+  const entranceName = leg?.steps?.find(
+    // eslint-disable-next-line no-underscore-dangle
+    step => step?.feature?.__typename === 'Entrance' || step?.feature?.code,
+  )?.feature?.code;
 
+  const entranceAccessible = leg?.steps?.find(
+    // eslint-disable-next-line no-underscore-dangle
+    step =>
+      // eslint-disable-next-line no-underscore-dangle
+      step?.feature?.__typename === 'Entrance' ||
+      step?.feature?.wheelchairAccessible,
+  )?.feature?.wheelchairAccessible;
+  // eslint-disable-next-line no-console
+  console.log('entranceAccessible', entranceAccessible);
   return (
     <div key={index} className="row itinerary-row">
       <span className="sr-only">
@@ -229,6 +241,29 @@ function WalkLeg(
         )}
 
         <div className="itinerary-leg-action">
+          {previousLeg?.mode === 'SUBWAY' && (
+            <div className="subway-entrance-info-container">
+              <div className="subway-entrance-info-text">
+                <FormattedMessage id="station-exit" defaultMessage="Exit" />
+              </div>
+              <Icon
+                img="icon-icon_subway_entrance"
+                className="subway-entrance-info-icon-metro"
+              />
+              {entranceName && (
+                <Icon
+                  className="subway-entrance-info-icon-code"
+                  img={`icon-icon_subway_entrance_${entranceName.toLowerCase()}`}
+                />
+              )}
+              {entranceAccessible === 'POSSIBLE' && (
+                <Icon
+                  className="subway-entrance-info-icon-code"
+                  img="icon-icon_wheelchair_filled"
+                />
+              )}
+            </div>
+          )}
           <div className="itinerary-leg-action-content">
             <FormattedMessage
               id="walk-distance-duration"
@@ -248,6 +283,32 @@ function WalkLeg(
               focusAction={focusToLeg}
             />
           </div>
+          {nextLeg?.mode === 'SUBWAY' && (
+            <div className="subway-entrance-info-container">
+              <div className="subway-entrance-info-text">
+                <FormattedMessage
+                  id="station-entrance"
+                  defaultMessage="Entrance"
+                />
+              </div>
+              <Icon
+                img="icon-icon_subway_entrance"
+                className="subway-entrance-info-icon-metro"
+              />
+              {entranceName && (
+                <Icon
+                  className="subway-entrance-info-icon-code"
+                  img={`icon-icon_subway_entrance_${entranceName.toLowerCase()}`}
+                />
+              )}
+              {entranceAccessible === 'POSSIBLE' && (
+                <Icon
+                  className="subway-entrance-info-icon-code"
+                  img="icon-icon_wheelchair_filled"
+                />
+              )}
+            </div>
+          )}
         </div>
       </div>
     </div>
@@ -260,11 +321,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,
 };
 

diff --git a/app/component/itinerary/itinerary.scss b/app/component/itinerary/itinerary.scss
@@ -1997,7 +1997,7 @@ $itinerary-tab-switch-height: 48px;
     .itinerary-leg-action {
       border-top: 1px solid #ddd;
       padding: 1.2em 0;
-      margin-bottom: 1px;
+      margin-bottom: 1em;
       height: 60px;
       font-size: 0.9375rem;
 
@@ -2020,6 +2020,36 @@ $itinerary-tab-switch-height: 48px;
       }
     }
 
+    .subway-entrance-info-container {
+      display: flex;
+      align-items: center;
+      height: 24px;
+      margin-top: 1px;
+
+      .subway-entrance-info-text {
+        margin-right: 0.2em;
+        align-items: center;
+      }
+
+      .icon-container {
+        display: flex;
+      }
+
+      .subway-entrance-info-icon-metro {
+        width: 24px;
+        height: 100%;
+        vertical-align: middle;
+        display: flex;
+      }
+
+      .subway-entrance-info-icon-code {
+        width: 24px;
+        height: 100%;
+        vertical-align: middle;
+        display: flex;
+      }
+    }
+
     .itinerary-leg-intermediate-stops {
       margin-top: 12px;
       padding-bottom: 0;

diff --git a/app/component/map/ItineraryLine.js b/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,95 @@ 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(
+          step =>
+            // eslint-disable-next-line no-underscore-dangle
+            step?.feature?.__typename === 'Entrance' || step?.feature?.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 +338,17 @@ export default createFragmentContainer(ItineraryLine, {
       legGeometry {
         points
       }
+      steps {
+        feature {
+          __typename
+          ... on Entrance {
+            code
+            wheelchairAccessible
+          }
+        }
+        lat
+        lon
+      }
       transitLeg
       interlineWithPreviousLeg
       route {

diff --git a/app/component/map/Line.js b/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;

diff --git a/app/component/map/map.scss b/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;