Merge pull request #5071 from HSLdevcom/yet-more-navi-info

More information about scooters, elecrtric bikes, POI's

app/component/itinerary/NaviDestination.js

@@ -7,8 +7,9 @@ import PlatformNumber from '../PlatformNumber';
 import { legShape } from '../../util/shapes';
 
 function NaviDestination({ leg, focusToLeg }) {
-  const { stop, rentalVehicle, vehicleParking, vehicleRentalStation } = leg.to;
-
+  const { stop, rentalVehicle, vehicleParking, vehicleRentalStation, name } =
+    leg.to;
+  let placeName;
   let toIcon;
   if (stop) {
     toIcon = `icon-icon_${stop.vehicleMode.toLowerCase()}-stop-lollipop`;
@@ -18,6 +19,9 @@ function NaviDestination({ leg, focusToLeg }) {
     toIcon = 'icon-bike_parking';
   } else if (vehicleRentalStation) {
     toIcon = 'icon-icon_citybike';
+  } else {
+    toIcon = 'icon-icon_place';
+    placeName = name;
   }
 
   const handleFocusToLeg = (l, maximize) => () => {
@@ -28,7 +32,7 @@ function NaviDestination({ leg, focusToLeg }) {
     <div className="navileg-destination-details">
       {toIcon && <Icon img={toIcon} className="navi-destination-icon" />}
       <div>
-        {stop?.name}&nbsp;
+        {stop?.name || placeName}
         {stop?.code && <StopCode code={stop.code} />}
         {stop?.platformCode && (
           <PlatformNumber

app/component/itinerary/NaviLeg.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { FormattedMessage, intlShape } from 'react-intl';
 import { legShape } from '../../util/shapes';
 import Icon from '../Icon';
-import { legDestination } from '../../util/legUtils';
+import { legDestination, isRental } from '../../util/legUtils';
 import NaviDestination from './NaviDestination';
 
 const iconMap = {
@@ -14,17 +14,24 @@ const iconMap = {
 };
 
 /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-export default function NaviLeg({ leg, focusToLeg }, { intl }) {
+export default function NaviLeg({ leg, focusToLeg, nextLeg }, { intl }) {
   const iconName = iconMap[leg.mode];
-  const goTo = `navileg-${leg.mode.toLowerCase()}`;
+  let goTo = `navileg-${leg.mode.toLowerCase()}`;
 
+  if (isRental(leg, nextLeg)) {
+    if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') {
+      goTo = `navileg-rent-scooter`;
+    } else {
+      goTo = `navileg-rent-cycle`;
+    }
+  }
   return (
     <div>
       <div className="navileg-goto">
         <Icon img={iconName} className="navileg-mode" />
         <FormattedMessage id={goTo} defaultMessage="Go to" />
         &nbsp;
-        {legDestination(intl, leg)}
+        {legDestination(intl, leg, null, nextLeg)}
       </div>
       <div className="navileg-destination">
         <div className="navi-left-bar" />
@@ -37,6 +44,11 @@ export default function NaviLeg({ leg, focusToLeg }, { intl }) {
 NaviLeg.propTypes = {
   leg: legShape.isRequired,
   focusToLeg: PropTypes.func.isRequired,
+  nextLeg: legShape,
+};
+
+NaviLeg.defaultProps = {
+  nextLeg: null,
 };
 
 NaviLeg.contextTypes = {

app/component/itinerary/Navigator.js

@@ -53,7 +53,6 @@ function Navigator({ itinerary, focusToLeg, setNavigation }, context) {
       focusToLeg(newLeg, false);
     }
   }, [time]);
-
   const first = itinerary.legs[0];
   const last = itinerary.legs[itinerary.legs.length - 1];
   let info;
@@ -66,7 +65,12 @@ function Navigator({ itinerary, focusToLeg, setNavigation }, context) {
     );
   } else if (currentLeg) {
     if (!currentLeg.transitLeg) {
-      info = <NaviLeg leg={currentLeg} focusToLeg={focusToLeg} />;
+      const next = itinerary.legs.find(
+        leg => legTime(leg.start) > legTime(currentLeg.start),
+      );
+      info = (
+        <NaviLeg leg={currentLeg} focusToLeg={focusToLeg} nextLeg={next} />
+      );
     } else {
       info = `Tracking ${currentLeg?.mode} leg`;
     }

app/translations.js

@@ -1269,13 +1269,15 @@ const translations = {
     'minutes-or-route': 'Min / Route',
     'mobile-ticket-purchase-aria':
       'Mobile ticket purchase information. Buy {ticketName} for {price}. Buy ticket from HSL app or download the app',
+    'modes.from-place': 'from the destination',
     'modes.to-airplane': 'airport',
     'modes.to-bike': 'city bike station',
     'modes.to-bike-park': 'bike park',
     'modes.to-bus': 'bus stop',
     'modes.to-car-park': 'car park',
     'modes.to-place': 'destination',
     'modes.to-rail': 'train station',
+    'modes.to-scooter': 'to scooter',
     'modes.to-stop': 'stop',
     'modes.to-subway': 'subway station',
     'modes.to-tram': 'tram stop',
@@ -1294,6 +1296,8 @@ const translations = {
     'navigation-wait': 'Wait at the stop',
     'navileg-bicycle': 'Cycle to',
     'navileg-car': 'Drive to',
+    'navileg-rent-cycle': 'Pick up citybike',
+    'navileg-rent-scooter': 'Pick up scooter',
     'navileg-scooter': 'Travel by scooter to',
     'navileg-walk': 'Walk to',
     nearest: '{ mode } near you',
@@ -2491,13 +2495,15 @@ const translations = {
     'minutes-or-route': 'Min / Linja',
     'mobile-ticket-purchase-aria':
       'Mobiililipun osto. Osta {ticketName} lippu hintaan {price}. Osta lippu HSL sovelluksesta tai lataa sovellus',
+    'modes.from-place': 'kohteesta',
     'modes.to-airplane': 'lentokentälle',
     'modes.to-bike': 'kaupunkipyöräasemalle',
     'modes.to-bike-park': 'liityntäpyöräparkkiin',
     'modes.to-bus': 'bussipysäkille',
     'modes.to-car-park': 'liityntäpysäköintiin',
     'modes.to-place': 'kohteeseen',
     'modes.to-rail': 'juna-asemalle',
+    'modes.to-scooter': 'potkulaudalle',
     'modes.to-stop': 'pysäkille',
     'modes.to-subway': 'metroasemalle',
     'modes.to-tram': 'raitiovaunupysäkille',
@@ -2516,6 +2522,8 @@ const translations = {
     'navigation-wait': 'Odota pysäkillä',
     'navileg-bicycle': 'Pyöräile',
     'navileg-car': 'Aja',
+    'navileg-rent-cycle': 'Nouda kapunkipyörä',
+    'navileg-rent-scooter': 'Nouda sähköpotkulauta',
     'navileg-scooter': 'Potkulautaile',
     'navileg-walk': 'Kävele',
     nearest: 'Lähimmät {mode}',
@@ -5360,13 +5368,15 @@ const translations = {
     'minutes-or-route': 'Min / Linje',
     'mobile-ticket-purchase-aria':
       'Köp av mobilbiljett. Köp en {ticketName}-biljett för {price}. Köp biljetten i HSL-appen eller ladda ner appen.',
+    'modes.from-place': 'från destinationen',
     'modes.to-airplane': 'flygplats',
     'modes.to-bike': 'stadscykelstation',
     'modes.to-bike-park': 'anslutningsparkering för cyklar',
     'modes.to-bus': 'busshållplats',
     'modes.to-car-park': 'infartsparkering',
     'modes.to-place': 'destination',
     'modes.to-rail': 'tågstation',
+    'modes.to-scooter': 'elsparkcykel',
     'modes.to-stop': 'hållplats',
     'modes.to-subway': 'metrostation',
     'modes.to-tram': 'spårvagnshållplats',
@@ -5385,6 +5395,8 @@ const translations = {
     'navigation-wait': 'Vänta på hållplatsen',
     'navileg-bicycle': 'Cycla till',
     'navileg-car': 'Kör till',
+    'navileg-rent-cycle': 'Hämta  stadscykel',
+    'navileg-rent-scooter': 'Hämta elsparkcykel',
     'navileg-scooter': 'Åk elsparkcykel',
     'navileg-walk': 'Gå till',
     nearest: 'Närmaste { mode }',

app/util/legUtils.js

@@ -606,6 +606,18 @@ export const showBikeBoardingNote = (leg, config) => {
   );
 };
 
+/**
+ * Determines whether to leg afrer walk leg contains rental vehicles
+ * @param {object} leg - The leg object.
+ * @param {object} nextLeg - The Leg after the current leg.
+ * @returns {boolean}
+ */
+export const isRental = (leg, nextLeg) =>
+  leg.mode === 'WALK' &&
+  (leg.to.vehicleRentalStation ||
+    leg.to.vehicleRental ||
+    nextLeg?.mode === 'SCOOTER');
+
 /**
  * Return translated string that describes leg destination
  *
@@ -614,10 +626,9 @@ export const showBikeBoardingNote = (leg, config) => {
  * @param {object} secondary - optional walk leg
  * @returns {string}
  */
-export const legDestination = (intl, leg, secondary) => {
+export const legDestination = (intl, leg, secondary, nextLeg = null) => {
   const { to } = leg;
   let id = 'modes.to-place';
-
   if (leg.mode === 'BICYCLE' && to.vehicleParking) {
     id = 'modes.to-bike-park';
   } else if (leg.mode === 'CAR' && to.vehicleParking) {
@@ -627,11 +638,8 @@ export const legDestination = (intl, leg, secondary) => {
   if (mode) {
     id = `modes.to-${mode.toLowerCase()}`;
   }
-
-  if (id === 'modes.to-place') {
-    return `${intl.formatMessage({ id, defaultMessage: 'place' })} ${
-      leg.to.name
-    }`;
+  if (isRental(leg, nextLeg)) {
+    id = 'modes.from-place';
   }
   return intl.formatMessage({ id, defaultMessage: 'place' });
 };