diff --git a/assets/css/elevator_v2.scss b/assets/css/elevator_v2.scss index 6c470d510..c874acaab 100644 --- a/assets/css/elevator_v2.scss +++ b/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; diff --git a/assets/css/v2/elevator/elevator_closures.scss b/assets/css/v2/elevator/elevator_closures.scss index 492f73729..b8f33e3b7 100644 --- a/assets/css/v2/elevator/elevator_closures.scss +++ b/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; - } } diff --git a/assets/css/v2/elevator/footer.scss b/assets/css/v2/elevator/footer.scss new file mode 100644 index 000000000..94e75283c --- /dev/null +++ b/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; +} diff --git a/assets/css/v2/elevator/header.scss b/assets/css/v2/elevator/header.scss new file mode 100644 index 000000000..c3102b3cd --- /dev/null +++ b/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; +} diff --git a/assets/css/v2/elevator/normal.scss b/assets/css/v2/elevator/normal.scss index 646f65546..cdf209a7c 100644 --- a/assets/css/v2/elevator/normal.scss +++ b/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; } diff --git a/assets/src/apps/v2/elevator.tsx b/assets/src/apps/v2/elevator.tsx index 4a28ce6fe..cea5a1e47 100644 --- a/assets/src/apps/v2/elevator.tsx +++ b/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 => { diff --git a/assets/src/components/v2/elevator/elevator_closures.tsx b/assets/src/components/v2/elevator/elevator_closures.tsx index e2ee3d9cd..0e7b668c6 100644 --- a/assets/src/components/v2/elevator/elevator_closures.tsx +++ b/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 ( -
- Elevator {id} - {formatTimeString(time)} -
- ); -}; interface InStationSummaryProps { alerts: string[]; } @@ -55,36 +41,20 @@ const OutsideAlertList = (_props: OutsideAlertListProps) => { ); }; -const Footer = () => { - return ( -
- - For more info and alternate paths: mbta.com/alerts/access or (617) - 222-2828 - -
- ); -}; - interface Props { id: string; - time: string; in_station_alerts: string[]; outside_alerts: string[]; } const ElevatorClosures: React.ComponentType = ({ - id, - time, in_station_alerts: inStationAlerts, outside_alerts: outsideAlerts, }: Props) => { return (
-
-
); }; diff --git a/assets/src/components/v2/elevator/footer.tsx b/assets/src/components/v2/elevator/footer.tsx new file mode 100644 index 000000000..70e2fb2d9 --- /dev/null +++ b/assets/src/components/v2/elevator/footer.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +const Footer = () => { + return ( +
+ For more info and alternate paths: mbta.com/alerts/access or (617) + 222-2828 +
+ ); +}; + +export default Footer; diff --git a/assets/src/components/v2/elevator/normal_screen.tsx b/assets/src/components/v2/elevator/normal_screen.tsx index eb2d79c61..5d572cce2 100644 --- a/assets/src/components/v2/elevator/normal_screen.tsx +++ b/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 = ({ - main_content: mainContent, -}) => { +const NormalScreen = ({ header, main_content: mainContent, footer }: Props) => { return (
+
+ +
+
+ +
); }; diff --git a/lib/screens/v2/candidate_generator/elevator.ex b/lib/screens/v2/candidate_generator/elevator.ex index b07262c35..eeefbdb50 100644 --- a/lib/screens/v2/candidate_generator/elevator.ex +++ b/lib/screens/v2/candidate_generator/elevator.ex @@ -3,7 +3,9 @@ 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 @@ -11,19 +13,31 @@ defmodule Screens.V2.CandidateGenerator.Elevator 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 diff --git a/lib/screens/v2/widget_instance/elevator_closures.ex b/lib/screens/v2/widget_instance/elevator_closures.ex index e08abf23f..59f612653 100644 --- a/lib/screens/v2/widget_instance/elevator_closures.ex +++ b/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 diff --git a/lib/screens/v2/widget_instance/footer.ex b/lib/screens/v2/widget_instance/footer.ex new file mode 100644 index 000000000..9a5f54904 --- /dev/null +++ b/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 diff --git a/test/screens/v2/candidate_generator/elevator_test.exs b/test/screens/v2/candidate_generator/elevator_test.exs index deb681162..4053999b1 100644 --- a/test/screens/v2/candidate_generator/elevator_test.exs +++ b/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 diff --git a/test/screens/v2/widget_instance/elevator_closures_test.exs b/test/screens/v2/widget_instance/elevator_closures_test.exs index bd12183a6..96ef7e858 100644 --- a/test/screens/v2/widget_instance/elevator_closures_test.exs +++ b/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)