feat: Enhance shape retrieval with bus and stop point indexing; update related components

2 files changed, 47 insertions, 15 deletions

diff --git a/src/frontend/app/components/StopMapModal.tsx b/src/frontend/app/components/StopMapModal.tsx
index 67435b4..91cd513 100644
--- a/src/frontend/app/components/StopMapModal.tsx
+++ b/src/frontend/app/components/StopMapModal.tsx
@@ -25,6 +25,7 @@ export interface ConsolidatedCirculationForMap {
   line: string;
   route: string;
   currentPosition?: Position;
+  stopShapeIndex?: number;
   schedule?: {
     shapeId?: string;
   };
@@ -90,15 +91,32 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
     if (!mapRef.current) return;
     const points: { lat: number; lon: number }[] = [];
 
-    if (stop.latitude && stop.longitude) {
-      points.push({ lat: stop.latitude, lon: stop.longitude });
-    }
+    if (
+      shapeData?.properties?.busPoint &&
+      shapeData?.properties?.stopPoint &&
+      shapeData?.geometry?.coordinates
+    ) {
+      const busIdx = shapeData.properties.busPoint.index;
+      const stopIdx = shapeData.properties.stopPoint.index;
+      const coords = shapeData.geometry.coordinates;
 
-    if (selectedBus?.currentPosition) {
-      points.push({
-        lat: selectedBus.currentPosition.latitude,
-        lon: selectedBus.currentPosition.longitude,
-      });
+      const start = Math.min(busIdx, stopIdx);
+      const end = Math.max(busIdx, stopIdx);
+
+      for (let i = start; i <= end; i++) {
+        points.push({ lat: coords[i][1], lon: coords[i][0] });
+      }
+    } else {
+      if (stop.latitude && stop.longitude) {
+        points.push({ lat: stop.latitude, lon: stop.longitude });
+      }
+
+      if (selectedBus?.currentPosition) {
+        points.push({
+          lat: selectedBus.currentPosition.latitude,
+          lon: selectedBus.currentPosition.longitude,
+        });
+      }
     }
 
     if (points.length === 0) return;
@@ -132,7 +150,7 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
         } as any);
       }
     } catch {}
-  }, [stop, selectedBus]);
+  }, [stop, selectedBus, shapeData]);
 
   // Load style without traffic layers for the stop map
   useEffect(() => {
@@ -218,10 +236,18 @@ export const StopMapModal: React.FC<StopMapModalProps> = ({
 
     const shapeId = selectedBus.schedule.shapeId;
     const shapeIndex = selectedBus.currentPosition.shapeIndex;
+    const stopShapeIndex = selectedBus.stopShapeIndex;
+    const stopLat = stop.latitude;
+    const stopLon = stop.longitude;
+
+    let url = `${regionConfig.shapeEndpoint}?shapeId=${shapeId}&busShapeIndex=${shapeIndex}`;
+    if (stopShapeIndex !== undefined) {
+      url += `&stopShapeIndex=${stopShapeIndex}`;
+    } else {
+      url += `&stopLat=${stopLat}&stopLon=${stopLon}`;
+    }
 
-    fetch(
-      `${regionConfig.shapeEndpoint}?shapeId=${shapeId}&startPointIndex=${shapeIndex}`
-    )
+    fetch(url)
       .then((res) => {
         if (res.ok) return res.json();
         return null;
diff --git a/src/frontend/app/components/StopMapSheet.tsx b/src/frontend/app/components/StopMapSheet.tsx
index 7dab82b..d70fcb6 100644
--- a/src/frontend/app/components/StopMapSheet.tsx
+++ b/src/frontend/app/components/StopMapSheet.tsx
@@ -19,6 +19,7 @@ export interface ConsolidatedCirculationForMap {
   line: string;
   route: string;
   currentPosition?: Position;
+  stopShapeIndex?: number;
   schedule?: {
     shapeId?: string;
   };
@@ -61,9 +62,14 @@ export const StopMap: React.FC<StopMapProps> = ({
       ) {
         const key = `${c.schedule.shapeId}_${c.currentPosition.shapeIndex}`;
         if (!shapes[key]) {
-          fetch(
-            `${regionConfig.shapeEndpoint}?shapeId=${c.schedule.shapeId}&startPointIndex=${c.currentPosition.shapeIndex}`
-          )
+          let url = `${regionConfig.shapeEndpoint}?shapeId=${c.schedule.shapeId}&busShapeIndex=${c.currentPosition.shapeIndex}`;
+          if (c.stopShapeIndex !== undefined) {
+            url += `&stopShapeIndex=${c.stopShapeIndex}`;
+          } else {
+            url += `&stopLat=${stop.latitude}&stopLon=${stop.longitude}`;
+          }
+
+          fetch(url)
             .then((res) => {
               if (res.ok) return res.json();
               return null;