Merge branch 'main' into hp/editable-directions-in-state-machine

.gitignore

@@ -20,42 +20,38 @@ erl_crash.dump
 # Also ignore archive artifacts (built via "mix archive.build").
 *.ez
 
+# Temporary files, for example, from tests.
+/tmp/
+
 # Ignore package tarball (built via "mix hex.build").
 skate-*.tar
 
-# Ignore Storybook Logs
-build-storybook.log
+# Ignore assets that are produced by build tools.
+/priv/static/
+## New Phoenix Assets Location
+/priv/static/assets
 
-# Ignore Chromatic Logs
-chromatic.log
+# Ignore digested assets cache.
+/priv/static/cache_manifest.json
 
-# If NPM crashes, it generates a log, let's ignore it too.
+# In case you use Node.js/npm, you want to ignore these.
 npm-debug.log
-
-# The directory NPM downloads your dependencies sources to.
-node_modules
-
-# Since we are building assets from assets/,
-# we ignore priv/static. You may want to comment
-# this depending on your deployment strategy.
-/priv/static/
-
-# Files matching config/*.secret.exs pattern contain sensitive
-# data and you should not commit them into version control.
-#
-# Alternatively, you may comment the line below and commit the
-# secrets files as long as you replace their contents by environment
-# variables.
-/config/*.secret.exs
+/assets/node_modules/
 
 # Self signed certificates to access Skate over HTTPS when developing
 /priv/cert/selfsigned*.pem
 
+# Ignore Storybook Logs
+build-storybook.log
+assets/build-storybook.log
+
+# Ignore Chromatic Logs
+chromatic.log
+
 # dev and test cache files for faster loading
 *.terms
 
 # User ENV variables
 .envrc.private
 
 .DS_Store
-assets/build-storybook.log

assets/css/nav/_top_nav.scss

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.75rem 1.5rem;
+  padding: 0;
 
   background-color: $color-gray-50;
 
@@ -14,7 +14,6 @@
 
 .c-top-nav__logo {
   width: 2.5rem;
-  height: 1.5rem;
 
   svg {
     width: 100%;
@@ -23,14 +22,26 @@
 }
 
 .c-top-nav__logo-icon {
+  &:not(.c-top-nav__logo-halloween-icon) {
+    margin-left: 1.5rem;
+  }
   svg {
     fill: $color-eggplant-900;
   }
 }
 
+.c-top-nav__logo-halloween-icon {
+  background-color: #f4b347;
+  padding: 0 0.875rem;
+  @include media-breakpoint-up(lg) {
+    margin-left: 1.5rem;
+  }
+}
+
 .c-top-nav__right-items {
   display: flex;
   align-items: center;
+  padding-right: 1.5rem;
 
   :not(:last-child) {
     padding-right: 1.5rem;

assets/src/components/detours/activateDetourModal.tsx

@@ -66,7 +66,11 @@ const SurroundingModal = ({
         Cancel
       </Button>
       {onActivate ? (
-        <Button variant="primary" onClick={onActivate}>
+        <Button
+          variant="primary"
+          onClick={onActivate}
+          data-fs-element="Confirm Activate Detour"
+        >
           Activate detour
         </Button>
       ) : (

assets/src/components/detours/deactivateDetourModal.tsx

@@ -48,6 +48,7 @@ export const DeactivateDetourModal = ({
           variant="ui-alert"
           onClick={onDeactivate}
           className="text-white"
+          data-fs-element="Confirm Return to Regular Route"
         >
           Return to regular route
         </Button>

assets/src/components/detours/detourMap.tsx

@@ -179,6 +179,7 @@ export const DetourMap = ({
             onClick={onUndo}
             size="lg"
             title="Undo"
+            data-fs-element="Undo"
           >
             <ArrowLeftSquare />
           </MapButton>
@@ -189,6 +190,7 @@ export const DetourMap = ({
             onClick={onClear}
             size="lg"
             title="Clear"
+            data-fs-element="Clear"
           >
             <XSquare />
           </MapButton>

assets/src/components/detours/detourPanelComponents.tsx

@@ -99,6 +99,7 @@ export const CopyButton = ({ detourText }: { detourText: string }) => (
       variant="outline-primary"
       size="sm"
       onClick={() => window.navigator.clipboard?.writeText(detourText)}
+      data-fs-element="Copy Details"
     >
       <Files />
       Copy details

assets/src/components/detours/detourPanels/activeDetourPanel.tsx

@@ -110,6 +110,7 @@ export const ActiveDetourPanel = ({
               variant="ui-alert"
               className="flex-grow-1 m-3 icon-link text-light justify-content-center"
               onClick={onOpenDeactivateModal}
+              data-fs-element="Return to Regular Route"
             >
               <StopCircle />
               Return to regular route

assets/src/components/detours/detourPanels/detourFinishedPanel.tsx

@@ -55,6 +55,7 @@ export const DetourFinishedPanel = ({
           style={{
             resize: "none",
           }}
+          data-fs-element="Detour Text"
         />
 
         {connectionPoints && (
@@ -68,6 +69,7 @@ export const DetourFinishedPanel = ({
           <Button
             className="m-3 flex-grow-1 icon-link justify-content-center"
             onClick={onActivateDetour}
+            data-fs-element="Begin Activate Detour"
           >
             <BsIcons.Power />
             Start Detour

assets/src/components/detours/detourPanels/detourRouteSelectionPanel.tsx

@@ -146,6 +146,7 @@ export const DetourRouteSelectionPanel = ({
           <Button
             className="m-3 flex-grow-1 icon-link justify-content-center"
             onClick={onConfirm}
+            data-fs-element="Start Drawing"
           >
             <Brush />
             Start drawing detour

assets/src/components/detours/detourPanels/drawDetourPanel.tsx

@@ -90,6 +90,7 @@ export const DrawDetourPanel = ({
         <Button
           className="flex-grow-1 m-3 icon-link justify-content-center"
           onClick={onReviewDetour}
+          data-fs-element="Review Drawn Detour"
         >
           <CardChecklist />
           Review

assets/src/components/detours/diversionPage.tsx

@@ -405,6 +405,7 @@ export const DiversionPage = ({
   return (
     <>
       <article
+        data-fs-element="Detours"
         className={`l-diversion-page l-diversion-page--${displayType} h-100 border-box inherit-box`}
       >
         <header

assets/src/components/nav/topNav.tsx

@@ -8,6 +8,7 @@ import { LoggedInAs } from "../loggedInAs"
 import getEmailAddress from "../../userEmailAddress"
 import { CircleButton } from "../circleButton"
 import { UserAvatar } from "../userAvatar"
+import { todayIsHalloween } from "../../helpers/date"
 
 const TopNav = (): JSX.Element => {
   const email = getEmailAddress()
@@ -17,7 +18,11 @@ const TopNav = (): JSX.Element => {
   return (
     <div className="c-top-nav">
       <Link className="c-top-nav__logo" to="/" title="Skate">
-        <LogoIcon className="c-top-nav__logo-icon" />
+        {todayIsHalloween() ? (
+          <HalloweenIcon className="c-top-nav__logo-icon c-top-nav__logo-halloween-icon" />
+        ) : (
+          <LogoIcon className="c-top-nav__logo-icon" />
+        )}
       </Link>
       <ul className="c-top-nav__right-items">
         <li>
@@ -69,4 +74,20 @@ const TopNav = (): JSX.Element => {
   )
 }
 
+export const HalloweenIcon = (props: BsIcon.SvgProps) => (
+  <svg
+    viewBox="0 -25 55.49 72"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden
+    {...props}
+  >
+    <path d="m6.74 17.1a42.17 42.17 0 0 0 18.33 3.31 2 2 0 0 1 2 2v1.59a2 2 0 0 0 1.93 2h3.83a2 2 0 0 0 1.93-2v-2a2 2 0 0 1 1.56-2 75.22 75.22 0 0 0 12.55-3.47 2 2 0 0 1 2.13 3.19c-3.66 4.47-10.74 9.71-24 9.71-12 0-18.82-4.83-22.46-9.18a2 2 0 0 1 2.2-3.15z" />
+    <g fillRule="evenodd">
+      <path d="m19.37 11a1.71 1.71 0 0 1 -1.68 1.41h-12.16a1.68 1.68 0 0 1 -1.2-.5 1.67 1.67 0 0 1 -.5-1.2 1.73 1.73 0 0 1 .31-1l6.08-8.6a1.68 1.68 0 0 1 1.1-.69 1.66 1.66 0 0 1 1.27.28 1.6 1.6 0 0 1 .41.41l6.08 8.6a1.71 1.71 0 0 1 .29 1.29z" />
+      <path d="m51.37 11a1.71 1.71 0 0 1 -1.68 1.41h-12.16a1.68 1.68 0 0 1 -1.2-.5 1.67 1.67 0 0 1 -.5-1.2 1.73 1.73 0 0 1 .31-1l6.08-8.6a1.68 1.68 0 0 1 1.1-.69 1.66 1.66 0 0 1 1.27.28 1.6 1.6 0 0 1 .41.41l6.08 8.6a1.71 1.71 0 0 1 .29 1.29z" />
+      <path d="m31 16.84a.7.7 0 0 1 -.29.46.69.69 0 0 1 -.41.13h-5.09a.71.71 0 0 1 -.5-.21.68.68 0 0 1 -.21-.5.76.76 0 0 1 .13-.41l2.54-3.58a.7.7 0 0 1 .45-.29.72.72 0 0 1 .53.12.69.69 0 0 1 .17.17l2.54 3.58a.72.72 0 0 1 .14.53z" />
+    </g>
+  </svg>
+)
+
 export default TopNav

assets/src/components/vehicleIcon.tsx

@@ -2,14 +2,19 @@ import React, { ReactElement } from "react"
 import Tippy from "@tippyjs/react"
 import "tippy.js/dist/tippy.css"
 import { joinClasses } from "../helpers/dom"
-import { DrawnStatus, statusClasses } from "../models/vehicleStatus"
+import {
+  DrawnStatus,
+  OnTimeStatus,
+  statusClasses,
+} from "../models/vehicleStatus"
 import { AlertIconStyle, IconAlertCircleSvgNode } from "./iconAlertCircle"
 import { runIdToLabel } from "../helpers/vehicleLabel"
 import { isGhost } from "../models/vehicle"
 import { Ghost, RunId, Vehicle, VehicleInScheduledService } from "../realtime"
 import { BlockId, ViaVariant } from "../schedule.d"
 import { scheduleAdherenceLabelString } from "./propertiesPanel/header"
 import { UserSettings } from "../userSettings"
+import { todayIsHalloween } from "../helpers/date"
 import {
   directionOnLadder,
   getLadderDirectionForRoute,
@@ -279,6 +284,8 @@ export const VehicleIconSvgNode = React.memo(
         ) : null}
         {status === "ghost" ? (
           <GhostIcon size={size} variant={variant} />
+        ) : isBat(status) ? (
+          <Bat size={size} />
         ) : (
           <Triangle size={size} orientation={orientation} />
         )}
@@ -320,6 +327,32 @@ const Triangle = React.memo(
   }
 )
 
+const isBat = (
+  status: OnTimeStatus | "off-course" | "ghost" | "plain" | "logged-out"
+) => status === "off-course" && todayIsHalloween()
+
+const Bat = ({ size }: { size: Size }) => {
+  const scale = scaleBatForSize(size)
+  return (
+    <path
+      d="m33.19 37.76a1.53 1.53 0 0 0 1.11.31 1.48 1.48 0 0 0 1-.58c1.21-1.62 2.54-2.42 3.83-2.41 2.51.06 5 2.94 5.78 4.05a1.5 1.5 0 0 0 1.55.61 1.47 1.47 0 0 0 1.12-1.23c3.27-23.76-13.42-30.31-13.58-30.37a1.47 1.47 0 0 0 -2 1.54c.58 4.94-.09 8.32-2 9.8a3.11 3.11 0 0 1 -.54.35v-5a1.47 1.47 0 1 0 -2.93 0v4.17a4.38 4.38 0 0 0 -4.81 0v-4.2a1.47 1.47 0 1 0 -2.93 0v5.2a3.79 3.79 0 0 1 -.91-.53c-1.87-1.48-2.54-4.86-2-9.8a1.47 1.47 0 0 0 -2-1.54c-.04.07-16.73 6.62-13.45 30.38a1.47 1.47 0 0 0 1.12 1.23 1.5 1.5 0 0 0 1.55-.61c.75-1.11 3.25-4 5.77-4.05 1.35 0 2.63.78 3.84 2.41a1.47 1.47 0 0 0 2.1.27s4.82-2.91 8 1.61a1.43 1.43 0 0 0 2.39-.12c1.33-2.25 3.9-4.65 7.99-1.49z"
+      // Move the center to 0,0
+      transform={`scale(${scale}) translate(-24,-28)`}
+    />
+  )
+}
+
+const scaleBatForSize = (size: Size): number => {
+  switch (size) {
+    case Size.Small:
+      return 0.38
+    case Size.Medium:
+      return 0.5
+    case Size.Large:
+      return 1
+  }
+}
+
 const GhostIcon = React.memo(
   ({ size, variant }: { size: Size; variant?: string }) => {
     // No orientation argument, because the ghost icon is always right side up.
@@ -437,18 +470,23 @@ const Variant = React.memo(
     status: DrawnStatus
   }) => {
     const scale = scaleForSize(size)
+    const bat = isBat(status)
+    const isSideways =
+      orientation === Orientation.Left || orientation === Orientation.Right
 
     // space between the triangle base and the variant letter
     let margin = 0
     switch (size) {
       case Size.Small:
-        margin = status === "ghost" ? 4 : 2
+        margin = status === "ghost" || bat ? 4 : 2
+        if (bat && isSideways) margin++
         break
       case Size.Medium:
-        margin = status === "ghost" ? 8 : 4
+        margin = status === "ghost" || bat ? 8 : 4
         break
       case Size.Large:
-        margin = status === "ghost" ? 12 : 6
+        margin = status === "ghost" || bat ? 12 : 6
+        if (bat && isSideways) margin += 2
         break
     }
 

assets/src/helpers/date.ts

@@ -0,0 +1,2 @@
+export const todayIsHalloween = (today: Date = new Date()): boolean =>
+  today.getMonth() === 9 && today.getDate() === 31

assets/src/hooks/useSwings.ts

@@ -12,9 +12,9 @@ const useSwings = (): Swing[] | null => {
     allOpenRouteIds(routeTabs)
   )
 
-  const newRouteIds = allOpenRouteIds(routeTabs)
+  const newRouteIds = routeTabs.find((v) => v.isCurrentTab)?.selectedRouteIds
 
-  if (!equalByElements(routeIds, newRouteIds)) {
+  if (newRouteIds && !equalByElements(routeIds, newRouteIds)) {
     setRouteIds(newRouteIds)
   }