AB#168 - Improve indoor routing level info

app/component/itinerary/IndoorRouteInfo.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import { configShape } from '../../util/shapes';
+import { isKeyboardSelectionEvent } from '../../util/browser';
+import Icon from '../Icon';
+
+export default function IndoorRouteInfo(
+  { intermediateStepCount, showIntermediateSteps, toggleFunction },
+  { config },
+) {
+  const message = (showIntermediateSteps && (
+    <FormattedMessage
+      id="itinerary-hide-indoor-route"
+      defaultMessage="Hide indoor route"
+    />
+  )) || (
+    <FormattedMessage
+      id="itinerary-indoor-route"
+      defaultMessage="Indoor route"
+    />
+  );
+  return (
+    <div
+      role="button"
+      tabIndex="0"
+      className={cx('intermediate-steps-clickable', {
+        'cursor-pointer': intermediateStepCount > 0,
+      })}
+      onClick={e => {
+        e.stopPropagation();
+        if (intermediateStepCount > 0) {
+          toggleFunction();
+        }
+      }}
+      onKeyPress={e => {
+        if (isKeyboardSelectionEvent(e)) {
+          e.stopPropagation();
+          toggleFunction();
+        }
+      }}
+    >
+      <div
+        className={cx('intermediate-step-info-container', {
+          open: showIntermediateSteps,
+        })}
+      >
+        {intermediateStepCount === 0 ? (
+          <span className="intermediate-steps-message-no-steps">{message}</span>
+        ) : (
+          <span className="intermediate-steps-message">{message}</span>
+        )}{' '}
+        {intermediateStepCount !== 0 && (
+          <Icon
+            img="icon_arrow-collapse--right"
+            className="itinerary-search-icon"
+            color={config.colors.primary}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+IndoorRouteInfo.contextTypes = {
+  config: configShape.isRequired,
+};
+
+IndoorRouteInfo.propTypes = {
+  intermediateStepCount: PropTypes.number.isRequired,
+  toggleFunction: PropTypes.func.isRequired,
+  showIntermediateSteps: PropTypes.bool,
+};
+
+IndoorRouteInfo.defaultProps = {
+  showIntermediateSteps: false,
+};

app/component/itinerary/IndoorRouteStep.js

@@ -0,0 +1,135 @@
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import cx from 'classnames';
+import { configShape } from '../../util/shapes';
+import Icon from '../Icon';
+import {
+  getIndoorRouteTranslationId,
+  getVerticalTransportationUseIconId,
+} from '../../util/indoorUtils';
+import {
+  IndoorRouteLegType,
+  IndoorRouteStepType,
+  VerticalDirection,
+} from '../../constants';
+import ItineraryMapAction from './ItineraryMapAction';
+
+function IndoorRouteStep({
+  focusAction,
+  type,
+  verticalDirection,
+  toLevelName,
+  isLastPlace,
+  onlyOneStep,
+  indoorRouteLegType,
+}) {
+  const [defaultBackgroundImageUrl, setDefaultBackgroundImageUrl] = useState();
+  const [indoorBackgroundImageUrl, setIndoorBackgroundImageUrl] = useState();
+  useEffect(() => {
+    Promise.all([
+      import(
+        /* webpackChunkName: "dotted-line" */ `../../configurations/images/default/dotted-line.svg`
+      ),
+      import(
+        /* webpackChunkName: "indoor-dotted-line" */ `../../configurations/images/default/indoor-dotted-line.svg`
+      ),
+    ]).then(([defaultImageUrl, insideImageUrl]) => {
+      setDefaultBackgroundImageUrl(`url(${defaultImageUrl.default})`);
+      setIndoorBackgroundImageUrl(`url(${insideImageUrl.default})`);
+    });
+  }, []);
+
+  const indoorTranslationId = getIndoorRouteTranslationId(
+    type,
+    verticalDirection,
+    toLevelName,
+  );
+
+  return (
+    <div
+      style={{ width: '100%', position: 'relative' }}
+      className="row itinerary-row"
+    >
+      <div className="small-offset-2 leg-before indoor-step">
+        <div
+          className={cx('leg-before-circle', 'circle-fill', 'indoor-step', {
+            'only-one-step': onlyOneStep,
+          })}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width={28} height={28}>
+            <circle
+              className="indoor-route-step-marker"
+              width={28}
+              cx={11}
+              cy={18}
+              r={6}
+              strokeWidth={4}
+            />
+          </svg>
+        </div>
+        <div
+          style={{
+            backgroundImage:
+              isLastPlace &&
+              indoorRouteLegType ===
+                IndoorRouteLegType.StepsBeforeEntranceInside
+                ? defaultBackgroundImageUrl
+                : indoorBackgroundImageUrl,
+          }}
+          className={cx('leg-before-line', 'indoor-step', {
+            'only-one-step': onlyOneStep,
+          })}
+        />
+      </div>
+      <div className="small-9 columns itinerary-instruction-column intermediate indoor-step">
+        <div
+          className={cx('itinerary-leg-row-intermediate-indoor-step', {
+            'only-one-step': onlyOneStep,
+          })}
+        >
+          <Icon
+            img={getVerticalTransportationUseIconId(
+              verticalDirection,
+              type,
+              false,
+            )}
+            className="itinerary-intermediate-indoor-route-icon"
+          />
+          <div className="itinerary-intermediate-indoor-route-step-info">
+            <FormattedMessage
+              id={indoorTranslationId}
+              defaultMessage="Indoor step"
+              values={{ toLevelName }}
+            />
+          </div>
+          <ItineraryMapAction target="" focusAction={focusAction} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+IndoorRouteStep.propTypes = {
+  focusAction: PropTypes.func.isRequired,
+  type: PropTypes.oneOf(Object.values(IndoorRouteStepType)).isRequired,
+  verticalDirection: PropTypes.oneOf(Object.values(VerticalDirection)),
+  toLevelName: PropTypes.string,
+  isLastPlace: PropTypes.bool,
+  onlyOneStep: PropTypes.bool,
+  indoorRouteLegType: PropTypes.oneOf(Object.values(IndoorRouteLegType)),
+};
+
+IndoorRouteStep.defaultProps = {
+  verticalDirection: undefined,
+  toLevelName: undefined,
+  isLastPlace: false,
+  onlyOneStep: false,
+  indoorRouteLegType: IndoorRouteLegType.NoStepsInside,
+};
+
+IndoorRouteStep.contextTypes = {
+  config: configShape.isRequired,
+};
+
+export default IndoorRouteStep;

app/component/itinerary/ItineraryCircleLineWithIcon.js

@@ -3,12 +3,14 @@ import React from 'react';
 import cx from 'classnames';
 import Icon from '../Icon';
 import RouteNumber from '../RouteNumber';
-import { ViaLocationType } from '../../constants';
+import { IndoorRouteLegType, ViaLocationType } from '../../constants';
 
 class ItineraryCircleLineWithIcon extends React.Component {
   static propTypes = {
     index: PropTypes.number.isRequired,
     modeClassName: PropTypes.string.isRequired,
+    indoorRouteLegType: PropTypes.oneOf(Object.values(IndoorRouteLegType)),
+    showIntermediateSteps: PropTypes.bool,
     viaType: PropTypes.string,
     bikePark: PropTypes.bool,
     carPark: PropTypes.bool,
@@ -17,10 +19,13 @@ class ItineraryCircleLineWithIcon extends React.Component {
     icon: PropTypes.string,
     style: PropTypes.shape({}),
     isNotFirstLeg: PropTypes.bool,
+    onlyOneStep: PropTypes.bool,
     isStop: PropTypes.bool,
   };
 
   static defaultProps = {
+    indoorRouteLegType: IndoorRouteLegType.NoStepsInside,
+    showIntermediateSteps: false,
     viaType: null,
     color: null,
     bikePark: false,
@@ -29,11 +34,13 @@ class ItineraryCircleLineWithIcon extends React.Component {
     icon: undefined,
     style: {},
     isNotFirstLeg: undefined,
+    onlyOneStep: false,
     isStop: false,
   };
 
   state = {
-    imageUrl: 'none',
+    defaultImageUrl: 'none',
+    insideImageUrl: 'none',
   };
 
   isFirstChild = () => {
@@ -43,10 +50,18 @@ class ItineraryCircleLineWithIcon extends React.Component {
   };
 
   componentDidMount() {
-    import(
-      /* webpackChunkName: "dotted-line" */ `../../configurations/images/default/dotted-line.svg`
-    ).then(imageUrl => {
-      this.setState({ imageUrl: `url(${imageUrl.default})` });
+    Promise.all([
+      import(
+        /* webpackChunkName: "dotted-line" */ `../../configurations/images/default/dotted-line.svg`
+      ),
+      import(
+        /* webpackChunkName: "indoor-dotted-line" */ `../../configurations/images/default/indoor-dotted-line.svg`
+      ),
+    ]).then(([defaultImageUrl, insideImageUrl]) => {
+      this.setState({
+        defaultImageUrl: `url(${defaultImageUrl.default})`,
+        insideImageUrl: `url(${insideImageUrl.default})`,
+      });
     });
   }
 
@@ -107,16 +122,43 @@ class ItineraryCircleLineWithIcon extends React.Component {
     const topMarker = this.getMarker(true);
     const bottomMarker = this.getMarker(false);
     const legBeforeLineStyle = { color: this.props.color, ...this.props.style };
+    const legBeforeLineBottomStyle = {
+      color: this.props.color,
+      ...this.props.style,
+    };
     if (
       this.props.modeClassName === 'walk' ||
       this.props.modeClassName === 'bicycle_walk'
     ) {
-      legBeforeLineStyle.backgroundImage = this.state.imageUrl;
+      legBeforeLineStyle.backgroundImage = this.state.defaultImageUrl;
+      switch (this.props.indoorRouteLegType) {
+        case IndoorRouteLegType.StepsAfterEntranceInside:
+          legBeforeLineStyle.backgroundImage = this.state.defaultImageUrl;
+          legBeforeLineBottomStyle.backgroundImage = this.state.insideImageUrl;
+          break;
+        case IndoorRouteLegType.StepsBeforeEntranceInside:
+          if (this.props.showIntermediateSteps) {
+            legBeforeLineStyle.backgroundImage = this.state.insideImageUrl;
+            legBeforeLineBottomStyle.backgroundImage =
+              this.state.insideImageUrl;
+          } else {
+            legBeforeLineStyle.backgroundImage = this.state.insideImageUrl;
+            legBeforeLineBottomStyle.backgroundImage =
+              this.state.defaultImageUrl;
+          }
+          break;
+        default:
+          legBeforeLineStyle.backgroundImage = this.state.defaultImageUrl;
+          legBeforeLineBottomStyle.backgroundImage = this.state.defaultImageUrl;
+      }
     }
     return (
       <div
         className={cx('leg-before', this.props.modeClassName, {
           via: !!this.props.viaType,
+          'indoor-route':
+            this.props.indoorRouteLegType !== IndoorRouteLegType.NoStepsInside,
+          'only-one-step': this.props.onlyOneStep,
           'first-leg': this.props.index === 0 && !this.props.isNotFirstLeg,
         })}
         aria-hidden="true"
@@ -138,7 +180,7 @@ class ItineraryCircleLineWithIcon extends React.Component {
           vertical
         />
         <div
-          style={legBeforeLineStyle}
+          style={legBeforeLineBottomStyle}
           className={cx(
             'leg-before-line',
             this.props.modeClassName,

app/component/itinerary/ItineraryPage.js

@@ -1421,6 +1421,7 @@ export default function ItineraryPage(props, context) {
           ) : (
             <NaviContainer
               focusToLeg={focusToLeg}
+              focusToPoint={focusToPoint}
               relayEnvironment={props.relayEnvironment}
               setNavigation={setNavigation}
               mapRef={mwtRef.current}

app/component/itinerary/Legs.js

@@ -208,7 +208,12 @@ export default class Legs extends React.Component {
         legs.push(<TaxiLeg {...legProps} />);
       } else if (isLegOnFoot(leg)) {
         legs.push(
-          <WalkLeg {...legProps} previousLeg={previousLeg} nextLeg={nextLeg}>
+          <WalkLeg
+            {...legProps}
+            previousLeg={previousLeg}
+            nextLeg={nextLeg}
+            focusToPoint={this.props.focusToPoint}
+          >
             {stopCode(leg.from.stop)}
           </WalkLeg>,
         );
@@ -315,6 +320,7 @@ export default class Legs extends React.Component {
           nextLeg={compressedLegs[numberOfLegs]}
           focusAction={this.focus(lastLeg.to)}
           focusToLeg={this.focusToLeg(lastLeg)}
+          focusToPoint={this.props.focusToPoint}
         >
           {stopCode(lastLeg.to.stop)}
         </WalkLeg>,