react-spatial 1.4.0 → 1.4.1

package/src/components/RouteSchedule/RouteSchedule.js

@@ -0,0 +1,364 @@
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/prop-types */
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  RealtimeLayer as TrackerLayer,
+  realtimeConfig,
+} from 'mobility-toolbox-js/ol';
+import { getHoursAndMinutes, getDelayString } from '../../utils/timeUtils';
+import ReactTransitPropTypes from '../../propTypes';
+import firstStation from '../../images/RouteSchedule/firstStation.png';
+import station from '../../images/RouteSchedule/station.png';
+import lastStation from '../../images/RouteSchedule/lastStation.png';
+import line from '../../images/RouteSchedule/line.png';
+
+const { getBgColor } = realtimeConfig;
+
+/**
+ * Returns a color class to display the delay.
+ * @param {Number} time Delay time in milliseconds.
+ */
+const getDelayColor = (time) => {
+  const secs = Math.round(((time / 1800 / 2) * 3600) / 1000);
+  if (secs >= 3600) {
+    return 'dark-red';
+  }
+  if (secs >= 500) {
+    return 'middle-red';
+  }
+  if (secs >= 300) {
+    return 'light-red';
+  }
+  if (secs >= 180) {
+    return 'orange';
+  }
+  return 'green';
+};
+
+/**
+ * Returns true if the train doesn't stop to the station.
+ * @param {Object} stop Station information.
+ */
+const isNotStop = (stop) => {
+  return !stop.arrivalTime && !stop.departureTime;
+};
+
+/**
+ * Returns if the station has already been passed by the vehicule.
+ * @param {Object} stop Station information.
+ * @param {number} time The current time to test in ms.
+ * @param {Array<Object>} stops the list of all stops of the train.
+ * @param {idx} idx The index of the stop object in the stops array.
+ */
+const isPassed = (stop, time, stops, idx) => {
+  // If the train doesn't stop to the stop object, we test if the stop just before has been passed or not.
+  // if yes the current stop is considered as passed.
+  if (isNotStop(stop)) {
+    if (stops[idx - 1] && idx > 0) {
+      return isPassed(stops[idx - 1], time, stops, idx);
+    }
+    return true;
+  }
+
+  // Sometimes stop.departureDelay is undefined.
+  const timeToCompare = stop.aimedDepartureTime || stop.aimedArrivalTime || 0;
+  const delayToCompare = stop.departureDelay || stop.arrivalDelay || 0;
+  return timeToCompare + delayToCompare <= time;
+};
+
+/**
+ * Returns an image for first, middle or last stations.
+ * @param {Number} stations The stations list.
+ * @param {Number} index Index of the station in the list.
+ * @param {Boolean} isStationPassed If the train is already passed at this station.
+ * @param {Boolean} isNotStation If the train doesn't stop to this station.
+ */
+const defaultRenderStationImg = (
+  stations,
+  index,
+  isStationPassed,
+  isNotStation,
+) => {
+  const { length } = stations;
+  let src = station.src || station;
+  if (index === 0) {
+    src = firstStation.src || firstStation;
+  } else if (index === length - 1) {
+    src = lastStation.src || lastStation;
+  } else if (isNotStation) {
+    src = line.src || line;
+  }
+  return <img src={src} alt="routeScheduleLine" className="rt-route-icon" />;
+};
+
+const defaultRenderStation = ({
+  lineInfos,
+  onStationClick,
+  trackerLayer,
+  renderStationImg,
+  stop,
+  idx,
+}) => {
+  const {
+    stationId,
+    arrivalDelay,
+    departureDelay,
+    arrivalTime,
+    departureTime,
+    state,
+    stationName,
+    aimedArrivalTime,
+    aimedDepartureTime,
+  } = stop;
+  const cancelled = state === 'JOURNEY_CANCELLED' || state === 'STOP_CANCELLED';
+  const { stations } = lineInfos;
+  const isFirstStation = idx === 0;
+  const isLastStation = idx === stations.length - 1;
+  const isStationPassed = isPassed(stop, trackerLayer.time, stations, idx);
+  const isNotStation = isNotStop(stop);
+  return (
+    <div
+      // Train line can go in circle so begin and end have the same id,
+      // using the time in the key should fix the issue.
+      key={(stationId || stationName) + arrivalTime + departureTime}
+      role="button"
+      className={[
+        'rt-route-station',
+        isStationPassed ? ' rt-passed' : '',
+        isNotStation ? ' rt-no-stop' : '',
+      ].join('')}
+      onClick={(e) => {
+        return onStationClick(stop, e);
+      }}
+      tabIndex={0}
+      onKeyPress={(e) => {
+        return e.which === 13 && onStationClick(stop, e);
+      }}
+    >
+      <div className="rt-route-delay">
+        {typeof arrivalDelay === 'undefined' || isFirstStation || cancelled ? (
+          ''
+        ) : (
+          <span
+            className={`rt-route-delay-arrival${` ${getDelayColor(
+              arrivalDelay,
+            )}`}`}
+          >
+            {`+${getDelayString(arrivalDelay)}`}
+          </span>
+        )}
+        {typeof departureDelay === 'undefined' || isLastStation || cancelled ? (
+          ''
+        ) : (
+          <span
+            className={`rt-route-delay-departure${` ${getDelayColor(
+              departureDelay,
+            )}`}`}
+          >
+            {`+${getDelayString(departureDelay)}`}
+          </span>
+        )}
+      </div>
+      <div className="rt-route-times">
+        <span
+          className={`rt-route-time-arrival ${
+            cancelled ? 'rt-route-cancelled' : ''
+          }`}
+        >
+          {getHoursAndMinutes(aimedArrivalTime)}
+        </span>
+        <span
+          className={`rt-route-time-departure ${
+            cancelled ? 'rt-route-cancelled' : ''
+          }`}
+        >
+          {getHoursAndMinutes(aimedDepartureTime)}
+        </span>
+      </div>
+      {renderStationImg(stations, idx, isStationPassed, isNotStation)}
+      <div className={cancelled ? 'rt-route-cancelled' : ''}>{stationName}</div>
+    </div>
+  );
+};
+
+const renderRouteIdentifier = ({ routeIdentifier, longName }) => {
+  if (routeIdentifier) {
+    // first part of the id, without leading zeros.
+    const id = parseInt(routeIdentifier.split('.')[0], 10);
+    if (!longName.includes(id)) {
+      return ` (${id})`;
+    }
+  }
+  return null;
+};
+
+const defaultRenderHeader = ({ lineInfos, renderHeaderButtons }) => {
+  const {
+    type,
+    vehicleType,
+    shortName,
+    longName,
+    stroke,
+    destination,
+    routeIdentifier,
+    text_color: textColor,
+  } = lineInfos;
+  return (
+    <div className="rt-route-header">
+      <span
+        className="rt-route-icon"
+        style={{
+          /* stylelint-disable-next-line value-keyword-case */
+          backgroundColor: stroke || getBgColor(type || vehicleType),
+          color: textColor || 'black',
+        }}
+      >
+        {shortName}
+      </span>
+      <div className="rt-route-title">
+        <span className="rt-route-name">{destination}</span>
+        <span>
+          {longName}
+          {renderRouteIdentifier(lineInfos)}
+        </span>
+      </div>
+      <div className="rt-route-buttons">
+        {renderHeaderButtons(routeIdentifier)}
+      </div>
+    </div>
+  );
+};
+
+const defaultRenderFooter = (props) => {
+  const { lineInfos, renderCopyright } = props;
+  if (!lineInfos.operator && !lineInfos.publisher) {
+    return null;
+  }
+  return <div className="rt-route-footer">{renderCopyright({ ...props })}</div>;
+};
+
+const defaultRenderLink = (text, url) => {
+  return (
+    <div className="rt-route-copyright-link">
+      {url ? (
+        <a href={url} target="_blank" rel="noreferrer">
+          {text}
+        </a>
+      ) : (
+        <>{text}</>
+      )}
+    </div>
+  );
+};
+
+const defaultRenderCopyright = ({ lineInfos }) => {
+  return (
+    <span className="rt-route-copyright">
+      {lineInfos.operator &&
+        defaultRenderLink(lineInfos.operator, lineInfos.operatorUrl)}
+      {lineInfos.operator && lineInfos.publisher && <span>&nbsp;-&nbsp;</span>}
+      {lineInfos.publisher &&
+        defaultRenderLink(lineInfos.publisher, lineInfos.publisherUrl)}
+      {lineInfos.license && <span>&nbsp;(</span>}
+      {lineInfos.license &&
+        defaultRenderLink(lineInfos.license, lineInfos.licenseUrl)}
+      {lineInfos.license && ')'}
+    </span>
+  );
+};
+
+const propTypes = {
+  /**
+   * CSS class of the route schedule wrapper.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Trajectory stations informations.
+   */
+  lineInfos: ReactTransitPropTypes.lineInfos,
+
+  /**
+   * Trackerlayer.
+   */
+  trackerLayer: PropTypes.instanceOf(TrackerLayer).isRequired,
+
+  /**
+   * Render Header of the route scheduler.
+   */
+  renderHeader: PropTypes.func,
+
+  /**
+   * Render Footer of the route scheduler.
+   */
+  renderFooter: PropTypes.func,
+
+  /**
+   * Render Copyright of the route scheduler.
+   */
+  renderCopyright: PropTypes.func,
+
+  /**
+   * Render the status of the station image.
+   */
+  renderStationImg: PropTypes.func,
+
+  /**
+   * Render a station.
+   */
+  renderStation: PropTypes.func,
+
+  /**
+   * Function triggered on station's click event.
+   */
+  onStationClick: PropTypes.func,
+
+  /**
+   * Function to render header buttons.
+   */
+  renderHeaderButtons: PropTypes.func,
+};
+
+const defaultProps = {
+  className: 'rt-route-schedule',
+  lineInfos: null,
+  renderHeader: defaultRenderHeader,
+  renderStation: defaultRenderStation,
+  renderStationImg: defaultRenderStationImg,
+  renderCopyright: defaultRenderCopyright,
+  renderFooter: defaultRenderFooter,
+  renderHeaderButtons: () => {
+    return null;
+  },
+  onStationClick: () => {},
+};
+
+/**
+ * RouteSchedule displays information, stops and punctuality about the clicked route.
+ */
+function RouteSchedule(props) {
+  const { lineInfos, className, renderStation, renderHeader, renderFooter } =
+    props;
+
+  if (!lineInfos) {
+    return null;
+  }
+
+  return (
+    <div className={className}>
+      {renderHeader({ ...props })}
+      <div className="rt-route-body">
+        {lineInfos.stations.map((stop, idx) => {
+          return renderStation({ ...props, stop, idx });
+        })}
+      </div>
+      {renderFooter({ ...props })}
+    </div>
+  );
+}
+
+RouteSchedule.propTypes = propTypes;
+RouteSchedule.defaultProps = defaultProps;
+
+export default React.memo(RouteSchedule);

package/src/components/RouteSchedule/RouteSchedule.test.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import 'jest-date-mock';
+import { RealtimeLayer as TrackerLayer } from 'mobility-toolbox-js/ol';
+import RouteSchedule from '.';
+
+const RealDate = Date;
+
+const lineInfos = {
+  backgroundColor: 'ff8a00',
+  destination: 'Station name',
+  id: 9959310,
+  routeIdentifier: '03634.003849.004:9',
+  longName: 'T 3',
+  shortName: '3',
+  operator: 'foo',
+  operatorUrl: 'foo.ch',
+  publisher: 'bar',
+  publisherUrl: 'bar.ch',
+  stations: [
+    {
+      stationId: '1',
+      stationName: 'first stop',
+      coordinates: [8.51772, 47.3586],
+      arrivalDelay: 60000, // +1m
+      arrivalTime: 1571729580000 + 60000,
+      aimedArrivalTime: 1571729580000,
+      departureDelay: 60000,
+      aimedDepartureTime: 1571729580000,
+      departureTime: 1571729580000 + 60000,
+    },
+    {
+      stationId: '2',
+      stationName: 'second stop',
+      coordinates: [8.54119, 47.36646],
+      arrivalDelay: 0, // +0
+      arrivalTime: 1571729903000,
+      aimedArrivalTime: 1571729903000,
+      departureDelay: 120000, // +2m
+      aimedDepartureTime: 1571729903000,
+      departureTime: 1571729903000 + 120000,
+    },
+    {
+      stationId: '4',
+      stationName: 'no stop',
+      coordinates: [8.54119, 47.36646],
+      arrivalDelay: null, // +0
+      arrivalTime: 0,
+      aimedArrivalTime: 0,
+      departureDelay: null, // +2m
+      departureTime: 0,
+      aimedDepartureTime: 0,
+    },
+    {
+      stationId: '3',
+      stationName: 'third stop',
+      coordinates: [8.54119, 50],
+      arrivalDelay: 240000, // +4m
+      aimedArrivalTime: 1571730323000,
+      arrivalTime: 1571730323000 + 240000,
+      departureDelay: 0, // +0
+      departureTime: 0,
+      aimedDepartureTime: 0,
+    },
+  ],
+  vehicleType: 0,
+};
+
+describe('RouteSchedule', () => {
+  beforeEach(() => {
+    global.Date = jest.fn(() => {
+      return {
+        getHours: () => {
+          return 9;
+        },
+        getMinutes: () => {
+          return 1;
+        },
+      };
+    });
+    Object.assign(Date, RealDate);
+  });
+
+  afterEach(() => {
+    global.Date = RealDate;
+  });
+
+  test('matches snapshots.', () => {
+    const trackerLayer = new TrackerLayer({});
+    const component = renderer.create(
+      <RouteSchedule
+        lineInfos={lineInfos}
+        trackerLayer={trackerLayer}
+        setCenter={() => {}}
+        renderHeaderButtons={() => {
+          return <div>Button</div>;
+        }}
+      />,
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  // to test: on station click
+  // to test: time formating
+  // to test: delay formating
+  // to test: delay color
+  // to test: no arrival delay on first station
+  // to test: no arrival date on first station
+  // to test: no departure delay on last station
+  // to test: no departure date on last station
+  // to test: font bold on first and last station
+});

package/src/components/RouteSchedule/__snapshots__/RouteSchedule.test.js.snap

@@ -0,0 +1,248 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RouteSchedule matches snapshots. 1`] = `
+<div
+  className="rt-route-schedule"
+>
+  <div
+    className="rt-route-header"
+  >
+    <span
+      className="rt-route-icon"
+      style={
+        {
+          "backgroundColor": "#ffb400",
+          "color": "black",
+        }
+      }
+    >
+      3
+    </span>
+    <div
+      className="rt-route-title"
+    >
+      <span
+        className="rt-route-name"
+      >
+        Station name
+      </span>
+      <span>
+        T 3
+         (3634)
+      </span>
+    </div>
+    <div
+      className="rt-route-buttons"
+    >
+      <div>
+        Button
+      </div>
+    </div>
+  </div>
+  <div
+    className="rt-route-body"
+  >
+    <div
+      className="rt-route-station"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="rt-route-delay"
+      >
+        <span
+          className="rt-route-delay-departure green"
+        >
+          +1m
+        </span>
+      </div>
+      <div
+        className="rt-route-times"
+      >
+        <span
+          className="rt-route-time-arrival "
+        >
+          09:01
+        </span>
+        <span
+          className="rt-route-time-departure "
+        >
+          09:01
+        </span>
+      </div>
+      <img
+        alt="routeScheduleLine"
+        className="rt-route-icon"
+        src="src"
+      />
+      <div
+        className=""
+      >
+        first stop
+      </div>
+    </div>
+    <div
+      className="rt-route-station"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="rt-route-delay"
+      >
+        <span
+          className="rt-route-delay-arrival green"
+        >
+          +0
+        </span>
+        <span
+          className="rt-route-delay-departure green"
+        >
+          +2m
+        </span>
+      </div>
+      <div
+        className="rt-route-times"
+      >
+        <span
+          className="rt-route-time-arrival "
+        >
+          09:01
+        </span>
+        <span
+          className="rt-route-time-departure "
+        >
+          09:01
+        </span>
+      </div>
+      <img
+        alt="routeScheduleLine"
+        className="rt-route-icon"
+        src="src"
+      />
+      <div
+        className=""
+      >
+        second stop
+      </div>
+    </div>
+    <div
+      className="rt-route-station rt-no-stop"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="rt-route-delay"
+      >
+        <span
+          className="rt-route-delay-arrival green"
+        >
+          +0
+        </span>
+        <span
+          className="rt-route-delay-departure green"
+        >
+          +0
+        </span>
+      </div>
+      <div
+        className="rt-route-times"
+      >
+        <span
+          className="rt-route-time-arrival "
+        />
+        <span
+          className="rt-route-time-departure "
+        />
+      </div>
+      <img
+        alt="routeScheduleLine"
+        className="rt-route-icon"
+        src="src"
+      />
+      <div
+        className=""
+      >
+        no stop
+      </div>
+    </div>
+    <div
+      className="rt-route-station"
+      onClick={[Function]}
+      onKeyPress={[Function]}
+      role="button"
+      tabIndex={0}
+    >
+      <div
+        className="rt-route-delay"
+      >
+        <span
+          className="rt-route-delay-arrival orange"
+        >
+          +4m
+        </span>
+      </div>
+      <div
+        className="rt-route-times"
+      >
+        <span
+          className="rt-route-time-arrival "
+        >
+          09:01
+        </span>
+        <span
+          className="rt-route-time-departure "
+        />
+      </div>
+      <img
+        alt="routeScheduleLine"
+        className="rt-route-icon"
+        src="src"
+      />
+      <div
+        className=""
+      >
+        third stop
+      </div>
+    </div>
+  </div>
+  <div
+    className="rt-route-footer"
+  >
+    <span
+      className="rt-route-copyright"
+    >
+      <div
+        className="rt-route-copyright-link"
+      >
+        <a
+          href="foo.ch"
+          rel="noreferrer"
+          target="_blank"
+        >
+          foo
+        </a>
+      </div>
+      <span>
+         - 
+      </span>
+      <div
+        className="rt-route-copyright-link"
+      >
+        <a
+          href="bar.ch"
+          rel="noreferrer"
+          target="_blank"
+        >
+          bar
+        </a>
+      </div>
+    </span>
+  </div>
+</div>
+`;