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:
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
@@ -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>`
|
||||||
|
|||||||
@@ -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
4
package-lock.json
generated
@@ -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",
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user