refactor: Tooltip-Generierung für Linien ausgelagert und Anzeige von Stationsnamen (LD_Name) hinzugefügt

- `generateLineTooltipContent` in eigene Datei extrahiert
- `useLineData` angepasst, um Stationen aus `gisStationsStaticDistrict` zu übergeben
- Anzeige der Station im Tooltip nun über `LD_Name` statt `matchingLine.name`
- Bugfix: "Station: N/A" wird nun korrekt angezeigt
This commit is contained in:
ISA
2025-06-25 08:43:26 +02:00
parent 89403164c6
commit 016e1a927d
6 changed files with 24 additions and 12 deletions

View File

@@ -1,4 +1,9 @@
export function generateLineTooltipContent(statis, matchingLine, values) {
// /components/gisPolylines/tooltip/generateLineTooltipContent.js
// KEIN useSelector hier!
export function generateLineTooltipContent(statis, matchingLine, values, stations) {
const station = stations.find(s => s.IdLD === statis.IdLD);
const stationName = station?.LD_Name || "N/A";
const messageDisplay = values.messages
.map(
msg =>
@@ -14,12 +19,12 @@ export function generateLineTooltipContent(statis, matchingLine, values) {
<span class="text-lg font-semibold text-gray-900">${statis.ModulName || "Unknown"}</span><br>
<span class="text-md font-bold text-gray-800">${statis.ModulTyp || "N/A"}</span><br>
<span class="text-md font-bold text-gray-800">Slot: ${statis.Modul || "N/A"}</span><br>
<span class="text-md font-bold text-gray-800">Station: ${
matchingLine.name || "N/A"
}</span><br>
<span class="text-md font-bold text-gray-800">Station: ${stationName}</span>
<br>
<div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
${messageDisplay}
</div><br>
</div>
<br>
${
values.messwert
? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>`

View File

@@ -5,6 +5,7 @@ import { selectGisLinesStatusFromWebservice } from "@/redux/slices/webservice/gi
import { fetchGisLinesThunk } from "@/redux/thunks/database/polylines/fetchGisLinesThunk";
import { fetchGisLinesStatusThunk } from "@/../redux/thunks/webservice/fetchGisLinesStatusThunk";
import { generateLineTooltipContent } from "./generateLineTooltipContent";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
const useLineData = () => {
const dispatch = useDispatch();
@@ -13,6 +14,7 @@ const useLineData = () => {
const linesData = useSelector(state => state.gisLinesFromDatabase.data);
const [lineColors, setLineColors] = useState({});
const [tooltipContents, setTooltipContents] = useState({});
const stations = useSelector(selectGisStationsStaticDistrict)?.Points ?? [];
useEffect(() => {
dispatch(fetchGisLinesThunk());
@@ -70,13 +72,18 @@ const useLineData = () => {
colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
newTooltipContents[key] = generateLineTooltipContent(statis, matchingLine, values);
newTooltipContents[key] = generateLineTooltipContent(
statis,
matchingLine,
values,
stations
);
}
});
setLineColors(colorsByModule);
setTooltipContents(newTooltipContents);
}, [statisData, linesData]);
}, [statisData, linesData, stations]);
return { lineColors, tooltipContents };
};