Converted elevator components into separate widgets.

assets/css/elevator_v2.scss

@@ -5,7 +5,6 @@
 @import "https://rsms.me/inter/inter.css";
 @import "colors";
 @import "v2/lcd_common/screen_container";
-@import "v2/elevator/elevator_closures";
 @import "v2/elevator/normal";
 @import "v2/simulation_common";
 @import "v2/lcd_common/simulation";
@@ -42,3 +41,47 @@ body {
     background-color: $accessibility-blue;
   }
 }
+
+.outside-elevator-closures,
+.current-elevator-closed {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  color: $cool-black-15;
+  background-color: $warm-neutral-90;
+
+  hr.thick {
+    min-height: 24px;
+    margin: 0;
+    background-color: $cool-black-15;
+    border: none;
+  }
+
+  hr.thin {
+    min-height: 2px;
+    margin: 24px 0;
+    background-color: $true-grey-45;
+    border: none;
+    opacity: 0.5;
+  }
+
+  .subheading {
+    font-size: 80px;
+    font-weight: 700;
+    line-height: 80px;
+  }
+}
+
+.paging-indicators {
+  display: flex;
+  align-items: center;
+  margin-right: 66px;
+
+  .paging-indicator:first-child:not(:only-child) {
+    margin-right: 27px;
+  }
+}
+
+@import "v2/elevator/current_elevator_closed";
+@import "v2/elevator/outside_elevator_closures";

assets/css/v2/elevator/closures/current_elevator_closed_view.scss → assets/css/v2/elevator/current_elevator_closed.scss

@@ -1,4 +1,4 @@
-.current-elevator-closed-view {
+.current-elevator-closed {
   position: relative;
   height: 100%;
 
@@ -91,6 +91,7 @@
   .paging-indicators {
     position: absolute;
     right: 0;
+    bottom: 0;
     height: 120px;
   }
 }

assets/css/v2/elevator/closures/outside_closures_view.scss → assets/css/v2/elevator/outside_elevator_closures.scss

@@ -1,4 +1,4 @@
-.outside-closures-view {
+.outside-elevator-closures {
   display: flex;
   flex: 1;
   flex-direction: column;

assets/src/apps/v2/elevator.tsx

@@ -14,14 +14,16 @@ import EvergreenContent from "Components/v2/evergreen_content";
 import ScreenPage from "Components/v2/screen_page";
 import { MappingContext } from "Components/v2/widget";
 import MultiScreenPage from "Components/v2/multi_screen_page";
-import ElevatorClosures from "Components/v2/elevator/elevator_closures";
+import OutsideElevatorClosures from "Components/v2/elevator/outside_elevator_closures";
+import CurrentElevatorClosed from "Components/v2/elevator/current_elevator_closed";
 import SimulationScreenPage from "Components/v2/simulation_screen_page";
 import Footer from "Components/v2/elevator/footer";
 import NormalHeader from "Components/v2/normal_header";
 
 const TYPE_TO_COMPONENT = {
   normal: NormalScreen,
-  elevator_closures: ElevatorClosures,
+  outside_elevator_closures: OutsideElevatorClosures,
+  current_elevator_closed: CurrentElevatorClosed,
   evergreen_content: EvergreenContent,
   footer: Footer,
   normal_header: NormalHeader,

assets/src/components/v2/elevator/closures/current_elevator_closed_view.tsx → assets/src/components/v2/elevator/current_elevator_closed.tsx

@@ -1,9 +1,11 @@
-import React from "react";
+import React, { ComponentType } from "react";
 import cx from "classnames";
 import Arrow, { Direction } from "Components/v2/arrow";
-import { WrappedComponentProps } from "Components/v2/persistent_wrapper";
-import PagingIndicators from "Components/v2/elevator/closures/paging_indicators";
-import { type ElevatorClosure } from "Components/v2/elevator/elevator_closures";
+import makePersistent, {
+  WrappedComponentProps,
+} from "Components/v2/persistent_wrapper";
+import PagingIndicators from "Components/v2/elevator/paging_indicators";
+import { type Closure } from "Components/v2/elevator/models/closure";
 import useClientPaging from "Hooks/v2/use_client_paging";
 import useTextResizer from "Hooks/v2/use_text_resizer";
 import CurrentLocationMarker from "Images/svgr_bundled/current-location-marker.svg";
@@ -27,18 +29,18 @@ const PulsatingDot = ({ x, y }: Coordinates) => {
 };
 
 interface CurrentElevatorClosedViewProps extends WrappedComponentProps {
-  closure: ElevatorClosure;
-  alternateDirectionText: string;
-  accessiblePathDirectionArrow: Direction;
-  accessiblePathImageUrl: string | null;
-  accessiblePathImageHereCoordinates: Coordinates;
+  closure: Closure;
+  alternate_direction_text: string;
+  accessible_path_direction_arrow: Direction;
+  accessible_path_image_url: string | null;
+  accessible_path_image_here_coordinates: Coordinates;
 }
 
 const CurrentElevatorClosedView = ({
-  alternateDirectionText,
-  accessiblePathDirectionArrow,
-  accessiblePathImageUrl,
-  accessiblePathImageHereCoordinates,
+  alternate_direction_text: alternateDirectionText,
+  accessible_path_direction_arrow: accessiblePathDirectionArrow,
+  accessible_path_image_url: accessiblePathImageUrl,
+  accessible_path_image_here_coordinates: accessiblePathImageHereCoordinates,
   onFinish,
   lastUpdate,
 }: CurrentElevatorClosedViewProps) => {
@@ -51,7 +53,7 @@ const CurrentElevatorClosedView = ({
   });
 
   return (
-    <div className="current-elevator-closed-view">
+    <div className="current-elevator-closed">
       <div className="notch"></div>
       <div className="header">
         <div className="icons">
@@ -91,4 +93,6 @@ const CurrentElevatorClosedView = ({
   );
 };
 
-export default CurrentElevatorClosedView;
+export default makePersistent(
+  CurrentElevatorClosedView as ComponentType<WrappedComponentProps>,
+);

assets/src/components/v2/elevator/models/closure.ts

@@ -0,0 +1,7 @@
+export type Closure = {
+  id: string;
+  elevator_name: string;
+  elevator_id: string;
+  description: string;
+  header_text: string;
+};

assets/src/components/v2/elevator/models/station.ts

@@ -0,0 +1,9 @@
+import { type Pill } from "Components/v2/departures/route_pill";
+import { type Closure } from "Components/v2/elevator/models/closure";
+
+export type StationWithClosures = {
+  id: string;
+  name: string;
+  route_icons: Pill[];
+  closures: Closure[];
+};

assets/src/components/v2/elevator/closures/outside_closures_view.tsx → assets/src/components/v2/elevator/outside_elevator_closures.tsx

@@ -1,10 +1,13 @@
-import React, { useLayoutEffect, useRef, useState } from "react";
+import React, { ComponentType, useLayoutEffect, useRef, useState } from "react";
 import cx from "classnames";
 import _ from "lodash";
-import { type StationWithClosures } from "Components/v2/elevator/elevator_closures";
 import RoutePill, { routePillKey } from "Components/v2/departures/route_pill";
-import { WrappedComponentProps } from "Components/v2/persistent_wrapper";
-import PagingIndicators from "Components/v2/elevator/closures/paging_indicators";
+import makePersistent, {
+  WrappedComponentProps,
+} from "Components/v2/persistent_wrapper";
+import PagingIndicators from "Components/v2/elevator/paging_indicators";
+import { type StationWithClosures } from "Components/v2/elevator/models/station";
+import { type Closure } from "Components/v2/elevator/models/closure";
 import useClientPaging from "Hooks/v2/use_client_paging";
 import NormalService from "Images/svgr_bundled/normal-service.svg";
 import AccessibilityAlert from "Images/svgr_bundled/accessibility-alert.svg";
@@ -137,15 +140,19 @@ const OutsideClosureList = ({
   );
 };
 
-interface OutsideClosuresViewProps extends OutsideClosureListProps {}
+interface Props extends WrappedComponentProps {
+  id: string;
+  in_station_closures: Closure[];
+  other_stations_with_closures: StationWithClosures[];
+}
 
-const OutsideClosuresView = ({
-  stations,
+const OutsideElevatorClosures = ({
+  other_stations_with_closures: stations,
   lastUpdate,
   onFinish,
-}: OutsideClosuresViewProps) => {
+}: Props) => {
   return (
-    <div className="outside-closures-view">
+    <div className="outside-elevator-closures">
       <InStationSummary />
       <OutsideClosureList
         stations={stations}
@@ -156,4 +163,6 @@ const OutsideClosuresView = ({
   );
 };
 
-export default OutsideClosuresView;
+export default makePersistent(
+  OutsideElevatorClosures as ComponentType<WrappedComponentProps>,
+);