Added route pills.

assets/css/elevator_v2.scss

@@ -6,6 +6,7 @@
 @import "v2/lcd_common/simulation";
 @import "v2/elevator/header";
 @import "v2/elevator/footer";
+@import "v2/lcd_common/route_pill";
 
 body {
   margin: 0;

assets/css/v2/elevator/elevator_closures.scss

@@ -63,6 +63,17 @@
             height: 2px;
             margin-bottom: 24px;
           }
+
+          &__name-and-pills {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+
+            .route-pill {
+              width: 132px;
+              height: 68.13px;
+            }
+          }
         }
       }
     }

assets/src/components/v2/elevator/elevator_closures.tsx

@@ -8,10 +8,11 @@ import React, {
 import NormalService from "Images/svgr_bundled/normal-service.svg";
 import AccessibilityAlert from "Images/svgr_bundled/accessibility-alert.svg";
 import makePersistent, { WrappedComponentProps } from "../persistent_wrapper";
+import RoutePill, { routePillKey, type Pill } from "../departures/route_pill";
 
 type ElevatorClosure = {
   station_name: string;
-  routes: string[];
+  routes: Pill[];
   id: string;
   elevator_name: string;
   elevator_id: string;
@@ -24,11 +25,17 @@ interface ClosureRowProps {
 }
 
 const ClosureRow = ({ alert }: ClosureRowProps) => {
-  const { station_name, elevator_name, elevator_id } = alert;
+  const { station_name, elevator_name, elevator_id, routes } = alert;
+  console.log(routes);
   return (
     <div className="alert-row">
       <hr />
-      <div className="alert-row__station-name">{station_name}</div>
+      <div className="alert-row__name-and-pills">
+        {routes.map((route) => (
+          <RoutePill pill={route} key={routePillKey(route)} />
+        ))}
+        <div className="alert-row__station-name">{station_name}</div>
+      </div>
       <div className="alert-row__elevator-name">
         {elevator_name} ({elevator_id})
       </div>

lib/screens/v2/candidate_generator/elevator/closures.ex

@@ -8,6 +8,7 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
   alias Screens.Routes.Route
   alias Screens.Stops.Stop
   alias Screens.V2.WidgetInstance.ElevatorClosures
+  alias Screens.V2.WidgetInstance.Serializer.RoutePill
   alias ScreensConfig.Screen
   alias ScreensConfig.V2.Elevator
 
@@ -65,7 +66,7 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
     |> MapSet.new()
     |> MapSet.put(home_parent_station_id)
     |> Enum.map(fn station_id ->
-      {station_id, route_ids_serving_stop(station_id)}
+      {station_id, station_id |> route_ids_serving_stop() |> routes_to_labels()}
     end)
     |> Enum.into(%{})
   end
@@ -81,12 +82,25 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
 
   defp route_ids_serving_stop(stop_id) do
     case @route.fetch(%{stop_id: stop_id}) do
-      {:ok, routes} -> Enum.map(routes, & &1.id)
+      {:ok, routes} -> routes
       # Show no route pills instead of crashing the screen
       :error -> []
     end
   end
 
+  defp routes_to_labels(routes) do
+    routes
+    |> Enum.map(fn
+      %Route{type: :subway, id: id} -> id |> String.downcase() |> String.to_atom()
+      %Route{type: :light_rail, id: "Green-" <> _} -> :green
+      %Route{type: :light_rail, id: "Mattapan" <> _} -> :mattapan
+      %Route{type: :bus, short_name: "SL" <> _} -> :silver
+      %Route{type: :rail} -> :cr
+      %Route{type: type} -> type
+    end)
+    |> Enum.uniq()
+  end
+
   defp split_alerts_by_location(alerts, location_context) do
     Enum.split_with(alerts, fn %Alert{informed_entities: informed_entities} ->
       location_context.home_stop in Enum.map(informed_entities, & &1.stop)
@@ -113,9 +127,14 @@ defmodule Screens.V2.CandidateGenerator.Elevator.Closures do
                           } ->
         facility = get_informed_facility(entities)
 
+        route_pills =
+          station_id_to_routes
+          |> Map.fetch!(parent_station_id)
+          |> Enum.map(&RoutePill.serialize_icon/1)
+
         %{
           station_name: Map.fetch!(station_id_to_name, parent_station_id),
-          routes: Map.fetch!(station_id_to_routes, parent_station_id),
+          routes: route_pills,
           id: id,
           elevator_name: facility.name,
           elevator_id: facility.id,