feat: timepoints

Author: bwees

src/lib/components/TimepointAttribute.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import * as Dialog from '$lib/components/ui/dialog';
+  import { cn } from '$lib/utils.js';
+  import { OctagonPauseIcon } from '@lucide/svelte';
+
+  let { class: className }: { class?: string } = $props();
+</script>
+
+<Dialog.Root>
+  <Dialog.Trigger class={cn('text-muted-foreground', className)} aria-label="What is a time point?">
+    <OctagonPauseIcon class="size-6" />
+  </Dialog.Trigger>
+
+  <Dialog.Content>
+    <Dialog.Title>Time Point</Dialog.Title>
+    <Dialog.Description>
+      Buses will always stop at this location and wait until the scheduled departure time if they
+      are running early.
+    </Dialog.Description>
+  </Dialog.Content>
+</Dialog.Root>

src/lib/components/map/MapElements.svelte

@@ -6,7 +6,8 @@
     type MapCircleStyle,
   } from '$lib/components/ui/map/MapCircleLayer.svelte';
   import { useRoutes, useVehicles } from '$lib/data/app';
-  import { type Bus, type Location, type Route, type Stop } from '$lib/data/types';
+  import { isTimepoint, useTimepointsAPI } from '$lib/data/timepoints';
+  import { type Bus, type Direction, type Location, type Route, type Stop } from '$lib/data/types';
   import { mapManager } from '$lib/managers/map.manager.svelte';
   import { themeManager } from '$lib/managers/theme.manager.svelte';
   import { getRouteTint } from '$lib/utils/tints';
@@ -25,6 +26,7 @@
   const STOPS_ID = 'stops';
 
   const routes = useRoutes();
+  const timepoints = useTimepointsAPI();
   const busLocations = $derived(useVehicles(() => ({ route: mapManager.selectedRoute })));
 
   let userLocation: Location | null = $state(null);
@@ -83,24 +85,43 @@
     })),
   );
 
+  function isStopTimepoint(stop: Stop) {
+    const routeCode = mapManager.selectedRoute?.routeCode;
+    return !!routeCode && isTimepoint(timepoints.data ?? {}, routeCode, stop.id);
+  }
+
+  // timepoints render as square DOM markers instead of circles, so they are excluded here
   const stopCircles = $derived(
     stopsByDirection.flatMap(({ direction, stops }) =>
-      stops.map(
-        (stop): MapCircle => ({
-          id: `${direction.id}-${stop.id}`,
-          longitude: stop.location.longitude,
-          latitude: stop.location.latitude,
-        }),
-      ),
+      stops
+        .filter((stop) => !isStopTimepoint(stop))
+        .map(
+          (stop): MapCircle => ({
+            id: `${direction.id}-${stop.id}`,
+            longitude: stop.location.longitude,
+            latitude: stop.location.latitude,
+          }),
+        ),
     ),
   );
 
-  const stopCircleStyles = $derived.by(() => {
+  const timepointStops = $derived(
+    stopsByDirection.flatMap(({ direction, stops }) =>
+      stops.filter(isStopTimepoint).map((stop) => ({ direction, stop })),
+    ),
+  );
+
+  const stopColors = $derived.by(() => {
     const route = mapManager.selectedRoute;
-    if (!route) return {};
+    if (!route) return null;
 
     const color = getRouteTint(route, themeManager.theme);
-    const strokeColor = getLighterColor(color);
+    return { color, strokeColor: getLighterColor(color) };
+  });
+
+  const stopCircleStyles = $derived.by(() => {
+    if (!stopColors) return {};
+    const { color, strokeColor } = stopColors;
 
     return Object.fromEntries(
       stopsByDirection.flatMap(({ direction, stops }) => {
@@ -113,6 +134,11 @@
     );
   });
 
+  function selectStop(stopId: string) {
+    markStopTapped();
+    mapManager.selected = stopId === selectedStop?.stop.id ? null : { type: 'stop', id: stopId };
+  }
+
   const stopsByCircleId = $derived(
     new Map<string, Stop>(
       stopsByDirection.flatMap(({ direction, stops }) =>
@@ -164,6 +190,26 @@
   {/each}
 {/snippet}
 
+{#snippet timepointMarker(direction: Direction, stop: Stop)}
+  <MapMarker
+    longitude={stop.location.longitude}
+    latitude={stop.location.latitude}
+    zIndex={10}
+    onclick={() => selectStop(stop.id)}
+  >
+    <MarkerContent class="flex size-7 items-center justify-center">
+      <div
+        class="size-3 rounded-[2px] border-2"
+        style="background-color: {stopColors?.color}; border-color: {stopColors?.strokeColor}; opacity: {isDirectionSelected(
+          direction.id,
+        )
+          ? 1
+          : 0.5}"
+      ></div>
+    </MarkerContent>
+  </MapMarker>
+{/snippet}
+
 {#snippet busMarker(bus: Bus)}
   <MapMarker
     longitude={bus.location.longitude}
@@ -186,12 +232,18 @@
   styles={stopCircleStyles}
   onclick={(id) => {
     const stopId = (id && stopsByCircleId.get(id)?.id) || null;
-    if (stopId) markStopTapped();
-    mapManager.selected =
-      !stopId || stopId === selectedStop?.stop.id ? null : { type: 'stop', id: stopId };
+    if (!stopId) {
+      mapManager.selected = null;
+      return;
+    }
+    selectStop(stopId);
   }}
 />
 
+{#each timepointStops as { direction, stop } (`${direction.id}-${stop.id}`)}
+  {@render timepointMarker(direction, stop)}
+{/each}
+
 {#each busLocations?.data ?? [] as bus (bus.id)}
   {@render busMarker(bus)}
 {/each}

src/lib/components/map/popup/StopPopup.svelte

@@ -41,7 +41,7 @@
     </div>
 
     <div class="flex items-center gap-2">
-      {#each amenities ?? [] as amenity}
+      {#each (amenities ?? []).filter((amenity) => amenity !== Amenity.TIME_POINT) as amenity}
         {@const AmenityIcon = Amenity.getIcon(amenity)}
         <AmenityIcon class="size-6 text-muted-foreground" />
       {/each}

src/lib/components/ui/dialog/dialog-content.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+  import { XIcon } from '@lucide/svelte';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import DialogOverlay from './dialog-overlay.svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    showCloseButton = true,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+    children?: Snippet;
+    showCloseButton?: boolean;
+  } = $props();
+</script>
+
+<DialogPrimitive.Portal>
+  <DialogOverlay />
+  <DialogPrimitive.Content
+    bind:ref
+    data-slot="dialog-content"
+    class={cn(
+      'fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] max-w-sm -translate-x-1/2 -translate-y-1/2 flex-col gap-2 rounded-xl border bg-popover p-5 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+      className,
+    )}
+    {...restProps}
+  >
+    {@render children?.()}
+
+    {#if showCloseButton}
+      <DialogPrimitive.Close
+        class="absolute end-3 top-3 rounded-md p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+      >
+        <XIcon class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    {/if}
+  </DialogPrimitive.Content>
+</DialogPrimitive.Portal>

src/lib/components/ui/dialog/dialog-description.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn } from '$lib/utils.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+  bind:ref
+  data-slot="dialog-description"
+  class={cn('text-sm text-muted-foreground', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</DialogPrimitive.Description>

src/lib/components/ui/dialog/dialog-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<DialogPrimitive.OverlayProps> = $props();
+</script>
+
+<DialogPrimitive.Overlay
+  bind:ref
+  data-slot="dialog-overlay"
+  class={cn(
+    'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+    className,
+  )}
+  {...restProps}
+/>

src/lib/components/ui/dialog/dialog-title.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn } from '$lib/utils.js';
+  import { Dialog as DialogPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+  bind:ref
+  data-slot="dialog-title"
+  class={cn('pe-6 text-base font-semibold', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</DialogPrimitive.Title>

src/lib/components/ui/dialog/index.ts

@@ -0,0 +1,27 @@
+import { Dialog as DialogPrimitive } from 'bits-ui';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Title from './dialog-title.svelte';
+
+const Root = DialogPrimitive.Root;
+const Trigger = DialogPrimitive.Trigger;
+const Close = DialogPrimitive.Close;
+
+export {
+  Close,
+  Content,
+  Description,
+  Close as DialogClose,
+  Content as DialogContent,
+  Description as DialogDescription,
+  Overlay as DialogOverlay,
+  Title as DialogTitle,
+  Trigger as DialogTrigger,
+  Overlay,
+  //
+  Root as Dialog,
+  Root,
+  Title,
+  Trigger,
+};

src/lib/data/structure/aggie_spirit.ts

@@ -11,6 +11,7 @@ import {
   type StopSchedule,
   type TimeEstimate,
 } from '$lib/data/types';
+import { isTimepoint, useTimepointsAPI } from '$lib/data/timepoints';
 import { findBoundingBox } from '$lib/utils/geo';
 import { compact, keyBy } from 'lodash-es';
 import moment from 'moment';
@@ -260,6 +261,8 @@ export const useASStopAmenities = (
     return { routeKey: route.id, directionKey: direction.id, stopCode: stop.id };
   });
 
+  const apiTimepointsQuery = useTimepointsAPI();
+
   const query = createDependencyQuery<Amenity[]>(() => ({
     queryKey: [
       ASQueryKey.STOP_AMENITIES,
@@ -269,9 +272,16 @@ export const useASStopAmenities = (
     ],
     queryFn: async () => {
       const stopEstimates = apiStopEstimateQuery.data!;
-      return Amenity.fromAPI(stopEstimates.amenities);
+      const { route, stop } = params();
+
+      return [
+        ...Amenity.fromAPI(stopEstimates.amenities),
+        ...(isTimepoint(apiTimepointsQuery.data!, route.routeCode, stop.id)
+          ? [Amenity.TIME_POINT]
+          : []),
+      ];
     },
-    dependents: [apiStopEstimateQuery],
+    dependents: [apiStopEstimateQuery, apiTimepointsQuery],
   }));
 
   return query;

src/lib/data/timepoints.ts

@@ -0,0 +1,38 @@
+import { createLoggingQuery } from '$lib/utils/queries';
+import moment from 'moment';
+import { z } from 'zod';
+
+const TIMEPOINTS_URL = 'https://auth.maroonrides.app/timepoints.json';
+
+export const TimepointStopsSchema = z.record(z.string(), z.array(z.string()));
+export type TimepointStops = z.infer<typeof TimepointStopsSchema>;
+
+export const useTimepointsAPI = () => {
+  const query = createLoggingQuery<TimepointStops>(() => ({
+    label: 'MRTimepoints',
+    queryKey: ['MRTimepoints'],
+    // never rejects: the route list depends on this, so a missing or malformed
+    // file has to degrade to "no timepoints" rather than block every route
+    queryFn: async () => {
+      try {
+        const res = await fetch(TIMEPOINTS_URL);
+        if (!res.ok) return {};
+
+        return TimepointStopsSchema.parse(await res.json());
+      } catch {
+        return {};
+      }
+    },
+    staleTime: moment.duration(1, 'day'),
+  }));
+
+  return query;
+};
+
+export function isTimepoint(
+  timepoints: TimepointStops,
+  routeCode: string,
+  stopId: string,
+): boolean {
+  return timepoints[routeCode]?.includes(stopId) ?? false;
+}