From 69ec5436f8f4264cf542be913e45f5411f26bd51 Mon Sep 17 00:00:00 2001
From: Legonzaur <legonzaur@live.fr>
Date: Mon, 13 Jul 2026 18:22:58 +0200
Subject: [PATCH] feat: plan trip

---
 app/components/map/map.client.vue | 49 ++++++++++++++++++++
 app/components/sidebar/lines.vue  | 16 +++----
 app/components/sidebar/trip.vue   | 11 ++---
 app/layouts/default.vue           | 47 ++++++++++++++++++-
 app/pages/index.vue               |  4 +-
 app/pages/trip.vue                | 37 ++++++++++++---
 app/stores/mreso.ts               |  6 +++
 app/types.d.ts                    | 76 +++++++++++++++++++++++++++++++
 app/utils/trip.ts                 |  2 +-
 package-lock.json                 |  7 +++
 package.json                      |  1 +
 11 files changed, 228 insertions(+), 28 deletions(-)

diff --git a/app/components/map/map.client.vue b/app/components/map/map.client.vue
index 57cf199..a89a794 100644
--- a/app/components/map/map.client.vue
+++ b/app/components/map/map.client.vue
@@ -10,6 +10,23 @@
                     :clusters="shownClusters"
                     :route="r.route"
             /></template>
+
+            <mgl-geo-json-source
+                :source-id="`trip_leg_${index}`"
+                :data="line"
+                v-for="(line, index) in store.selectedTrips"
+            >
+                <mgl-line-layer
+                    :layer-id="`trip_line_leg_${index}`"
+                    :paint="{
+                        'line-width': 4,
+                        'line-color':
+                            '#' +
+                            (store.routesById[line.properties?.routeId]
+                                ?.color || '000000'),
+                    }"
+                />
+            </mgl-geo-json-source>
         </MglMap>
     </ClientOnly>
 </template>
@@ -22,18 +39,38 @@ import type {
     Point,
 } from "geojson";
 
+const paint = {
+    "line-color": "#FF0000",
+    "line-width": 4,
+};
+
 import { useMap } from "@indoorequal/vue-maplibre-gl";
 import { LngLat, LngLatBounds } from "maplibre-gl";
 const style = "https://tiles.versatiles.org/assets/styles/colorful/style.json";
+// const style =
+//     "https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json";
 const center = new LngLat(5.735, 45.185);
 const zoom = 12;
 
+const emit = defineEmits<{
+    loaded: [];
+}>();
+
 const store = useMresoStore();
 await store.fetchData();
 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");
+    }
+});
 watchEffect(async () => {
     const allClusters = [];
     for (const routeId of store.selectedRouteIds) {
@@ -102,3 +139,15 @@ const shownLines = computed(() => {
     return l;
 });
 </script>
+
+<style scoped lang="css">
+.maplibregl-map {
+    grid-area: "map";
+}
+</style>
+
+<style lang="css">
+.maplibregl-map {
+    grid-area: map;
+}
+</style>
diff --git a/app/components/sidebar/lines.vue b/app/components/sidebar/lines.vue
index db19cbe..9f6f807 100644
--- a/app/components/sidebar/lines.vue
+++ b/app/components/sidebar/lines.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="lineSelector">
+    <div id="sidebar">
         <div
             v-for="route of store.routes"
             :key="route.id"
@@ -27,19 +27,15 @@ function selectRoute(routeId: string) {
 </script>
 
 <style scoped lang="css">
-#lineSelector {
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 100vh;
-    overflow: auto;
-    background: white;
-}
-
 .lineLabel {
     cursor: pointer;
 }
 .lineLabel.selected {
     color: red !important;
 }
+#sidebar {
+    hewight: 100%;
+    overflow: auto;
+    grid-area: sidebar;
+}
 </style>
diff --git a/app/components/sidebar/trip.vue b/app/components/sidebar/trip.vue
index b831021..3949278 100644
--- a/app/components/sidebar/trip.vue
+++ b/app/components/sidebar/trip.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="tripSelector">
+    <div id="sidebar">
         <input type="text" placeholder="from" value="SEM:GENBIBLIUNI" />
         <input type="text" placeholder="to" value="SEM:GENPERE" />
         <button @click="$emit('plan')">request</button>
@@ -9,12 +9,9 @@
 <script setup lang="ts"></script>
 
 <style scoped>
-#tripSelector {
-    position: fixed;
-    left: 0;
-    top: 0;
-    height: 100vh;
+#sidebar {
+    height: 100%;
     overflow: auto;
-    background: white;
+    grid-area: sidebar;
 }
 </style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 8be8dc9..cac1b0d 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,6 +1,51 @@
 <template>
     <main>
-        <Map map-key="main" />
+        <div id="map-container">
+            <Map map-key="main" @loaded="loaded" />
+            <Transition>
+                <div id="map-loading" v-if="!mapReady">Loading</div>
+            </Transition>
+        </div>
         <slot />
     </main>
 </template>
+
+<style scoped lang="css">
+main {
+    display: grid;
+    grid-template-columns: 400px 1fr;
+    grid-template-areas: "sidebar map";
+    height: 100%;
+}
+#map-container {
+    position: relative;
+    height: 100%;
+}
+
+#map-loading {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    background: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.v-enter-active,
+.v-leave-active {
+    transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+    opacity: 0;
+}
+</style>
+
+<script setup lang="ts">
+const mapReady = ref(false);
+function loaded() {
+    mapReady.value = true;
+}
+</script>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index ebf83a0..3c8e022 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,7 +1,5 @@
 <template>
-    <main>
-        <SidebarLines />
-    </main>
+    <SidebarLines />
 </template>
 
 <script lang="ts">
diff --git a/app/pages/trip.vue b/app/pages/trip.vue
index 52e883f..7886805 100644
--- a/app/pages/trip.vue
+++ b/app/pages/trip.vue
@@ -1,15 +1,15 @@
 <template>
-    <main>
-        <SidebarTrip @plan="plan" />
-    </main>
+    <SidebarTrip @plan="plan" />
 </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";
 const from = "SEM:GENBIBLIUNI";
-const to = "SEM:GENPERE";
+const to = "SEM:GENALSACELO";
 const store = useMresoStore();
 
 function plan() {
@@ -18,12 +18,37 @@ function plan() {
     if (!fromCoord || !toCoord) {
         return;
     }
-    const planner = new RoutePlanner(
+    const planner = new TransitRoutePlanner(
         new LngLat(fromCoord[1]!, fromCoord[0]!),
         new LngLat(toCoord[1]!, toCoord[0]!),
     );
     planner.request().then((data) => {
-        console.log(data);
+        const GeoLines: Feature<LineString>[] = [];
+        const itinerary = data.plan.itineraries[0];
+        if (!itinerary) {
+            console.log("No Itineraries found");
+            return;
+        }
+        for (const leg of itinerary.legs) {
+            console.log(leg);
+            const points = leg.legGeometry.points;
+            if (!points) {
+                return;
+            }
+            const lines = decode(points).map(([lat, lng]) => [lng, lat]);
+            const lineString: Feature<LineString> = {
+                type: "Feature",
+                properties: {
+                    routeId: leg.routeId,
+                },
+                geometry: {
+                    type: "LineString",
+                    coordinates: lines,
+                },
+            };
+            GeoLines.push(lineString);
+        }
+        store.selectedTrips = GeoLines;
     });
 }
 </script>
diff --git a/app/stores/mreso.ts b/app/stores/mreso.ts
index a1f134e..577798e 100644
--- a/app/stores/mreso.ts
+++ b/app/stores/mreso.ts
@@ -1,6 +1,7 @@
 import type {
   Feature,
   FeatureCollection,
+  LineString,
   MultiLineString,
   Point,
 } from "geojson";
@@ -12,12 +13,17 @@ export const useMresoStore = defineStore("mresoStore", {
     clusters: {} as FeatureCollection<Point>,
     stops: {} as FeatureCollection<Point>,
     selectedRouteIds: [] as string[],
+    selectedTrips: [] as Feature<LineString>[],
   }),
   actions: {
     async fetchData(options: { signal?: AbortSignal } = {}) {
       [this.routes, this.lines, this.clusters, this.stops] = await Promise.all([
         $fetch<Route[]>("/routes.json", options),
         $fetch<FeatureCollection<MultiLineString>>("/lines.json", options),
+        // $fetch<FeatureCollection<MultiLineString>>(
+        //   "/trajets presque clean.geojson",
+        //   options,
+        // ),
         $fetch<FeatureCollection<Point>>("/clusters.json", options),
         $fetch<FeatureCollection<Point>>("/stops.json", options),
       ]);
diff --git a/app/types.d.ts b/app/types.d.ts
index c5a337a..2e9da6a 100644
--- a/app/types.d.ts
+++ b/app/types.d.ts
@@ -78,3 +78,79 @@ type OptimizeType =
   "FLAT" | "GREENWAYS" | "QUICK" | "SAFE" | "TRANSFERS" | "TRIANGLE";
 
 type PlannerModes = "WALK" | "TRANSIT";
+
+interface OTPPlace {
+  name: string;
+  lon: number;
+  lat: number;
+  vertedType: "NORMAL";
+}
+
+interface OTPItineraries {
+  duration: number;
+  startTime: number;
+  endTime: number;
+  walkTime: number;
+  transitTime: number;
+  waitingTime: number;
+  walkDistance: number;
+  walkLimitExceeded: boolean;
+  generalizedCost: number;
+  elevationLost: number;
+  elevationGained: number;
+  transfers: number;
+  legs: OTPLegs[];
+}
+
+interface OTPLegs {
+  startTime: number;
+  endTime: number;
+  departureDelay: number;
+  arrivalDelay: number;
+  realTime: boolean;
+  distance: number;
+  generalizedCost: number;
+  pathway: boolean;
+  mode: PlannerModes;
+  transitLeg: boolean;
+  route: string;
+  routeColor?: string;
+  routeId?: string;
+  routeLongName?: string;
+  routeShortName?: string;
+  routeTextColor?: string;
+  routeType?: number;
+  agencyTimeZoneOffset: number;
+  interlineWithPreviousLeg: boolean;
+  from: OTPPlace;
+  to: OTPPlace;
+  legGeometry: {
+    points: "string";
+  };
+  legElevation: string;
+  steps: OTPStep[];
+  duration: number;
+}
+
+interface OTPStep {
+  distance: number;
+  relativeDirection: string;
+  streetName: string;
+  absoluteDirection: string;
+  stayOn: boolean;
+  area: boolean;
+  bogusName: boolean;
+  lon: numbeer;
+  lat: numbeer;
+  elevation: string;
+  walkingBike: boolean;
+}
+
+interface OTPPlanOutput {
+  plan: {
+    date: number;
+    from: OTPPlace;
+    to: OTPPlace;
+    itineraries: OTPItineraries[];
+  };
+}
diff --git a/app/utils/trip.ts b/app/utils/trip.ts
index 6dc2275..6235872 100644
--- a/app/utils/trip.ts
+++ b/app/utils/trip.ts
@@ -64,7 +64,7 @@ class RoutePlanner {
 
   async request() {
     this.otpUrl.search = this.toURLSearchParams().toString();
-    return await $fetch(this.otpUrl.toString());
+    return await $fetch<OTPPlanOutput>(this.otpUrl.toString());
   }
 }
 
diff --git a/package-lock.json b/package-lock.json
index 4f142f5..643e6a7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "better-mrso",
       "hasInstallScript": true,
       "dependencies": {
+        "@googlemaps/polyline-codec": "^1.0.28",
         "@nuxt/eslint": "^1.16.0",
         "@pinia/nuxt": "^0.11.3",
         "@types/geojson": "^7946.0.16",
@@ -1188,6 +1189,12 @@
         "node": "^20.19.0 || ^22.13.0 || >=24"
       }
     },
+    "node_modules/@googlemaps/polyline-codec": {
+      "version": "1.0.28",
+      "resolved": "https://registry.npmjs.org/@googlemaps/polyline-codec/-/polyline-codec-1.0.28.tgz",
+      "integrity": "sha512-m7rh8sbxlrHvebXEweBHX8r1uPtToPRYxWDD6p6k2YG8hyhBe0Wi6xRUVFpxpEseMNgF+OBotFQC5senj8K7TQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.2",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.2.tgz",
diff --git a/package.json b/package.json
index 027174b..829abc7 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@googlemaps/polyline-codec": "^1.0.28",
     "@nuxt/eslint": "^1.16.0",
     "@pinia/nuxt": "^0.11.3",
     "@types/geojson": "^7946.0.16",