aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app
diff options
context:
space:
mode:
Diffstat (limited to 'src/frontend/app')
-rw-r--r--src/frontend/app/api/schema.ts14
-rw-r--r--src/frontend/app/components/StopMapModal.tsx286
-rw-r--r--src/frontend/app/components/arrivals/ArrivalCard.tsx231
-rw-r--r--src/frontend/app/components/arrivals/ArrivalList.tsx29
-rw-r--r--src/frontend/app/components/arrivals/ReducedArrivalCard.tsx198
-rw-r--r--src/frontend/app/routes/stops-$id.tsx174
6 files changed, 624 insertions, 308 deletions
diff --git a/src/frontend/app/api/schema.ts b/src/frontend/app/api/schema.ts
index bb1e96c..9cc5bd4 100644
--- a/src/frontend/app/api/schema.ts
+++ b/src/frontend/app/api/schema.ts
@@ -33,17 +33,30 @@ export const ShiftBadgeSchema = z.object({
shiftTrip: z.string(),
});
+export const PositionSchema = z.object({
+ latitude: z.number(),
+ longitude: z.number(),
+ orientationDegrees: z.number(),
+ shapeIndex: z.number(),
+});
+
export const ArrivalSchema = z.object({
+ tripId: z.string(),
route: RouteInfoSchema,
headsign: HeadsignInfoSchema,
estimate: ArrivalDetailsSchema,
delay: DelayBadgeSchema.optional().nullable(),
shift: ShiftBadgeSchema.optional().nullable(),
+ shape: z.any().optional().nullable(),
+ currentPosition: PositionSchema.optional().nullable(),
+ stopShapeIndex: z.number().optional().nullable(),
});
export const StopArrivalsResponseSchema = z.object({
stopCode: z.string(),
stopName: z.string(),
+ stopLocation: PositionSchema.optional().nullable(),
+ routes: z.array(RouteInfoSchema),
arrivals: z.array(ArrivalSchema),
});
@@ -53,6 +66,7 @@ export type ArrivalPrecision = z.infer<typeof ArrivalPrecisionSchema>;
export type ArrivalDetails = z.infer<typeof ArrivalDetailsSchema>;
export type DelayBadge = z.infer<typeof DelayBadgeSchema>;
export type ShiftBadge = z.infer<typeof ShiftBadgeSchema>;
+export type Position = z.infer<typeof PositionSchema>;
export type Arrival = z.infer<typeof ArrivalSchema>;
export type StopArrivalsResponse = z.infer<typeof StopArrivalsResponseSchema>;
diff --git a/src/frontend/app/components/StopMapModal.tsx b/src/frontend/app/components/StopMapModal.tsx
index bb6a3fa..d218af4 100644
--- a/src/frontend/app/components/StopMapModal.tsx
+++ b/src/frontend/app/components/StopMapModal.tsx
@@ -29,10 +29,11 @@ export interface ConsolidatedCirculationForMap {
currentPosition?: Position;
stopShapeIndex?: number;
isPreviousTrip?: boolean;
- previousTripShapeId?: string;
+ previousTripShapeId?: string | null;
schedule?: {
- shapeId?: string;
+ shapeId?: string | null;
};
+ shape?: any;
}
interface StopMapModalProps {
@@ -70,7 +71,7 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
const circulation = circulations.find(
(c) => c.id === selectedCirculationId
);
- if (circulation?.currentPosition) {
+ if (circulation) {
return circulation;
}
}
@@ -97,27 +98,146 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
const points: { lat: number; lon: number }[] = [];
- const addShapePoints = (data: any) => {
- if (
- data?.properties?.busPoint &&
- data?.properties?.stopPoint &&
- data?.geometry?.coordinates
- ) {
- const busIdx = data.properties.busPoint.index;
- const stopIdx = data.properties.stopPoint.index;
- const coords = data.geometry.coordinates;
+ const getStopsFromFeatureCollection = (data: any) => {
+ if (!data || data.type !== "FeatureCollection" || !data.features)
+ return [];
+ return data.features.filter((f: any) => f.properties?.type === "stop");
+ };
- const start = Math.min(busIdx, stopIdx);
- const end = Math.max(busIdx, stopIdx);
+ const findClosestStopIndex = (
+ stops: any[],
+ pos: { lat: number; lon: number }
+ ) => {
+ let minDst = Infinity;
+ let index = -1;
+ stops.forEach((s: any, idx: number) => {
+ const [lon, lat] = s.geometry.coordinates;
+ const dst = Math.pow(lat - pos.lat, 2) + Math.pow(lon - pos.lon, 2);
+ if (dst < minDst) {
+ minDst = dst;
+ index = idx;
+ }
+ });
+ return index;
+ };
- for (let i = start; i <= end; i++) {
- points.push({ lat: coords[i][1], lon: coords[i][0] });
+ const findClosestPointIndex = (
+ coords: number[][],
+ pos: { lat: number; lon: number }
+ ) => {
+ let minDst = Infinity;
+ let index = -1;
+ coords.forEach((c, idx) => {
+ const [lon, lat] = c;
+ const dst = Math.pow(lat - pos.lat, 2) + Math.pow(lon - pos.lon, 2);
+ if (dst < minDst) {
+ minDst = dst;
+ index = idx;
}
+ });
+ return index;
+ };
+
+ const addShapePoints = (data: any, isPrevious: boolean) => {
+ if (!data) return;
+
+ if (data.type === "FeatureCollection") {
+ const stops = getStopsFromFeatureCollection(data);
+ if (stops.length === 0) return;
+
+ let startIdx = 0;
+ let endIdx = stops.length - 1;
+
+ const currentPos = selectedBus?.currentPosition;
+ const userStopPos =
+ stop.latitude && stop.longitude
+ ? { lat: stop.latitude, lon: stop.longitude }
+ : null;
+
+ if (isPrevious) {
+ // Previous trip: Start from Bus, End at last stop
+ if (currentPos) {
+ const busIdx = findClosestStopIndex(stops, {
+ lat: currentPos.latitude,
+ lon: currentPos.longitude,
+ });
+ if (busIdx !== -1) startIdx = busIdx;
+ }
+ } else {
+ // Current trip: Start from Bus (if not previous), End at User Stop
+ if (!previousShapeData && currentPos) {
+ const busIdx = findClosestStopIndex(stops, {
+ lat: currentPos.latitude,
+ lon: currentPos.longitude,
+ });
+ if (busIdx !== -1) startIdx = busIdx;
+ }
+
+ if (userStopPos) {
+ let userIdx = -1;
+ // Try name match
+ if (stop.name) {
+ userIdx = stops.findIndex(
+ (s: any) => s.properties?.name === stop.name
+ );
+ }
+ // Fallback to coords
+ if (userIdx === -1) {
+ userIdx = findClosestStopIndex(stops, userStopPos);
+ }
+ if (userIdx !== -1) endIdx = userIdx;
+ }
+ }
+
+ // Add stops in range
+ if (startIdx <= endIdx) {
+ for (let i = startIdx; i <= endIdx; i++) {
+ const [lon, lat] = stops[i].geometry.coordinates;
+ points.push({ lat, lon });
+ }
+ }
+ return;
+ }
+
+ const coords = data?.geometry?.coordinates;
+ if (!coords) return;
+
+ let startIdx = 0;
+ let endIdx = coords.length - 1;
+ let foundIndices = false;
+
+ if (data.properties?.busPoint && data.properties?.stopPoint) {
+ startIdx = data.properties.busPoint.index;
+ endIdx = data.properties.stopPoint.index;
+ foundIndices = true;
+ } else {
+ // Fallback: find closest points on the line
+ if (selectedBus?.currentPosition) {
+ const busIdx = findClosestPointIndex(coords, {
+ lat: selectedBus.currentPosition.latitude,
+ lon: selectedBus.currentPosition.longitude,
+ });
+ if (busIdx !== -1) startIdx = busIdx;
+ }
+ if (stop.latitude && stop.longitude) {
+ const stopIdx = findClosestPointIndex(coords, {
+ lat: stop.latitude,
+ lon: stop.longitude,
+ });
+ if (stopIdx !== -1) endIdx = stopIdx;
+ }
+ }
+
+ const start = Math.min(startIdx, endIdx);
+ const end = Math.max(startIdx, endIdx);
+
+ for (let i = start; i <= end; i++) {
+ points.push({ lat: coords[i][1], lon: coords[i][0] });
}
};
- addShapePoints(shapeData);
- addShapePoints(previousShapeData);
+ addShapePoints(previousShapeData, true);
+ addShapePoints(shapeData, false);
if (points.length === 0) {
if (stop.latitude && stop.longitude) {
@@ -130,6 +250,17 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
lon: selectedBus.currentPosition.longitude,
});
}
+ } else {
+ // Ensure bus and stop are always included if available, to prevent cutting them off
+ if (selectedBus?.currentPosition) {
+ points.push({
+ lat: selectedBus.currentPosition.latitude,
+ lon: selectedBus.currentPosition.longitude,
+ });
+ }
+ if (stop.latitude && stop.longitude) {
+ points.push({ lat: stop.latitude, lon: stop.longitude });
+ }
}
if (points.length === 0) return;
@@ -156,7 +287,7 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
.getMap()
.easeTo({ center: [only.lon, only.lat], zoom: 16, duration: 450 });
} else {
- mapRef.current.fitBounds(bounds, {
+ mapRef.current.getMap().fitBounds(bounds, {
padding: 80,
duration: 500,
maxZoom: 17,
@@ -196,7 +327,7 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
// Fit bounds on initial load
useEffect(() => {
- if (!styleSpec || !mapRef.current || hasFitBounds.current || !isOpen)
+ if (!styleSpec || !mapRef.current || !isOpen)
return;
const map = mapRef.current.getMap();
@@ -238,103 +369,25 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
// Fetch shape for selected bus
useEffect(() => {
- if (
- !isOpen ||
- !selectedBus ||
- !selectedBus.schedule?.shapeId ||
- selectedBus.currentPosition?.shapeIndex === undefined ||
- !APP_CONSTANTS.shapeEndpoint
- ) {
+ if (!isOpen || !selectedBus) {
setShapeData(null);
setPreviousShapeData(null);
return;
}
- const shapeId = selectedBus.schedule.shapeId;
- const shapeIndex = selectedBus.currentPosition.shapeIndex;
- const stopShapeIndex = selectedBus.stopShapeIndex;
- const stopLat = stop.latitude;
- const stopLon = stop.longitude;
-
- const fetchShape = async (
- sId: string,
- bIndex?: number,
- sIndex?: number,
- sLat?: number,
- sLon?: number
- ) => {
- let url = `${APP_CONSTANTS.shapeEndpoint}?shapeId=${sId}`;
- if (bIndex !== undefined) url += `&busShapeIndex=${bIndex}`;
- if (sIndex !== undefined) url += `&stopShapeIndex=${sIndex}`;
- else if (sLat && sLon) url += `&stopLat=${sLat}&stopLon=${sLon}`;
-
- const res = await fetch(url);
- if (res.ok) return res.json();
- return null;
- };
-
- const loadShapes = async () => {
- if (selectedBus.isPreviousTrip && selectedBus.previousTripShapeId) {
- // Bus is on previous trip
- // 1. Load previous shape (where bus is)
- const prevData = await fetchShape(
- selectedBus.previousTripShapeId,
- shapeIndex,
- stopShapeIndex
- );
-
- // 2. Load current scheduled shape (where bus is going)
- // Bus is not on this shape yet, so no bus index
- const currData = await fetchShape(
- shapeId,
- undefined,
- undefined,
- stopLat,
- stopLon
- );
-
- if (
- prevData &&
- prevData.geometry &&
- prevData.geometry.coordinates &&
- prevData.properties?.busPoint?.index !== undefined
- ) {
- const busIdx = prevData.properties.busPoint.index;
- const coords = prevData.geometry.coordinates;
- // Slice from busIdx - 5 (clamped to 0) to end
- const startIdx = Math.max(0, busIdx - 5);
- const slicedCoords = coords.slice(startIdx);
-
- // Join with the first point of the next shape to close the gap
- if (currData?.geometry?.coordinates?.length > 0) {
- slicedCoords.push(currData.geometry.coordinates[0]);
- }
-
- prevData.geometry.coordinates = slicedCoords;
- }
-
- setPreviousShapeData(prevData);
- setShapeData(currData);
- } else {
- // Normal case
- const data = await fetchShape(
- shapeId,
- shapeIndex,
- stopShapeIndex,
- stopLat,
- stopLon
- );
- setShapeData(data);
- setPreviousShapeData(null);
- }
+ if (selectedBus.shape) {
+ setShapeData(selectedBus.shape);
+ setPreviousShapeData(null);
handleCenter();
- };
+ return;
+ }
- loadShapes().catch((err) => console.error("Failed to load shape", err));
+ setShapeData(null);
+ setPreviousShapeData(null);
}, [isOpen, selectedBus]);
- if (busesWithPosition.length === 0) {
- return null; // Don't render if no buses with GPS coordinates
+ if (!selectedBus && busesWithPosition.length === 0) {
+ return null; // Don't render if no buses with GPS coordinates and no selected bus
}
return (
@@ -379,6 +432,9 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
onPitchStart={() => {
userInteracted.current = true;
}}
+ onLoad={() => {
+ handleCenter();
+ }}
>
{/* Previous Shape Layer */}
{previousShapeData && selectedBus && (
@@ -462,6 +518,20 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
"line-join": "round",
}}
/>
+
+ {/* Stops Layer */}
+ <Layer
+ id="route-stops"
+ type="circle"
+ filter={["==", "type", "stop"]}
+ paint={{
+ "circle-color": "#FFFFFF",
+ "circle-radius": 4,
+ "circle-stroke-width": 2,
+ "circle-stroke-color": getLineColour(selectedBus.line)
+ .background,
+ }}
+ />
</Source>
)}
diff --git a/src/frontend/app/components/arrivals/ArrivalCard.tsx b/src/frontend/app/components/arrivals/ArrivalCard.tsx
index 5cfbaa3..6952f8f 100644
--- a/src/frontend/app/components/arrivals/ArrivalCard.tsx
+++ b/src/frontend/app/components/arrivals/ArrivalCard.tsx
@@ -1,5 +1,6 @@
import { AlertTriangle, LocateIcon } from "lucide-react";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import Marquee from "react-fast-marquee";
import { useTranslation } from "react-i18next";
import LineIcon from "~/components/LineIcon";
import { type Arrival } from "../../api/schema";
@@ -7,9 +8,56 @@ import "./ArrivalCard.css";
interface ArrivalCardProps {
arrival: Arrival;
+ onClick?: () => void;
}
-export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({ arrival }) => {
+const AutoMarquee = ({ text }: { text: string }) => {
+ const containerRef = useRef<HTMLDivElement>(null);
+ const [shouldScroll, setShouldScroll] = useState(false);
+
+ useEffect(() => {
+ const el = containerRef.current;
+ if (!el) return;
+
+ const checkScroll = () => {
+ const charWidth = 8;
+ const availableWidth = el.offsetWidth;
+ const textWidth = text.length * charWidth;
+ setShouldScroll(textWidth > availableWidth);
+ };
+
+ checkScroll();
+ const observer = new ResizeObserver(checkScroll);
+ observer.observe(el);
+ return () => observer.disconnect();
+ }, [text]);
+
+ if (shouldScroll) {
+ return (
+ <div ref={containerRef} className="w-full overflow-hidden">
+ <Marquee speed={40} gradient={false}>
+ <div className="mr-32 text-xs font-mono text-slate-500 dark:text-slate-400">
+ {text}
+ </div>
+ </Marquee>
+ </div>
+ );
+ }
+
+ return (
+ <div
+ ref={containerRef}
+ className="w-full overflow-hidden text-xs font-mono text-slate-500 dark:text-slate-400 truncate"
+ >
+ {text}
+ </div>
+ );
+};
+
+export const ArrivalCard: React.FC<ArrivalCardProps> = ({
+ arrival,
+ onClick,
+}) => {
const { t } = useTranslation();
const { route, headsign, estimate, delay, shift } = arrival;
@@ -36,6 +84,14 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({ arrival }) => {
kind?: "regular" | "gps" | "delay" | "warning";
}> = [];
+ // Badge/Shift info as a chip
+ if (headsign.badge) {
+ chips.push({
+ label: headsign.badge,
+ kind: "regular",
+ });
+ }
+
// Delay chip
if (delay) {
const delta = Math.round(delay.minutes);
@@ -43,7 +99,7 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({ arrival }) => {
if (delta === 0) {
chips.push({
- label: "OK",
+ label: t("estimates.delay_on_time"),
tone: "delay-ok",
kind: "delay",
});
@@ -55,14 +111,14 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({ arrival }) => {
? "delay-warn"
: "delay-critical";
chips.push({
- label: `R${delta}`,
+ label: t("estimates.delay_positive", { minutes: delta }),
tone,
kind: "delay",
});
} else {
const tone = absDelta <= 2 ? "delay-ok" : "delay-early";
chips.push({
- label: `A${absDelta}`,
+ label: t("estimates.delay_negative", { minutes: absDelta }),
tone,
kind: "delay",
});
@@ -80,23 +136,42 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({ arrival }) => {
// Precision chips
if (estimate.precision === "unsure") {
chips.push({
- label: "!",
+ label: t("estimates.low_accuracy"),
tone: "warning",
kind: "warning",
});
} else if (estimate.precision === "confident") {
chips.push({
- label: "", // Just the icon for reduced
+ label: t("estimates.bus_gps_position"),
kind: "gps",
});
}
+ if (estimate.precision === "scheduled") {
+ chips.push({
+ label: t("estimates.no_realtime"),
+ tone: "warning",
+ kind: "warning",
+ });
+ }
+
return chips;
- }, [delay, shift, estimate.precision]);
+ }, [delay, shift, estimate.precision, t, headsign.badge]);
+
+ const isClickable = !!onClick && estimate.precision !== "past";
+ const Tag = isClickable ? "button" : "div";
return (
- <div className="flex-none flex items-center gap-2.5 min-h-12 rounded px-3 py-2.5 transition-all bg-slate-50 dark:bg-slate-800 shadow-sm">
- <div className="shrink-0 min-w-[7ch]">
+ <Tag
+ type={isClickable ? "button" : undefined}
+ onClick={isClickable ? onClick : undefined}
+ className={`w-full text-left flex items-start gap-3 rounded-xl px-3 py-3 transition-all bg-slate-50 dark:bg-slate-800 border border-gray-200 dark:border-gray-700 shadow-sm ${
+ isClickable
+ ? "hover:border-blue-400 dark:hover:border-blue-500 active:scale-[0.98] cursor-pointer"
+ : ""
+ }`}
+ >
+ <div className="shrink-0 min-w-[7ch] mt-0.5">
<LineIcon
line={route.shortName}
colour={route.colour}
@@ -105,72 +180,80 @@ export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({ arrival }) => {
/>
</div>
<div className="flex-1 min-w-0 flex flex-col gap-1">
- <span
- className={`text-base font-medium overflow-hidden text-ellipsis line-clamp-2 leading-tight ${estimate.precision == "past" ? "line-through" : ""}`}
- >
- {headsign.destination}
- </span>
- {metaChips.length > 0 && (
- <div className="flex items-center gap-1 flex-wrap">
- {metaChips.map((chip, idx) => {
- let chipColourClasses = "";
- switch (chip.tone) {
- case "delay-ok":
- chipColourClasses =
- "bg-green-600/20 dark:bg-green-600/30 text-green-700 dark:text-green-300";
- break;
- case "delay-warn":
- chipColourClasses =
- "bg-amber-600/20 dark:bg-yellow-600/30 text-amber-700 dark:text-yellow-300";
- break;
- case "delay-critical":
- chipColourClasses =
- "bg-red-400/20 dark:bg-red-600/30 text-red-600 dark:text-red-300";
- break;
- case "delay-early":
- chipColourClasses =
- "bg-blue-400/20 dark:bg-blue-600/30 text-blue-700 dark:text-blue-300";
- break;
- case "warning":
- chipColourClasses =
- "bg-orange-400/20 dark:bg-orange-600/30 text-orange-700 dark:text-orange-300";
- break;
- default:
- chipColourClasses =
- "bg-black/[0.06] dark:bg-white/[0.12] text-slate-600 dark:text-slate-400";
- }
-
- return (
- <span
- key={`${chip.label}-${idx}`}
- className={`text-xs px-2.5 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 font-medium tracking-wide ${chipColourClasses}`}
- >
- {chip.kind === "gps" && (
- <LocateIcon className="w-3 h-3 my-0.5 inline-block" />
- )}
- {chip.kind === "warning" && (
- <AlertTriangle className="w-3 h-3 my-0.5 inline-block" />
- )}
- {chip.label}
- </span>
- );
- })}
+ <div className="flex justify-between items-start gap-2">
+ <div className="flex-1 min-w-0">
+ <span
+ className={`text-base font-bold overflow-hidden text-ellipsis line-clamp-2 leading-tight text-slate-900 dark:text-slate-100 ${estimate.precision == "past" ? "line-through opacity-60" : ""}`}
+ >
+ {headsign.destination}
+ </span>
+ {headsign.marquee && (
+ <div className="mt-0.5">
+ <AutoMarquee text={headsign.marquee} />
+ </div>
+ )}
+ </div>
+ <div
+ className={`
+ inline-flex items-center justify-center px-2 py-1 rounded-lg shrink-0 min-w-12
+ ${timeClass}
+ `.trim()}
+ >
+ <div className="flex flex-col items-center leading-none">
+ <span className="text-lg font-bold">{etaValue}</span>
+ <span className="text-[0.55rem] font-bold uppercase tracking-tighter opacity-80">
+ {etaUnit}
+ </span>
+ </div>
</div>
- )}
- </div>
- <div
- className={`
- inline-flex items-center justify-center px-2 py-1.5 rounded-xl shrink-0
- ${timeClass}
- `.trim()}
- >
- <div className="flex flex-col items-center leading-none">
- <span className="text-lg font-bold leading-none">{etaValue}</span>
- <span className="text-[0.65rem] uppercase tracking-wider mt-0.5 opacity-90">
- {etaUnit}
- </span>
+ </div>
+
+ <div className="flex items-center gap-0.5 flex-wrap">
+ {metaChips.map((chip, idx) => {
+ let chipColourClasses = "";
+ switch (chip.tone) {
+ case "delay-ok":
+ chipColourClasses =
+ "bg-green-600/10 dark:bg-green-600/20 text-green-700 dark:text-green-300";
+ break;
+ case "delay-warn":
+ chipColourClasses =
+ "bg-amber-600/10 dark:bg-yellow-600/20 text-amber-700 dark:text-yellow-300";
+ break;
+ case "delay-critical":
+ chipColourClasses =
+ "bg-red-400/10 dark:bg-red-600/20 text-red-600 dark:text-red-300";
+ break;
+ case "delay-early":
+ chipColourClasses =
+ "bg-blue-400/10 dark:bg-blue-600/20 text-blue-700 dark:text-blue-300";
+ break;
+ case "warning":
+ chipColourClasses =
+ "bg-orange-400/10 dark:bg-orange-600/20 text-orange-700 dark:text-orange-300";
+ break;
+ default:
+ chipColourClasses =
+ "bg-black/[0.04] dark:bg-white/[0.08] text-slate-500 dark:text-slate-400";
+ }
+
+ return (
+ <span
+ key={`${chip.label}-${idx}`}
+ className={`text-xs px-2.5 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 font-medium tracking-wide ${chipColourClasses}`}
+ >
+ {chip.kind === "gps" && (
+ <LocateIcon className="w-2.5 h-2.5 inline-block" />
+ )}
+ {chip.kind === "warning" && (
+ <AlertTriangle className="w-2.5 h-2.5 inline-block" />
+ )}
+ {chip.label}
+ </span>
+ );
+ })}
</div>
</div>
- </div>
+ </Tag>
);
};
diff --git a/src/frontend/app/components/arrivals/ArrivalList.tsx b/src/frontend/app/components/arrivals/ArrivalList.tsx
index b2394fb..0186682 100644
--- a/src/frontend/app/components/arrivals/ArrivalList.tsx
+++ b/src/frontend/app/components/arrivals/ArrivalList.tsx
@@ -1,25 +1,38 @@
import React from "react";
import { type Arrival } from "../../api/schema";
-import { ReducedArrivalCard } from "./ArrivalCard";
+import { ArrivalCard } from "./ArrivalCard";
+import { ReducedArrivalCard } from "./ReducedArrivalCard";
interface ArrivalListProps {
arrivals: Arrival[];
reduced?: boolean;
+ onArrivalClick?: (arrival: Arrival) => void;
}
export const ArrivalList: React.FC<ArrivalListProps> = ({
arrivals,
reduced,
+ onArrivalClick,
}) => {
+ const clickable = Boolean(onArrivalClick);
+
return (
<div className="flex flex-col gap-3">
- {arrivals.map((arrival, index) => (
- <ReducedArrivalCard
- key={`${arrival.route.shortName}-${index}`}
- arrival={arrival}
- reduced={reduced}
- />
- ))}
+ {arrivals.map((arrival, index) =>
+ reduced ? (
+ <ReducedArrivalCard
+ key={`${arrival.tripId}-${index}`}
+ arrival={arrival}
+ onClick={clickable ? () => onArrivalClick?.(arrival) : undefined}
+ />
+ ) : (
+ <ArrivalCard
+ key={`${arrival.tripId}-${index}`}
+ arrival={arrival}
+ onClick={clickable ? () => onArrivalClick?.(arrival) : undefined}
+ />
+ )
+ )}
</div>
);
};
diff --git a/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx b/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
new file mode 100644
index 0000000..2c1ea20
--- /dev/null
+++ b/src/frontend/app/components/arrivals/ReducedArrivalCard.tsx
@@ -0,0 +1,198 @@
+import { AlertTriangle, LocateIcon } from "lucide-react";
+import React, { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import LineIcon from "~/components/LineIcon";
+import { type Arrival } from "../../api/schema";
+import "./ArrivalCard.css";
+
+interface ArrivalCardProps {
+ arrival: Arrival;
+ onClick?: () => void;
+}
+
+export const ReducedArrivalCard: React.FC<ArrivalCardProps> = ({
+ arrival,
+ onClick,
+}) => {
+ const { t } = useTranslation();
+ const { route, headsign, estimate, delay, shift } = arrival;
+
+ const etaValue = estimate.minutes.toString();
+ const etaUnit = t("estimates.minutes", "min");
+
+ const timeClass = useMemo(() => {
+ switch (estimate.precision) {
+ case "confident":
+ return "time-running";
+ case "unsure":
+ return "time-delayed";
+ case "past":
+ return "time-past";
+ default:
+ return "time-scheduled";
+ }
+ }, [estimate.precision]);
+
+ const metaChips = useMemo(() => {
+ const chips: Array<{
+ label: string;
+ tone?: string;
+ kind?: "regular" | "gps" | "delay" | "warning";
+ }> = [];
+
+ // Badge/Shift info as a chip
+ if (headsign.badge) {
+ chips.push({
+ label: headsign.badge,
+ kind: "regular",
+ });
+ }
+
+ // Delay chip
+ if (delay) {
+ const delta = Math.round(delay.minutes);
+ const absDelta = Math.abs(delta);
+
+ if (delta === 0) {
+ chips.push({
+ label: "OK",
+ tone: "delay-ok",
+ kind: "delay",
+ });
+ } else if (delta > 0) {
+ const tone =
+ delta <= 2
+ ? "delay-ok"
+ : delta <= 10
+ ? "delay-warn"
+ : "delay-critical";
+ chips.push({
+ label: `R${delta}`,
+ tone,
+ kind: "delay",
+ });
+ } else {
+ const tone = absDelta <= 2 ? "delay-ok" : "delay-early";
+ chips.push({
+ label: `A${absDelta}`,
+ tone,
+ kind: "delay",
+ });
+ }
+ }
+
+ // Shift chip
+ if (shift) {
+ chips.push({
+ label: `${shift.shiftName} ยท ${shift.shiftTrip}`,
+ kind: "regular",
+ });
+ }
+
+ // Precision chips
+ if (estimate.precision === "unsure") {
+ chips.push({
+ label: "!",
+ tone: "warning",
+ kind: "warning",
+ });
+ } else if (estimate.precision === "confident") {
+ chips.push({
+ label: "", // Just the icon for reduced
+ kind: "gps",
+ });
+ }
+
+ return chips;
+ }, [delay, shift, estimate.precision, headsign.badge]);
+
+ const isClickable = !!onClick && estimate.precision !== "past";
+ const Tag = isClickable ? "button" : "div";
+
+ return (
+ <Tag
+ onClick={isClickable ? onClick : undefined}
+ className={`w-full text-left flex-none flex items-center gap-3 min-h-12 rounded px-3 py-2.5 transition-all bg-slate-50 dark:bg-slate-800 border border-gray-200 dark:border-gray-700 ${
+ isClickable
+ ? "hover:border-blue-400 dark:hover:border-blue-500 active:scale-[0.99] cursor-pointer"
+ : ""
+ }`}
+ >
+ <div className="shrink-0 min-w-[7ch] mt-0.5">
+ <LineIcon
+ line={route.shortName}
+ colour={route.colour}
+ textColour={route.textColour}
+ mode="pill"
+ />
+ </div>
+ <div className="flex-1 min-w-0 flex flex-col gap-0.5">
+ <span
+ className={`text-base font-medium overflow-hidden text-ellipsis line-clamp-2 leading-tight ${estimate.precision == "past" ? "line-through opacity-60" : ""}`}
+ >
+ {headsign.destination}
+ </span>
+ {metaChips.length > 0 && (
+ <div className="flex items-center gap-0.5 flex-wrap">
+ {metaChips.map((chip, idx) => {
+ let chipColourClasses = "";
+ switch (chip.tone) {
+ case "delay-ok":
+ chipColourClasses =
+ "bg-green-600/10 dark:bg-green-600/20 text-green-700 dark:text-green-300";
+ break;
+ case "delay-warn":
+ chipColourClasses =
+ "bg-amber-600/10 dark:bg-yellow-600/20 text-amber-700 dark:text-yellow-300";
+ break;
+ case "delay-critical":
+ chipColourClasses =
+ "bg-red-400/10 dark:bg-red-600/20 text-red-600 dark:text-red-300";
+ break;
+ case "delay-early":
+ chipColourClasses =
+ "bg-blue-400/10 dark:bg-blue-600/20 text-blue-700 dark:text-blue-300";
+ break;
+ case "warning":
+ chipColourClasses =
+ "bg-orange-400/10 dark:bg-orange-600/20 text-orange-700 dark:text-orange-300";
+ break;
+ default:
+ chipColourClasses =
+ "bg-black/[0.04] dark:bg-white/[0.08] text-slate-500 dark:text-slate-400";
+ }
+
+ return (
+ <span
+ key={`${chip.label}-${idx}`}
+ className={`text-xs px-2.5 py-0.5 rounded-full flex items-center justify-center gap-1 shrink-0 font-medium tracking-wide ${chipColourClasses}`}
+ >
+ {chip.kind === "gps" && (
+ <LocateIcon className="w-3 h-3 my-0.5 inline-block" />
+ )}
+ {chip.kind === "warning" && (
+ <AlertTriangle className="w-3 h-3 my-0.5 inline-block" />
+ )}
+ {chip.label}
+ </span>
+ );
+ })}
+ </div>
+ )}
+ </div>
+ <div
+ className={`
+ inline-flex items-center justify-center px-2 py-1.5 rounded-xl shrink-0
+ ${timeClass}
+ `.trim()}
+ >
+ <div className="flex flex-col items-center leading-none">
+ <span className="text-lg font-bold leading-none">{etaValue}</span>
+ <span className="text-[0.55rem] uppercase tracking-wider mt-0.5 opacity-90">
+ {etaUnit}
+ </span>
+ </div>
+ </div>
+ </Tag>
+ );
+};
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index 46358dc..7adcef2 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -2,50 +2,22 @@ import { CircleHelp, Eye, EyeClosed, Star } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { useParams } from "react-router";
+import { fetchArrivals } from "~/api/arrivals";
+import { type Arrival, type Position, type RouteInfo } from "~/api/schema";
+import { ArrivalList } from "~/components/arrivals/ArrivalList";
import { ErrorDisplay } from "~/components/ErrorDisplay";
import LineIcon from "~/components/LineIcon";
import { PullToRefresh } from "~/components/PullToRefresh";
-import { StopAlert } from "~/components/StopAlert";
import { StopHelpModal } from "~/components/StopHelpModal";
import { StopMapModal } from "~/components/StopMapModal";
-import { ConsolidatedCirculationList } from "~/components/Stops/ConsolidatedCirculationList";
import { ConsolidatedCirculationListSkeleton } from "~/components/Stops/ConsolidatedCirculationListSkeleton";
-import { APP_CONSTANTS } from "~/config/constants";
import { usePageTitle } from "~/contexts/PageTitleContext";
import { useAutoRefresh } from "~/hooks/useAutoRefresh";
-import StopDataProvider, { type Stop } from "../data/StopDataProvider";
+import StopDataProvider from "../data/StopDataProvider";
import "./stops-$id.css";
-export interface ConsolidatedCirculation {
- line: string;
- route: string;
- schedule?: {
- running: boolean;
- minutes: number;
- serviceId: string;
- tripId: string;
- shapeId?: string;
- };
- realTime?: {
- minutes: number;
- distance: number;
- };
- currentPosition?: {
- latitude: number;
- longitude: number;
- orientationDegrees: number;
- shapeIndex?: number;
- };
- isPreviousTrip?: boolean;
- previousTripShapeId?: string;
- nextStreets?: string[];
-}
-
-export const getCirculationId = (c: ConsolidatedCirculation): string => {
- if (c.schedule?.tripId) {
- return `trip:${c.schedule.tripId}`;
- }
- return `rt:${c.line}:${c.route}:${c.realTime?.minutes ?? "?"}`;
+export const getArrivalId = (a: Arrival): string => {
+ return a.tripId;
};
interface ErrorInfo {
@@ -54,59 +26,18 @@ interface ErrorInfo {
message?: string;
}
-const loadConsolidatedData = async (
- stopId: string
-): Promise<ConsolidatedCirculation[]> => {
- const resp = await fetch(
- `${APP_CONSTANTS.consolidatedCirculationsEndpoint}?stopId=${stopId}`,
- {
- headers: {
- Accept: "application/json",
- },
- }
- );
-
- if (!resp.ok) {
- throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
- }
-
- return await resp.json();
-};
-
-export interface ConsolidatedCirculation {
- line: string;
- route: string;
- schedule?: {
- running: boolean;
- minutes: number;
- serviceId: string;
- tripId: string;
- shapeId?: string;
- };
- realTime?: {
- minutes: number;
- distance: number;
- };
- currentPosition?: {
- latitude: number;
- longitude: number;
- orientationDegrees: number;
- shapeIndex?: number;
- };
- isPreviousTrip?: boolean;
- previousTripShapeId?: string;
- nextStreets?: string[];
-}
-
export default function Estimates() {
const { t } = useTranslation();
const params = useParams();
const stopId = params.id ?? "";
- const [customName, setCustomName] = useState<string | undefined>(undefined);
- const [stopData, setStopData] = useState<Stop | undefined>(undefined);
+ const [stopName, setStopName] = useState<string | undefined>(undefined);
+ const [apiRoutes, setApiRoutes] = useState<RouteInfo[]>([]);
+ const [apiLocation, setApiLocation] = useState<Position | undefined>(
+ undefined
+ );
// Data state
- const [data, setData] = useState<ConsolidatedCirculation[] | null>(null);
+ const [data, setData] = useState<Arrival[] | null>(null);
const [dataDate, setDataDate] = useState<Date | null>(null);
const [dataLoading, setDataLoading] = useState(true);
const [dataError, setDataError] = useState<ErrorInfo | null>(null);
@@ -116,16 +47,15 @@ export default function Estimates() {
const [isMapModalOpen, setIsMapModalOpen] = useState(false);
const [isHelpModalOpen, setIsHelpModalOpen] = useState(false);
const [isReducedView, setIsReducedView] = useState(false);
- const [selectedCirculationId, setSelectedCirculationId] = useState<
+ const [selectedArrivalId, setSelectedArrivalId] = useState<
string | undefined
>(undefined);
// Helper function to get the display name for the stop
const getStopDisplayName = useCallback(() => {
- if (customName) return customName;
- if (stopData?.name) return stopData.name;
+ if (stopName) return stopName;
return `Parada ${stopId}`;
- }, [customName, stopData, stopId]);
+ }, [stopId, stopName]);
usePageTitle(getStopDisplayName());
@@ -154,16 +84,16 @@ export default function Estimates() {
try {
setDataError(null);
- const body = await loadConsolidatedData(stopId);
- setData(body);
+ const response = await fetchArrivals(stopId, false);
+ setData(response.arrivals);
+ setStopName(response.stopName);
+ setApiRoutes(response.routes);
+ if (response.stopLocation) {
+ setApiLocation(response.stopLocation);
+ }
setDataDate(new Date());
-
- // Load stop data from StopDataProvider
- const stop = await StopDataProvider.getStopById(stopId);
- setStopData(stop);
- setCustomName(StopDataProvider.getCustomName(stopId));
} catch (error) {
- console.error("Error loading consolidated data:", error);
+ console.error("Error loading arrivals data:", error);
setDataError(parseError(error));
setData(null);
setDataDate(null);
@@ -214,17 +144,22 @@ export default function Estimates() {
return (
<PullToRefresh onRefresh={handleManualRefresh}>
<div className="page-container stops-page">
- {stopData && stopData.lines && stopData.lines.length > 0 && (
+ {apiRoutes.length > 0 && (
<div className={`estimates-lines-container scrollable`}>
- {stopData.lines.map((line) => (
- <div key={line} className="estimates-line-icon">
- <LineIcon line={line} mode="rounded" />
+ {apiRoutes.map((line) => (
+ <div key={line.shortName} className="estimates-line-icon">
+ <LineIcon
+ line={line.shortName}
+ colour={line.colour}
+ textColour={line.textColour}
+ mode="pill"
+ />
</div>
))}
</div>
)}
- {stopData && <StopAlert stop={stopData} />}
+ {/*{stopData && <StopAlert stop={stopData} />}*/}
<div className="estimates-list-container">
{dataLoading ? (
@@ -281,12 +216,11 @@ export default function Estimates() {
)}
</div>
</div>
- <ConsolidatedCirculationList
- data={data}
+ <ArrivalList
+ arrivals={data}
reduced={isReducedView}
- driver={stopData?.stopId.split(":")[0]}
- onCirculationClick={(estimate, idx) => {
- setSelectedCirculationId(getCirculationId(estimate));
+ onArrivalClick={(arrival) => {
+ setSelectedArrivalId(getArrivalId(arrival));
setIsMapModalOpen(true);
}}
/>
@@ -294,25 +228,29 @@ export default function Estimates() {
) : null}
</div>
- {stopData && (
+ {apiLocation && (
<StopMapModal
- stop={stopData}
- circulations={(data ?? []).map((c) => ({
- id: getCirculationId(c),
- line: c.line,
- route: c.route,
- currentPosition: c.currentPosition,
- isPreviousTrip: c.isPreviousTrip,
- previousTripShapeId: c.previousTripShapeId,
- schedule: c.schedule
- ? {
- shapeId: c.schedule.shapeId,
- }
- : undefined,
+ stop={{
+ stopId: stopId,
+ name: stopName ?? "",
+ latitude: apiLocation?.latitude,
+ longitude: apiLocation?.longitude,
+ lines: [],
+ }}
+ circulations={(data ?? []).map((a) => ({
+ id: getArrivalId(a),
+ line: a.route.shortName,
+ route: a.headsign.destination,
+ currentPosition: a.currentPosition ?? undefined,
+ stopShapeIndex: a.stopShapeIndex ?? undefined,
+ schedule: {
+ shapeId: undefined,
+ },
+ shape: a.shape,
}))}
isOpen={isMapModalOpen}
onClose={() => setIsMapModalOpen(false)}
- selectedCirculationId={selectedCirculationId}
+ selectedCirculationId={selectedArrivalId}
/>
)}
generated by cgit v1.3 (git 2.53.0) at 2026-04-12 06:58:13 +0000