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

feat(gma): GMA-Werte aus Measurements-Redux im Marker-Tooltip angezeigt

Browse Source 
- createAndSetDevices.js erweitert mit dynamischer GMA-Zuordnung
- Tooltip für System 11 zeigt LT, FBT, GT, RLF
- GMA-Zuordnung über gmaMap basierend auf Na und IdLD
- Version auf 1.1.232 erhöht
This commit is contained in:
ISA
2025-06-04 12:14:14 +02:00
parent d80b36cb2d
commit f4342e17ef
6 changed files with 126 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
components/pois/PoiUpdateModal.js
View File

@@ -14,7 +14,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
const mapLayersVisibility = useSelector(selectMapLayersState);
const poiTypData = useSelector(selectPoiTypData);
const poiTypStatus = useSelector(selectPoiTypStatus);
const devices = useSelector((state) => state.locationDevicesFromDB.devices);
const devices = useSelector(state => state.locationDevicesFromDB.devices);
const [poiId, setPoiId] = useState(poiData?.idPoi || "");
const [name, setName] = useState(poiData?.name || "");
@@ -22,24 +22,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
const [deviceName, setDeviceName] = useState(null);
const [poiTypeId, setPoiTypeId] = useState(null);
const systemNameToIdMap = {
TALAS: 1,
ECI: 2,
ULAF: 3,
GSMModem: 5,
CiscoRouter: 6,
WAGO: 7,
Siemens: 8,
OTDR: 9,
WDM: 10,
GMA: 11,
Messdatensammler: 12,
Messstellen: 13,
TALASICL: 100,
DAUZ: 110,
SMSFunkmodem: 111,
Basisgerät: 200,
};
const systemNameToIdMap = {};
useEffect(() => {
dispatch(fetchLocationDevicesThunk());
@@ -50,7 +33,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
useEffect(() => {
if (poiData && devices.length > 0) {
const selectedDevice = devices.find((device) => device.idLD === poiData.idLD);
const selectedDevice = devices.find(device => device.idLD === poiData.idLD);
if (selectedDevice) {
setDeviceName({ value: selectedDevice.idLD, label: selectedDevice.name });
}
@@ -59,7 +42,7 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
useEffect(() => {
if (poiData && poiTypData.length > 0) {
const selectedTyp = poiTypData.find((typ) => typ.idPoiTyp === poiData.idPoiTyp);
const selectedTyp = poiTypData.find(typ => typ.idPoiTyp === poiData.idPoiTyp);
if (selectedTyp) {
setPoiTypeId({ value: selectedTyp.idPoiTyp, label: selectedTyp.name });
}
@@ -67,12 +50,16 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
}, [poiData, poiTypData]);
const filterDevices = () => {
const activeSystems = Object.keys(mapLayersVisibility).filter((system) => mapLayersVisibility[system]);
const activeSystemIds = activeSystems.map((system) => systemNameToIdMap[system]).filter((id) => id !== undefined);
return devices.filter((device) => activeSystemIds.includes(device.idsystem_typ));
const activeSystems = Object.keys(mapLayersVisibility).filter(
system => mapLayersVisibility[system]
);
const activeSystemIds = activeSystems
.map(system => systemNameToIdMap[system])
.filter(id => id !== undefined);
return devices.filter(device => activeSystemIds.includes(device.idsystem_typ));
};
const handleSubmit = async (event) => {
const handleSubmit = async event => {
event.preventDefault();
try {
await dispatch(
@@ -106,25 +93,25 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
};
const poiTypeOptions = Array.isArray(poiTypData)
? poiTypData.map((poiTyp) => ({
? poiTypData.map(poiTyp => ({
value: poiTyp.idPoiTyp,
label: poiTyp.name,
}))
: [];
const deviceOptions = filterDevices().map((device) => ({
const deviceOptions = filterDevices().map(device => ({
value: device.idLD,
label: device.name,
}));
const customStyles = {
control: (provided) => ({
control: provided => ({
...provided,
width: "100%",
minWidth: "300px",
maxWidth: "100%",
}),
menu: (provided) => ({
menu: provided => ({
...provided,
width: "100%",
minWidth: "300px",
@@ -132,11 +119,32 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
};
return (
<div className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]" onClick={onClose}>
<div className="relative bg-white p-6 rounded-lg shadow-lg" onClick={(e) => e.stopPropagation()}>
<button onClick={onClose} className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600" aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
<div
className="fixed inset-0 bg-black bg-opacity-10 flex justify-center items-center z-[1000]"
onClick={onClose}
>
<div
className="relative bg-white p-6 rounded-lg shadow-lg"
onClick={e => e.stopPropagation()}
>
<button
onClick={onClose}
className="absolute top-0 right-0 mt-2 mr-2 p-1 text-gray-700 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-600"
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
<form onSubmit={handleSubmit} className="m-0 p-2 w-full">
@@ -144,27 +152,58 @@ const PoiUpdateModal = ({ onClose, poiData }) => {
<label htmlFor="description" className="block mb-2 font-bold text-sm text-gray-700">
Beschreibung:
</label>
<input type="text" id="description" name="description" value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Beschreibung der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
<input
type="text"
id="description"
name="description"
value={description}
onChange={e => setDescription(e.target.value)}
placeholder="Beschreibung der Station"
className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
/>
</div>
<div className="flex flex-col mb-4">
<label htmlFor="deviceName" className="block mb-2 font-bold text-sm text-gray-700">
Gerät:
</label>
<Select id="deviceName" value={deviceName} onChange={setDeviceName} options={deviceOptions} placeholder="Gerät auswählen..." isClearable={true} styles={customStyles} />
<Select
id="deviceName"
value={deviceName}
onChange={setDeviceName}
options={deviceOptions}
placeholder="Gerät auswählen..."
isClearable={true}
styles={customStyles}
/>
</div>
<div className="flex flex-col mb-4">
<label htmlFor="idPoiTyp" className="block mb-2 font-bold text-sm text-gray-700">
Typ:
</label>
<Select id="idPoiTyp" value={poiTypeId} onChange={setPoiTypeId} options={poiTypeOptions} placeholder="Typ auswählen..." isClearable={true} styles={customStyles} />
<Select
id="idPoiTyp"
value={poiTypeId}
onChange={setPoiTypeId}
options={poiTypeOptions}
placeholder="Typ auswählen..."
isClearable={true}
styles={customStyles}
/>
</div>
<button type="button" onClick={handleDeletePoi} className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4">
<button
type="button"
onClick={handleDeletePoi}
className="bg-red-400 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full mb-4"
>
POI löschen
</button>
<button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
<button
type="submit"
className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
>
POI aktualisieren
</button>
</form>