diff --git a/app/components/map/clusters.client.vue b/app/components/map/clusters.client.vue index ae62bd5..d7d7991 100644 --- a/app/components/map/clusters.client.vue +++ b/app/components/map/clusters.client.vue @@ -13,6 +13,19 @@ :layout="cluster_label" /> + +
+
+ Direction {{ data.pattern.lastStopName }} +
+ {{ + time.realtimeArrival - + (Math.floor(new Date().getTime() / 1000) - + time.serviceDay) + }} +
+
+
@@ -28,14 +41,16 @@ const cluster_label = { "text-field": ["get", "id"], }; const map = useMap("main"); +const popup = useTemplateRef("popup"); const { clusters } = defineProps<{ clusters: FeatureCollection; }>(); -console.log(clusters); +const popupData = ref([]); 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}
This cluster contains ${data.features.length} stops`, ) + .setDOMContent(popup.value) + .setMaxWidth("500px") .addTo(map.map!); + + popupData.value = await $fetch( + `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() { diff --git a/app/components/map/map.client.vue b/app/components/map/map.client.vue index 4153331..516866e 100644 --- a/app/components/map/map.client.vue +++ b/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 | null>(null); const { selectedRoutesId } = defineProps<{ diff --git a/app/stores/mreso.ts b/app/stores/mreso.ts index 994e605..737342e 100644 --- a/app/stores/mreso.ts +++ b/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 } { - 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 } { - if (!state.clusters) { + if (!("features" in state.clusters)) { return {}; } return Object.fromEntries( diff --git a/app/types.d.ts b/app/types.d.ts index c31c3f7..67d8943 100644 --- a/app/types.d.ts +++ b/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; +}