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<{