PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Fahrzeugauswahl überarbeitet

Browse Source
This commit is contained in:
PxlLoewe
2025-07-01 02:19:00 -07:00
parent 169a05ed8f
commit 157394767f
9 changed files with 249 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
apps/dispatch/app/_components/map/BaseMaps.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { usePannelStore } from "_store/pannelStore";
import { Control, Icon, LatLngExpression } from "leaflet";
import { useEffect, useRef, useState } from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import {
LayerGroup,
LayersControl,
@@ -73,9 +73,9 @@ const StationsLayer = ({ attribution }: { attribution: Control.Attribution }) =>
queryKey: ["stations"],
queryFn: () => getStationsAPI(),
});
console.log("StationsLayer: stations", stations);
const [selectedStations, setSelectedStations] = useState<Station["id"][]>([]);
const [stationsWithIcon, setStationsWithIcon] = useState<(Station & { icon?: string })[]>([]); // Zustand für die Stationen mit Icon
const attributionText = "";
const resetSelection = () => {
@@ -94,27 +94,29 @@ const StationsLayer = ({ attribution }: { attribution: Control.Attribution }) =>
}
};
useEffect(() => {
// Erstelle die Icons für alle Stationen
const [stationsWithIcon, setStationsWithIcon] = useState<(Station & { icon: string })[]>([]);
useEffect(() => {
if (!stations) {
setStationsWithIcon([]);
return;
}
const fetchIcons = async () => {
if (!stations) return;
const urls = await Promise.all(
stations.map(async (station) => {
return createCustomMarker(station.operator);
return await createCustomMarker(station.operator);
}),
);
setStationsWithIcon(stations.map((station, index) => ({ ...station, icon: urls[index] })));
setStationsWithIcon(stations.map((station, index) => ({ ...station, icon: urls[index]! })));
};
fetchIcons();
}, [stations]);
return (
<FeatureGroup>
{stationsWithIcon.map((station) => {
{stationsWithIcon?.map((station) => {
const coordinates: LatLngExpression = [station.latitude, station.longitude];
const typeLabel = station.bosUse.charAt(0).toUpperCase();
const typeLabel = station.bosUse?.charAt(0).toUpperCase();
return (
<Marker