From 3ab52526dde8f561b549097f515f012ca9526b70 Mon Sep 17 00:00:00 2001 From: Devin Matte Date: Sun, 17 Dec 2023 19:05:10 -0500 Subject: [PATCH] Adding Commuter Rail selectors for future use --- .vscode/settings.json | 2 +- .../graphics/styles/spinnerFillColor.ts | 1 + .../components/nav/CommuterRailDropdown.tsx | 26 +++++++ .../nav/CommuterRailRouteSelection.tsx | 73 +++++++++++++++++++ common/components/nav/CommuterRailSection.tsx | 19 +++++ common/components/nav/MenuDropdown.tsx | 19 ++++- .../components/widgets/MiniWidgetCreator.tsx | 2 +- .../components/widgets/internal/UnitText.tsx | 3 +- common/constants/colors.ts | 1 + common/constants/lines.ts | 7 ++ common/constants/pages.ts | 2 + common/constants/stations.ts | 9 ++- common/state/defaults/dateDefaults.ts | 4 +- common/styles/general.ts | 11 +++ common/types/lines.ts | 12 ++- modules/landing/LandingChartDiv.tsx | 1 + modules/speed/constants/speeds.ts | 4 +- tailwind.config.js | 3 + 18 files changed, 184 insertions(+), 15 deletions(-) create mode 100644 common/components/nav/CommuterRailDropdown.tsx create mode 100644 common/components/nav/CommuterRailRouteSelection.tsx create mode 100644 common/components/nav/CommuterRailSection.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index df9d7aebd..33f77f6d9 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,7 +3,7 @@ "eslint.enable": true, "eslint.format.enable": true, "editor.codeActionsOnSave": { - "source.fixAll.eslint": true + "source.fixAll.eslint": "explicit" }, "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "typescript.enablePromptUseWorkspaceTsdk": true, diff --git a/common/components/graphics/styles/spinnerFillColor.ts b/common/components/graphics/styles/spinnerFillColor.ts index aa6f5c758..92fdd2378 100644 --- a/common/components/graphics/styles/spinnerFillColor.ts +++ b/common/components/graphics/styles/spinnerFillColor.ts @@ -6,4 +6,5 @@ export const spinnerFillColor: StyleMap = { 'line-green': 'fill-mbta-green', 'line-blue': 'fill-mbta-blue', 'line-bus': 'fill-mbta-bus', + 'line-commuter-rail': 'fill-mbta-commuterRail', }; diff --git a/common/components/nav/CommuterRailDropdown.tsx b/common/components/nav/CommuterRailDropdown.tsx new file mode 100644 index 000000000..522d0c1bf --- /dev/null +++ b/common/components/nav/CommuterRailDropdown.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { SidebarTabs } from '../../../modules/navigation/SidebarTabs'; +import { TRIP_PAGES, COMMUTER_RAIL_OVERVIEW } from '../../constants/pages'; +import { CommuterRailRouteSelection } from './CommuterRailRouteSelection'; + +interface CommuterRailDropdownProps { + close?: () => void; +} + +export const CommuterRailDropdown: React.FC = ({ close }) => { + return ( +
+ +
+ +
+ +
+
+ ); +}; diff --git a/common/components/nav/CommuterRailRouteSelection.tsx b/common/components/nav/CommuterRailRouteSelection.tsx new file mode 100644 index 000000000..8e32c7a6c --- /dev/null +++ b/common/components/nav/CommuterRailRouteSelection.tsx @@ -0,0 +1,73 @@ +import { faCheckCircle } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Listbox, Transition } from '@headlessui/react'; +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'; + +// 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; + + return ( +
+ router.push(getBusRouteSelectionItemHref(key, route))} + > +
+ + {selected} + + + + + + {crRoutes.map((crRoute, personIdx) => ( + + `relative cursor-pointer select-none py-2 pl-10 pr-4 ${ + active ? 'bg-amber-100 text-amber-900' : 'text-gray-900' + }` + } + value={crRoute} + > + {({ selected }) => ( + <> + + {crRoute} + + {selected ? ( + + + ) : null} + + )} + + ))} + + +
+ +
+ ); +}; diff --git a/common/components/nav/CommuterRailSection.tsx b/common/components/nav/CommuterRailSection.tsx new file mode 100644 index 000000000..ae39ed91f --- /dev/null +++ b/common/components/nav/CommuterRailSection.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { useDelimitatedRoute } from '../../utils/router'; +import { MenuDropdown } from './MenuDropdown'; +import { CommuterRailDropdown } from './CommuterRailDropdown'; + +interface CommuterRailSectionProps { + close?: () => void; +} + +export const CommuterRailSection: React.FC = ({ close }) => { + const route = useDelimitatedRoute(); + return ( +
+ + + +
+ ); +}; diff --git a/common/components/nav/MenuDropdown.tsx b/common/components/nav/MenuDropdown.tsx index 8bc67afa2..732a6dc1d 100644 --- a/common/components/nav/MenuDropdown.tsx +++ b/common/components/nav/MenuDropdown.tsx @@ -1,4 +1,4 @@ -import { faTrainSubway, faTrainTram } from '@fortawesome/free-solid-svg-icons'; +import { faBus, faTrain, faTrainSubway, faTrainTram } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import classNames from 'classnames'; import Link from 'next/link'; @@ -24,6 +24,20 @@ export const MenuDropdown: React.FC = ({ line, route, childre useEffect(() => { setTimeout(() => setShow(true), 0); }, [selected]); + + const icon = React.useMemo(() => { + switch (line) { + case 'line-bus': + return faBus; + case 'line-green': + return faTrainTram; + case 'line-commuter-rail': + return faTrain; + default: + return faTrainSubway; + } + }, [line]); + return (
= ({ line, route, childre 'flex h-8 w-8 items-center justify-center rounded-full bg-opacity-75' )} > - {/* TODO: add bus icon */} - +
{LINE_OBJECTS[line].name} diff --git a/common/components/widgets/MiniWidgetCreator.tsx b/common/components/widgets/MiniWidgetCreator.tsx index 945612eb9..45247f5b2 100644 --- a/common/components/widgets/MiniWidgetCreator.tsx +++ b/common/components/widgets/MiniWidgetCreator.tsx @@ -26,7 +26,7 @@ const getWidgets = (widgetObject: MiniWidgetObject[]) => { const widgets: React.ReactNode[] = []; for (let x = 0; x < widgetObject.length; x += 2) { widgets.push( - widgetObject.length}> + widgetObject.length}> {getDeltaOrDataComponent(widgetObject[x])} {x + 1 < widgetObject.length ? getDeltaOrDataComponent(widgetObject[x + 1]) : null} diff --git a/common/components/widgets/internal/UnitText.tsx b/common/components/widgets/internal/UnitText.tsx index a27bfd1ad..062dfeba0 100644 --- a/common/components/widgets/internal/UnitText.tsx +++ b/common/components/widgets/internal/UnitText.tsx @@ -1,10 +1,11 @@ import classNames from 'classnames'; import React from 'react'; -export interface UnitTextProps { +interface UnitTextProps { text: string; isLarge?: boolean; } + export const UnitText: React.FC = ({ text, isLarge = false }) => { return ( diff --git a/common/constants/colors.ts b/common/constants/colors.ts index 67e1c5f45..51646f430 100644 --- a/common/constants/colors.ts +++ b/common/constants/colors.ts @@ -7,6 +7,7 @@ export const COLORS = { blue: '#003da5', green: '#00834d', bus: '#FFC72C', + commuterRail: '#80276c', }, charts: { fillBackgroundColor: '#bfc8d680', diff --git a/common/constants/lines.ts b/common/constants/lines.ts index 1f76648fc..d5ce9c0b0 100644 --- a/common/constants/lines.ts +++ b/common/constants/lines.ts @@ -37,4 +37,11 @@ export const LINE_OBJECTS: LineObject = { key: 'line-bus', color: COLORS.mbta.bus, }, + 'line-commuter-rail': { + name: 'Commuter Rail', + short: 'Commuter Rail', + path: 'commuter-rail', + key: 'line-commuter-rail', + color: COLORS.mbta.commuterRail, + }, }; diff --git a/common/constants/pages.ts b/common/constants/pages.ts index 753719e84..69f7c7950 100644 --- a/common/constants/pages.ts +++ b/common/constants/pages.ts @@ -152,6 +152,8 @@ export const TRIP_PAGES = [ALL_PAGES.singleTrips, ALL_PAGES.multiTrips]; export const BUS_OVERVIEW = [ALL_PAGES.ridership]; +export const COMMUTER_RAIL_OVERVIEW = [ALL_PAGES.ridership]; + export const OVERVIEW_PAGE = [ALL_PAGES.overview]; export const LINE_PAGES = [ diff --git a/common/constants/stations.ts b/common/constants/stations.ts index d4f28debf..39f1c9466 100644 --- a/common/constants/stations.ts +++ b/common/constants/stations.ts @@ -16,7 +16,8 @@ import bus_77 from './bus_constants/77.json'; import bus_111 from './bus_constants/111.json'; import bus_114_116_117 from './bus_constants/114-116-117.json'; -export const rtStations: { [key in Exclude]: LineMap } = stations_json; +export const rtStations: { [key in Exclude]: LineMap } = + stations_json; export const busStations: { [key: string]: LineMap } = { ...bus_1, @@ -35,8 +36,14 @@ export const busStations: { [key: string]: LineMap } = { ...bus_114_116_117, }; +export const commuterRailStations: { [key: string]: LineMap } = {}; + export const stations = { ...rtStations, Bus: busStations }; export const getBusRoutes = (): string[] => { return Object.keys(busStations); }; + +export const getCommuterRailRoutes = (): string[] => { + return Object.keys(commuterRailStations); +}; diff --git a/common/state/defaults/dateDefaults.ts b/common/state/defaults/dateDefaults.ts index dbeb622c6..11b919f97 100644 --- a/common/state/defaults/dateDefaults.ts +++ b/common/state/defaults/dateDefaults.ts @@ -12,7 +12,7 @@ import { } from '../../constants/dates'; import type { WithOptional } from '../../types/general'; -export const SUBWAY_DEFAULTS: Partial = { +const SUBWAY_DEFAULTS: Partial = { lineConfig: { startDate: OVERVIEW_OPTIONS.year.startDate, endDate: TODAY_STRING }, multiTripConfig: { startDate: ONE_WEEK_AGO_STRING, @@ -36,7 +36,7 @@ export const BUS_DEFAULTS: WithOptional = { +const SYSTEM_DEFAULTS: Partial = { systemConfig: { startDate: OVERVIEW_OPTIONS.year.startDate, endDate: TODAY_STRING }, }; diff --git a/common/styles/general.ts b/common/styles/general.ts index 92300517b..3543b78da 100644 --- a/common/styles/general.ts +++ b/common/styles/general.ts @@ -6,6 +6,7 @@ export const lineColorBackground: DefaultStyleMap = { 'line-green': `bg-mbta-green`, 'line-blue': `bg-mbta-blue`, 'line-bus': `bg-mbta-bus`, + 'line-commuter-rail': `bg-mbta-commuterRail`, DEFAULT: `bg-stone-800`, }; @@ -15,6 +16,7 @@ export const lineColorLightBorder = { 'line-green': `border-mbta-lightGreen`, 'line-blue': `border-mbta-lightBlue`, 'line-bus': `border-mbta-lightBus`, + 'line-commuter-rail': `border-mbta-lightCommuterRail`, DEFAULT: `border-stone-900`, }; @@ -24,6 +26,7 @@ export const mbtaTextConfig: DefaultStyleMap = { 'line-green': `text-mbta-green`, 'line-blue': `text-mbta-blue`, 'line-bus': `text-mbta-bus`, + 'line-commuter-rail': `text-mbta-commuterRail`, DEFAULT: `text-black`, }; @@ -33,6 +36,7 @@ export const lineColorLightBackground: DefaultStyleMap = { 'line-green': `bg-mbta-lightGreen`, 'line-blue': `bg-mbta-lightBlue`, 'line-bus': `bg-mbta-lightBus`, + 'line-commuter-rail': `bg-mbta-lightCommuterRail`, DEFAULT: `bg-stone-900`, }; @@ -42,6 +46,7 @@ export const lineColorDarkBackground: DefaultStyleMap = { 'line-green': `bg-mbta-darkGreen`, 'line-blue': `bg-mbta-darkBlue`, 'line-bus': `bg-mbta-darkBus`, + 'line-commuter-rail': `bg-mbta-darkCommuterRail`, DEFAULT: `bg-stone-900`, }; @@ -51,6 +56,7 @@ export const buttonHighlightFocus: DefaultStyleMap = { 'line-green': `focus:ring-mbta-green`, 'line-blue': `focus:ring-mbta-blue`, 'line-bus': `focus:ring-mbta-bus`, + 'line-commuter-rail': `focus:ring-mbta-commuterRail`, DEFAULT: `focus:ring-stone-800`, }; @@ -60,6 +66,7 @@ export const lineColorTextHover: DefaultStyleMap = { 'line-green': `hover:text-mbta-green`, 'line-blue': `hover:text-mbta-blue`, 'line-bus': `hover:text-mbta-bus`, + 'line-commuter-rail': `hover:text-mbta-commuterRail`, DEFAULT: `hover:text-stone-800`, }; @@ -69,6 +76,7 @@ export const lineColorDarkBorder: DefaultStyleMap = { 'line-green': `border-mbta-darkGreen`, 'line-blue': `border-mbta-darkBlue`, 'line-bus': `border-mbta-darkBus`, + 'line-commuter-rail': `border-mbta-darkCommuterRail`, DEFAULT: `border-stone-900`, }; @@ -78,6 +86,7 @@ export const lineColorBorder: DefaultStyleMap = { 'line-green': `border-mbta-green`, 'line-blue': `border-mbta-blue`, 'line-bus': `border-mbta-bus`, + 'line-commuter-rail': `border-mbta-commuterRail`, DEFAULT: `border-stone-800`, }; @@ -87,6 +96,7 @@ export const lineColorText: DefaultStyleMap = { 'line-green': `text-mbta-green`, 'line-blue': `text-mbta-blue`, 'line-bus': `text-mbta-bus`, + 'line-commuter-rail': `text-mbta-commuterRail`, DEFAULT: `text-stone-800`, }; @@ -96,5 +106,6 @@ export const lineColorRing: DefaultStyleMap = { 'line-green': `ring-mbta-green`, 'line-blue': `ring-mbta-blue`, 'line-bus': `ring-mbta-bus`, + 'line-commuter-rail': `ring-mbta-commuterRail`, DEFAULT: `ring-stone-800`, }; diff --git a/common/types/lines.ts b/common/types/lines.ts index e6109867c..d2fe41a74 100644 --- a/common/types/lines.ts +++ b/common/types/lines.ts @@ -1,6 +1,12 @@ -export type Line = 'line-red' | 'line-orange' | 'line-green' | 'line-blue' | 'line-bus'; -export type LineShort = 'Red' | 'Orange' | 'Green' | 'Blue' | 'Bus'; -export type LinePath = 'red' | 'orange' | 'green' | 'blue' | 'bus'; +export type Line = + | 'line-red' + | 'line-orange' + | 'line-green' + | 'line-blue' + | 'line-bus' + | 'line-commuter-rail'; +export type LineShort = 'Red' | 'Orange' | 'Green' | 'Blue' | 'Bus' | 'Commuter Rail'; +export type LinePath = 'red' | 'orange' | 'green' | 'blue' | 'bus' | 'commuter-rail'; export type BusRoute = | '1' | '15' diff --git a/modules/landing/LandingChartDiv.tsx b/modules/landing/LandingChartDiv.tsx index c1551351c..378b8c607 100644 --- a/modules/landing/LandingChartDiv.tsx +++ b/modules/landing/LandingChartDiv.tsx @@ -3,6 +3,7 @@ import React from 'react'; interface LandingChartDivProps { children: React.ReactElement[]; } + export const LandingChartDiv: React.FC = ({ children }) => { return (
diff --git a/modules/speed/constants/speeds.ts b/modules/speed/constants/speeds.ts index 38cf40f0f..03f35aaad 100644 --- a/modules/speed/constants/speeds.ts +++ b/modules/speed/constants/speeds.ts @@ -61,7 +61,7 @@ export const SPEED_RANGE_PARAM_MAP: { [s: string]: ParamsType } = { }; // TODO: Upload this to overviewStats db -export const MINIMUMS = { +const MINIMUMS = { 'line-red': { date: 'May 2020', value: 8374.5 }, 'line-blue': { date: 'May 2020', value: 1860.5 }, 'line-orange': { date: 'May 2020', value: 3776.75 }, @@ -75,5 +75,3 @@ export const CORE_TRACK_LENGTHS = { 'line-blue': 5.38 + 5.37, // Revere> + DEFAULT: 1, }; - -// Peak_MPH removed in #825 diff --git a/tailwind.config.js b/tailwind.config.js index 9a289c160..d3e0d059f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -71,6 +71,9 @@ module.exports = { bus: '#f5B400', lightBus: '#FFE395', darkBus: '#E6A800', + commuterRail: '#80276c', + lightCommuterRail: '#942d7c', + darkCommuterRail: '#6c215c', }, tm: { red: '#a31e1e',