morganney · morganney · Oct 17, 2023 · Oct 17, 2023
diff --git a/packages/ui/index.html b/packages/ui/index.html
@@ -2,6 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta
+      name="description"
+      content="Maps to find your next bus in real-time, schedule alerts, view schedules and more." />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

diff --git a/packages/ui/src/components/formItem.tsx b/packages/ui/src/components/formItem.tsx
@@ -9,6 +9,7 @@ interface LabelProps {
   grow: number
   gap: string
   justifyContent: string
+  alignItems: string
   fontSize: string
   fontWeight: FontWeight
 }
@@ -25,12 +26,12 @@ const getFlexDirection = ({ direction }: LabelProps) => {
       return 'column'
   }
 }
-const getAlignItems = ({ direction }: LabelProps) => {
-  if (direction === 'vertical') {
-    return 'normal'
+const getAlignItems = ({ alignItems }: LabelProps) => {
+  if (alignItems) {
+    return alignItems
   }
 
-  return 'center'
+  return 'normal'
 }
 const getGap = ({ direction, gap }: LabelProps) => {
   if (gap) {
@@ -89,6 +90,7 @@ interface FormItemProps {
   gap?: string
   grow?: number
   justifyContent?: string
+  alignItems?: string
   fontWeight?: FontWeight
   fontSize?: string
 }
@@ -100,6 +102,7 @@ const FormItem: FC<FormItemProps> = ({
   gap = '4px',
   grow = 0,
   justifyContent = 'normal',
+  alignItems = 'normal',
   fontWeight = 'bold',
   fontSize = '14px'
 }) => {
@@ -109,6 +112,7 @@ const FormItem: FC<FormItemProps> = ({
       gap={gap}
       grow={grow}
       justifyContent={justifyContent}
+      alignItems={alignItems}
       fontWeight={fontWeight}
       fontSize={fontSize}>
       <span>{label ?? ''}</span>

diff --git a/packages/ui/src/components/settings/vehicle.tsx b/packages/ui/src/components/settings/vehicle.tsx
@@ -39,6 +39,12 @@ const VehicleSettings: FC = () => {
       value: !vehicle.markPredictedVehicles
     })
   }, [vehicle])
+  const onToggleHideOtherDirections = useCallback(() => {
+    vehicle.dispatch({
+      type: 'hideOtherDirections',
+      value: !vehicle.hideOtherDirections
+    })
+  }, [vehicle])
   const onChangeSpeedUnit = useCallback(
     (evt: ChangeEvent<HTMLInputElement>) => {
       vehicle.dispatch({
@@ -64,23 +70,33 @@ const VehicleSettings: FC = () => {
         label="Visible"
         direction="horizontal-rev"
         justifyContent="flex-end"
-        fontWeight="normal"
-        grow={0}>
+        fontWeight="normal">
         <input type="checkbox" checked={vehicle.visible} onChange={onChangeVisible} />
       </FormItem>
       <FormItem
         label="Color predicted"
         direction="horizontal-rev"
         justifyContent="flex-end"
-        fontWeight="normal"
-        grow={0}>
+        fontWeight="normal">
         <input
           type="checkbox"
           disabled={!vehicle.visible}
           checked={vehicle.markPredictedVehicles}
           onChange={onTogglePredictedVehicles}
         />
       </FormItem>
+      <FormItem
+        label="Hide other directions"
+        direction="horizontal-rev"
+        justifyContent="flex-end"
+        fontWeight="normal">
+        <input
+          type="checkbox"
+          disabled={!vehicle.visible}
+          checked={vehicle.hideOtherDirections}
+          onChange={onToggleHideOtherDirections}
+        />
+      </FormItem>
       <fieldset className="row">
         <legend>Speed units</legend>
         <FormItem label="kph" fontWeight="normal" direction="horizontal-rev">

diff --git a/packages/ui/src/contexts/settings/vehicle.tsx b/packages/ui/src/contexts/settings/vehicle.tsx
@@ -5,6 +5,7 @@ import type { FC, ReactNode, Dispatch } from 'react'
 type SpeedUnit = 'kph' | 'mph'
 interface VehicleSettingsState {
   visible: boolean
+  hideOtherDirections: boolean
   markPredictedVehicles: boolean
   speedUnit: SpeedUnit
   dispatch: Dispatch<VehicleSettingsAction>
@@ -21,19 +22,30 @@ interface VisibileChanged {
   type: 'visibile'
   value: boolean
 }
-type VehicleSettingsAction = VisibileChanged | SpeedUnitChanged | MarkPredictedVehicles
+interface HideOtherDirectionsChanged {
+  type: 'hideOtherDirections'
+  value: boolean
+}
+type VehicleSettingsAction =
+  | VisibileChanged
+  | SpeedUnitChanged
+  | MarkPredictedVehicles
+  | HideOtherDirectionsChanged
 
 const defaultState: VehicleSettingsState = {
   dispatch: () => {},
   speedUnit: 'kph',
   visible: true,
+  hideOtherDirections: false,
   markPredictedVehicles: true
 }
 const VehicleSettings = createContext<VehicleSettingsState>(defaultState)
 const reducer = (state: VehicleSettingsState, action: VehicleSettingsAction) => {
   switch (action.type) {
     case 'visibile':
       return { ...state, visible: action.value }
+    case 'hideOtherDirections':
+      return { ...state, hideOtherDirections: action.value }
     case 'speedUnit':
       return { ...state, speedUnit: action.value }
     case 'markPredictedVehicles':

diff --git a/packages/ui/src/global.css b/packages/ui/src/global.css
@@ -122,6 +122,9 @@ aside.collapsed {
   clip-path: polygon(0% 50%, 100% 35%, 100% 65%);
   transform: rotate(-45deg);
 }
+.busmap-vehicle.hidden {
+  display: none;
+}
 .busmap-vehicle div {
   display: flex;
   align-items: center;

diff --git a/packages/ui/src/hooks/common.ts b/packages/ui/src/hooks/common.ts
@@ -4,36 +4,51 @@ import type { MarkerOptions, LatLng } from 'leaflet'
 import type { Vehicle } from '../types.js'
 import type { SpeedUnit } from '../contexts/settings/vehicle.js'
 
+interface VehicleMarkerConfig {
+  vehicle: Vehicle
+  speedUnit: SpeedUnit
+  hidden: boolean
+}
+
 class VehicleMarker extends Marker {
-  #vehicle: Vehicle
-  #speedUnit: SpeedUnit
-
-  constructor(
-    latlng: LatLng,
-    vehicle: Vehicle,
-    speedUnit: SpeedUnit,
-    options?: MarkerOptions
-  ) {
+  #config: VehicleMarkerConfig
+
+  constructor(latlng: LatLng, config: VehicleMarkerConfig, options?: MarkerOptions) {
     super(latlng, options)
 
-    this.#vehicle = vehicle
-    this.#speedUnit = speedUnit
+    this.#config = config
+  }
+
+  set config(value: VehicleMarkerConfig) {
+    this.#config = value
+  }
+
+  get config() {
+    return this.#config
   }
 
   get vehicle() {
-    return this.#vehicle
+    return this.#config.vehicle
   }
 
   set vehicle(value: Vehicle) {
-    this.#vehicle = value
+    this.#config.vehicle = value
   }
 
   get speedUnit() {
-    return this.#speedUnit
+    return this.#config.speedUnit
   }
 
   set speedUnit(value: SpeedUnit) {
-    this.#speedUnit = value
+    this.#config.speedUnit = value
+  }
+
+  set hidden(value: boolean) {
+    this.#config.hidden = value
+  }
+
+  get hidden() {
+    return this.#config.hidden
   }
 }
 

diff --git a/packages/ui/src/hooks/useVehiclesLayer.ts b/packages/ui/src/hooks/useVehiclesLayer.ts
@@ -101,8 +101,13 @@ const assignDynamicStyles = ({
      * setIcon(), so as not to lose any previously applied values.
      */
 
-    divIcon.classList.remove(...quadrants)
+    divIcon.classList.remove(...quadrants, 'hidden')
     divIcon.classList.add(quadrant)
+
+    if (marker.hidden) {
+      divIcon.classList.add('hidden')
+    }
+
     carNode.style.color = vehicle.predictable ? route.textColor : 'white'
     carNode.style.background = vehicle.predictable
       ? route.color
@@ -170,8 +175,9 @@ const getVehiclePopupContent = (marker: VehicleMarker, route: Route) => {
 }
 const useVehiclesLayer = ({ vehiclesLayer }: UseVehiclesLayer) => {
   const vehicles = useVehicles()
-  const { route, predictions } = useGlobals()
-  const { visible, markPredictedVehicles, speedUnit } = useVehicleSettings()
+  const { route, direction, predictions } = useGlobals()
+  const { visible, hideOtherDirections, markPredictedVehicles, speedUnit } =
+    useVehicleSettings()
 
   const iconDimensions = useRef<Dimensions | null>(null)
   const preds = useRef(predictions?.length ? predictions[0].values.slice(0, 3) : [])
@@ -194,6 +200,12 @@ const useVehiclesLayer = ({ vehiclesLayer }: UseVehiclesLayer) => {
         const marker = markers.find(m => m.vehicle.id === vehicle.id)
 
         if (marker && iconDimensions.current) {
+          marker.vehicle = vehicle
+          marker.speedUnit = speedUnit
+          marker.hidden =
+            hideOtherDirections &&
+            Boolean(direction) &&
+            vehicle.directionId !== direction?.id
           assignDynamicStyles({
             route,
             marker,
@@ -202,8 +214,6 @@ const useVehiclesLayer = ({ vehiclesLayer }: UseVehiclesLayer) => {
             preds: preds.current,
             dimensions: iconDimensions.current
           })
-          marker.vehicle = vehicle
-          marker.speedUnit = speedUnit
           marker.getPopup()?.setContent(getVehiclePopupContent(marker, route))
           marker.setLatLng(L.latLng(vehicle.lat, vehicle.lon))
         } else {
@@ -217,8 +227,14 @@ const useVehiclesLayer = ({ vehiclesLayer }: UseVehiclesLayer) => {
           })
           const marker = new VehicleMarker(
             L.latLng(vehicle.lat, vehicle.lon),
-            vehicle,
-            speedUnit,
+            {
+              vehicle,
+              speedUnit,
+              hidden:
+                hideOtherDirections &&
+                Boolean(direction) &&
+                vehicle.directionId !== direction?.id
+            },
             {
               icon
             }
@@ -261,6 +277,7 @@ const useVehiclesLayer = ({ vehiclesLayer }: UseVehiclesLayer) => {
         }
       }
 
+      // Remove stale vehicle markers
       for (const m of markers) {
         const vehicle = vehicles.find(({ id }) => id === m.vehicle.id)
 
@@ -271,7 +288,16 @@ const useVehiclesLayer = ({ vehiclesLayer }: UseVehiclesLayer) => {
     } else {
       vehiclesLayer.clearLayers()
     }
-  }, [visible, vehicles, vehiclesLayer, route, markPredictedVehicles, speedUnit])
+  }, [
+    visible,
+    hideOtherDirections,
+    markPredictedVehicles,
+    speedUnit,
+    vehicles,
+    vehiclesLayer,
+    route,
+    direction
+  ])
 }
 
 export { useVehiclesLayer }