legonzaur/better-mreso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: working on trips

Browse Source
This commit is contained in:
legonzaur
2026-07-18 12:01:53 +02:00
parent 6dbefb0e33
commit 5cdfbd3bb5
8 changed files with 76 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/app.vue
-18
View File
@@ -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
+6 -6
View File
@@ -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<{
routeWithLine: { route: Route; line: Feature<MultiLineString> };
const { line } = defineProps<{
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
+12 -49
View File
@@ -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">
<MapLines :route-with-line="r" />
<template v-for="r of store.selectedLines">
<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':
'#' +
(store.routesById[line.properties?.routeId]
?.color || '000000'),
'#' + (line.properties?.route?.color || '000000'),
'line-dasharray': [
2,
line.properties?.mode == 'WALK' ? 1 : 0,
@@ -36,17 +34,7 @@
</template>
<script setup lang="ts">
import type {
Feature,
FeatureCollection,
MultiLineString,
Point,
} from "geojson";
const paint = {
"line-color": "#FF0000",
"line-width": 4,
};
import type { FeatureCollection, Point } from "geojson";
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) {
if (routeId === undefined) {
for (const line of store.selectedLines) {
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
.map((line) => line.line.geometry.coordinates)
.flat(2),
...store.selectedLines.map((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
+3 -1
View File
@@ -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
+36
View File
@@ -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
+8 -6
View File
@@ -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
+4 -2
View File
@@ -12,8 +12,10 @@ export const useMresoStore = defineStore("mresoStore", {
lines: {} as FeatureCollection<MultiLineString>,
clusters: {} as FeatureCollection<Point>,
stops: {} as FeatureCollection<Point>,
selectedRouteIds: [] as string[],
selectedTrips: [] as Feature<LineString>[],
selectedLines: [] as Feature<
LineString | MultiLineString,
LineProperties
>[],
}),
actions: {
async fetchData(options: { signal?: AbortSignal } = {}) {
app/types.d.ts
Vendored
+7
View File
@@ -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;