wip: POC arrival times

app/components/map/clusters.client.vue

@@ -13,6 +13,19 @@
                 :layout="cluster_label"
             />
         </mgl-geo-json-source>
+
+        <div ref="popup">
+            <div v-for="data in popupData" :key="data.pattern.id">
+                Direction {{ data.pattern.lastStopName }}
+                <div v-for="time in data.times" :key="time.tripId">
+                    {{
+                        time.realtimeArrival -
+                        (Math.floor(new Date().getTime() / 1000) -
+                            time.serviceDay)
+                    }}
+                </div>
+            </div>
+        </div>
     </ClientOnly>
 </template>
 
@@ -28,14 +41,16 @@ const cluster_label = {
     "text-field": ["get", "id"],
 };
 const map = useMap("main");
+const popup = useTemplateRef("popup");
 
 const { clusters } = defineProps<{
     clusters: FeatureCollection<Point>;
 }>();
 
-console.log(clusters);
+const popupData = ref<StopTimesPattern[]>([]);
 
 async function clusterClick(e: FeatureCollection) {
+    popupData.value = [];
     const feature = e.features[0];
     if (!feature || !feature.properties) {
         return;
@@ -53,7 +68,19 @@ async function clusterClick(e: FeatureCollection) {
         .setHTML(
             `Cluster code : ${feature.properties.code}<br/>This cluster contains ${data.features.length} stops`,
         )
+        .setDOMContent(popup.value)
+        .setMaxWidth("500px")
         .addTo(map.map!);
+
+    popupData.value = await $fetch<StopTimesPattern[]>(
+        `https://data.mobilites-m.fr/api/routers/default/index/clusters/${feature.properties.code}/stoptimes?showCancelledTrips=false`,
+        {
+            headers: {
+                origin: "PersonalProjectMreso",
+            },
+        },
+    );
+    console.log(popupData.value);
 }
 
 function clusterEnter() {

app/components/map/map.client.vue

@@ -26,7 +26,7 @@ const center = new LngLat(5.735, 45.185);
 const zoom = 12;
 
 const store = useMresoStore();
-store.fetchData();
+await store.fetchData();
 const shownClusters = ref<FeatureCollection<Point> | null>(null);
 
 const { selectedRoutesId } = defineProps<{

app/stores/mreso.ts

@@ -27,7 +27,7 @@ export const useMresoStore = defineStore("mresoStore", {
       return Object.fromEntries(state.routes.map((r) => [r.id, r]));
     },
     linesById(state): { [id: string]: Feature<MultiLineString> } {
-      if (!state.lines) {
+      if (!("features" in state.lines)) {
         return {};
       }
       return Object.fromEntries(
@@ -35,7 +35,7 @@ export const useMresoStore = defineStore("mresoStore", {
       );
     },
     clustersById(state): { [id: string]: Feature<Point> } {
-      if (!state.clusters) {
+      if (!("features" in state.clusters)) {
         return {};
       }
       return Object.fromEntries(

app/types.d.ts

@@ -21,3 +21,34 @@ interface Cluster {
   name: string;
   visible: boolean;
 }
+
+interface StopTimesPattern {
+  pattern: {
+    id: string;
+    desc: string;
+    dir: number;
+    shortDesc: string;
+    lastStop: string;
+    lastStopName: string;
+  };
+  times: StopTimes[];
+}
+
+interface StopTimes {
+  stopId: string;
+  stopName: string;
+  scheduledArrival: number;
+  scheduledDeparture: number;
+  realtimeArrival: number;
+  realtimeDeparture: number;
+  arrivalDelay: number;
+  departureDelay: number;
+  timepoint: boolean;
+  realtime: boolean;
+  realtimeState: string;
+  serviceDay: number;
+  tripId: string;
+  pickupType: string;
+  occupancy: string;
+  occupancyId: number;
+}