Adding commuter rail data to 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/CommuterRailRouteSelection.tsx

@@ -5,24 +5,26 @@ import { ChevronUpDownIcon } from '@heroicons/react/20/solid';
 import { useRouter } from 'next/navigation';
 import React, { Fragment } from 'react';
 import { getCommuterRailRoutes } from '../../constants/stations';
-import { getBusRouteSelectionItemHref, useDelimitatedRoute } from '../../utils/router';
+import { getCommuterRailRouteSelectionItemHref, useDelimitatedRoute } from '../../utils/router';
+import { COMMUTER_RAIL_LINE_NAMES } from '../../types/lines';
 
-// TODO: This is a duplicate of common/components/nav/BusRouteSelection.tsx
 export const CommuterRailRouteSelection: React.FC = () => {
   const route = useDelimitatedRoute();
   const router = useRouter();
   const crRoutes = getCommuterRailRoutes();
-  const selected = route.query.busRoute;
+  const selected = route.query.crRoute;
 
   return (
-    <div className="bg-mbta-lightBus">
+    <div className="bg-mbta-lightCommuterRail">
       <Listbox
         value={selected}
-        onChange={(key) => router.push(getBusRouteSelectionItemHref(key, route))}
+        onChange={(key) => router.push(getCommuterRailRouteSelectionItemHref(key, route))}
       >
         <div className="relative text-white text-opacity-95">
-          <Listbox.Button className="relative w-full cursor-pointer border border-mbta-bus bg-tm-lightGrey py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
-            <span className="block truncate  ">{selected}</span>
+          <Listbox.Button className="relative w-full cursor-pointer border border-mbta-commuterRail bg-tm-lightGrey py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
+            <span className="block truncate  ">
+              {selected && COMMUTER_RAIL_LINE_NAMES[selected]}
+            </span>
             <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
               <ChevronUpDownIcon className="h-5 w-5 " aria-hidden="true" />
             </span>
@@ -39,7 +41,7 @@ export const CommuterRailRouteSelection: React.FC = () => {
                   key={personIdx}
                   className={({ active }) =>
                     `relative cursor-pointer select-none py-2 pl-10 pr-4 ${
-                      active ? 'bg-amber-100 text-amber-900' : 'text-gray-900'
+                      active ? 'bg-fuchsia-100 text-fuchsia-900' : 'text-gray-900'
                     }`
                   }
                   value={crRoute}
@@ -49,10 +51,10 @@ export const CommuterRailRouteSelection: React.FC = () => {
                       <span
                         className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}
                       >
-                        {crRoute}
+                        {COMMUTER_RAIL_LINE_NAMES[crRoute]}
                       </span>
                       {selected ? (
-                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-mbta-bus">
+                        <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-mbta-commuterRail">
                           <FontAwesomeIcon
                             icon={faCheckCircle}
                             className="h-5 w-5"

common/components/nav/MenuDropdown.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 import { LINE_OBJECTS } from '../../constants/lines';
-import { BUS_DEFAULTS } from '../../state/defaults/dateDefaults';
+import { BUS_DEFAULTS, COMMUTER_RAIL_DEFAULTS } from '../../state/defaults/dateDefaults';
 import { lineColorBackground } from '../../styles/general';
 import type { Line } from '../../types/lines';
 import type { Route } from '../../types/router';
@@ -38,15 +38,20 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, childre
     }
   }, [line]);
 
+  const href = React.useMemo(() => {
+    switch (line) {
+      case 'line-bus':
+        return `/bus/trips/single?busRoute=1&date=${BUS_DEFAULTS.singleTripConfig.date}`;
+      case 'line-commuter-rail':
+        return `/commuter-rail/trips/single?crRoute=cr-lowell&date=${COMMUTER_RAIL_DEFAULTS.singleTripConfig.date}`;
+      default:
+        return getLineSelectionItemHref(line, route);
+    }
+  }, [line, route]);
+
   return (
     <div className={classNames('w-full')}>
-      <Link
-        href={
-          line === 'line-bus'
-            ? `/bus/trips/single?busRoute=1&date=${BUS_DEFAULTS.singleTripConfig.date}`
-            : getLineSelectionItemHref(line, route)
-        }
-      >
+      <Link href={href}>
         <div
           className={classNames(
             'flex w-full flex-row items-center gap-2 rounded-t-md py-1 pl-1 text-sm ',

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(() => {