AB#277 (DT-6955) Viapoint by coordinates - v3

app/action/ViaPointActions.js

@@ -5,3 +5,7 @@ export function addViaPoint(actionContext, val) {
 export function setViaPoints(actionContext, points) {
   actionContext.dispatch('setViaPoints', points);
 }
+
+export function deleteViaPoint(actionContext, val) {
+  actionContext.dispatch('deleteViaPoint', val);
+}

app/component/itinerary/BicycleLeg.js

@@ -52,7 +52,8 @@ export default function BicycleLeg(
   let legDescription = <span>{leg.from ? leg.from.name : ''}</span>;
   const firstLegClassName = index === 0 ? 'start' : '';
   let modeClassName = 'bicycle';
-  const [address, place] = splitStringToAddressAndPlace(leg.from.name);
+  const [name, place] = splitStringToAddressAndPlace(leg.from.name);
+  const address = (leg.from.viaLocationType && leg.viaAddress) || name;
   const rentalVehicleNetwork =
     leg.from.vehicleRentalStation?.rentalNetwork.networkId ||
     leg.from.rentalVehicle?.rentalNetwork.networkId;
@@ -136,6 +137,8 @@ export default function BicycleLeg(
         icon="icon_scooter_rider"
         appendClass={!scooterSettingsOn ? 'settings' : 'scooter'}
         style={style}
+        viaType={leg.from.viaLocationType}
+        isStop={!!leg.from.stop}
       />
     );
   } else if (bicycleWalkLeg) {
@@ -144,22 +147,34 @@ export default function BicycleLeg(
         index={index}
         modeClassName={modeClassName}
         boardingLeg={bicycleWalkLeg}
+        viaType={leg.from.viaLocationType}
+        isStop={!!leg.from.stop}
       />
     );
   } else if (mode === 'BICYCLE') {
     circleLine = (
       <ItineraryCircleLineWithIcon
         index={index}
         modeClassName={modeClassName}
+        viaType={leg.from.viaLocationType}
+        isStop={!!leg.from.stop}
       />
     );
   } else {
     circleLine = (
-      <ItineraryCircleLine index={index} modeClassName={modeClassName} />
+      <ItineraryCircleLine
+        index={index}
+        modeClassName={modeClassName}
+        viaType={leg.from.viaLocationType}
+        isStop={!!leg.from.stop}
+      />
     );
   }
   const fromStop = leg?.from.stop || bicycleWalkLeg?.from.stop;
-  const origin = bicycleWalkLeg?.from.stop ? bicycleWalkLeg.from.name : address;
+  const origin =
+    bicycleWalkLeg?.from.stop && !bicycleWalkLeg?.from.viaLocationType
+      ? bicycleWalkLeg.from.name
+      : address;
   const destination = bicycleWalkLeg?.to.stop
     ? bicycleWalkLeg?.to.name
     : leg.to.name;
@@ -264,51 +279,56 @@ export default function BicycleLeg(
             }}
           />
         </span>
-        {isFirstLeg(index) || bicycleWalkLeg?.from.stop ? (
-          <div className={cx('itinerary-leg-first-row', 'bicycle', 'first')}>
-            <div className="address-container">
-              <div className="address">
-                {fromStop ? (
-                  <Link
-                    onClick={e => {
-                      e.stopPropagation();
-                    }}
-                    to={stopPagePath(false, fromStop.gtfsId)}
-                  >
-                    {origin}
-                    {leg.isViaPoint && (
+        {isFirstLeg(index) ||
+        bicycleWalkLeg?.from.stop ||
+        leg.from.viaLocationType ? (
+          <>
+            {leg.from.viaLocationType ? <div className="divider" /> : null}
+            <div className={cx('itinerary-leg-first-row', 'bicycle', 'first')}>
+              <div className="address-container">
+                <div className="address">
+                  {fromStop ? (
+                    <Link
+                      onClick={e => {
+                        e.stopPropagation();
+                      }}
+                      to={stopPagePath(false, fromStop.gtfsId)}
+                    >
+                      {origin}
+                      {leg.isViaPoint && (
+                        <Icon
+                          img="icon_mapMarker"
+                          className="itinerary-mapmarker-icon"
+                        />
+                      )}
                       <Icon
-                        img="icon_mapMarker"
-                        className="itinerary-mapmarker-icon"
+                        img="icon_arrow-collapse--right"
+                        className="itinerary-arrow-icon"
+                        color={config.colors.primary}
                       />
-                    )}
-                    <Icon
-                      img="icon_arrow-collapse--right"
-                      className="itinerary-arrow-icon"
-                      color={config.colors.primary}
+                    </Link>
+                  ) : (
+                    address
+                  )}
+                </div>
+                {bicycleWalkLeg?.from.stop?.code && (
+                  <>
+                    <StopCode code={bicycleWalkLeg.from.stop.code} />
+                    <PlatformNumber
+                      number={bicycleWalkLeg.from.stop.platformCode}
+                      short
+                      isRailOrSubway
                     />
-                  </Link>
-                ) : (
-                  address
+                  </>
                 )}
+                <div className="place">{place}</div>
               </div>
-              {bicycleWalkLeg?.from.stop?.code && (
-                <>
-                  <StopCode code={bicycleWalkLeg.from.stop.code} />
-                  <PlatformNumber
-                    number={bicycleWalkLeg.from.stop.platformCode}
-                    short
-                    isRailOrSubway
-                  />
-                </>
-              )}
-              <div className="place">{place}</div>
+              <ItineraryMapAction
+                target={leg.from.name || ''}
+                focusAction={focusAction}
+              />
             </div>
-            <ItineraryMapAction
-              target={leg.from.name || ''}
-              focusAction={focusAction}
-            />
-          </div>
+          </>
         ) : (
           <div>
             <div className="divider" />

app/component/itinerary/BikeParkLeg.js

@@ -45,6 +45,8 @@ const BikeParkLeg = (
         bikePark
         index={index}
         modeClassName="walk"
+        viaType={leg.from.viaLocationType}
+        isStop={!!leg.from.stop}
       />
       <div className="small-9 columns itinerary-instruction-column">
         <div className={cx('itinerary-leg-first-row', 'bicycle')}>

app/component/itinerary/CarLeg.js

@@ -10,6 +10,7 @@ import { durationToString } from '../../util/timeUtils';
 import ItineraryCircleLineWithIcon from './ItineraryCircleLineWithIcon';
 import { legTimeStr, legDestination } from '../../util/legUtils';
 import ItineraryCircleLineLong from './ItineraryCircleLineLong';
+import { splitStringToAddressAndPlace } from '../../util/otpStrings';
 
 export default function CarLeg(props, { config, intl }) {
   const distance = displayDistance(
@@ -26,16 +27,22 @@ export default function CarLeg(props, { config, intl }) {
       index={props.index}
       modeClassName={modeClassName}
       boardingLeg={props.carBoardingLeg}
+      viaType={props.leg.from.viaLocationType}
     />
   ) : (
     <ItineraryCircleLineWithIcon
       index={props.index}
       modeClassName={modeClassName}
       icon="icon_car"
+      viaType={props.leg.from.viaLocationType}
     />
   );
 
-  const [address, place] = props.leg.from.name.split(/, (.+)/); // Splits the name-string to two parts from the first occurance of ', '
+  const [name, place] = splitStringToAddressAndPlace(props.leg.from.name);
+  const address =
+    props.leg.from.viaLocationType && props.leg.viaAddress
+      ? props.leg.viaAddress
+      : name;
 
   /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */
   return (

app/component/itinerary/CarParkLeg.js

@@ -50,12 +50,14 @@ function CarParkLeg(props, { config, intl }) {
           index={props.index}
           modeClassName="car-park-walk"
           carPark
+          viaType={props.leg.from.viaLocationType}
         />
       ) : (
         <ItineraryCircleLineWithIcon
           index={props.index}
           modeClassName="walk"
           carPark
+          viaType={props.leg.from.viaLocationType}
         />
       )}
 

app/component/itinerary/Itinerary.js

@@ -16,7 +16,6 @@ import RouteNumberContainer from '../RouteNumberContainer';
 import { getActiveLegAlertSeverityLevel } from '../../util/alertUtils';
 import {
   getLegMode,
-  splitLegsAtViaPoints,
   compressLegs,
   getLegBadgeProps,
   getInterliningLegs,
@@ -27,6 +26,7 @@ import {
   legTimeStr,
   LegMode,
   getZones,
+  splitLegsAtViaPoints,
 } from '../../util/legUtils';
 import { dateOrEmpty, isTomorrow, timeStr } from '../../util/timeUtils';
 import withBreakpoint from '../../util/withBreakpoint';
@@ -42,6 +42,7 @@ import { getCapacityForLeg } from '../../util/occupancyUtil';
 import getCo2Value from '../../util/emissions';
 import { ItineraryFragment } from './queries/ItineraryFragment';
 import { getTicketString } from '../../util/fareUtils';
+import { ViaLocationType } from '../../constants';
 import BoardingInformation, {
   getBoardingInformationText,
 } from './BoardingInformation';
@@ -250,18 +251,6 @@ export const ViaLeg = () => (
   </div>
 );
 
-const getViaPointIndex = (leg, intermediatePlaces) => {
-  if (!leg || !Array.isArray(intermediatePlaces)) {
-    return -1;
-  }
-  return intermediatePlaces.findIndex(
-    place => place.lat === leg.from.lat && place.lon === leg.from.lon,
-  );
-};
-
-const connectsFromViaPoint = (currLeg, intermediatePlaces) =>
-  getViaPointIndex(currLeg, intermediatePlaces) > -1;
-
 const bikeWasParked = legs => {
   const legsLength = legs.length;
   for (let i = 0; i < legsLength; i++) {
@@ -324,10 +313,7 @@ const Itinerary = (
       nameLengthSum += getRouteText(leg.route, config).length;
     }
     nameLengthSum += 10; // every leg requires some minimum space
-    if (
-      i > 0 &&
-      (leg.intermediatePlace || connectsFromViaPoint(leg, intermediatePlaces))
-    ) {
+    if (i > 0 && (leg.from.viaLocationType || leg.to.viaLocationType)) {
       intermediateSlack +=
         legTime(leg.start) - legTime(compressedLegs[i - 1].end); // calculate time spent at each intermediate place
     }
@@ -368,17 +354,12 @@ const Itinerary = (
     let waitLength;
     const startMs = legTime(leg.start);
     const endMs = legTime(leg.end);
-    const previousLeg = i > 0 ? compressedLegs[i - 1] : null;
     const nextLeg =
       i < compressedLegs.length - 1 ? compressedLegs[i + 1] : null;
     let legLength = relativeLength(endMs - startMs);
     const longName = !leg?.route?.shortName || leg?.route?.shortName.length > 5;
 
-    if (
-      nextLeg &&
-      !nextLeg.intermediatePlace &&
-      !connectsFromViaPoint(nextLeg, intermediatePlaces)
-    ) {
+    if (nextLeg && !leg.to.viaLocationType) {
       // don't show waiting in intermediate places
       waitTime = legTime(nextLeg.start) - endMs;
       waitLength = relativeLength(waitTime);
@@ -427,14 +408,11 @@ const Itinerary = (
       renderBar = false;
       addition += legLength; // carry over the length of the leg to the next
     }
-    // There are two places which inject ViaLegs in this logic, but we certainly
-    // don't want to add it twice in the same place with the same key, so we
-    // record whether we added it here at the first place.
-    let viaAdded = false;
-    if (leg.intermediatePlace) {
+    let viaPointAdded = false;
+    if (leg.from.viaLocationType === ViaLocationType.Visit) {
+      viaPointAdded = true;
       onlyIconLegs += 1;
       legs.push(<ViaLeg key={`via_${leg.mode}_${startMs}`} />);
-      viaAdded = true;
     }
     if (isLegOnFoot(leg) && renderBar) {
       const walkingTime = Math.floor(leg.duration / 60);
@@ -596,11 +574,11 @@ const Itinerary = (
         usingOwnCarWholeTrip &&
         config.carBoardingModes[leg.route.mode] !== undefined;
       if (
-        previousLeg &&
-        !previousLeg.intermediatePlace &&
-        connectsFromViaPoint(leg, intermediatePlaces) &&
-        !viaAdded
+        leg.from.viaLocationType === ViaLocationType.PassThrough ||
+        (leg.viaStopCall && !viaPointAdded)
       ) {
+        viaPointAdded = true;
+        onlyIconLegs += 1;
         legs.push(<ViaLeg key={`via_${leg.mode}_${startMs}`} />);
       }
       const renderRouteNumberForALongLeg =
@@ -636,6 +614,13 @@ const Itinerary = (
         ),
       );
       stopNames.push(leg.from.name);
+      if (
+        leg.to.viaLocationType === ViaLocationType.PassThrough &&
+        !(nextLeg.transitLeg && nextLeg.from.viaLocationType)
+      ) {
+        onlyIconLegs += 1;
+        legs.push(<ViaLeg key={`via_${leg.mode}_${startMs}`} />);
+      }
     }
 
     if (waiting && !nextLeg?.interlineWithPreviousLeg) {

app/component/itinerary/ItineraryCircleLine.js

@@ -2,24 +2,27 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import Icon from '../Icon';
+import { ViaLocationType } from '../../constants';
 
 class ItineraryCircleLine extends React.Component {
   static defaultProps = {
-    isVia: false,
+    viaType: null,
     color: null,
     renderBottomMarker: true,
     carPark: false,
     appendClass: undefined,
+    isStop: false,
   };
 
   static propTypes = {
     index: PropTypes.number.isRequired,
     modeClassName: PropTypes.string.isRequired,
-    isVia: PropTypes.bool,
+    viaType: PropTypes.string,
     color: PropTypes.string,
     renderBottomMarker: PropTypes.bool,
     carPark: PropTypes.bool,
     appendClass: PropTypes.string,
+    isStop: PropTypes.bool,
   };
 
   constructor(props) {
@@ -39,7 +42,7 @@ class ItineraryCircleLine extends React.Component {
   }
 
   isFirstChild = () => {
-    return this.props.index === 0 && this.props.isVia === false;
+    return this.props.index === 0 && !this.props.viaType;
   };
 
   getMarker = top => {
@@ -80,7 +83,7 @@ class ItineraryCircleLine extends React.Component {
         </div>
       );
     }
-    if (this.props.isVia === true) {
+    if (this.props.viaType === ViaLocationType.Visit && !this.props.isStop) {
       return (
         <div className="itinerary-icon-container">
           <Icon img="icon_mapMarker" className="itinerary-icon via via-it" />