On bus screen placeholder app

assets/css/on_bus_v2.scss

@@ -0,0 +1,35 @@
+@import "fonts/inter_font_face";
+@import "fonts/helvetica_font_face";
+
+@import "v2/multi_screen_page";
+@import "v2/placeholder";
+@import "v2/simulation_common";
+
+body {
+  margin: 0;
+}
+
+.screen-container {
+  width: 650px;
+  height: 432px;
+}
+
+.screen-normal {
+  width: 100%;
+  height: 100%;
+}
+
+.screen-normal__body {
+  width: 100%;
+  height: 100%;
+}
+
+.body-normal {
+  width: 100%;
+  height: 100%;
+}
+
+.body-normal__main-content {
+  width: 100%;
+  height: 100%;
+}

assets/src/apps/admin.tsx

@@ -19,6 +19,7 @@ import {
   PreFareV2ScreensTable,
   DupV2ScreensTable,
   ElevatorV2ScreensTable,
+  OnBusScreensTable,
 } from "Components/admin/admin_tables";
 import AdminScreenConfigForm from "Components/admin/admin_screen_config_form";
 import ImageManager from "Components/admin/admin_image_manager";
@@ -34,6 +35,7 @@ const routes: [string, string, ComponentType][][] = [
     ["dup-v2-screens", "DUP", DupV2ScreensTable],
     ["elevator-v2-screens", "Elevator", ElevatorV2ScreensTable],
     ["gl-eink-v2-screens", "GL E-ink", GLEinkV2ScreensTable],
+    ["on-bus-v2-screens", "On-Bus", OnBusScreensTable],
     ["pre-fare-v2-screens", "Pre-Fare", PreFareV2ScreensTable],
     ["busway-v2-screens", "Sectional", BuswayV2ScreensTable],
   ],

assets/src/apps/v2/on_bus.tsx

@@ -0,0 +1,54 @@
+import initSentry from "Util/sentry";
+initSentry("on_bus");
+
+import initFullstory from "Util/fullstory";
+initFullstory();
+
+import "../../../css/on_bus_v2.scss";
+
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
+import ScreenPage from "Components/v2/screen_page";
+import { MappingContext } from "Components/v2/widget";
+import MultiScreenPage from "Components/v2/multi_screen_page";
+import SimulationScreenPage from "Components/v2/simulation_screen_page";
+import Placeholder from "Components/v2/placeholder";
+import NormalScreen from "Components/v2/bus_eink/normal_screen";
+import NormalBody from "Components/v2/bus_eink/normal_body";
+
+const TYPE_TO_COMPONENT = {
+  placeholder: Placeholder,
+  screen_normal: NormalScreen,
+  body_normal: NormalBody,
+};
+
+const App = (): JSX.Element => {
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/v2/screen/on_bus_v2">
+          <MultiScreenPage components={TYPE_TO_COMPONENT} />
+        </Route>
+        <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>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById("app"));

assets/src/components/admin/admin_add_modal.tsx

@@ -18,6 +18,7 @@ const fields = [
       "dup_v2",
       "elevator_v2",
       "gl_eink_v2",
+      "on_bus_v2",
       "pre_fare_v2",
     ]),
   },
@@ -31,6 +32,7 @@ const fields = [
       "c3ms",
       "outfront",
       "lg_mri",
+      "hanover",
       "mimo",
     ]),
   },
@@ -85,6 +87,9 @@ const defaultAppParamsByAppId = {
     accessible_path_image_here_coordinates: { x: 0, y: 0 },
     evergreen_content: [],
   },
+  on_bus_v2: {
+    evergreen_content: [],
+  },
 };
 
 const initialFormValues = _.fromPairs(fields.map(({ key }) => [key, ""]));

assets/src/components/admin/admin_tables.tsx

@@ -126,14 +126,6 @@ const v2Columns = [
     Filter: DefaultColumnFilter,
     FormCell: FormTextCell,
   },
-  {
-    Header: "Header",
-    accessor: buildAppParamAccessor("header"),
-    mutator: buildAppParamMutator("header"),
-    Cell: EditableTextarea,
-    disableFilters: true,
-    FormCell: FormTextarea,
-  },
   {
     Header: "Evergreen Content",
     accessor: buildAppParamAccessor("evergreen_content"),
@@ -144,6 +136,15 @@ const v2Columns = [
   },
 ];
 
+const headerColumn = {
+  Header: "Header",
+  accessor: buildAppParamAccessor("header"),
+  mutator: buildAppParamMutator("header"),
+  Cell: EditableTextarea,
+  disableFilters: true,
+  FormCell: FormTextarea,
+};
+
 const departuresColumn = {
   Header: "Departures",
   accessor: buildAppParamAccessor("departures"),
@@ -174,6 +175,7 @@ const alertsColumn = {
 const DupV2ScreensTable = (): JSX.Element => {
   const columns = [
     ...v2Columns,
+    headerColumn,
     {
       Header: "Primary Departures",
       accessor: buildAppParamAccessor("primary_departures"),
@@ -204,14 +206,21 @@ const BusEinkV2ScreensTable = (): JSX.Element => {
     return app_id === "bus_eink_v2";
   };
 
-  const columns = [...v2Columns, departuresColumn, footerColumn, alertsColumn];
+  const columns = [
+    ...v2Columns,
+    departuresColumn,
+    footerColumn,
+    alertsColumn,
+    headerColumn,
+  ];
 
   return <AdminTable columns={columns} dataFilter={dataFilter} />;
 };
 
 const GLEinkV2ScreensTable = (): JSX.Element => {
   const columns = [
     ...v2Columns,
+    headerColumn,
     {
       Header: "Line Map",
       accessor: buildAppParamAccessor("line_map"),
@@ -247,6 +256,7 @@ const BusShelterV2ScreensTable = (): JSX.Element => {
 
   const columns = [
     ...v2Columns,
+    headerColumn,
     {
       Header: "Audio Offset",
       accessor: (row) => row.app_params.audio.interval_offset_seconds,
@@ -294,6 +304,7 @@ const PreFareV2ScreensTable = (): JSX.Element => {
 
   const columns = [
     ...v2Columns,
+    headerColumn,
     {
       Header: "Elevator Status",
       accessor: buildAppParamAccessor("elevator_status"),
@@ -446,7 +457,17 @@ const BuswayV2ScreensTable = (): JSX.Element => {
     return app_id === "busway_v2";
   };
 
-  const columns = [...v2Columns, departuresColumn];
+  const columns = [...v2Columns, departuresColumn, headerColumn];
+
+  return <AdminTable columns={columns} dataFilter={dataFilter} />;
+};
+
+const OnBusScreensTable = (): JSX.Element => {
+  const dataFilter = ({ app_id }) => {
+    return app_id === "on_bus_v2";
+  };
+
+  const columns = [...v2Columns];
 
   return <AdminTable columns={columns} dataFilter={dataFilter} />;
 };
@@ -459,5 +480,6 @@ export {
   DupV2ScreensTable,
   ElevatorV2ScreensTable,
   GLEinkV2ScreensTable,
+  OnBusScreensTable,
   PreFareV2ScreensTable,
 };

assets/src/components/admin/inspector.tsx

@@ -29,6 +29,7 @@ const SCREEN_TYPES = new Set([
   "dup_v2",
   "elevator_v2",
   "gl_eink_v2",
+  "on_bus_v2",
   "pre_fare_v2",
 ]);
 

assets/webpack.config.js

@@ -116,6 +116,7 @@ module.exports = (env, argv) => {
         bus_shelter_v2: "./src/apps/v2/bus_shelter.tsx",
         pre_fare_v2: "./src/apps/v2/pre_fare.tsx",
         elevator_v2: "./src/apps/v2/elevator.tsx",
+        on_bus_v2: "./src/apps/v2/on_bus.tsx",
       },
       module: {
         rules: [

lib/screens/v2/candidate_generator/on_bus.ex

@@ -0,0 +1,43 @@
+defmodule Screens.V2.CandidateGenerator.OnBus do
+  @moduledoc false
+
+  alias Screens.V2.CandidateGenerator
+  alias Screens.V2.Template.Builder
+  alias Screens.V2.WidgetInstance.Placeholder
+
+  @behaviour CandidateGenerator
+
+  @impl true
+  def screen_template do
+    {
+      :screen,
+      %{
+        screen_normal: [
+          {:body,
+           %{
+             body_normal: [
+               :main_content
+             ]
+           }}
+        ]
+      }
+    }
+    |> Builder.build_template()
+  end
+
+  @impl CandidateGenerator
+  def candidate_instances(_config, _now \\ DateTime.utc_now()) do
+    [
+      fn -> body_instances() end
+    ]
+    |> Task.async_stream(& &1.())
+    |> Enum.flat_map(fn {:ok, instances} -> instances end)
+  end
+
+  def body_instances do
+    [%Placeholder{color: :blue, slot_names: [:main_content]}]
+  end
+
+  @impl CandidateGenerator
+  def audio_only_instances(_widgets, _config), do: []
+end

lib/screens/v2/screen_data/parameters.ex

@@ -49,6 +49,10 @@ defmodule Screens.V2.ScreenData.Parameters do
       audio_active_time: {~T[04:45:00], ~T[01:45:00]},
       candidate_generator: CandidateGenerator.PreFare,
       refresh_rate: 20
+    },
+    on_bus_v2: %Static{
+      candidate_generator: CandidateGenerator.OnBus,
+      refresh_rate: 20
     }
   }
 

lib/screens_web/controllers/v2/screen_controller.ex

@@ -7,7 +7,7 @@ defmodule ScreensWeb.V2.ScreenController do
   alias ScreensConfig.Screen
 
   @default_app_id :bus_eink_v2
-  @recognized_app_ids ~w[bus_eink_v2 bus_shelter_v2 busway_v2 dup_v2 gl_eink_v2 pre_fare_v2 elevator_v2]a
+  @recognized_app_ids ~w[bus_eink_v2 bus_shelter_v2 busway_v2 dup_v2 elevator_v2 gl_eink_v2 on_bus_v2 pre_fare_v2]a
   @app_id_strings Enum.map(@recognized_app_ids, &Atom.to_string/1)
 
   plug(:check_config)

mix.exs

@@ -94,7 +94,7 @@ defmodule Screens.MixProject do
       {:telemetry_metrics, "~> 1.0"},
       {:screens_config,
        git: "https://github.com/mbta/screens-config-lib.git",
-       ref: "7dbb2b9b3da0154ca9128c7c2a4ab30d18501290"},
+       ref: "3e781e39e4dd8bd63a05825534847347e1cbffa9"},
       {:nebulex, "~> 2.6"},
       {:remote_ip, "~> 1.2"},
       {:hackney_telemetry, "~> 0.2.0"},

mix.lock

@@ -62,7 +62,7 @@
   "recon": {:hex, :recon, "2.5.6", "9052588e83bfedfd9b72e1034532aee2a5369d9d9343b61aeb7fbce761010741", [:mix, :rebar3], [], "hexpm", "96c6799792d735cc0f0fd0f86267e9d351e63339cbe03df9d162010cefc26bb0"},
   "remote_ip": {:hex, :remote_ip, "1.2.0", "fb078e12a44414f4cef5a75963c33008fe169b806572ccd17257c208a7bc760f", [:mix], [{:combine, "~> 0.10", [hex: :combine, repo: "hexpm", optional: false]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "2ff91de19c48149ce19ed230a81d377186e4412552a597d6a5137373e5877cb7"},
   "retry": {:hex, :retry, "0.18.0", "dc58ebe22c95aa00bc2459f9e0c5400e6005541cf8539925af0aa027dc860543", [:mix], [], "hexpm", "9483959cc7bf69c9e576d9dfb2b678b71c045d3e6f39ab7c9aa1489df4492d73"},
-  "screens_config": {:git, "https://github.com/mbta/screens-config-lib.git", "7dbb2b9b3da0154ca9128c7c2a4ab30d18501290", [ref: "7dbb2b9b3da0154ca9128c7c2a4ab30d18501290"]},
+  "screens_config": {:git, "https://github.com/mbta/screens-config-lib.git", "3e781e39e4dd8bd63a05825534847347e1cbffa9", [ref: "3e781e39e4dd8bd63a05825534847347e1cbffa9"]},
   "sentry": {:hex, :sentry, "10.7.1", "33392222d80ccff99c503f972998d2858b4c1e5aca2219a34269b68dacba8e7d", [:mix], [{:hackney, "~> 1.8", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.1", [hex: :jason, repo: "hexpm", optional: true]}, {:nimble_options, "~> 1.0", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:nimble_ownership, "~> 0.3.0 or ~> 1.0", [hex: :nimble_ownership, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.6", [hex: :phoenix, repo: "hexpm", optional: true]}, {:phoenix_live_view, "~> 0.20", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.6", [hex: :plug, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: true]}], "hexpm", "56291312397bf2b6afab6cf4f7aa1f27413b0eb2ceeb63b8aab2d7658aaea882"},
   "ssl_verify_fun": {:hex, :ssl_verify_fun, "1.1.7", "354c321cf377240c7b8716899e182ce4890c5938111a1296add3ec74cf1715df", [:make, :mix, :rebar3], [], "hexpm", "fe4c190e8f37401d30167c8c405eda19469f34577987c76dde613e838bbc67f8"},
   "stream_data": {:hex, :stream_data, "1.1.2", "05499eaec0443349ff877aaabc6e194e82bda6799b9ce6aaa1aadac15a9fdb4d", [:mix], [], "hexpm", "129558d2c77cbc1eb2f4747acbbea79e181a5da51108457000020a906813a1a9"},