feat: plan trip

app/pages/index.vue

@@ -1,7 +1,5 @@
 <template>
-    <main>
-        <SidebarLines />
-    </main>
+    <SidebarLines />
 </template>
 
 <script lang="ts">

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>