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

@@ -25,4 +25,4 @@ NEXT_PUBLIC_USE_MOCKS=true
NEXT_PUBLIC_BASE_PATH=/talas5 NEXT_PUBLIC_BASE_PATH=/talas5
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH= # Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.297 NEXT_PUBLIC_APP_VERSION=1.1.298

View File

@@ -26,4 +26,4 @@ NEXT_PUBLIC_BASE_PATH=/talas5
# Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH= # Oder leer lassen für direkten Zugriff -> NEXT_PUBLIC_BASE_PATH=
# App-Versionsnummer # App-Versionsnummer
NEXT_PUBLIC_APP_VERSION=1.1.297 NEXT_PUBLIC_APP_VERSION=1.1.298

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 const messageDisplay = values.messages
.map( .map(
msg => 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-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">${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">Slot: ${statis.Modul || "N/A"}</span><br>
<span class="text-md font-bold text-gray-800">Station: ${ <span class="text-md font-bold text-gray-800">Station: ${stationName}</span>
matchingLine.name || "N/A" <br>
}</span><br>
<div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;"> <div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
${messageDisplay} ${messageDisplay}
</div><br> </div>
<br>
${ ${
values.messwert values.messwert
? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>` ? `<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 { fetchGisLinesThunk } from "@/redux/thunks/database/polylines/fetchGisLinesThunk";
import { fetchGisLinesStatusThunk } from "@/../redux/thunks/webservice/fetchGisLinesStatusThunk"; import { fetchGisLinesStatusThunk } from "@/../redux/thunks/webservice/fetchGisLinesStatusThunk";
import { generateLineTooltipContent } from "./generateLineTooltipContent"; import { generateLineTooltipContent } from "./generateLineTooltipContent";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
const useLineData = () => { const useLineData = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -13,6 +14,7 @@ const useLineData = () => {
const linesData = useSelector(state => state.gisLinesFromDatabase.data); const linesData = useSelector(state => state.gisLinesFromDatabase.data);
const [lineColors, setLineColors] = useState({}); const [lineColors, setLineColors] = useState({});
const [tooltipContents, setTooltipContents] = useState({}); const [tooltipContents, setTooltipContents] = useState({});
const stations = useSelector(selectGisStationsStaticDistrict)?.Points ?? [];
useEffect(() => { useEffect(() => {
dispatch(fetchGisLinesThunk()); dispatch(fetchGisLinesThunk());
@@ -70,13 +72,18 @@ const useLineData = () => {
colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green"; 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); setLineColors(colorsByModule);
setTooltipContents(newTooltipContents); setTooltipContents(newTooltipContents);
}, [statisData, linesData]); }, [statisData, linesData, stations]);
return { lineColors, tooltipContents }; return { lineColors, tooltipContents };
}; };

4
package-lock.json generated
View File

@@ -1,12 +1,12 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.297", "version": "1.1.298",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "nodemap", "name": "nodemap",
"version": "1.1.297", "version": "1.1.298",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",

View File

@@ -1,6 +1,6 @@
{ {
"name": "nodemap", "name": "nodemap",
"version": "1.1.297", "version": "1.1.298",
"dependencies": { "dependencies": {
"@emotion/react": "^11.13.3", "@emotion/react": "^11.13.3",
"@emotion/styled": "^11.13.0", "@emotion/styled": "^11.13.0",