wip

FINDINGS.md

@@ -0,0 +1 @@
+GTFS : le C6 c'est pas présent

app/app.vue

@@ -1,13 +1,28 @@
 <template>
-    <div id="main">
+    <NuxtLayout>
         <NuxtRouteAnnouncer />
-        <NuxtPage page-key="main" />
+        <NuxtPage />
-    </div>
+    </NuxtLayout>
 </template>
 
+<script setup lang="ts">
+const router = useRoute();
+const store = useMresoStore();
+watchEffect(() => {
+    if (router.params.line_id === undefined) {
+        store.selectedRouteIds = [];
+    }
+    if (typeof router.params.line_id !== "string") {
+        store.selectedRouteIds = [];
+    }
+    store.selectedRouteIds = [router.params.line_id];
+});
+</script>
+
 <style lang="css">
 body,
 #main,
+#__nuxt,
 main {
     height: 100vh;
     margin: 0;

app/components/map/clusters.client.vue

@@ -14,7 +14,7 @@
             />
         </mgl-geo-json-source>
 
-        <div ref="popup">
+        <div ref="popup-div">
             <div v-for="data in popupData" :key="data.pattern.id">
                 Direction {{ data.pattern.lastStopName }}
                 <div v-for="time in data.times" :key="time.tripId">
@@ -41,13 +41,19 @@ const cluster_label = {
     "text-field": ["get", "id"],
 };
 const map = useMap("main");
-const popup = useTemplateRef("popup");
+const popupDiv = useTemplateRef("popup-div");
 
-const { clusters } = defineProps<{
+const { clusters, route } = defineProps<{
     clusters: FeatureCollection<Point>;
+    route: Route;
 }>();
 
 const popupData = ref<StopTimesPattern[]>([]);
+const popup = new Popup().setMaxWidth("500px").addTo(map.map!);
+
+onUnmounted(() => {
+    popup.remove();
+});
 
 async function clusterClick(e: FeatureCollection) {
     popupData.value = [];
@@ -59,28 +65,22 @@ async function clusterClick(e: FeatureCollection) {
     if (!code) {
         return;
     }
+    let data;
     const coordinates = feature.geometry.coordinates.slice();
-    const data = await $fetch<FeatureCollection<Point>>(
+    [data, popupData.value] = await Promise.all([
+        $fetch<FeatureCollection<Point>>(
             `https://data.mobilites-m.fr/api/clusters/${code}/stops`,
-    );
+        ),
-    new Popup()
+        $fetch<StopTimesPattern[]>(
-        .setLngLat(coordinates)
+            `https://data.mobilites-m.fr/api/routers/default/index/clusters/${feature.properties.code}/stoptimes?showCancelledTrips=false&route=${route.id}`,
-        .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);
+    ]);
+    popup.setDOMContent(popupDiv.value).setLngLat(coordinates).addTo(map.map!);
 }
 
 function clusterEnter() {

app/components/map/map.client.vue

@@ -2,12 +2,13 @@
     <ClientOnly>
         <MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
             <MglNavigationControl />
-            <MapLines
+            <template v-for="r of shownLines" :key="r.route.id">
-                v-for="r of shownLines"
+                <MapLines :route-with-line="r" />
-                :key="r.route.id"
+                <MapClusters
-                :route-with-line="r"
+                    v-if="shownClusters"
-            />
+                    :clusters="shownClusters"
-            <MapClusters v-if="shownClusters" :clusters="shownClusters" />
+                    :route="r.route"
+            /></template>
         </MglMap>
     </ClientOnly>
 </template>
@@ -29,14 +30,10 @@ const store = useMresoStore();
 await store.fetchData();
 const shownClusters = ref<FeatureCollection<Point> | null>(null);
 
-const { selectedRoutesId } = defineProps<{
-    selectedRoutesId: string[];
-}>();
-
 const map = useMap("main");
 watchEffect(async () => {
     const allClusters = [];
-    for (const routeId of selectedRoutesId) {
+    for (const routeId of store.selectedRouteIds) {
         const apiClusters = await $fetch<Cluster[]>(
             `https://data.mobilites-m.fr/api/routers/default/index/routes/${routeId}/clusters`,
         );
@@ -80,7 +77,7 @@ watchEffect(async () => {
 
 const shownLines = computed(() => {
     const l: { route: Route; line: Feature<MultiLineString> }[] = [];
-    for (const routeId of selectedRoutesId) {
+    for (const routeId of store.selectedRouteIds) {
         const route = store.routesById[routeId];
         if (!route) {
             continue;

app/components/sidebar/container.vue

@@ -4,7 +4,7 @@
             v-for="route of store.routes"
             :key="route.id"
             :class="{
-                selected: selectedRoutesId.includes(route.id),
+                selected: store.selectedRouteIds.includes(route.id),
                 lineLabel: true,
             }"
             :style="{
@@ -21,10 +21,6 @@
 <script setup lang="ts">
 const store = useMresoStore();
 
-const { selectedRoutesId } = defineProps<{
-    selectedRoutesId: string[];
-}>();
-
 function selectRoute(routeId: string) {
     navigateTo(`/lines/${routeId}`);
 }

app/layouts/default.vue

@@ -0,0 +1,6 @@
+<template>
+    <main>
+        <Map map-key="main" />
+        <slot />
+    </main>
+</template>

app/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <main>
+        <SidebarContainer />
+    </main>
+</template>

app/pages/lines/[id].vue

@@ -1,15 +0,0 @@
-<template>
-    <main>
-        <Transition>
-            <KeepAlive>
-                <Map map-key="main" :selectedRoutesId="[router.params.id]" />
-            </KeepAlive>
-        </Transition>
-
-        <SidebarContainer :selectedRoutesId="[router.params.id]" />
-    </main>
-</template>
-
-<script setup lang="ts">
-const router = useRoute();
-</script>

app/pages/lines/[line_id]/cluster/[cluster_id]/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <main>
+        <SidebarContainer />
+    </main>
+</template>

app/pages/lines/[line_id]/index.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <SidebarContainer />
+    </div>
+</template>

app/stores/mreso.ts

@@ -11,6 +11,7 @@ export const useMresoStore = defineStore("mresoStore", {
     lines: {} as FeatureCollection<MultiLineString>,
     clusters: {} as FeatureCollection<Point>,
     stops: {} as FeatureCollection<Point>,
+    selectedRouteIds: [] as string[],
   }),
   actions: {
     async fetchData(options: { signal?: AbortSignal } = {}) {

nuxt.config.ts

@@ -9,4 +9,19 @@ export default defineNuxtConfig({
       // include: ["maplibre-gl"],
     },
   },
+  // hooks: {
+  //   "pages:extend"(pages) {
+  //     pages.push({
+  //       name: "lines",
+  //       path: "/lines/",
+  //       file: "~/pages/lines/[line_id]/cluster/[cluster_id]/index.vue",
+  //     });
+  //     pages.push({
+  //       name: "line_id",
+  //       path: "/lines/:id()",
+
+  //       file: "~/pages/lines/[line_id]/cluster/[cluster_id]/index.vue",
+  //     });
+  //   },
+  // },
 });