Merge branch 'v3' into DT-6153

app/component/bike-park-rental-station.scss

@@ -157,7 +157,7 @@
     }
 
     .external-link {
-      color: #007ac9;
+      color: $link-color;
       text-decoration: none;
       font-weight: $font-weight-medium;
 

app/component/itinerary/BicycleLeg.js

@@ -394,7 +394,6 @@ export default function BicycleLeg(
               <div className="link-to-e-scooter-operator">
                 <Icon
                   img="icon-icon_arrow-collapse--right"
-                  color="#007ac9"
                   height={1}
                   width={1}
                 />

app/component/itinerary/ScooterLinkContainer.js

@@ -67,12 +67,7 @@ function ScooterLinkContainer(
             href={rentalVehicleLink}
             onClick={onClick}
           >
-            <Icon
-              img="icon-icon_square_right_corner_arrow"
-              color="#007ac9"
-              height={1}
-              width={1}
-            />
+            <Icon img="icon-icon_external-link-box" height={1} width={1} />
           </ExternalLink>
         </div>
       </div>

app/component/StopInfo.js → app/component/itinerary/StopInfo.js

@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { FormattedMessage } from 'react-intl';
-import { configShape } from '../util/shapes';
-import { durationToString } from '../util/timeUtils';
-import { isKeyboardSelectionEvent } from '../util/browser';
-import Icon from './Icon';
+import { configShape } from '../../util/shapes';
+import { durationToString } from '../../util/timeUtils';
+import { isKeyboardSelectionEvent } from '../../util/browser';
+import Icon from '../Icon';
 
 export default function StopInfo(
   { intermediateStopCount, toggleFunction, duration, showIntermediateStops },

app/component/itinerary/TransitLeg.js

@@ -41,7 +41,7 @@ import { shouldShowFareInfo } from '../../util/fareUtils';
 import { AlertEntityType, AlertSeverityLevelType } from '../../constants';
 import { legShape, configShape } from '../../util/shapes';
 import ZoneIcon from '../ZoneIcon';
-import StopInfo from '../StopInfo';
+import StopInfo from './StopInfo';
 import InterlineInfo from './InterlineInfo';
 import AlternativeLegsInfo from './AlternativeLegsInfo';
 import LegInfo from './LegInfo';

app/component/itinerary/VehicleRentalLeg.js

@@ -145,7 +145,6 @@ function VehicleRentalLeg(
             <Link to={rentalStationLink}>
               <Icon
                 img="icon-icon_arrow-collapse--right"
-                color="#007ac9"
                 height={1.3}
                 width={1.3}
               />

app/component/itinerary/customize-search.scss

@@ -515,7 +515,7 @@
   }
 
   .external-link {
-    color: $link-color-accessible;
+    color: $link-color;
     text-decoration: none;
     font-weight: $font-weight-medium;
 

app/component/itinerary/itinerary.scss

@@ -1670,6 +1670,7 @@ $itinerary-tab-switch-height: 48px;
 
       .link-to-e-scooter-operator {
         margin: auto 10px auto auto;
+        color: $link-color;
       }
 
       .citybike-itinerary {

app/component/itinerary/navigator/hooks/useRealtimeLegs.js

@@ -2,6 +2,89 @@ import { useCallback, useEffect, useState } from 'react';
 import { fetchQuery } from 'react-relay';
 import { checkPositioningPermission } from '../../../../action/PositionActions';
 import { legQuery } from '../../queries/LegQuery';
+import { legTime } from '../../../../util/legUtils';
+import { epochToIso } from '../../../../util/timeUtils';
+
+function nextTransitIndex(legs, i) {
+  for (let j = i; j < legs.length; j++) {
+    if (legs[j].transitLeg) {
+      return j;
+    }
+  }
+  // negative indicates not found
+  return -1;
+}
+
+function getLegGap(legs, index) {
+  return legTime(legs[index + 1].start) - legTime(legs[index].end);
+}
+
+// change non-transit legs' scheduled times
+function shiftLegs(legs, i1, i2, gap) {
+  for (let j = i1; j <= i2; j++) {
+    const leg = legs[j];
+    leg.start.scheduledTime = epochToIso(legTime(leg.start) + gap);
+    leg.end.scheduledTime = epochToIso(legTime(leg.end) + gap);
+  }
+}
+
+// scale non-transit legs' scheduled times
+function scaleLegs(legs, i1, i2, k) {
+  const base = legTime(legs[i1].start);
+  for (let j = i1; j <= i2; j++) {
+    const leg = legs[j];
+    const s = legTime(leg.start);
+    const e = legTime(leg.end);
+    leg.start.scheduledTime = epochToIso(s + k * (s - base));
+    leg.end.scheduledTime = epochToIso(e + k * (e - base));
+  }
+}
+
+function matchLegEnds(legs) {
+  if (legs.length < 2) {
+    return;
+  }
+  let transit;
+  let gap;
+
+  // shift first legs to match transit start
+  transit = nextTransitIndex(legs, 0);
+  if (transit > 0) {
+    gap = getLegGap(legs, transit - 1);
+    if (gap) {
+      shiftLegs(legs, 0, transit - 1, gap);
+    }
+  }
+
+  // shift transfers and legs after transit end
+  while (transit > 0) {
+    const walk = transit + 1; // first leg after transit
+    const nextTransit = nextTransitIndex(legs, walk);
+    const shiftEnd = nextTransit > 0 ? nextTransit - 1 : legs.length - 1;
+    if (shiftEnd > transit) {
+      gap = getLegGap(legs, transit);
+      if (gap) {
+        shiftLegs(legs, walk, shiftEnd, -gap);
+      }
+    }
+    if (nextTransit > walk) {
+      // check if transfer needs scaling
+      gap = getLegGap(legs, nextTransit - 1);
+      if (gap < 0) {
+        // transfer overlaps next transit leg, so we must make it shorter
+        const transferDuration =
+          legTime(legs[shiftEnd].end) - legTime(legs[walk].start);
+        scaleLegs(
+          legs,
+          walk,
+          shiftEnd,
+          (transferDuration + gap) / transferDuration,
+        );
+      }
+    }
+    transit = nextTransit;
+  }
+}
 
 const useRealtimeLegs = (initialLegs, mapRef, relayEnvironment) => {
   const [isPositioningAllowed, setPositioningAllowed] = useState(false);
@@ -60,8 +143,10 @@ const useRealtimeLegs = (initialLegs, mapRef, relayEnvironment) => {
           },
         };
       }
-      return { ...l };
+      return { ...l, start: { ...l.start }, end: { ...l.end } };
     });
+    // shift non-transit-legs to match possibly changed transit legs
+    matchLegEnds(rtLegs);
     setRealTimeLegs(rtLegs);
   }, [initialLegs, queryAndMapRealtimeLegs]);
 

app/component/rental-vehicle-content.scss

@@ -108,6 +108,7 @@
 
         .link-to-e-scooter-operator {
           margin: auto 10px auto auto;
+          color: $link-color;
         }
 
         .citybike-itinerary {
@@ -201,7 +202,7 @@
     }
 
     .external-link {
-      color: #007ac9;
+      color: $link-color;
       text-decoration: none;
       font-weight: $font-weight-medium;
 

app/component/DateSelect.js → app/component/stop/DateSelect.js

@@ -4,7 +4,7 @@ import moment from 'moment';
 import { intlShape } from 'react-intl';
 
 import Select from 'react-select';
-import Icon from './Icon';
+import Icon from '../Icon';
 
 function DateSelect(props, context) {
   const [isMenuOpen, setIsMenuOpen] = useState(false);

app/component/FilterTimeTableModal.js → app/component/stop/FilterTimeTableModal.js

@@ -4,12 +4,12 @@ import intersection from 'lodash/intersection';
 import { FormattedMessage, intlShape } from 'react-intl';
 import cx from 'classnames';
 import Modal from '@hsl-fi/modal';
-import Icon from './Icon';
-import routeCompare from '../util/route-compare';
-import withBreakpoint from '../util/withBreakpoint';
-import { isKeyboardSelectionEvent } from '../util/browser';
-import { getRouteMode } from '../util/modeUtils';
-import { stopShape } from '../util/shapes';
+import Icon from '../Icon';
+import routeCompare from '../../util/route-compare';
+import withBreakpoint from '../../util/withBreakpoint';
+import { isKeyboardSelectionEvent } from '../../util/browser';
+import { getRouteMode } from '../../util/modeUtils';
+import { stopShape } from '../../util/shapes';
 
 class FilterTimeTableModal extends React.Component {
   static propTypes = {

app/component/StopAlerts.js → app/component/stop/StopAlerts.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { intlShape } from 'react-intl';
 import { uniq } from 'lodash';
-import AlertList from './AlertList';
+import AlertList from '../AlertList';
 import {
   getCancelationsForStop,
   getAlertsForObject,
   getServiceAlertsForStation,
-} from '../util/alertUtils';
-import { getRouteMode } from '../util/modeUtils';
-import { epochToTime } from '../util/timeUtils';
-import { stopShape, configShape } from '../util/shapes';
-import { AlertSeverityLevelType, AlertEntityType } from '../constants';
+} from '../../util/alertUtils';
+import { getRouteMode } from '../../util/modeUtils';
+import { epochToTime } from '../../util/timeUtils';
+import { stopShape, configShape } from '../../util/shapes';
+import { AlertSeverityLevelType, AlertEntityType } from '../../constants';
 
 export const isRelevantEntity = (entity, stopIds, routeIds) =>
   // eslint-disable-next-line no-underscore-dangle

app/component/StopAlertsContainer.js → app/component/stop/StopAlertsContainer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
-import { stopShape } from '../util/shapes';
+import { stopShape } from '../../util/shapes';
 import StopAlerts from './StopAlerts';
 
 const StopAlertsContainer = ({ stop }) => {

app/component/StopCardHeader.js → app/component/stop/StopCardHeader.js

@@ -2,15 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { intlShape } from 'react-intl';
 import { matchShape } from 'found';
-import { stopShape, stationShape } from '../util/shapes';
-import CardHeader from './CardHeader';
-import { getJson } from '../util/xhrPromise';
-import { saveSearch } from '../action/SearchActions';
-import { isIOS } from '../util/browser';
-import LazilyLoad, { importLazy } from './LazilyLoad';
+import { stopShape, stationShape } from '../../util/shapes';
+import CardHeader from '../CardHeader';
+import { getJson } from '../../util/xhrPromise';
+import { saveSearch } from '../../action/SearchActions';
+import { isIOS } from '../../util/browser';
+import LazilyLoad, { importLazy } from '../LazilyLoad';
 
 const modules = {
-  FavouriteStopContainer: () => importLazy(import('./FavouriteStopContainer')),
+  FavouriteStopContainer: () => importLazy(import('../FavouriteStopContainer')),
 };
 
 class StopCardHeader extends React.Component {

app/component/StopPageContentContainer.js → app/component/stop/StopPageContentContainer.js

@@ -4,13 +4,18 @@ import { createRefetchContainer, graphql } from 'react-relay';
 import connectToStores from 'fluxible-addons-react/connectToStores';
 import { FormattedMessage, intlShape } from 'react-intl';
 import { matchShape, routerShape, RedirectException } from 'found';
-import { configShape, errorShape, relayShape, stopShape } from '../util/shapes';
-import DepartureListContainer from './DepartureListContainer';
-import Loading from './Loading';
-import Icon from './Icon';
-import ScrollableWrapper from './ScrollableWrapper';
-import { isBrowser } from '../util/browser';
-import { PREFIX_STOPS } from '../util/path';
+import {
+  configShape,
+  errorShape,
+  relayShape,
+  stopShape,
+} from '../../util/shapes';
+import DepartureListContainer from '../DepartureListContainer';
+import Loading from '../Loading';
+import Icon from '../Icon';
+import ScrollableWrapper from '../ScrollableWrapper';
+import { isBrowser } from '../../util/browser';
+import { PREFIX_STOPS } from '../../util/path';
 
 class StopPageContent extends React.Component {
   static propTypes = {

app/component/StopPageHeader.js → app/component/stop/StopPageHeader.js

@@ -4,7 +4,7 @@ import getContext from 'recompose/getContext';
 import compose from 'recompose/compose';
 
 import StopCardHeaderContainer from './StopCardHeaderContainer';
-import withBreakpoint from '../util/withBreakpoint';
+import withBreakpoint from '../../util/withBreakpoint';
 
 const StopPageHeader = compose(
   withBreakpoint,

app/component/StopPageMapContainer.js → app/component/stop/StopPageMapContainer.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
-import StopPageMap from './map/StopPageMap';
+import StopPageMap from '../map/StopPageMap';
 
 function StopPageMapContainer({ stop }) {
   if (!stop) {

app/component/StopPageMeta.js → app/component/stop/StopPageMeta.js

@@ -4,9 +4,9 @@ import { createFragmentContainer, graphql } from 'react-relay';
 import compose from 'recompose/compose';
 import getContext from 'recompose/getContext';
 import mapProps from 'recompose/mapProps';
-import { configShape } from '../util/shapes';
+import { configShape } from '../../util/shapes';
 
-import { generateMetaData } from '../util/metaUtils';
+import { generateMetaData } from '../../util/metaUtils';
 
 const StopPageMeta = compose(
   getContext({ config: configShape, intl: intlShape }),

app/component/StopPageTabContainer.js → app/component/stop/StopPageTabContainer.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createFragmentContainer, graphql } from 'react-relay';
-import { alertShape } from '../util/shapes';
+import { alertShape } from '../../util/shapes';
 import StopPageTabs from './StopPageTabs';
 
 function StopPageTabContainer({ children, stop }) {

app/component/StopPageTabs.js → app/component/stop/StopPageTabs.js

@@ -2,25 +2,25 @@ import cx from 'classnames';
 import React, { useState, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { matchShape } from 'found';
-import { stopShape } from '../util/shapes';
-import { AlertSeverityLevelType } from '../constants';
+import { stopShape } from '../../util/shapes';
+import { AlertSeverityLevelType } from '../../constants';
 import {
   getCancelationsForStop,
   getAlertsForObject,
   getServiceAlertsForStation,
   getActiveAlertSeverityLevel,
-} from '../util/alertUtils';
-import withBreakpoint from '../util/withBreakpoint';
-import { addAnalyticsEvent } from '../util/analyticsUtils';
-import { unixTime } from '../util/timeUtils';
+} from '../../util/alertUtils';
+import withBreakpoint from '../../util/withBreakpoint';
+import { addAnalyticsEvent } from '../../util/analyticsUtils';
+import { unixTime } from '../../util/timeUtils';
 import {
   PREFIX_DISRUPTION,
   PREFIX_ROUTES,
   PREFIX_STOPS,
   PREFIX_TERMINALS,
   PREFIX_TIMETABLE,
-} from '../util/path';
-import Icon from './Icon';
+} from '../../util/path';
+import Icon from '../Icon';
 
 const Tab = {
   Disruptions: PREFIX_DISRUPTION,

app/component/StopTimetablePage.js → app/component/stop/StopTimetablePage.js

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { createRefetchContainer, graphql } from 'react-relay';
 import { matchShape, routerShape } from 'found';
-import { unixTime, unixToYYYYMMDD } from '../util/timeUtils';
-import { configShape, relayShape } from '../util/shapes';
-import { prepareServiceDay } from '../util/dateParamUtils';
+import { unixTime, unixToYYYYMMDD } from '../../util/timeUtils';
+import { configShape, relayShape } from '../../util/shapes';
+import { prepareServiceDay } from '../../util/dateParamUtils';
 import TimetableContainer from './TimetableContainer';
 
 class StopTimetablePage extends React.Component {