Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sonstige Popup per mouseove

Browse Source
This commit is contained in:
ISA
2024-04-26 08:50:15 +02:00
parent 5b338ada12
commit ddd39bc1ef
4 changed files with 51 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/DataSheet.js
View File

@@ -18,11 +18,11 @@ function DataSheet() {
const GisSystemStatic = useRecoilValue(gisSystemStaticState); const GisSystemStatic = useRecoilValue(gisSystemStaticState);
useEffect(() => { useEffect(() => {
console.log( /* console.log(
"GisStationsStaticDistrict in DataSheet:", "GisStationsStaticDistrict in DataSheet:",
GisStationsStaticDistrict GisStationsStaticDistrict
); );
console.log("GisSystemStatic in DataSheet:", GisSystemStatic); console.log("GisSystemStatic in DataSheet:", GisSystemStatic); */
// Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
const seenNames = new Set(); const seenNames = new Set();
@@ -63,7 +63,7 @@ function DataSheet() {
name: area.Name, name: area.Name,
})); }));
setSystemListing(newSystemListing); setSystemListing(newSystemListing);
console.log("System Listing:", systemListing); //console.log("System Listing:", systemListing);
}, [GisStationsStaticDistrict]); }, [GisStationsStaticDistrict]);
const [checkedStations, setCheckedStations] = useState({}); const [checkedStations, setCheckedStations] = useState({});
@@ -194,23 +194,23 @@ function DataSheet() {
}; };
const handleStationChange = (event) => { const handleStationChange = (event) => {
console.log("Station selected:", event.target.value); //console.log("Station selected:", event.target.value);
}; };
const resetView = () => { const resetView = () => {
console.log("View has been reset"); console.log("View has been reset");
}; };
useEffect(() => { useEffect(() => {
console.log("Checked Stations:", checkedStations); //console.log("Checked Stations:", checkedStations);
// Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus // Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus
const talasStation = systemListing.find( const talasStation = systemListing.find(
(station) => station.name === "TALAS" (station) => station.name === "TALAS"
); );
if (talasStation) { if (talasStation) {
console.log( /* console.log(
"TALAS Station ist gecheckt:", "TALAS Station ist gecheckt:",
checkedStations[talasStation.id] checkedStations[talasStation.id]
); ); */
} }
}, [checkedStations, systemListing]); }, [checkedStations, systemListing]);
const eciStation = systemListing.find((station) => station.name === "ECI"); const eciStation = systemListing.find((station) => station.name === "ECI");

78
components/MapComponent.js
View File

@@ -176,7 +176,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält // Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
if (jsonResponse && jsonResponse.Systems) { if (jsonResponse && jsonResponse.Systems) {
setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems' setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
console.log("GisSystemStatic:", jsonResponse.Systems); // console.log("GisSystemStatic:", jsonResponse.Systems);
} else { } else {
console.error( console.error(
'Erwartete Daten im "Systems"-Array nicht gefunden', 'Erwartete Daten im "Systems"-Array nicht gefunden',
@@ -212,7 +212,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
useEffect(() => { useEffect(() => {
if (typeof window !== "undefined") { if (typeof window !== "undefined") {
console.log("Window height from config:", config.windowHeight); //console.log("Window height from config:", config.windowHeight);
} }
}, []); }, []);
@@ -798,7 +798,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("talasMarkers", talasMarkers); //console.log("talasMarkers", talasMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -819,7 +819,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, eciMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, eciMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("eciMarkers", eciMarkers); //console.log("eciMarkers", eciMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -840,7 +840,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, gsmModemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, gsmModemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("gsmModemMarkers", gsmModemMarkers); //console.log("gsmModemMarkers", gsmModemMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -861,7 +861,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, ciscoRouterMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, ciscoRouterMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("ciscoRouterMarkers", ciscoRouterMarkers); //console.log("ciscoRouterMarkers", ciscoRouterMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -884,7 +884,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
// }, [map, wagoMarkers, mapLayersVisibility.WAGO]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken // }, [map, wagoMarkers, mapLayersVisibility.WAGO]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
}, [map, wagoMarkers]); }, [map, wagoMarkers]);
console.log("wagoMarkers", wagoMarkers); //console.log("wagoMarkers", wagoMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -905,7 +905,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, siemensMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, siemensMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("siemensMarkers", siemensMarkers); //console.log("siemensMarkers", siemensMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -926,7 +926,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, otdrMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, otdrMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("otdrMarkers", otdrMarkers); //console.log("otdrMarkers", otdrMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -947,7 +947,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, wdmMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, wdmMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("wdmMarkers", wdmMarkers); //console.log("wdmMarkers", wdmMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -971,7 +971,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
let measurementGT = measurements["GT"]; let measurementGT = measurements["GT"];
let measurementRLF = measurements["RLF"]; let measurementRLF = measurements["RLF"];
console.log( /* console.log(
"area_name", "area_name",
area_name, area_name,
"------measurementLT", "------measurementLT",
@@ -983,7 +983,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
"------measurementRLF", "------measurementRLF",
measurements.RLF measurements.RLF
); );
console.log("measurements", measurements); console.log("measurements", measurements); */
gmaMarkers.forEach((marker) => { gmaMarkers.forEach((marker) => {
marker.addTo(map); marker.addTo(map);
oms.addMarker(marker); oms.addMarker(marker);
@@ -1002,7 +1002,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
<span>FBT : ${measurements.FBT} °C</span> <span>FBT : ${measurements.FBT} °C</span>
</div> </div>
<div class="font-bold text-sm text-gray-700 mt-1"> <div class="font-bold text-sm text-gray-700 mt-1">
<span>GT : ${measurements.GT === 'nicht ermittelbar' ? measurements.GT : `${measurements.GT} °C`}</span> <span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span>
</div> </div>
<div class="font-bold text-sm text-gray-700 mt-1"> <div class="font-bold text-sm text-gray-700 mt-1">
<span>RLF : ${measurements.RLF} %</span> <span>RLF : ${measurements.RLF} %</span>
@@ -1015,7 +1015,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
); );
// Popup beim Überfahren mit der Maus öffnen und schließen // Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () { marker.on("mouseover", function () {
this.openPopup(); this.openPopup();
@@ -1028,7 +1027,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken }, [map, gmaMarkers]); // Abhängigkeiten auf `map` und `gmaMarkers` beschränken
console.log("gmaMarkers", gmaMarkers); //console.log("gmaMarkers", gmaMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
@@ -1050,7 +1049,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, messstellenMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, messstellenMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("messstellenMarkers", messstellenMarkers); //console.log("messstellenMarkers", messstellenMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -1071,7 +1070,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, talasiclMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, talasiclMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("talasiclMarkers", talasiclMarkers); //console.log("talasiclMarkers", talasiclMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -1090,7 +1089,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, dauzMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, dauzMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("dauzMarkers", dauzMarkers); //console.log("dauzMarkers", dauzMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -1109,27 +1108,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, smsfunkmodemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, smsfunkmodemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("smsfunkmodemMarkers", smsfunkmodemMarkers); //console.log("smsfunkmodemMarkers", smsfunkmodemMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
/* useEffect(() => {
// Drucker ist hier und noch eine Marker "SNMP"
if (map && sonstigeMarkers.length) {
sonstigeMarkers.forEach((marker) => {
marker.addTo(map);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
}
}, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("sonstigeMarkers", sonstigeMarkers); */
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
@@ -1148,7 +1127,26 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
} }
}, [map, ulafMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken }, [map, ulafMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
console.log("ulafMarkers", ulafMarkers); //console.log("ulafMarkers", ulafMarkers);
//-------------------------------------------
//--------------------------------------------------------------------------------
useEffect(() => {
if (map && sonstigeMarkers.length) {
sonstigeMarkers.forEach((marker) => {
marker.addTo(map);
// Popup beim Überfahren mit der Maus öffnen und schließen
marker.on("mouseover", function () {
this.openPopup();
});
marker.on("mouseout", function () {
this.closePopup();
});
});
}
}, [map, sonstigeMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
//console.log("sonstige", sonstigeMarkers);
//------------------------------------------- //-------------------------------------------
//-------------------------------------------------------------------------------- //--------------------------------------------------------------------------------

8
config/config.js
View File

@@ -31,17 +31,17 @@ if (typeof window !== "undefined") {
user = url.searchParams.get("u") || "485"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484 oder 485' user = url.searchParams.get("u") || "485"; // Ein weiterer Parameter aus der URL, Standardwert ist '487 oder 484 oder 485'
// Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen // Konstruktion von URLs, die auf spezifische Ressourcen auf dem Server zeigen
/* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`; mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict?idMap=${c}&idUser=${user}`;
mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`; mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict?idMap=${c}&idUser=${user}`;
mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`; mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements?idMap=${c}`;
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`; mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic?idMap=${c}&idUser=${user}`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */ mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`;
mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`; /* mapGisStationsStaticDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStaticDistrict`;
mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`; mapGisStationsStatusDistrictUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsStatusDistrict`;
mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`; mapGisStationsMeasurementsUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisStationsMeasurements`;
mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`; mapGisSystemStaticUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GisSystemStatic`;
mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; mapDataIconUrl = `${serverURL}/talas5/ClientData/WebserviceMap.asmx/GetIconsStatic`; */
// URLs zu Offline-Daten, falls benötigt // URLs zu Offline-Daten, falls benötigt
} }

4
pages/api/[...path].js
View File

@@ -2,8 +2,8 @@
import { createProxyMiddleware } from "http-proxy-middleware"; import { createProxyMiddleware } from "http-proxy-middleware";
export default createProxyMiddleware({ export default createProxyMiddleware({
//target: "http://10.10.0.13", // Ziel-URL des Proxys target: "http://10.10.0.13", // Ziel-URL des Proxys
target: "http://192.168.10.187:3000", // Ziel-URL des Proxys //target: "http://192.168.10.187:3000", // Ziel-URL des Proxys
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
"^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert "^/api": "/", // Optional: Entfernt /api aus dem Pfad, wenn das Backend dies nicht erfordert