Geojson react

.gemini.conf.js

@@ -52,13 +52,13 @@ module.exports = {
         'browserstack.video': false,
       },
     },
-    edge15: {
+    edge17: {
       windowSize: '600x1024',
       desiredCapabilities: {
         os: 'Windows',
         os_version: '10',
         browserName: 'edge',
-        version: '15',
+        version: '17.0',
         locationContextEnabled: false,
         'browserstack.timezone': 'Europe/Helsinki',
         'browserstack.video': false,

.github/pull_request_template.md

@@ -0,0 +1,19 @@
+## Proposed Changes
+
+  -
+
+## Pull Request Check List
+
+  - A reasonable set of unit tests is included
+  - Console does not show new warnings/errors
+  - Changes are documented or they are self explanatory
+  - This pull request does not have any merge conflicts
+  - All existing tests pass in CI build
+  - Code coverage does not decrease (unless measured incorrectly)
+
+## Review
+
+  - Read and verify the code changes
+  - Test the functionality by running the UI locally with all popular browsers available in your platform
+  - Check that the implementation matches the design, when such one is defined in a Jira issue
+  - Merge the pull request

.travis.yml

@@ -21,22 +21,18 @@ services:
 jobs:
   include:
     - stage: test
-      env: LINT=1
+      env: LINT,UNIT,FLOW
       node_js: '10'
       script:
         - yarn install
         - yarn lint
+        - yarn test-coverage
+        - yarn test-report
+        - test/flow.sh
     - stage: test
-      env: FLOW=1
+      env: _SMOKE=1
       node_js: '10'
-      script: test/flow.sh
-    - stage: test
-      env: UNIT=1
-      node_js: '10'
-      script:
-        - yarn install
-        - yarn run test-coverage
-        - yarn run test-report
+      script: test/smoke.sh
 
     - stage: visual
       env: VISUAL=chrome
@@ -47,7 +43,7 @@ jobs:
       node_js: '10'
       script: test/visual.sh
     - stage: visual
-      env: VISUAL=edge15
+      env: VISUAL=edge17
       node_js: '10'
       script: test/visual.sh
     - stage: visual

app/action/CanceledLegsBarActions.js

@@ -0,0 +1,3 @@
+export default function updateShowCanceledLegsBannerState(actionContext, val) {
+  actionContext.dispatch('updateShowCanceledLegsBannerState', val);
+}

app/app.js

@@ -14,6 +14,7 @@ import TimeStore from './store/TimeStore';
 import FavouriteCityBikeStationStore from './store/FavouriteCityBikeStationStore';
 import MapLayerStore from './store/MapLayerStore';
 import GeoJsonStore from './store/GeoJsonStore';
+import CanceledLegsBarStore from './store/CanceledLegsBarStore';
 
 export default config => {
   const app = new Fluxible({
@@ -33,6 +34,7 @@ export default config => {
   app.registerStore(FavouriteCityBikeStationStore);
   app.registerStore(MapLayerStore);
   app.registerStore(GeoJsonStore);
+  app.registerStore(CanceledLegsBarStore);
 
   app.plug({
     name: 'extra-context-plugin',

app/component/AlertList.js

@@ -0,0 +1,216 @@
+import connectToStores from 'fluxible-addons-react/connectToStores';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import ComponentUsageExample from './ComponentUsageExample';
+import RouteAlertsRow from './RouteAlertsRow';
+import { alertHasExpired } from '../util/alertUtils';
+import { routeNameCompare } from '../util/searchUtils';
+import { AlertSeverityLevelType } from '../constants';
+
+/**
+ * Compares the given alerts in order to sort them.
+ *
+ * @param {*} a the first alert to compare.
+ * @param {*} b the second alert to compare.
+ */
+export const alertCompare = (a, b) => {
+  // sort by expiration status
+  if (a.expired !== b.expired) {
+    return a.expired ? 1 : -1;
+  }
+
+  // sort by missing route information (for stop level alerts)
+  if (!a.route || !a.route.shortName) {
+    return -1;
+  }
+
+  // sort by route information
+  const routeOrder = routeNameCompare(a.route, b.route);
+  if (routeOrder !== 0) {
+    return routeOrder;
+  }
+
+  // sort by alert validity period
+  return b.validityPeriod.startTime - a.validityPeriod.startTime;
+};
+
+const AlertList = ({
+  cancelations,
+  currentTime,
+  showExpired,
+  serviceAlerts,
+}) => {
+  const currentUnixTime = Number.isInteger(currentTime)
+    ? currentTime
+    : currentTime.unix();
+
+  const alerts = (Array.isArray(cancelations) ? cancelations : [])
+    .concat(Array.isArray(serviceAlerts) ? serviceAlerts : [])
+    .map(alert => ({
+      ...alert,
+      expired: alertHasExpired(alert.validityPeriod, currentUnixTime),
+    }))
+    .filter(alert => (showExpired ? true : !alert.expired));
+
+  if (alerts.length === 0) {
+    return (
+      <div className="stop-no-alerts-container">
+        <FormattedMessage
+          id="disruption-info-no-alerts"
+          defaultMessage="No known disruptions or diversions."
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="momentum-scroll">
+      <div className="route-alerts-list">
+        {alerts
+          .sort(alertCompare)
+          .map(
+            ({
+              description,
+              header,
+              expired,
+              route: { color, mode, shortName } = {},
+              severityLevel,
+              validityPeriod: { startTime, endTime },
+            }) => (
+              <RouteAlertsRow
+                color={color ? `#${color}` : null}
+                description={description}
+                expired={expired}
+                header={header}
+                key={`alert-${startTime}-${endTime}-${shortName}-${severityLevel}`}
+                routeLine={shortName}
+                routeMode={mode && mode.toLowerCase()}
+                severityLevel={severityLevel}
+              />
+            ),
+          )}
+      </div>
+    </div>
+  );
+};
+
+const alertShape = PropTypes.shape({
+  description: PropTypes.string,
+  header: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+  route: PropTypes.shape({
+    color: PropTypes.string,
+    mode: PropTypes.string,
+    shortName: PropTypes.string,
+  }),
+  severityLevel: PropTypes.string,
+  validityPeriod: PropTypes.shape({
+    startTime: PropTypes.number.isRequired,
+    endTime: PropTypes.number,
+  }).isRequired,
+});
+
+AlertList.propTypes = {
+  currentTime: PropTypes.oneOfType([
+    PropTypes.shape({ unix: PropTypes.func.isRequired }),
+    PropTypes.number,
+  ]).isRequired,
+  cancelations: PropTypes.arrayOf(alertShape),
+  serviceAlerts: PropTypes.arrayOf(alertShape),
+  showExpired: PropTypes.bool,
+};
+
+AlertList.defaultProps = {
+  cancelations: [],
+  serviceAlerts: [],
+  showExpired: false,
+};
+
+AlertList.description = (
+  <React.Fragment>
+    <ComponentUsageExample>
+      <AlertList
+        currentTime={15}
+        cancelations={[
+          {
+            header:
+              'Bussin 3A lähtö Lentävänniemi–Etelä-Hervanta kello 10:49 on peruttu',
+            route: {
+              mode: 'BUS',
+              shortName: '3A',
+            },
+            severityLevel: AlertSeverityLevelType.Warning,
+            validityPeriod: { startTime: 20, endTime: 30 },
+          },
+          {
+            header:
+              'Bussin 28B lähtö Laatokantie–Ruutana kello 10:44 on peruttu',
+            route: {
+              mode: 'BUS',
+              shortName: '28B',
+            },
+            severityLevel: AlertSeverityLevelType.Warning,
+            validityPeriod: { startTime: 10, endTime: 20 },
+          },
+          {
+            header:
+              'Bussin 28B lähtö Laatokantie–Ruutana kello 10:25 on peruttu',
+            route: {
+              mode: 'BUS',
+              shortName: '28B',
+            },
+            severityLevel: AlertSeverityLevelType.Warning,
+            validityPeriod: { startTime: 1, endTime: 11 },
+          },
+          {
+            header: 'Bussin 80 lähtö Moisio–Irjala kello 10:45 on peruttu',
+            route: {
+              mode: 'BUS',
+              shortName: '80',
+            },
+            severityLevel: AlertSeverityLevelType.Warning,
+            validityPeriod: { startTime: 11, endTime: 21 },
+          },
+          {
+            header: 'Bussin 80 lähtö Moisio–Irjala kello 10:24 on peruttu',
+            route: {
+              mode: 'BUS',
+              shortName: '80',
+            },
+            severityLevel: AlertSeverityLevelType.Warning,
+            validityPeriod: { startTime: 0, endTime: 10 },
+          },
+        ]}
+        serviceAlerts={[
+          {
+            header: 'Pysäkki Rantatie (1007) toistaiseksi pois käytöstä',
+            description:
+              'Pysäkki Rantatie (1007) toistaiseksi pois käytöstä työmaan vuoksi.',
+            route: {},
+            severityLevel: AlertSeverityLevelType.Warning,
+            validityPeriod: { startTime: 10, endTime: 20 },
+          },
+          {
+            header: 'Pysäkillä Rantatie (1007) lisävuoroja',
+            description:
+              'Pysäkillä Rantatie (1007) on lisävuoroja yleisötapahtuman vuoksi.',
+            route: {},
+            severityLevel: AlertSeverityLevelType.Info,
+            validityPeriod: { startTime: 0, endTime: 10 },
+          },
+        ]}
+      />
+    </ComponentUsageExample>
+  </React.Fragment>
+);
+
+const connectedComponent = connectToStores(
+  AlertList,
+  ['TimeStore'],
+  context => ({
+    currentTime: context.getStore('TimeStore').getCurrentTime(),
+  }),
+);
+
+export { connectedComponent as default, AlertList as Component };

app/component/AppBarLarge.js

@@ -8,6 +8,7 @@ import Icon from './Icon';
 import ComponentUsageExample from './ComponentUsageExample';
 import LangSelect from './LangSelect';
 import MessageBar from './MessageBar';
+import CanceledLegsBar from './CanceledLegsBar';
 import LogoSmall from './LogoSmall';
 import AuthButton from './AuthButton';
 
@@ -68,6 +69,7 @@ const AppBarLarge = (
       </div>
       <MessageBar />
       <DisruptionInfo />
+      <CanceledLegsBar />
     </div>
   );
 };

app/component/AppBarSmall.js

@@ -8,6 +8,7 @@ import ComponentUsageExample from './ComponentUsageExample';
 import MessageBar from './MessageBar';
 import LogoSmall from './LogoSmall';
 import AuthButton from './AuthButton';
+import CanceledLegsBar from './CanceledLegsBar';
 
 const AppBarSmall = ({ disableBackButton, showLogo, title, homeUrl, logo }) => (
   <React.Fragment>
@@ -21,6 +22,7 @@ const AppBarSmall = ({ disableBackButton, showLogo, title, homeUrl, logo }) => (
       <MainMenuContainer homeUrl={homeUrl} />
     </nav>
     <MessageBar />
+    <CanceledLegsBar />
   </React.Fragment>
 );
 

app/component/AuthButton.js

@@ -105,7 +105,7 @@ class AuthButton extends React.Component {
           targetOrigin={{ horizontal: 'right', vertical: 'top' }}
           iconButtonElement={AvatarFallback(
             authUser.photoURL,
-            authUser.displayName,
+            authUser.displayName || '',
           )}
         >
           {navMenuButton(