Commuter rail in Data Dashboard

common/components/controls/ControlPanel.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
 import classNames from 'classnames';
 import { lineColorBorder } from '../../styles/general';
-import type { BusRoute, Line } from '../../types/lines';
+import type { BusRoute, CommuterRailRoute, Line } from '../../types/lines';
 import type { DateStoreSection } from '../../constants/pages';
 import { StationSelectorWidget } from '../widgets/StationSelectorWidget';
 import { DateControl } from './DateControl';
 
 interface ControlPanelProps {
   dateStoreSection: DateStoreSection;
   busRoute: BusRoute | undefined;
+  crRoute: CommuterRailRoute | undefined;
   line: Line | undefined;
 }
 
-export const ControlPanel: React.FC<ControlPanelProps> = ({ dateStoreSection, line, busRoute }) => {
+export const ControlPanel: React.FC<ControlPanelProps> = ({
+  dateStoreSection,
+  line,
+  busRoute,
+  crRoute,
+}) => {
   const getControls = () => {
     if ((dateStoreSection === 'singleTrips' || dateStoreSection === 'multiTrips') && line) {
       return (
@@ -21,7 +27,7 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({ dateStoreSection, li
             dateStoreSection={dateStoreSection}
             queryType={dateStoreSection === 'singleTrips' ? 'single' : 'range'}
           />
-          <StationSelectorWidget line={line} busRoute={busRoute} />
+          <StationSelectorWidget line={line} busRoute={busRoute} crRoute={crRoute} />
         </>
       );
     }

common/components/controls/MobileControlPanel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import type { BusRoute, Line } from '../../types/lines';
+import type { BusRoute, CommuterRailRoute, Line } from '../../types/lines';
 import type { DateStoreSection } from '../../constants/pages';
 import { lineColorBackground } from '../../styles/general';
 import { StationSelectorWidget } from '../widgets/StationSelectorWidget';
@@ -9,13 +9,15 @@ import { DateControl } from './DateControl';
 interface MobileControlPanelProps {
   dateStoreSection: DateStoreSection;
   busRoute: BusRoute | undefined;
+  crRoute: CommuterRailRoute | undefined;
   line: Line | undefined;
 }
 
 export const MobileControlPanel: React.FC<MobileControlPanelProps> = ({
   dateStoreSection,
   line,
   busRoute,
+  crRoute,
 }) => {
   const singleDate = dateStoreSection === 'singleTrips';
   const getControls = () => {
@@ -34,7 +36,7 @@ export const MobileControlPanel: React.FC<MobileControlPanelProps> = ({
               lineColorBackground[line ?? 'DEFAULT']
             )}
           >
-            <StationSelectorWidget line={line} busRoute={busRoute} />
+            <StationSelectorWidget line={line} busRoute={busRoute} crRoute={crRoute} />
           </div>
         </>
       );

common/components/inputs/StationSelector.tsx

@@ -30,16 +30,17 @@ export const StationSelector: React.FC<StationSelector> = ({
   const {
     line,
     lineShort,
-    query: { busRoute },
+    query: { busRoute, crRoute },
   } = useDelimitatedRoute();
   const mdBreakpoint = useBreakpoint('md');
   const station = type === 'from' ? fromStation : toStation;
-  const stationOptions = optionsForField(type, lineShort, fromStation, busRoute);
+  const stationOptions = optionsForField(type, lineShort, fromStation, busRoute, crRoute);
   const branchLabelWidth = {
     'line-red': 'w-8',
     'line-green': 'w-12',
     DEFAULT: 'w-0',
   };
+
   return (
     <Listbox value={station} onChange={setStation}>
       {({ open }) => (

common/components/nav/CommuterRailDropdown.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SidebarTabs } from '../../../modules/navigation/SidebarTabs';
-import { COMMUTER_RAIL_OVERVIEW } from '../../constants/pages';
+import { COMMUTER_RAIL_OVERVIEW, TRIP_PAGES } from '../../constants/pages';
 import { CommuterRailRouteSelection } from './CommuterRailRouteSelection';
 
 interface CommuterRailDropdownProps {
@@ -18,10 +18,8 @@ export const CommuterRailDropdown: React.FC<CommuterRailDropdownProps> = ({ clos
         role={'navigation'}
       >
         <SidebarTabs tabs={COMMUTER_RAIL_OVERVIEW} close={close} />
-
-        {/* TODO: Once we have reliable travel data for CR */}
-        {/* <hr className="h-[1px] w-3/4 self-center border-neutral-500" /> */}
-        {/* <SidebarTabs tabs={TRIP_PAGES} close={close} /> */}
+        <hr className="h-[1px] w-3/4 self-center border-neutral-500" />
+        <SidebarTabs tabs={TRIP_PAGES} close={close} />
       </div>
     </div>
   );

common/components/nav/MenuDropdown.tsx

@@ -43,7 +43,7 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, childre
       case 'line-bus':
         return `/bus/trips/single?busRoute=1&date=${BUS_DEFAULTS.singleTripConfig.date}`;
       case 'line-commuter-rail':
-        return `/commuter-rail/ridership?crRoute=CR-Lowell&startDate=${COMMUTER_RAIL_DEFAULTS.lineConfig.startDate}&endDate=${COMMUTER_RAIL_DEFAULTS.lineConfig.endDate}`;
+        return `/commuter-rail/trips/single?crRoute=CR-Lowell&date=${COMMUTER_RAIL_DEFAULTS.singleTripConfig.date}`;
       default:
         return getLineSelectionItemHref(line, route);
     }

common/components/widgets/StationSelectorWidget.tsx

@@ -11,23 +11,28 @@ import {
   optionsStation,
   stopIdsForStations,
 } from '../../utils/stations';
-import type { BusRoute, Line } from '../../types/lines';
+import type { BusRoute, CommuterRailRoute, Line } from '../../types/lines';
 import { LINE_OBJECTS } from '../../constants/lines';
 import type { Station } from '../../types/stations';
 
 interface StationSelectorWidgetProps {
   line: Line;
   busRoute: BusRoute | undefined;
+  crRoute: CommuterRailRoute | undefined;
 }
 
-export const StationSelectorWidget: React.FC<StationSelectorWidgetProps> = ({ line, busRoute }) => {
+export const StationSelectorWidget: React.FC<StationSelectorWidgetProps> = ({
+  line,
+  busRoute,
+  crRoute,
+}) => {
   const updateQueryParams = useUpdateQuery();
   const lineShort = LINE_OBJECTS[line].short;
   const {
     query: { from, to },
   } = useDelimitatedRoute();
 
-  const stations = optionsStation(lineShort, busRoute);
+  const stations = optionsStation(lineShort, busRoute, crRoute);
   const toStation = to ? getParentStationForStopId(to) : stations?.[stations.length - 2];
   const fromStation = from ? getParentStationForStopId(from) : stations?.[1];
   React.useEffect(() => {

common/constants/cr_constants/cr-fairmount.json

@@ -0,0 +1,109 @@
+{
+  "CR-Fairmount": {
+    "type": "commuter-rail",
+    "direction": {
+      "0": "outbound",
+      "1": "inbound"
+    },
+    "stations": [
+      {
+        "stop_name": "Readville",
+        "station": "place-DB-0095",
+        "branches": null,
+        "order": 1,
+        "stops": {
+          "0": [],
+          "1": ["CR-Fairmount_1_FB-0095-04"]
+        },
+        "terminus": true
+      },
+      {
+        "stop_name": "Fairmount",
+        "station": "place-DB-2205",
+        "branches": null,
+        "order": 2,
+        "stops": {
+          "0": ["CR-Fairmount_0_DB-2205-01"],
+          "1": ["CR-Fairmount_1_DB-2205-02"]
+        }
+      },
+      {
+        "stop_name": "Blue Hill Avenue",
+        "station": "place-DB-2222",
+        "branches": null,
+        "order": 3,
+        "stops": {
+          "0": ["CR-Fairmount_0_DB-2222-01"],
+          "1": ["CR-Fairmount_1_DB-2222-02"]
+        }
+      },
+      {
+        "stop_name": "Morton Street",
+        "station": "place-DB-2230",
+        "branches": null,
+        "order": 4,
+        "stops": {
+          "0": ["CR-Fairmount_0_DB-2230-01"],
+          "1": ["CR-Fairmount_1_DB-2230-02"]
+        }
+      },
+      {
+        "stop_name": "Talbot Avenue",
+        "station": "place-DB-2240",
+        "branches": null,
+        "order": 5,
+        "stops": {
+          "0": ["CR-Fairmount_0_DB-2240-01"],
+          "1": ["CR-Fairmount_1_DB-2240-02"]
+        }
+      },
+      {
+        "stop_name": "Four Corners/Geneva",
+        "station": "place-DB-2249",
+        "branches": null,
+        "order": 6,
+        "stops": {
+          "0": ["CR-Fairmount_0_DB-2249-01"],
+          "1": ["CR-Fairmount_1_DB-2249-02"]
+        }
+      },
+      {
+        "stop_name": "Uphams Corner",
+        "station": "place-DB-2258",
+        "branches": null,
+        "order": 7,
+        "stops": {
+          "0": ["CR-Fairmount_0_DB-2258-01"],
+          "1": ["CR-Fairmount_1_DB-2258-02"]
+        }
+      },
+      {
+        "stop_name": "Newmarket",
+        "station": "place-DB-2265",
+        "branches": null,
+        "order": 8,
+        "stops": {
+          "0": ["CR-Fairmount_0_DB-2265-01"],
+          "1": ["CR-Fairmount_1_DB-2265-02"]
+        }
+      },
+      {
+        "stop_name": "South Station",
+        "station": "place-sstat",
+        "branches": null,
+        "order": 9,
+        "stops": {
+          "0": [
+            "CR-Fairmount_0_NEC-2287-09",
+            "CR-Fairmount_0_NEC-2287-11",
+            "CR-Fairmount_0_NEC-2287-10",
+            "CR-Fairmount_0_NEC-2287-07",
+            "CR-Fairmount_0_NEC-2287"
+          ],
+          "1": []
+        },
+        "terminus": true
+      }
+    ]
+  }
+}