wip: use pinia

app/components/map/clusters.client.vue

@@ -55,7 +55,9 @@ async function clusterClick(e: FeatureCollection) {
     }
     new Popup()
         .setLngLat(coordinates)
-        .setHTML(`This cluster contains ${data.features.length} stops`)
+        .setHTML(
+            `Cluster code : ${feature.properties.code}<br/>This cluster contains ${data.features.length} stops`,
+        )
         .addTo(map.map);
 }
 

app/components/map/map.client.vue

@@ -13,24 +13,6 @@
             />
         </MglMap>
     </ClientOnly>
-
-    <div v-if="routesRequest.data.value" id="lineSelector">
-        <div
-            v-for="route of routesRequest.data.value"
-            :key="route.id"
-            :class="{
-                selected: selectedRoutes.includes(route.id),
-                lineLabel: true,
-            }"
-            :style="{
-                background: '#' + route.color,
-                color: '#' + route.textColor,
-            }"
-            @click="selectRoute(route.id)"
-        >
-            {{ route.type }} : {{ route.shortName }}
-        </div>
-    </div>
 </template>
 
 <script setup lang="ts">
@@ -69,28 +51,6 @@ const transport_lines = computed(() => linesRequest.data.value?.features ?? []);
 
 const routesRequest = await useFetch<Route[]>("/routes.json");
 
-// Selected routes with lines
-const routeWithLines = computed(() => {
-    const shownLines: { route: Route; line: Feature<MultiLineString> }[] = [];
-    for (const routeId of selectedRoutes.value) {
-        const route = routesRequest.data.value?.find((r) => r.id == routeId);
-        if (!route) {
-            continue;
-        }
-        const line = transport_lines.value.find(
-            (f) => routeId == f.properties?.id.replace("_", ":"),
-        );
-        if (!line) {
-            continue;
-        }
-        shownLines.push({
-            route,
-            line,
-        });
-    }
-    return shownLines;
-});
-
 async function selectRoute(routeId: string) {
     if (!map.map) {
         console.error("Map is not yet initialized ! aborting");

app/components/sidebar.vue/container.vue

@@ -0,0 +1,19 @@
+<template>
+    <div v-if="routesRequest.data.value" id="lineSelector">
+        <div
+            v-for="route of routesRequest.data.value"
+            :key="route.id"
+            :class="{
+                selected: selectedRoutes.includes(route.id),
+                lineLabel: true,
+            }"
+            :style="{
+                background: '#' + route.color,
+                color: '#' + route.textColor,
+            }"
+            @click="selectRoute(route.id)"
+        >
+            {{ route.type }} : {{ route.shortName }}
+        </div>
+    </div>
+</template>

app/pages/map.vue

@@ -1,3 +1,6 @@
 <template>
-    <Map />
+    <main>
+        <SidebarContainer />
+        <Map />
+    </main>
 </template>

app/stores/mreso.ts

@@ -0,0 +1,46 @@
+import type { Feature, FeatureCollection, MultiLineString, Point } from "geojson";
+
+export const useMresoStore = defineStore("mresoStore", {
+  state: () => ({
+    routes: [] as Route[],
+    lines: {} as FeatureCollection<MultiLineString>,
+    clusters: {} as FeatureCollection<Point>,
+    stops: {} as FeatureCollection<Point>,
+    selectedRoutesId: [] as string[]
+  }),
+  actions: {
+    async fetch() {
+      // const infos = await $fetch("https://api.nuxt.com/modules/pinia");
+
+      // this.name = infos.name;
+      // this.description = infos.description;
+    },
+  },
+  getters: {
+    routesById(state) {
+      return Object.fromEntries(state.routes.map((r)=>[r.id, r]))
+    },
+    linesById(state) {
+      return Object.fromEntries(state.lines.features.map((l)=>[l.properties!.id, l]))
+    },
+    shownLines() {
+      const shownLines: { route: Route; line: Feature<MultiLineString> }[] = [];
+      for (const routeId of this.selectedRoutesId) {
+        const route = this.routesById[routeId];
+        if (!route) {
+          continue;
+        }
+        const line = this.linesById[routeId.replace(":","_")]
+        if (!line) {
+          continue;
+        }
+        shownLines.push({
+          route,
+          line,
+        });
+      }
+      return shownLines;
+    },
+    }
+  }
+});