merge fix v1.0.8.1 Browser lädt ständig die Seite neu wenn keine Linien existieren
This commit is contained in:
ISA
@@ -1,79 +0,0 @@
|
||||
import { useEffect } from "react";
|
||||
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
|
||||
|
||||
const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms) => {
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
|
||||
// Entferne alte Marker
|
||||
GMA.clearLayers();
|
||||
|
||||
// Hinzufügen neuer Marker
|
||||
markers.forEach((marker) => {
|
||||
// Finde die Messungen, die zu diesem Marker gehören
|
||||
const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName);
|
||||
|
||||
let measurements = {};
|
||||
let area_name = marker.options.areaName;
|
||||
|
||||
relevantMeasurements.forEach((m) => {
|
||||
measurements[m.Na] = m.Val;
|
||||
});
|
||||
|
||||
// Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte
|
||||
const lt = measurements["LT"] || "---";
|
||||
const fbt = measurements["FBT"] || "---";
|
||||
const gt = measurements["GT"] || "---";
|
||||
const rlf = measurements["RLF"] || "---";
|
||||
|
||||
console.log(`Station oder Bereich ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`);
|
||||
|
||||
// Tooltip für den Marker binden
|
||||
marker.bindTooltip(
|
||||
`
|
||||
<div class="p-0 rounded-lg bg-white bg-opacity-90">
|
||||
<div class="font-bold text-sm text-black">
|
||||
<span>${area_name}</span>
|
||||
</div>
|
||||
<div class="font-bold text-xxs text-blue-700">
|
||||
<span>LT : ${lt} °C</span>
|
||||
</div>
|
||||
<div class="font-bold text-xxs text-red-700">
|
||||
<span>FBT : ${fbt} °C</span>
|
||||
</div>
|
||||
<div class="font-bold text-xxs text-yellow-500">
|
||||
<span>GT : ${gt}</span>
|
||||
</div>
|
||||
<div class="font-bold text-xxs text-green-700">
|
||||
<span>RLF : ${rlf} %</span>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
{
|
||||
permanent: true,
|
||||
direction: "auto",
|
||||
offset: [60, 0],
|
||||
}
|
||||
);
|
||||
|
||||
// Ereignisse für das Öffnen und Schließen des Tooltips
|
||||
marker.on("mouseover", function () {
|
||||
this.openPopup();
|
||||
});
|
||||
marker.on("mouseout", function () {
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
// Kontextmenü hinzufügen
|
||||
addContextMenuToMarker(marker);
|
||||
|
||||
// Füge den Marker zur Layer-Gruppe hinzu
|
||||
GMA.addLayer(marker);
|
||||
oms.addMarker(marker);
|
||||
});
|
||||
|
||||
map.addLayer(GMA);
|
||||
}, [map, markers, GisStationsMeasurements, GMA, oms]);
|
||||
};
|
||||
|
||||
export default useMarkersLayer;
|
||||
132
hooks/useLineData-old.js
Normal file
132
hooks/useLineData-old.js
Normal file
@@ -0,0 +1,132 @@
|
||||
// hooks/useLineData.js //fix v1.0.8.1
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-toastify";
|
||||
import { SERVER_URL } from "../config/urls";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
|
||||
const useLineData = (webserviceGisLinesStatusUrl, setLineStatusData) => {
|
||||
const dispatch = useDispatch();
|
||||
const messages = useSelector((state) => state.messages);
|
||||
const [lineColors, setLineColors] = useState({});
|
||||
const [tooltipContents, setTooltipContents] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
let isCancelled = false;
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response1 = await fetch(webserviceGisLinesStatusUrl);
|
||||
if (!response1.ok) throw new Error("Fehler bei GIS-Linienstatus");
|
||||
|
||||
const data1 = await response1.json();
|
||||
const response2 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/gisLines/readGisLines`);
|
||||
if (!response2.ok) throw new Error("Fehler beim Abrufen der GIS-Linien");
|
||||
|
||||
const data2 = await response2.json();
|
||||
const response3 = await fetch(`${SERVER_URL}:3000/api/talas_v5_DB/device/getAllStationsNames`);
|
||||
if (!response3.ok) throw new Error("Fehler beim Abrufen der Stationsnamen");
|
||||
|
||||
const namesData = await response3.json();
|
||||
|
||||
if (!isCancelled) {
|
||||
if (!data1.Statis || data1.Statis.length === 0) {
|
||||
toast.warn("Keine Linienstatus-Daten verfügbar!", { position: "top-center", autoClose: 5000 });
|
||||
setLineStatusData([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const colorsByModule = {};
|
||||
const newTooltipContents = {};
|
||||
const valueMap = {};
|
||||
|
||||
const sortedStatis = [...data1.Statis].sort((a, b) => a.Level - b.Level);
|
||||
|
||||
sortedStatis.forEach((statis) => {
|
||||
const key = `${statis.IdLD}-${statis.Modul}`;
|
||||
|
||||
if (!valueMap[key]) {
|
||||
valueMap[key] = {
|
||||
messages: [],
|
||||
messwert: undefined,
|
||||
schleifenwert: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
if (statis.DpName.endsWith("_Messwert") && statis.Value !== "True" && !valueMap[key].messwert) {
|
||||
valueMap[key].messwert = statis.Value;
|
||||
}
|
||||
if (statis.DpName.endsWith("_Schleifenwert") && !valueMap[key].schleifenwert) {
|
||||
valueMap[key].schleifenwert = statis.Value;
|
||||
}
|
||||
|
||||
if (statis.Message && statis.Message !== "?") {
|
||||
valueMap[key].messages.push({
|
||||
message: statis.Message,
|
||||
prioColor: statis.PrioColor && statis.PrioColor !== "#ffffff" ? statis.PrioColor : "green",
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
sortedStatis.forEach((statis) => {
|
||||
const key = `${statis.IdLD}-${statis.Modul}`;
|
||||
const matchingLine = data2.find((item) => item.idLD === statis.IdLD && item.idModul === statis.Modul);
|
||||
|
||||
if (matchingLine) {
|
||||
const values = valueMap[key];
|
||||
|
||||
const messageDisplay = values.messages.map((msg) => `<span class="inline-block text-gray-800"><span class="inline-block w-2 h-2 rounded-full mr-2" style="background-color: ${msg.prioColor};"></span>${msg.message}</span><br>`).join("");
|
||||
|
||||
colorsByModule[key] = values.messages.length > 0 ? values.messages[0].prioColor : "green";
|
||||
|
||||
newTooltipContents[key] = `
|
||||
<div class="bg-white rounded-lg m-0 p-2 w-[210px]">
|
||||
<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: ${namesData[matchingLine.idLD] || "N/A"}</span>
|
||||
<br>
|
||||
<div style="max-width: 100%; overflow-wrap: break-word; word-break: break-word; white-space: normal;">
|
||||
${messageDisplay}
|
||||
</div>
|
||||
<br>
|
||||
${values.messwert ? `<span class="inline-block text-gray-800">Messwert: ${values.messwert}</span><br>` : ""}
|
||||
${values.schleifenwert ? `<span class="inline-block text-gray-800">Schleifenwert: ${values.schleifenwert}</span>` : ""}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
});
|
||||
|
||||
setLineColors(colorsByModule);
|
||||
setTooltipContents(newTooltipContents);
|
||||
setLineStatusData(data1.Statis);
|
||||
}
|
||||
} catch (error) {
|
||||
//console.error("Fehler beim Abrufen der Daten in useLineData.js:", error);
|
||||
// toast.error("Fehler beim Abrufen der Linienstatus-Daten!", { position: "top-center", autoClose: 5000 });
|
||||
console.warn("Fehler beim Abrufen der Linienstatus-Daten in useLineData.js ");
|
||||
}
|
||||
};
|
||||
|
||||
const scheduleNextFetch = () => {
|
||||
if (!isCancelled) {
|
||||
fetchData();
|
||||
setTimeout(scheduleNextFetch, 30000);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
scheduleNextFetch();
|
||||
|
||||
return () => {
|
||||
isCancelled = true;
|
||||
localStorage.removeItem("contextMenuExpired");
|
||||
};
|
||||
}, [webserviceGisLinesStatusUrl, setLineStatusData]);
|
||||
|
||||
return { lineColors, tooltipContents };
|
||||
};
|
||||
|
||||
export default useLineData;
|
||||
@@ -1,19 +1,47 @@
|
||||
// hooks/usePoiTypData.js
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { toast } from "react-toastify"; // Toast für Warnungen importieren
|
||||
|
||||
const usePoiTypData = (url) => {
|
||||
const [poiTypData, setPoiTypData] = useState([]);
|
||||
const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
|
||||
const retryCountRef = useRef(0);
|
||||
const maxRetries = 2;
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPoiTypData = async () => {
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
if (!Array.isArray(data)) {
|
||||
console.warn(`Unerwartetes Format: ${JSON.stringify(data)}`);
|
||||
|
||||
if (data.warning) {
|
||||
toast.warn(data.warning, { position: "top-center", autoClose: 5000 });
|
||||
setPoiTypData([]); // Leeres Array setzen
|
||||
setIsPoiTypLoaded(true);
|
||||
return;
|
||||
}
|
||||
|
||||
throw new Error("Daten sind kein Array");
|
||||
}
|
||||
|
||||
// Erfolgreich geladen, also Reset des Retry-Zählers
|
||||
setPoiTypData(data);
|
||||
setIsPoiTypLoaded(true);
|
||||
retryCountRef.current = 0;
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Abrufen der poiTyp-Daten:", error);
|
||||
console.error("Fehler beim Abrufen der poiTyp-Daten in usePoiTypData.js :", error);
|
||||
|
||||
if (retryCountRef.current < maxRetries) {
|
||||
retryCountRef.current++;
|
||||
console.log(`Neuer Versuch (${retryCountRef.current}/${maxRetries}) in 5 Sekunden...`);
|
||||
setTimeout(fetchPoiTypData, 5000);
|
||||
} else {
|
||||
console.error("Maximale Anzahl an Fehlversuchen erreicht. Stoppe weitere Abrufe.");
|
||||
setIsPoiTypLoaded(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user