Merge pull request #5601 from HSLdevcom/AB#173

AB#173 Filter Traffic now results by vehicle mode

Author: vesameskanen

app/component/trafficnow/Alerts.js

@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import cx from 'classnames';
 import { useLazyLoadQuery } from 'react-relay/hooks';
 import { FormattedMessage } from 'react-intl';
@@ -7,25 +7,16 @@ import { useBreakpoint } from '../../util/withBreakpoint';
 import { useConfigContext } from '../../configurations/ConfigContext';
 import AlertsQuery from './queries/AlertsQuery';
 import NoAlerts from './NoAlerts';
-import useWindowResize from '../../hooks/useWindowSize';
 import { useFilterContext } from './filters/FiltersContext';
-import { filterAlerts } from './filters/filterUtils';
+import { filterAndSortAlerts } from './filters/filterUtils';
 
 export default function Alerts() {
   const breakpoint = useBreakpoint();
   const { feedIds } = useConfigContext();
   const [activeAlertId, setActiveAlertId] = useState();
-  const { height } = useWindowResize();
   const ref = useRef();
-  const [top, setTop] = useState(0);
   const { selectedFilters } = useFilterContext();
 
-  useLayoutEffect(() => {
-    if (ref.current) {
-      setTop(ref.current.getBoundingClientRect().top);
-    }
-  }, [height]);
-
   const handleCardClick = id => {
     setActiveAlertId(id);
   };
@@ -35,7 +26,7 @@ export default function Alerts() {
   });
 
   const filteredAlerts = useMemo(
-    () => filterAlerts(alerts, selectedFilters),
+    () => filterAndSortAlerts(alerts, selectedFilters),
     [alerts, selectedFilters],
   );
 
@@ -47,9 +38,6 @@ export default function Alerts() {
       className={cx('traffic-now__content__alerts', {
         'traffic-now__content__alerts--desktop': desktop,
       })}
-      style={{
-        maxHeight: `calc(100vh - ${top}px)`,
-      }}
     >
       {filteredAlerts.length === 0 ? (
         <NoAlerts />

app/component/trafficnow/DisruptionCard.js

@@ -37,10 +37,14 @@ export default function DisruptionCard({ alert, isOpen, onClick }) {
   const isValid =
     now > effectiveStartDate * 1000 && now < effectiveEndDate * 1000;
 
-  const validityPeriod = `${getFormattedTimeDate(
+  const startDate = `${getFormattedTimeDate(
     effectiveStartDate * 1000,
     DATE_FORMAT,
-  )} - ${getFormattedTimeDate(effectiveEndDate * 1000, DATE_FORMAT)}`;
+  )}`;
+  const endDate = `${getFormattedTimeDate(
+    effectiveEndDate * 1000,
+    DATE_FORMAT,
+  )}`;
 
   return (
     <Card
@@ -95,7 +99,8 @@ export default function DisruptionCard({ alert, isOpen, onClick }) {
           {alertSeverityLevel !== AlertSeverityLevelType.Info && (
             <>
               <div className="separator vertical" />
-              {validityPeriod}
+              {startDate}
+              {startDate !== endDate && ` - ${endDate}`}
             </>
           )}
         </div>

app/component/trafficnow/filters/Filters.js

@@ -5,6 +5,7 @@ import cx from 'classnames';
 import ValidityPeriodFilter from './ValidityPeriodFilter';
 import { useFilterContext } from './FiltersContext';
 import { useBreakpoint } from '../../../util/withBreakpoint';
+import VehicleModesFilter from './VehicleModesFilter';
 
 const Filters = ({ onApplyClick, onResetClick }) => {
   const { selectedFilters, resetFilters, DEFAULT_FILTERS } = useFilterContext();
@@ -17,6 +18,10 @@ const Filters = ({ onApplyClick, onResetClick }) => {
       id: 'validityPeriod',
       Component: ValidityPeriodFilter,
     },
+    {
+      id: 'vehicleModes',
+      Component: VehicleModesFilter,
+    },
   ];
 
   const handleResetClick = () => {

app/component/trafficnow/filters/FiltersContext.js

@@ -5,6 +5,7 @@ const FilterContext = createContext();
 
 const DEFAULT_FILTERS = {
   validityPeriod: 'ALL',
+  vehicleModes: [],
 };
 
 const FilterContextProvider = ({ children }) => {

app/component/trafficnow/filters/ValidityPeriodFilter.js

@@ -14,12 +14,17 @@ const ValidityPeriodFilter = ({ filterId }) => {
 
   return (
     <fieldset>
-      <legend>Näytä voimassaolon mukaan</legend>
+      <FormattedMessage
+        tagName="legend"
+        id="traffic-now_filters_validity-period"
+        defaultMessage="Näytä voimassaolon mukaan"
+      />
       {FILTER_OPTIONS.map(option => (
-        <label key={option.value}>
+        <label key={option.value} htmlFor={`period-${option}`}>
           <input
+            id={`period-${option}`}
             type="radio"
-            name="myRadio"
+            name="validityPeriodRadio"
             checked={selectedFilters[filterId] === option.value}
             value={option.value}
             onChange={() => setFilter(filterId, option.value)}

app/component/trafficnow/filters/VehicleModesFilter.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { useFilterContext } from './FiltersContext';
+import { useConfigContext } from '../../../configurations/ConfigContext';
+import { getTransportModes } from '../../../util/modeUtils';
+import { TrafficNowTransportModes } from '../../../constants';
+
+const VehicleModesFilter = ({ filterId }) => {
+  const config = useConfigContext();
+  const { selectedFilters, setFilter } = useFilterContext();
+
+  const handleCheck = option => {
+    const checked = selectedFilters[filterId] || [];
+
+    if (checked.includes(option)) {
+      setFilter(
+        filterId,
+        checked.filter(c => c !== option),
+      );
+    } else {
+      setFilter(filterId, [...checked, option]);
+    }
+  };
+
+  const availableModes = Object.entries(getTransportModes(config)).reduce(
+    (acc, [k, v]) => {
+      if (
+        v.availableForSelection &&
+        TrafficNowTransportModes.includes(k.toUpperCase())
+      ) {
+        acc.push(k);
+      }
+      return acc;
+    },
+    [],
+  );
+
+  return (
+    <fieldset>
+      <FormattedMessage
+        tagName="legend"
+        id="traffic-now_filters_vehicle-mode"
+        defaultMessage="Näytä liikennevälineen mukaan"
+      />
+      {availableModes.map(option => (
+        <label key={option} htmlFor={`vehicleModes-${option}`}>
+          <input
+            id={`vehicleModes-${option}`}
+            type="checkbox"
+            checked={selectedFilters[filterId]?.includes(option)}
+            value={option}
+            onChange={() => handleCheck(option)}
+          />
+          <FormattedMessage id={option.toLowerCase()} />
+        </label>
+      ))}
+    </fieldset>
+  );
+};
+
+VehicleModesFilter.propTypes = {
+  filterId: PropTypes.string.isRequired,
+};
+
+export default VehicleModesFilter;

app/component/trafficnow/filters/filterUtils.js

@@ -1,6 +1,6 @@
-const validityPeriodFilter = (alert, selectedFilters) => {
+const validityPeriodFilter = (alert, { validityPeriod }) => {
   const now = Date.now() * 0.001;
-  switch (selectedFilters.validityPeriod) {
+  switch (validityPeriod) {
     case 'VALID':
       return now >= alert.effectiveStartDate && now <= alert.effectiveEndDate;
     case 'UPCOMING':
@@ -11,9 +11,33 @@ const validityPeriodFilter = (alert, selectedFilters) => {
   }
 };
 
-export function filterAlerts(alerts, selectedFilters) {
-  const filterFns = [validityPeriodFilter];
-  return alerts.filter(alert =>
-    filterFns.every(fn => fn(alert, selectedFilters)),
+/**
+ * Filters alerts by selected vehicle modes. If no modes are selected, include all alerts.
+ * If any entity matches a selected mode, include the alert.
+ *
+ * entities may contain objects with different properties:
+ * - Stop: entity with a vehicleMode property
+ * - Route: entity with a mode property
+ * - StopOnRoute: entity with a nested route object that has a mode property
+ *
+ */
+const vehicleModesFilter = ({ entities }, { vehicleModes }) => {
+  const modes = (vehicleModes || []).map(m => m.toLowerCase());
+  return (
+    modes.length === 0 ||
+    entities.some(e => {
+      const mode =
+        /* Stop */ e.vehicleMode?.toLowerCase() ||
+        /* Route */ e.mode?.toLowerCase() ||
+        /* StopOnRoute */ e.route?.mode?.toLowerCase();
+      return modes.includes(mode);
+    })
   );
+};
+
+export function filterAndSortAlerts(alerts, selectedFilters) {
+  const filterFns = [validityPeriodFilter, vehicleModesFilter];
+  return alerts
+    .filter(alert => filterFns.every(fn => fn(alert, selectedFilters)))
+    .sort((a, b) => a.effectiveStartDate - b.effectiveStartDate);
 }

app/component/trafficnow/queries/AlertsQuery.js

@@ -20,6 +20,7 @@ export default graphql`
           gtfsId
           locationType
           vehicleMode
+          platformCode
         }
         ... on Route {
           gtfsId
@@ -41,6 +42,7 @@ export default graphql`
             gtfsId
             locationType
             vehicleMode
+            platformCode
           }
         }
       }

app/component/trafficnow/trafficnow.scss

@@ -104,7 +104,8 @@
           margin-left: unset;
         }
 
-        input[type='radio'] {
+        input[type='radio'],
+        input[type='checkbox'] {
           accent-color: $primary-color;
           width: 1em;
           height: 1em;

app/component/trafficnow/utils.js

@@ -3,9 +3,35 @@ import { getRouteMode } from '../../util/modeUtils';
 import { AlertEntityType, LocationTypes } from '../../constants';
 import { stopPagePath, routePagePath } from '../../util/path';
 
+const sortAlphaNumeric = (a, b) => {
+  const first = typeof a === 'string' ? a.toLowerCase() : a.toString();
+  const second = typeof b === 'string' ? b.toLowerCase() : b.toString();
+
+  return first.localeCompare(second);
+};
+
+const getMode = (stopOrRoute, config) => {
+  const routeMode = getRouteMode(stopOrRoute, config);
+  if (routeMode) {
+    return routeMode;
+  }
+
+  return stopOrRoute?.vehicleMode?.toLowerCase();
+};
+
 const addToModeGroup = (
   acc,
-  { mode, id, shortName, name, gtfsId, isStop = false, isStation = false },
+  {
+    mode,
+    id,
+    shortName,
+    name,
+    gtfsId,
+    platformCode,
+    locationType,
+    isStop = false,
+    isStation = false,
+  },
 ) => {
   const url =
     isStop || isStation
@@ -18,25 +44,31 @@ const addToModeGroup = (
       mode,
       isRoute: !isStop && !isStation,
       entities: [],
+      ids: new Set(),
+      platformCode,
+      locationType,
     };
   }
-  acc[key].entities.push({
-    id,
-    name: shortName || name,
-    url,
-    isStop,
-    isStation,
-  });
+  if (!acc[key].ids.has(id)) {
+    acc[key].entities.push({
+      id,
+      name: shortName || name,
+      url,
+      isStop,
+      isStation,
+    });
+    acc[key].ids.add(id);
+  }
 };
 
 const groupEntitiesByMode = (entities, config) => {
-  const group = entities
+  const grouped = entities
     .filter(e => e.__typename !== AlertEntityType.Unknown)
     .reduce((acc, e) => {
       if (!e.route && !e.stop) {
         addToModeGroup(acc, {
           ...e,
-          mode: getRouteMode(e, config) || e.vehicleMode?.toLowerCase(),
+          mode: getMode(e, config),
           isStop: !!e.locationType,
           isStation: e.locationType === LocationTypes.STATION,
         });
@@ -46,20 +78,25 @@ const groupEntitiesByMode = (entities, config) => {
       if (e.route) {
         addToModeGroup(acc, {
           ...e.route,
-          mode: getRouteMode(e.route, config),
+          mode: getMode(e.route, config),
         });
       }
       if (e.stop) {
         addToModeGroup(acc, {
           ...e.stop,
-          mode: e.stop.vehicleMode?.toLowerCase(),
+          mode: getMode(e.stop, config),
           isStop: true,
           isStation: e.locationType === LocationTypes.STATION,
         });
       }
       return acc;
     }, {});
-  return group;
+
+  Object.values(grouped).forEach(group => {
+    group.entities.sort((a, b) => sortAlphaNumeric(a.name, b.name));
+  });
+
+  return grouped;
 };
 
 export { groupEntitiesByMode };