wip: working on trips

app/app.vue

@@ -5,24 +5,6 @@
     </NuxtLayout>
 </template>
 
-<script setup lang="ts">
-const router = useRoute();
-const store = useMresoStore();
-watch(
-    () => router.params.line_id,
-    () => {
-        if (router.params.line_id === undefined) {
-            store.selectedRouteIds = [];
-        }
-        if (typeof router.params.line_id !== "string") {
-            store.selectedRouteIds = [];
-        }
-        store.selectedRouteIds = [router.params.line_id];
-    },
-    { immediate: true },
-);
-</script>
-
 <style lang="css">
 body,
 #main,

app/components/map/lines.client.vue

@@ -1,8 +1,8 @@
 <template>
-    <mgl-geo-json-source source-id="lines" :data="routeWithLine.line">
+    <mgl-geo-json-source source-id="lines" :data="line">
         <mgl-line-layer layer-id="line" :paint="paint" :layout="layout" />
     </mgl-geo-json-source>
-    <mgl-geo-json-source source-id="lines_border" :data="routeWithLine.line">
+    <mgl-geo-json-source source-id="lines_border" :data="line">
         <mgl-line-layer
             layer-id="line_border"
             :paint="offset_paint"
@@ -12,14 +12,14 @@
 </template>
 
 <script setup lang="ts">
-import type { Feature, MultiLineString } from "geojson";
+import type { Feature, LineString, MultiLineString } from "geojson";
 
-const { routeWithLine } = defineProps<{
+const { line } = defineProps<{
-    routeWithLine: { route: Route; line: Feature<MultiLineString> };
+    line: Feature<MultiLineString | LineString, LineProperties>;
 }>();
 
 const paint = computed(() => ({
-    "line-color": "#" + routeWithLine.route.color,
+    "line-color": "#" + line.properties?.route?.color,
     "line-width": 4,
 }));
 

app/components/map/map.client.vue

@@ -3,27 +3,25 @@
         <MglMap :map-style="style" :center="center" :zoom="zoom" map-key="main">
             <MglNavigationControl />
             <MglImage id="cluster" :image="image" />
-            <template v-for="r of shownLines" :key="r.route.id">
+            <template v-for="r of store.selectedLines">
-                <MapLines :route-with-line="r" />
+                <MapLines :line="r" />
                 <MapClusters
-                    v-if="shownClusters"
+                    v-if="shownClusters && r.properties?.route"
                     :clusters="shownClusters"
-                    :route="r.route"
+                    :route="r.properties.route"
             /></template>
 
             <mgl-geo-json-source
                 :source-id="`trip_leg_${index}`"
                 :data="line"
-                v-for="(line, index) in store.selectedTrips"
+                v-for="(line, index) in store.selectedLines"
             >
                 <mgl-line-layer
                     :layer-id="`trip_line_leg_${index}`"
                     :paint="{
                         'line-width': 4,
                         'line-color':
-                            '#' +
+                            '#' + (line.properties?.route?.color || '000000'),
-                            (store.routesById[line.properties?.routeId]
-                                ?.color || '000000'),
                         'line-dasharray': [
                             2,
                             line.properties?.mode == 'WALK' ? 1 : 0,
@@ -36,17 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import type {
+import type { FeatureCollection, Point } from "geojson";
-    Feature,
-    FeatureCollection,
-    MultiLineString,
-    Point,
-} from "geojson";
-
-const paint = {
-    "line-color": "#FF0000",
-    "line-width": 4,
-};
 
 import { useMap } from "@indoorequal/vue-maplibre-gl";
 import { LngLat, LngLatBounds } from "maplibre-gl";
@@ -66,10 +54,6 @@ const shownClusters = ref<FeatureCollection<Point> | null>(null);
 const image = useSvgImage();
 const map = useMap("main");
 
-watchEffect(() => {
-    console.log(store.selectedTrip);
-});
-
 watch(map, () => {
     if (map.isLoaded) {
         emit("loaded");
@@ -77,12 +61,12 @@ watch(map, () => {
 });
 watchEffect(async () => {
     const allClusters = [];
-    for (const routeId of store.selectedRouteIds) {
+    for (const line of store.selectedLines) {
-        if (routeId === undefined) {
+        if (line.properties.route === undefined) {
             continue;
         }
         const apiClusters = await $fetch<Cluster[]>(
-            `https://data.mobilites-m.fr/api/routers/default/index/routes/${routeId}/clusters`,
+            `https://data.mobilites-m.fr/api/routers/default/index/routes/${line.properties.route.id}/clusters`,
         );
         allClusters.push(...apiClusters);
     }
@@ -102,15 +86,13 @@ watchEffect(async () => {
         ...shownClusters.value.features.map(
             (point) => point.geometry.coordinates,
         ),
-        ...shownLines.value
+        ...store.selectedLines.map((line) => line.geometry.coordinates).flat(2),
-            .map((line) => line.line.geometry.coordinates)
-            .flat(2),
     ];
     const bounds = coordinates
         // .filter((c) => stops.includes(c.properties?.id))
         .reduce(
             (bounds, coords) => {
-                return bounds.extend(new LngLat(coords[0]!, coords[1]!));
+                return bounds.extend(new LngLat(coords[0], coords[1]));
             },
             new LngLatBounds([
                 firstPoint.geometry.coordinates[0]!,
@@ -123,25 +105,6 @@ watchEffect(async () => {
         padding: 20,
     });
 });
-
-const shownLines = computed(() => {
-    const l: { route: Route; line: Feature<MultiLineString> }[] = [];
-    for (const routeId of store.selectedRouteIds) {
-        const route = store.routesById[routeId];
-        if (!route) {
-            continue;
-        }
-        const line = store.linesById[routeId.replace(":", "_")];
-        if (!line) {
-            continue;
-        }
-        l.push({
-            route,
-            line,
-        });
-    }
-    return l;
-});
 </script>
 
 <style scoped lang="css">

app/components/sidebar/lines.vue

@@ -4,7 +4,9 @@
             v-for="route of store.routes"
             :key="route.id"
             :class="{
-                selected: store.selectedRouteIds.includes(route.id),
+                selected: store.selectedLines.find(
+                    (l) => l.properties?.route?.id == route.id,
+                ),
                 lineLabel: true,
             }"
             :style="{

app/pages/index.vue

@@ -5,3 +5,39 @@
 <script lang="ts">
 definePageMeta({ key: "lines" });
 </script>
+
+<script setup lang="ts">
+const router = useRoute();
+const store = useMresoStore();
+watch(
+    [
+        () => router.params.line_id,
+        () => store.linesById,
+        () => store.routesById,
+    ],
+    () => {
+        const lineId = router.params.line_id;
+        console.log(lineId);
+        if (lineId === undefined) {
+            store.selectedLines = [];
+
+            return;
+        }
+        if (typeof lineId !== "string") {
+            store.selectedLines = [];
+            return;
+        }
+        const lineClone = structuredClone(
+            toRaw(store.linesById[lineId.replace(":", "_")]),
+        );
+        if (!lineClone) {
+            console.log(store.linesById, lineId.replace(":", "_"));
+            return;
+        }
+        lineClone.properties = { route: store.routesById[lineId] };
+        store.selectedLines = [lineClone];
+        console.log(store.selectedLines);
+    },
+    { immediate: true },
+);
+</script>

app/pages/trip.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script setup lang="ts">
-definePageMeta({ key: "trip" });
 import { LngLat } from "maplibre-gl";
 import { decode } from "@googlemaps/polyline-codec";
-import { RoutePlanner } from "~/utils/trip";
 import type { Feature, LineString } from "geojson";
+definePageMeta({ key: "trip" });
+
 const from = "SEM:GENBIBLIUNI";
 const to = "SEM:GENALSACELO";
 const store = useMresoStore();
@@ -23,7 +23,7 @@ function plan() {
         new LngLat(toCoord[1]!, toCoord[0]!),
     );
     planner.request().then((data) => {
-        const GeoLines: Feature<LineString>[] = [];
+        const GeoLines: Feature<LineString, LineProperties>[] = [];
         const itinerary = data.plan.itineraries[0];
         if (!itinerary) {
             console.log("No Itineraries found");
@@ -36,10 +36,9 @@ function plan() {
                 return;
             }
             const lines = decode(points).map(([lat, lng]) => [lng, lat]);
-            const lineString: Feature<LineString> = {
+            const lineString: Feature<LineString, LineProperties> = {
                 type: "Feature",
                 properties: {
-                    routeId: leg.routeId,
                     mode: leg.mode,
                 },
                 geometry: {
@@ -47,9 +46,12 @@ function plan() {
                     coordinates: lines,
                 },
             };
+            if (leg.routeId) {
+                lineString.properties!.route = store.routesById[leg.routeId];
+            }
             GeoLines.push(lineString);
         }
-        store.selectedTrips = GeoLines;
+        store.selectedLines = GeoLines;
     });
 }
 </script>

app/stores/mreso.ts

@@ -12,8 +12,10 @@ export const useMresoStore = defineStore("mresoStore", {
     lines: {} as FeatureCollection<MultiLineString>,
     clusters: {} as FeatureCollection<Point>,
     stops: {} as FeatureCollection<Point>,
-    selectedRouteIds: [] as string[],
+    selectedLines: [] as Feature<
-    selectedTrips: [] as Feature<LineString>[],
+      LineString | MultiLineString,
+      LineProperties
+    >[],
   }),
   actions: {
     async fetchData(options: { signal?: AbortSignal } = {}) {

app/types.d.ts

@@ -12,6 +12,13 @@ interface Route {
   pdfMap: boolean;
 }
 
+interface _LineProperties extends GeoJsonProperties {
+  route?: Route;
+  mode?: PlannerModes;
+}
+
+type LineProperties = _LineProperties | null;
+
 interface Cluster {
   city: string;
   code: string;