Merge branch 'main' into cm/handle-session-end

assets/css/dashboard/toast.scss

@@ -0,0 +1,52 @@
+.toast-container {
+  margin-bottom: 40px;
+
+  .toast {
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+
+    .btn-close {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &--warning {
+      background-color: $alert-yellow;
+    }
+
+    &--info {
+      background-color: $accessibility-blue;
+      color: white;
+    }
+
+    &__icon {
+      height: 24px;
+      width: 24px;
+      opacity: 60%;
+      flex-shrink: 0;
+    }
+
+    &__text {
+      padding-left: 8px;
+
+      ul {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  .toast-header {
+    .btn-close {
+      margin-right: 4px;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    border: none;
+    border-radius: 4px;
+  }
+}

assets/css/screen-detail.scss

@@ -1,6 +1,8 @@
 .screen-detail__inline-layout {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 4px;
 }
 
 .screen-detail__container {

assets/css/screen-simulation.scss

@@ -45,7 +45,8 @@
     width: 100%;
 
     &--busway_v2,
-    &--bus_shelter_v2 {
+    &--bus_shelter_v2,
+    &--elevator_v2 {
       height: 379px;
     }
 

assets/css/screenplay.scss

@@ -43,8 +43,8 @@ $form-feedback-invalid-color: $text-error;
 @import "sort-label.scss";
 @import "search-bar.scss";
 @import "dashboard/picker.scss";
-@import "dashboard/error-toast.scss";
 @import "error-modal.scss";
+@import "dashboard/toast.scss";
 
 html {
   font-size: 16px;

assets/css/variables.scss

@@ -67,3 +67,4 @@ $button-secondary-outline-active-bg: #d9d9d93d;
 $text-button-blue-hover-color: #c1e4ff14;
 $text-button-grey-hover-color: #f8f9fa14;
 $alert-yellow: #ffdd00;
+$accessibility-blue: #165c96;

assets/js/components/Dashboard/PaMessageForm/PaMessageForm.tsx

@@ -6,7 +6,7 @@ import SelectStationsAndZones from "./SelectStationsAndZones";
 import AssociateAlert from "./AssociateAlert";
 import { Alert, InformedEntity } from "Models/alert";
 import { usePlacesWithPaEss } from "Hooks/usePlacesWithPaEss";
-import ErrorToast from "Components/ErrorToast";
+import Toast from "Components/Toast";
 import { busRouteIdsAtPlaces, getRouteIdsForSign } from "../../../util";
 import fp from "lodash/fp";
 
@@ -217,8 +217,9 @@ const PaMessageForm = ({
           setEndWithEffectPeriod={setEndWithEffectPeriod}
         />
       )}
-      <ErrorToast
-        errorMessage={errorMessage}
+      <Toast
+        variant="warning"
+        message={errorMessage}
         errors={errors}
         onClose={() => {
           onErrorsChange([]);

assets/js/components/Dashboard/PlaceRow.tsx

@@ -31,6 +31,7 @@ const typeMap: Record<string, string> = {
   bus_eink_v2: "Bus E-Ink",
   solari: "Sectional",
   busway_v2: "Sectional",
+  elevator_v2: "Elevator",
 };
 
 const inlineMap = (place: Place, line: string) => {

assets/js/components/Dashboard/PlaceRowAccordion.tsx

@@ -15,19 +15,22 @@ import ScreenDetail from "Components/ScreenDetail";
 import { sortScreens } from "../../util";
 import { useUpdateAnimation } from "Hooks/useUpdateAnimation";
 import classNames from "classnames";
+import fp from "lodash/fp";
 
 type ScreenGroup = {
   screens: Screen[];
   isInline: boolean;
 };
 
 const groupScreens = (screens: Screen[]): ScreenGroup[] => {
+  const inlineScreenTypes = ["busway_v2", "solari", "elevator_v2"];
+
   const inlineScreens = screens.filter((screen) =>
-    ["busway_v2", "solari"].includes(screen.type),
+    inlineScreenTypes.includes(screen.type),
   );
   const paEssScreens = screens.filter((screen) => screen.type === "pa_ess");
   const otherScreens = screens.filter(
-    (screen) => !["busway_v2", "pa_ess", "solari"].includes(screen.type),
+    (screen) => ![...inlineScreenTypes, "pa_ess"].includes(screen.type),
   );
 
   const groups = otherScreens.map((screen) => ({
@@ -36,7 +39,14 @@ const groupScreens = (screens: Screen[]): ScreenGroup[] => {
   }));
 
   if (inlineScreens.length > 0) {
-    groups.push({ screens: inlineScreens, isInline: true });
+    const groupedInlineScreens: Screen[][] = fp.flow(
+      fp.groupBy((screen: Screen) => screen.type),
+      fp.map((screens) => screens),
+    )(inlineScreens);
+
+    groupedInlineScreens.forEach((screens) =>
+      groups.push({ screens: screens, isInline: true }),
+    );
   }
 
   if (paEssScreens.length > 0) {

assets/js/components/Dashboard/Toast.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { Toast as BSToast, ToastContainer } from "react-bootstrap";
+import {
+  CheckCircleFill,
+  ExclamationTriangleFill,
+} from "react-bootstrap-icons";
+import { classWithModifier } from "../../util";
+
+interface ToastProps {
+  variant: "warning" | "info";
+  message: string | null;
+  errors?: string[];
+  onClose?: () => void;
+}
+
+const Toast = ({ message, errors = [], onClose, variant }: ToastProps) => {
+  const getErrorMessageFromField = (error: string) => {
+    switch (error) {
+      case "sign_ids":
+        return "Add Stations & Zones";
+      case "visual_text":
+        return "Visual Text";
+      case "audio_text":
+        return "Phonetic Audio";
+      case "start_datetime":
+        return "Start date/time";
+      case "end_datetime":
+        return "End date/time";
+      default:
+        return "";
+    }
+  };
+
+  const Icon =
+    variant === "warning" ? ExclamationTriangleFill : CheckCircleFill;
+
+  return (
+    <ToastContainer position="bottom-center" className="toast-container">
+      <BSToast
+        show={message != null}
+        onClose={onClose}
+        delay={5000}
+        autohide={true}
+      >
+        <BSToast.Header className={classWithModifier("toast", variant)}>
+          {<Icon className="toast__icon" />}
+          <div className="toast__text">
+            {message}
+            {errors.length > 0 && (
+              <ul>
+                {errors.map((error, i) => {
+                  return <li key={i}>{getErrorMessageFromField(error)}</li>;
+                })}
+              </ul>
+            )}
+          </div>
+        </BSToast.Header>
+      </BSToast>
+    </ToastContainer>
+  );
+};
+
+export default Toast;

assets/js/constants/constants.ts

@@ -50,7 +50,7 @@ export const SCREEN_TYPES: { label: string; ids: string[] }[] = [
     label: "E-Ink: Green Line",
     ids: ["gl_eink_single", "gl_eink_double", "gl_eink_v2"],
   },
-  { label: "Elevator", ids: ["elevator"] },
+  { label: "Elevator", ids: ["elevator_v2"] },
   { label: "PA ESS", ids: ["pa_ess"] },
   { label: "Pre Fare Duo", ids: ["pre_fare_v2"] },
   { label: "Sectional", ids: ["busway_v2", "solari"] },

assets/js/util.ts

@@ -212,6 +212,7 @@ const screenTypeOrder = [
   "gl_eink_double",
   "gl_eink_v2",
   "pre_fare_v2",
+  "elevator_v2",
   "pa_ess",
 ];
 

assets/package.json

@@ -42,7 +42,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/date-fns": "^2.6.0",
     "@types/jest": "^29.5.13",
-    "@types/lodash": "^4.17.10",
+    "@types/lodash": "^4.17.12",
     "@types/phoenix": "^1.6.5",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",

config/config.exs

@@ -73,6 +73,11 @@ config :ueberauth, Ueberauth,
 
 config :elixir, :time_zone_database, Tzdata.TimeZoneDatabase
 
+config :screenplay, Oban,
+  engine: Oban.Engines.Basic,
+  queues: [default: 10],
+  repo: Screenplay.Repo
+
 import_config "outfront_takeover_tool_screens.exs"
 
 # Import environment specific config. This must remain at the bottom

config/dev.exs

@@ -86,7 +86,8 @@ config :screenplay,
   local_paess_labels_file_spec: {:priv, "paess_labels.json"},
   api_v3_key: System.get_env("API_V3_KEY"),
   github_api_client: Screenplay.GithubApi.FakeClient,
-  local_signs_json_path: "../realtime_signs/priv/signs.json"
+  local_signs_json_path: "../realtime_signs/priv/signs.json",
+  watts_client: Screenplay.Watts.FakeClient
 
 config :ueberauth, Ueberauth,
   providers: [