Adding the Mattapan trolley

common/api/alerts.ts

@@ -23,7 +23,7 @@ export const fetchAlerts = async (
 
 const fetchAlertsForLine = async (line: LineShort): Promise<AlertsResponse[]> => {
   const options = { ...alertsAPIConfig };
-  if (line === 'Green') {
+  if (line === 'Green' || line === 'Mattapan') {
     // route_type 0 is light rail (green line & Mattapan)
     options['route_type'] = '0';
   } else {

common/components/graphics/styles/spinnerFillColor.ts

@@ -5,6 +5,7 @@ export const spinnerFillColor: StyleMap = {
   'line-orange': 'fill-mbta-orange',
   'line-green': 'fill-mbta-green',
   'line-blue': 'fill-mbta-blue',
+  'line-mattapan': 'fill-mbta-red',
   'line-bus': 'fill-mbta-bus',
   'line-commuter-rail': 'fill-mbta-commuterRail',
 };

common/components/nav/MenuDropdown.tsx

@@ -30,6 +30,7 @@ export const MenuDropdown: React.FC<MenuDropdownProps> = ({ line, route, childre
       case 'line-bus':
         return faBus;
       case 'line-green':
+      case 'line-mattapan':
         return faTrainTram;
       case 'line-commuter-rail':
         return faTrain;

common/components/nav/SubwayDropdown.tsx

@@ -21,7 +21,7 @@ export const SubwayDropdown: React.FC<SubwayDropdownProps> = ({ line, close }) =
     >
       <SidebarTabs tabs={OVERVIEW_PAGE} close={close} />
       <hr className="h-[1px] w-3/4 self-center border-neutral-500" />
-      <SidebarTabs tabs={LINE_PAGES} close={close} />
+      <SidebarTabs tabs={LINE_PAGES.filter((cur) => cur.lines.includes(line))} close={close} />
       <hr className="h-[1px] w-3/4 self-center border-neutral-500" />
       <SidebarTabs tabs={TRIP_PAGES} close={close} />
     </div>

common/components/nav/SubwaySection.tsx

@@ -24,6 +24,9 @@ export const SubwaySection: React.FC<SubwaySectionProps> = ({ close }) => {
       <MenuDropdown line="line-green" route={route}>
         <SubwayDropdown line="line-green" close={close} />
       </MenuDropdown>
+      <MenuDropdown line="line-mattapan" route={route}>
+        <SubwayDropdown line="line-mattapan" close={close} />
+      </MenuDropdown>
     </div>
   );
 };

common/constants/baselines.ts

@@ -6,6 +6,7 @@ export const PEAK_SCHEDULED_SERVICE = {
   'line-orange': 161,
   'line-blue': 186,
   'line-green': 506,
+  'line-mattapan': 159,
   'line-bus': 0,
   DEFAULT: 0,
 };
@@ -15,6 +16,7 @@ export const PEAK_SPEED = {
   'line-orange': 18,
   'line-blue': 20.5,
   'line-green': 12.6,
+  'line-mattapan': 24.7,
   'line-bus': 0,
 };
 
@@ -26,6 +28,7 @@ export const PEAK_RIDERSHIP: {
   'line-orange': 169578,
   'line-blue': 60129,
   'line-green': 87148,
+  'line-mattapan': 0,
   '1': 15272,
   '4': 850,
   '7': 5126,

common/constants/colors.ts

@@ -51,6 +51,7 @@ export const LINE_COLORS: { [key in Line | 'default']: string } = {
   'line-blue': COLORS.mbta.blue,
   'line-green': COLORS.mbta.green,
   'line-bus': COLORS.mbta.bus,
+  'line-mattapan': COLORS.mbta.red,
   'line-commuter-rail': COLORS.mbta.commuterRail,
   default: '#303030',
 };
@@ -62,6 +63,7 @@ export const LINE_COLORS_LEVELS: {
   'line-orange': { 0: '#ed8b00', 1: '#ff9907', 2: '#ffa321', 3: '#ffae3b' },
   'line-blue': { 0: '#003da5', 1: '#0046bf', 2: '#0050d8', 3: '#0059f2' },
   'line-green': { 0: '#00834d', 1: '#009d5c', 2: '#00b66b', 3: '#00d07a' },
+  'line-mattapan': { 0: '#D13434', 1: '#d64949', 2: '#da5e5e', 3: '#df7272' },
   'line-bus': { 0: '#ffc72c', 1: '#ffce46', 2: '#ffd55f', 3: '#ffdb79' },
   'line-commuter-rail': { 0: '#80276c', 1: '#8f2f7e', 2: '#9e3790', 3: '#ad41a2' },
   default: '#303030',

common/constants/lines.ts

@@ -30,6 +30,13 @@ export const LINE_OBJECTS: LineObject = {
     key: 'line-blue',
     color: COLORS.mbta.blue,
   },
+  'line-mattapan': {
+    name: 'Mattapan Line',
+    short: 'Mattapan',
+    path: 'mattapan',
+    key: 'line-mattapan',
+    color: COLORS.mbta.red,
+  },
   'line-bus': {
     name: 'Buses',
     short: 'Bus',

common/constants/pages.ts

@@ -68,7 +68,7 @@ export const ALL_PAGES: PageMap = {
     path: '/trips/single',
     name: 'Trips',
     title: 'Trips',
-    lines: ['line-red', 'line-blue', 'line-green', 'line-orange', 'line-bus'],
+    lines: ['line-red', 'line-blue', 'line-green', 'line-orange', 'line-mattapan', 'line-bus'],
     icon: faMapLocationDot,
     hasStationStore: true,
     dateStoreSection: 'singleTrips',
@@ -78,7 +78,7 @@ export const ALL_PAGES: PageMap = {
     path: '/trips/multi',
     name: 'Multi-day trips',
     title: 'Multi-day trips',
-    lines: ['line-red', 'line-blue', 'line-green', 'line-orange', 'line-bus'],
+    lines: ['line-red', 'line-blue', 'line-green', 'line-orange', 'line-mattapan', 'line-bus'],
     icon: faCalendarDays,
     dateStoreSection: 'multiTrips',
     hasStationStore: true,
@@ -87,39 +87,39 @@ export const ALL_PAGES: PageMap = {
     key: 'overview',
     path: '/',
     name: 'Line overview',
-    lines: ['line-red', 'line-blue', 'line-green', 'line-orange'],
+    lines: ['line-red', 'line-blue', 'line-green', 'line-orange', 'line-mattapan'],
     dateStoreSection: 'overview',
     icon: faTableColumns,
   },
   speed: {
     key: 'speed',
     path: '/speed',
     name: 'Speed',
-    lines: ['line-red', 'line-orange', 'line-blue', 'line-green'],
+    lines: ['line-red', 'line-orange', 'line-blue', 'line-green', 'line-mattapan'],
     icon: faGaugeHigh,
     dateStoreSection: 'line',
   },
   predictions: {
     key: 'predictions',
     path: '/predictions',
     name: 'Predictions',
-    lines: ['line-red', 'line-orange', 'line-blue', 'line-green'],
+    lines: ['line-red', 'line-orange', 'line-blue', 'line-green', 'line-mattapan'],
     icon: faStopwatch20,
     dateStoreSection: 'line',
   },
   service: {
     key: 'service',
     path: '/service',
     name: 'Service',
-    lines: ['line-red', 'line-orange', 'line-blue', 'line-green'],
+    lines: ['line-red', 'line-orange', 'line-blue', 'line-green', 'line-mattapan'],
     dateStoreSection: 'line',
     icon: faClockFour,
   },
   delays: {
     key: 'delays',
     path: '/delays',
     name: 'Delays',
-    lines: ['line-red', 'line-orange', 'line-blue', 'line-green'],
+    lines: ['line-red', 'line-orange', 'line-blue', 'line-green', 'line-mattapan'],
     icon: faCalendarXmark,
     dateStoreSection: 'line',
   },