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

feat: Die Alarmanzeige ist jetzt als eigene Komponente (AlarmIndicator.js) im Verzeichnis uiWidgets erstellt und in MapComponent.js eingebunden.

Browse Source 
Wenn ein Alarm mit AlarmLink vorhanden ist, wird das Alarm-Icon angezeigt und öffnet beim Klick den Link in einem neuen Tab.
This commit is contained in:
ISA
2025-09-17 07:44:49 +02:00
parent f22bb4b232
commit 13ca1cece0
6 changed files with 54 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/mainComponent/MapComponent.js
View File

@@ -34,6 +34,7 @@ import { useMapComponentState } from "@/components/hooks/useMapComponentState.js
import CoordinatePopup from "@/components/contextmenu/CoordinatePopup.js";
//----------Ui Widgets----------------
import MapLayersControlPanel from "@/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
import AlarmIndicator from "@/components/uiWidgets/AlarmIndicator";
import CoordinateInput from "@/components/uiWidgets/CoordinateInput.js";
import VersionInfoModal from "@/components/uiWidgets/VersionInfoModal.js";
import AreaDropdown from "@/components/uiWidgets/AreaDropdown";
@@ -143,12 +144,25 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
selectGisLinesStatusFromWebservice
);
// Alarm Status aus GisStationsStatusDistrict
// Alarm Status und Link aus GisStationsStatusDistrict
const gisStationsStatusDistrict = useSelector(state => state.gisStationsStatusDistrict.data);
// Unterstützt sowohl Array-Shape (Statis[]) als auch Objekt mit Statis-Array
const hasActiveAlarm = Array.isArray(gisStationsStatusDistrict)
? gisStationsStatusDistrict.some(item => item?.Alarm === 1)
: gisStationsStatusDistrict?.Statis?.some(item => item?.Alarm === 1) || false;
let hasActiveAlarm = false;
let alarmLink = "";
let alarmText = "";
if (Array.isArray(gisStationsStatusDistrict)) {
const alarmObj = gisStationsStatusDistrict.find(item => item?.Alarm === 1 && item?.AlarmLink);
hasActiveAlarm = !!alarmObj;
alarmLink = alarmObj?.AlarmLink || "";
alarmText = alarmObj?.Me || "Alarm aktiv";
} else if (gisStationsStatusDistrict?.Statis) {
const alarmObj = gisStationsStatusDistrict.Statis.find(
item => item?.Alarm === 1 && item?.AlarmLink
);
hasActiveAlarm = !!alarmObj;
alarmLink = alarmObj?.AlarmLink || "";
alarmText = alarmObj?.Me || "Alarm aktiv";
}
const poiIconsData = useSelector(selectPoiIconsData);
const poiIconsStatus = useSelector(selectPoiIconsStatus);
const poiTypData = useSelector(selectPoiTypData);
@@ -1185,17 +1199,8 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
<div id="map" ref={mapRef} className="z-0" style={{ height: "100vh", width: "100vw" }}></div>
{/* Top-right controls: layers, info, expand, edit, and base map stack */}
<div className="absolute top-3 right-3 z-50 pointer-events-auto flex items-center gap-2">
{/* Alarm-Icon - nur anzeigen wenn Alarm aktiv */}
{hasActiveAlarm && (
<button
onClick={() => {}}
aria-label="Alarm aktiv"
className="rounded-full bg-white/90 hover:bg-white shadow p-1"
title="Alarm aktiv"
>
<AlarmIcon className="h-8 w-8 animate-pulse text-red-500" />
</button>
)}
{/* Alarm-Icon - nur anzeigen wenn Alarm aktiv und Link vorhanden */}
<AlarmIndicator hasAlarm={hasActiveAlarm} alarmLink={alarmLink} alarmText={alarmText} />
{/* Marker-Icon (line-md) */}
<button
onClick={() => setOverlay(prev => (prev === "area" ? null : "area"))}