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;
+}