feat: Elevator Happy Path

assets/css/colors.scss

@@ -15,3 +15,6 @@ $warm-neutral-80: #cccbc8;
 $warm-neutral-90: #e5e4e1;
 
 $cool-black-15: #171f26;
+$cool-black-30: #2e3e4d;
+
+$normal-service-green: #145a06;

assets/css/elevator_v2.scss

@@ -1,5 +1,11 @@
-@import "v2/placeholder";
+@import "https://rsms.me/inter/inter.css";
+@import "colors";
+@import "v2/elevator/elevator_closures";
 @import "v2/elevator/normal";
+@import "v2/simulation_common";
+@import "v2/lcd_common/simulation";
+@import "v2/elevator/header";
+@import "v2/elevator/footer";
 
 body {
   margin: 0;

assets/css/v2/elevator/elevator_closures.scss

@@ -0,0 +1,39 @@
+.elevator-closures {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: Inter, sans-serif;
+  background-color: $warm-neutral-90;
+
+  .in-station-summary {
+    display: flex;
+    justify-content: space-between;
+    padding: 24px 58px;
+    font-size: 48px;
+    font-weight: 400;
+    line-height: 64px;
+    color: $cool-black-30;
+  }
+
+  hr {
+    width: 100%;
+    height: 24px;
+    margin-top: 0;
+    margin-bottom: 0;
+    background-color: $cool-black-15;
+  }
+
+  .outside-alert-list {
+    height: 100%;
+    background-color: $warm-neutral-90;
+
+    .header {
+      display: flex;
+      padding: 48px;
+      font-size: 150px;
+      font-weight: 700;
+      line-height: 150px;
+    }
+  }
+}

assets/css/v2/elevator/footer.scss

@@ -0,0 +1,11 @@
+.footer {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 48px;
+  font-family: Inter, sans-serif;
+  font-size: 48px;
+  line-height: 62px;
+  color: white;
+  background-color: $cool-black-30;
+}

assets/css/v2/elevator/header.scss

@@ -0,0 +1,12 @@
+.normal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+  padding: 0 48px;
+  font-family: Inter, sans-serif;
+  font-size: 48px;
+  line-height: 62px;
+  color: $warm-neutral-90;
+  background-color: $cool-black-15;
+}

assets/css/v2/elevator/normal.scss

@@ -5,10 +5,18 @@
   margin-left: auto;
 }
 
+.screen-normal__header {
+  width: 1080px;
+  height: 104px;
+}
+
 .screen-normal__body {
-  position: absolute;
-  top: 288px;
-  left: 0;
-  width: 1200px;
-  height: 2912px;
+  width: 1080px;
+  height: 1632px;
+}
+
+.screen-normal__footer {
+  position: relative;
+  width: 1080px;
+  height: 184px;
 }

assets/src/apps/v2/elevator.tsx

@@ -10,16 +10,21 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
 import NormalScreen from "Components/v2/elevator/normal_screen";
-import Placeholder from "Components/v2/placeholder";
 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 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,
-  placeholder: Placeholder,
+  elevator_closures: ElevatorClosures,
   evergreen_content: EvergreenContent,
+  footer: Footer,
+  normal_header: NormalHeader,
 };
 
 const App = (): JSX.Element => {
@@ -29,11 +34,22 @@ const App = (): JSX.Element => {
         <Route exact path="/v2/screen/elevator_v2">
           <MultiScreenPage components={TYPE_TO_COMPONENT} />
         </Route>
-        <Route path="/v2/screen/:id">
+        <Route exact path="/v2/screen/:id">
           <MappingContext.Provider value={TYPE_TO_COMPONENT}>
             <ScreenPage />
           </MappingContext.Provider>
         </Route>
+        <Route
+          exact
+          path={[
+            "/v2/screen/:id/simulation",
+            "/v2/screen/pending/:id/simulation",
+          ]}
+        >
+          <MappingContext.Provider value={TYPE_TO_COMPONENT}>
+            <SimulationScreenPage />
+          </MappingContext.Provider>
+        </Route>
       </Switch>
     </Router>
   );

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

@@ -0,0 +1,62 @@
+import React from "react";
+import NormalService from "Images/svgr_bundled/normal-service.svg";
+import AccessibilityAlert from "Images/svgr_bundled/accessibility-alert.svg";
+
+interface InStationSummaryProps {
+  alerts: string[];
+}
+
+const InStationSummary = ({ alerts }: InStationSummaryProps) => {
+  const summaryText = alerts.length
+    ? ""
+    : "All elevators at this station are currently working";
+
+  return (
+    <>
+      <div className="in-station-summary">
+        <span className="text">{summaryText}</span>
+        <span>
+          <NormalService height={72} width={72} fill="#145A06" />
+        </span>
+      </div>
+      <hr />
+    </>
+  );
+};
+
+interface OutsideAlertListProps {
+  alerts: string[];
+}
+
+const OutsideAlertList = (_props: OutsideAlertListProps) => {
+  return (
+    <div className="outside-alert-list">
+      <div className="header">
+        <span>MBTA Elevator Closures</span>
+        <span>
+          <AccessibilityAlert height={128} width={128} />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+interface Props {
+  id: string;
+  in_station_alerts: string[];
+  outside_alerts: string[];
+}
+
+const ElevatorClosures: React.ComponentType<Props> = ({
+  in_station_alerts: inStationAlerts,
+  outside_alerts: outsideAlerts,
+}: Props) => {
+  return (
+    <div className="elevator-closures">
+      <InStationSummary alerts={inStationAlerts} />
+      <OutsideAlertList alerts={outsideAlerts} />
+    </div>
+  );
+};
+
+export default ElevatorClosures;

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

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <div className="footer">
+      For more info and alternate paths: mbta.com/alerts/access or (617)
+      222-2828
+    </div>
+  );
+};
+
+export default Footer;

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

@@ -3,17 +3,23 @@ import React from "react";
 import Widget, { WidgetData } from "Components/v2/widget";
 
 interface Props {
+  header: WidgetData;
   main_content: WidgetData;
+  footer: WidgetData;
 }
 
-const NormalScreen: React.ComponentType<Props> = ({
-  main_content: mainContent,
-}) => {
+const NormalScreen = ({ header, main_content: mainContent, footer }: Props) => {
   return (
     <div className="screen-normal">
+      <div className="screen-normal__header">
+        <Widget data={header} />
+      </div>
       <div className="screen-normal__body">
         <Widget data={mainContent} />
       </div>
+      <div className="screen-normal__footer">
+        <Widget data={footer} />
+      </div>
     </div>
   );
 };

lib/screens/v2/candidate_generator/elevator.ex

@@ -3,29 +3,41 @@ defmodule Screens.V2.CandidateGenerator.Elevator do
 
   alias Screens.V2.CandidateGenerator
   alias Screens.V2.Template.Builder
-  alias Screens.V2.WidgetInstance.Placeholder
+  alias Screens.V2.WidgetInstance.{ElevatorClosures, Footer, NormalHeader}
+  alias ScreensConfig.Screen
+  alias ScreensConfig.V2.Elevator
 
   @behaviour CandidateGenerator
 
   def screen_template do
     {
       :screen,
       %{
-        normal: [:main_content]
+        normal: [
+          :header,
+          :main_content,
+          :footer
+        ]
       }
     }
     |> Builder.build_template()
   end
 
-  def candidate_instances(_config) do
-    placeholder_instances()
+  def candidate_instances(config, now \\ DateTime.utc_now()) do
+    [header_instance(config, now), elevator_closures_instance(config), footer_instance(config)]
   end
 
   def audio_only_instances(_widgets, _config), do: []
 
-  defp placeholder_instances do
-    [
-      %Placeholder{color: :blue, slot_names: [:main_content]}
-    ]
+  defp elevator_closures_instance(config) do
+    %ElevatorClosures{screen: config, alerts: []}
+  end
+
+  defp header_instance(%Screen{app_params: %Elevator{elevator_id: elevator_id}} = config, now) do
+    %NormalHeader{text: "Elevator #{elevator_id}", screen: config, time: now}
+  end
+
+  defp footer_instance(config) do
+    %Footer{screen: config}
   end
 end

lib/screens/v2/widget_instance/elevator_closures.ex

@@ -0,0 +1,33 @@
+defmodule Screens.V2.WidgetInstance.ElevatorClosures do
+  @moduledoc false
+
+  alias Screens.Alerts.Alert
+  alias ScreensConfig.Screen
+  alias ScreensConfig.V2.Elevator
+
+  defstruct screen: nil,
+            alerts: nil
+
+  @type t :: %__MODULE__{
+          screen: Screen.t(),
+          alerts: list(Alert.t())
+        }
+
+  def serialize(%__MODULE__{screen: %Screen{app_params: %Elevator{elevator_id: id}}}) do
+    %{id: id, in_station_alerts: [], outside_alerts: []}
+  end
+
+  defimpl Screens.V2.WidgetInstance do
+    alias Screens.V2.WidgetInstance.ElevatorClosures
+
+    def priority(_instance), do: [1]
+    def serialize(instance), do: ElevatorClosures.serialize(instance)
+    def slot_names(_instance), do: [:main_content]
+    def widget_type(_instance), do: :elevator_closures
+    def valid_candidate?(_instance), do: true
+    def audio_serialize(_instance), do: %{}
+    def audio_sort_key(_instance), do: [0]
+    def audio_valid_candidate?(_instance), do: false
+    def audio_view(_instance), do: ScreensWeb.V2.Audio.ElevatorClosuresView
+  end
+end