Split header and footer into separate slots.

assets/css/elevator_v2.scss

@@ -4,6 +4,8 @@
 @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

@@ -6,18 +6,6 @@
   font-family: Inter, sans-serif;
   background-color: $warm-neutral-90;
 
-  .screen-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 104px;
-    padding: 0 48px;
-    font-size: 48px;
-    line-height: 62px;
-    color: $warm-neutral-90;
-    background-color: $cool-black-15;
-  }
-
   .in-station-summary {
     display: flex;
     justify-content: space-between;
@@ -31,6 +19,8 @@
   hr {
     width: 100%;
     height: 24px;
+    margin-top: 0;
+    margin-bottom: 0;
     background-color: $cool-black-15;
   }
 
@@ -46,15 +36,4 @@
       line-height: 150px;
     }
   }
-
-  .footer {
-    display: flex;
-    align-items: center;
-    height: 184px;
-    padding: 26px 48px;
-    font-size: 48px;
-    line-height: 62px;
-    color: white;
-    background-color: $cool-black-30;
-  }
 }

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,7 +5,18 @@
   margin-left: auto;
 }
 
+.screen-normal__header {
+  width: 1080px;
+  height: 104px;
+}
+
 .screen-normal__body {
   width: 1080px;
-  height: 1920px;
+  height: 1632px;
+}
+
+.screen-normal__footer {
+  position: relative;
+  width: 1080px;
+  height: 184px;
 }

assets/src/apps/v2/elevator.tsx

@@ -16,11 +16,15 @@ 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,
   elevator_closures: ElevatorClosures,
   evergreen_content: EvergreenContent,
+  footer: Footer,
+  normal_header: NormalHeader,
 };
 
 const App = (): JSX.Element => {

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

@@ -1,21 +1,7 @@
 import React from "react";
-import { formatTimeString } from "Util/util";
 import NormalService from "Images/svgr_bundled/normal-service.svg";
 import AccessibilityAlert from "Images/svgr_bundled/accessibility-alert.svg";
 
-interface HeaderProps {
-  id: string;
-  time: string;
-}
-
-const Header = ({ id, time }: HeaderProps) => {
-  return (
-    <div className="screen-header">
-      <span className="header__id">Elevator {id}</span>
-      <span className="header__time">{formatTimeString(time)}</span>
-    </div>
-  );
-};
 interface InStationSummaryProps {
   alerts: string[];
 }
@@ -55,36 +41,20 @@ const OutsideAlertList = (_props: OutsideAlertListProps) => {
   );
 };
 
-const Footer = () => {
-  return (
-    <div className="footer">
-      <span>
-        For more info and alternate paths: mbta.com/alerts/access or (617)
-        222-2828
-      </span>
-    </div>
-  );
-};
-
 interface Props {
   id: string;
-  time: string;
   in_station_alerts: string[];
   outside_alerts: string[];
 }
 
 const ElevatorClosures: React.ComponentType<Props> = ({
-  id,
-  time,
   in_station_alerts: inStationAlerts,
   outside_alerts: outsideAlerts,
 }: Props) => {
   return (
     <div className="elevator-closures">
-      <Header id={id} time={time} />
       <InStationSummary alerts={inStationAlerts} />
       <OutsideAlertList alerts={outsideAlerts} />
-      <Footer />
     </div>
   );
 };

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,27 +3,41 @@ defmodule Screens.V2.CandidateGenerator.Elevator do
 
   alias Screens.V2.CandidateGenerator
   alias Screens.V2.Template.Builder
-  alias Screens.V2.WidgetInstance.ElevatorClosures
+  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, now \\ DateTime.utc_now()) do
-    elevator_closures_instances(config, now)
+    [header_instance(config, now), elevator_closures_instance(config), footer_instance(config)]
   end
 
   def audio_only_instances(_widgets, _config), do: []
 
-  defp elevator_closures_instances(config, now) do
-    [%ElevatorClosures{screen: config, alerts: [], time: now}]
+  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

@@ -6,17 +6,15 @@ defmodule Screens.V2.WidgetInstance.ElevatorClosures do
   alias ScreensConfig.V2.Elevator
 
   defstruct screen: nil,
-            alerts: nil,
-            time: nil
+            alerts: nil
 
   @type t :: %__MODULE__{
           screen: Screen.t(),
-          alerts: list(Alert.t()),
-          time: DateTime.t()
+          alerts: list(Alert.t())
         }
 
-  def serialize(%__MODULE__{screen: %Screen{app_params: %Elevator{elevator_id: id}}, time: time}) do
-    %{id: id, in_station_alerts: [], outside_alerts: [], time: DateTime.to_iso8601(time)}
+  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

lib/screens/v2/widget_instance/footer.ex

@@ -0,0 +1,31 @@
+defmodule Screens.V2.WidgetInstance.Footer do
+  @moduledoc false
+
+  alias ScreensConfig.Screen
+
+  defstruct screen: nil
+
+  @type t :: %__MODULE__{
+          screen: Screen.t()
+        }
+
+  defimpl Screens.V2.WidgetInstance do
+    def priority(_instance), do: [1]
+
+    def serialize(_instance), do: %{}
+
+    def slot_names(_instance), do: [:footer]
+
+    def widget_type(_instance), do: :footer
+
+    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.FooterView
+  end
+end

test/screens/v2/candidate_generator/elevator_test.exs

@@ -22,7 +22,7 @@ defmodule Screens.V2.CandidateGenerator.ElevatorTest do
     test "returns template" do
       assert {:screen,
               %{
-                normal: [:main_content]
+                normal: [:header, :main_content, :footer]
               }} == Elevator.screen_template()
     end
   end

test/screens/v2/widget_instance/elevator_closures_test.exs

@@ -10,7 +10,6 @@ defmodule Screens.V2.WidgetInstance.ElevatorClosuresTest do
     %{
       instance: %ElevatorClosures{
         screen: struct(Screen, %{app_params: %Elevator{elevator_id: "111"}}),
-        time: ~U[2024-10-16T09:00:00Z],
         alerts: []
       }
     }
@@ -23,10 +22,9 @@ defmodule Screens.V2.WidgetInstance.ElevatorClosuresTest do
   end
 
   describe "serialize/1" do
-    test "returns map with id, alerts, and time", %{instance: instance} do
+    test "returns map with id and alerts", %{instance: instance} do
       assert %{
                id: "111",
-               time: DateTime.to_iso8601(~U[2024-10-16T09:00:00Z]),
                in_station_alerts: [],
                outside_alerts: []
              } == WidgetInstance.serialize(instance)