Merge branch 'master' into prefare-alerts

assets/css/triptych_v2.scss

@@ -0,0 +1,19 @@
+@import "colors";
+@import "fonts/inter_font_face";
+@import "fonts/helvetica_font_face";
+@import "v2/common/widget";
+
+@import "v2/triptych/screen_container";
+
+@import "v2/triptych/screen/normal";
+
+@import "v2/triptych/body/normal";
+
+@import "v2/lcd_common_styles/page_load_no_data";
+@import "v2/lcd_common_styles/no_data";
+
+@import "v2/placeholder";
+
+body {
+  margin: 0px;
+}

assets/css/v2/triptych/body/normal.scss

@@ -0,0 +1,9 @@
+.body-normal__main-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 1080px;
+  height: 1648px;
+  z-index: 1;
+  overflow: hidden;
+}

assets/css/v2/triptych/screen/normal.scss

@@ -0,0 +1,24 @@
+.screen-normal {
+  width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+}
+
+.screen-normal__header {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 1080px;
+  height: 272px;
+  overflow: hidden;
+}
+
+.screen-normal__body {
+  position: absolute;
+  top: 272px;
+  left: 0px;
+  width: 1080px;
+  height: 1648px;
+  overflow: hidden;
+}

assets/css/v2/triptych/screen_container.scss

@@ -0,0 +1,7 @@
+.screen-container {
+  position: relative;
+  width: 1080px;
+  height: 1920px;
+  margin: 0px auto;
+  overflow: hidden;
+}

assets/src/apps/v2/triptych.tsx

@@ -0,0 +1,80 @@
+declare function require(name: string): string;
+// tslint:disable-next-line
+require("../../../css/triptych_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 {
+  ResponseMapper,
+  ResponseMapperContext,
+  LOADING_LAYOUT,
+} from "Components/v2/screen_container";
+import { MappingContext } from "Components/v2/widget";
+
+import NormalScreen from "Components/v2/bus_shelter/normal_screen";
+import NormalBody from "Components/v2/bus_shelter/normal_body";
+
+import Placeholder from "Components/v2/placeholder";
+
+import SimulationScreenPage from "Components/v2/simulation_screen_page";
+import PageLoadNoData from "Components/v2/lcd/page_load_no_data";
+import NoData from "Components/v2/lcd/no_data";
+
+const TYPE_TO_COMPONENT = {
+  screen_normal: NormalScreen,
+  body_normal: NormalBody,
+  placeholder: Placeholder,
+  page_load_no_data: PageLoadNoData,
+  no_data: NoData,
+};
+
+const DISABLED_LAYOUT = {
+  full_screen: {
+    type: "no_data",
+    show_alternatives: true,
+  },
+  type: "screen_takeover",
+};
+
+const FAILURE_LAYOUT = DISABLED_LAYOUT;
+
+const responseMapper: ResponseMapper = (apiResponse) => {
+  switch (apiResponse.state) {
+    case "success":
+    case "simulation_success":
+      return apiResponse.data;
+    case "disabled":
+      return DISABLED_LAYOUT;
+    case "failure":
+      return FAILURE_LAYOUT;
+    case "loading":
+      return LOADING_LAYOUT;
+  }
+};
+
+const App = (): JSX.Element => {
+  return (
+    <Router>
+      <Switch>
+        <Route exact path="/v2/screen/:id/simulation">
+          <MappingContext.Provider value={TYPE_TO_COMPONENT}>
+            <ResponseMapperContext.Provider value={responseMapper}>
+              <SimulationScreenPage />
+            </ResponseMapperContext.Provider>
+          </MappingContext.Provider>
+        </Route>
+        <Route path="/v2/screen/:id">
+          <MappingContext.Provider value={TYPE_TO_COMPONENT}>
+            <ResponseMapperContext.Provider value={responseMapper}>
+              <ScreenPage />
+            </ResponseMapperContext.Provider>
+          </MappingContext.Provider>
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById("app"));

assets/src/components/admin/admin_add_modal.tsx

@@ -24,6 +24,7 @@ const fields = [
       "solari_large",
       "solari_large_v2",
       "pre_fare_v2",
+      "triptych_v2",
     ]),
   },
   {
@@ -88,6 +89,11 @@ const defaultAppParamsByAppId = {
       stop_name: "",
     },
   },
+  triptych_v2: {
+    header: {
+      stop_name: "",
+    },
+  },
 };
 
 const initialFormValues = _.fromPairs(

assets/src/components/admin/admin_tables.tsx

@@ -757,6 +757,14 @@ const SolariLargeV2ScreensTable = (): JSX.Element => {
   return <AdminTable columns={v2SolariColumns} dataFilter={dataFilter} />;
 };
 
+const TriptychV2ScreensTable = (): JSX.Element => {
+  const dataFilter = ({ app_id }) => {
+    return app_id === "triptych_v2";
+  };
+
+  return <AdminTable columns={[...v2Columns]} dataFilter={dataFilter} />;
+};
+
 export {
   AllScreensTable,
   BusScreensTable,
@@ -772,4 +780,5 @@ export {
   SolariLargeV2ScreensTable,
   BusShelterV2ScreensTable,
   PreFareV2ScreensTable,
+  TriptychV2ScreensTable,
 };

assets/webpack.config.js

@@ -30,7 +30,8 @@ module.exports = (env, options) => ({
     solari_large_v2: "./src/apps/v2/solari_large.tsx",
     dup_v2: "./src/apps/v2/dup.tsx",
     bus_shelter_v2: "./src/apps/v2/bus_shelter.tsx",
-    pre_fare_v2: "./src/apps/v2/pre_fare.tsx"
+    pre_fare_v2: "./src/apps/v2/pre_fare.tsx",
+    triptych_v2: "./src/apps/v2/triptych.tsx"
   },
   output: {
     filename: "[name].js",