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

Add: Tailwind Utility-Klassen für verbesserte Stilgebung in MapComponent zuerst nur für poiLayer

Browse Source 
Dieser Commit führt die Nutzung von Tailwind CSS Utility-Klassen in der MapComponent ein, um eine konsistente und effiziente Stilgebung zu gewährleisten. Folgende Änderungen wurden vorgenommen:

- Hinzufügung von Tailwind-Klassen zu Popups und Tooltips, um das Erscheinungsbild der UI-Elemente zu standardisieren.
- Anwendung von Text- und Background-Utility-Klassen auf verschiedene Elemente innerhalb der Marker-Popups, um die Lesbarkeit und Benutzerfreundlichkeit zu erhöhen.
- Optimierung der bestehenden CSS-Klassen durch Tailwind-Utilities, um die Notwendigkeit manueller CSS-Definitionen zu reduzieren und die Wartbarkeit des Codes zu verbessern.

Diese Änderungen tragen dazu bei, das visuelle Erscheinungsbild der Karten-Interaktionen zu vereinheitlichen und die Anpassung an das bestehende Design-System zu erleichtern.
This commit is contained in:
ISA
2024-05-07 14:46:17 +02:00
parent 51b90410d9
commit d474ddcc41
7 changed files with 16 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
API/GisStationsMeasurements.idMap.10.txt
View File

@@ -1,100 +0,0 @@
// 20240426143439
// http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsMeasurements
{
"Name": "Liste aller Messungen der Geraete",
"Zeitstempel": "2024-04-26T14:34:39.4455818+02:00",
"IdMap": "10",
"Statis": [
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 3,
"Na": "FBT",
"Val": "20.5",
"Unit": "°C",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
},
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 10,
"Na": "GT",
"Val": "nicht ermittelbar",
"Unit": "°C",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
},
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 2,
"Na": "LT",
"Val": "Datenlücke",
"Unit": "°C",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
},
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 6,
"Na": "RLF",
"Val": "100.0",
"Unit": "%",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
},
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 11,
"Na": "TPT",
"Val": "8.3",
"Unit": "°C",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
},
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 12,
"Na": "TT1",
"Val": "---",
"Unit": "°C",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
},
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 16,
"Na": "WFD",
"Val": "0.12",
"Unit": "mm",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
},
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 8,
"Na": "WGM",
"Val": "---",
"Unit": "m/s",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
},
{
"IdLD": 50004,
"IdL": 18624,
"IdDP": 9,
"Na": "WGS",
"Val": "---",
"Unit": "m/s",
"Gr": "GMA",
"Area_Name": "Renzenhof (RG)"
}
]
}

265
API/GisStationsStaticDistrict.10.484.txt
View File

@@ -1,265 +0,0 @@
// 20240426143033
// http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStaticDistrict
{
"Name": "Liste aller Geraete einer bestimmten Karte",
"Zeitstempel": "2024-04-26T14:30:33.690396+02:00",
"IdMap": "10",
"Points": [
{
"LD_Name": "CPL Bentheim",
"IdLD": 50017,
"Device": "CPL V3.5 mit 16 Kü",
"Link": "cpl.aspx?ver=35&kue=16&id=50017",
"Location_Name": "Technikraum",
"Location_Short": "BEHE",
"IdLocation": 17448,
"Area_Name": "Bad-Bentheim",
"Area_Short": "BEHE--00",
"IdArea": 16418,
"X": 51.5728,
"Y": 9.00056,
"Icon": 20,
"System": 1,
"Active": 0
},
{
"LD_Name": "Drucker",
"IdLD": 50084,
"Device": "Basisgerät",
"Link": "basis.aspx?ver=1&id=50084",
"Location_Name": "Technikraum",
"Location_Short": "SLUE",
"IdLocation": 17776,
"Area_Name": "Schlüchtern II",
"Area_Short": "SLUE--00",
"IdArea": 14688,
"X": 53.2455,
"Y": 8.1614,
"Icon": 14,
"System": 200,
"Active": 0
},
{
"LD_Name": "Türkontakt",
"IdLD": 50666,
"Device": "ECI",
"Link": "eci.aspx?ver=1&id=50666",
"Location_Name": "Technikraum",
"Location_Short": "SLUE",
"IdLocation": 17776,
"Area_Name": "Schlüchtern II",
"Area_Short": "SLUE--00",
"IdArea": 14688,
"X": 53.2455,
"Y": 8.1614,
"Icon": 17,
"System": 2,
"Active": 0
},
{
"LD_Name": "Triptis",
"IdLD": 50888,
"Device": "CPL 200",
"Link": "cpl.aspx?ver=30&kue=16&id=50888",
"Location_Name": "Technikraum",
"Location_Short": "SLUE",
"IdLocation": 17776,
"Area_Name": "Schlüchtern II",
"Area_Short": "SLUE--00",
"IdArea": 14688,
"X": 53.2455,
"Y": 8.1614,
"Icon": 20,
"System": 1,
"Active": 0
},
{
"LD_Name": "Rodaborn I",
"IdLD": 50889,
"Device": "cpl.mio V>6",
"Link": "cplmio.aspx?ver=1&id=50889",
"Location_Name": "Technikraum",
"Location_Short": "SLUE",
"IdLocation": 17776,
"Area_Name": "Schlüchtern II",
"Area_Short": "SLUE--00",
"IdArea": 14688,
"X": 53.2455,
"Y": 8.1614,
"Icon": 20,
"System": 1,
"Active": 0
},
{
"LD_Name": "Rodaborn II",
"IdLD": 50900,
"Device": "cpl.mio V>6",
"Link": "cplmio.aspx?ver=1&id=50900",
"Location_Name": "Technikraum",
"Location_Short": "SLUE",
"IdLocation": 17776,
"Area_Name": "Schlüchtern II",
"Area_Short": "SLUE--00",
"IdArea": 14688,
"X": 53.2455,
"Y": 8.1614,
"Icon": 20,
"System": 1,
"Active": 0
},
{
"LD_Name": "Hermsdorf",
"IdLD": 50901,
"Device": "CPL V3.5 mit 24 Kü",
"Link": "cpl.aspx?ver=35&kue=24&id=50901",
"Location_Name": "Technikraum",
"Location_Short": "SLUE",
"IdLocation": 17776,
"Area_Name": "Schlüchtern II",
"Area_Short": "SLUE--00",
"IdArea": 14688,
"X": 53.2455,
"Y": 8.1614,
"Icon": 20,
"System": 1,
"Active": 1
},
{
"LD_Name": "GMA Littwin (TEST)",
"IdLD": 50004,
"Device": "Glättemeldeanlage",
"Link": "gma.aspx?ver=1&id=50004",
"Location_Name": "RG Relaisraum",
"Location_Short": "REZR",
"IdLocation": 18624,
"Area_Name": "Renzenhof (RG)",
"Area_Short": "REZHRG00",
"IdArea": 16570,
"X": 53.246036,
"Y": 8.163293,
"Icon": 1,
"System": 11,
"Active": 0
},
{
"LD_Name": "NRS Testserver",
"IdLD": 50005,
"Device": "Notruf Server",
"Link": "nrs_server.aspx?ver=1&id=50005",
"Location_Name": "(EV Ammersricht BZR REL)",
"Location_Short": "AMME",
"IdLocation": 21118,
"Area_Name": "Ammersricht BZR (FGN)",
"Area_Short": "AMMER--00",
"IdArea": 15958,
"X": 52.52726,
"Y": 12.165488,
"Icon": 19,
"System": 8,
"Active": 0
},
{
"LD_Name": "Gateway 2",
"IdLD": 50007,
"Device": "Notruf Server",
"Link": "nrs_server.aspx?ver=1&id=50007",
"Location_Name": "(EV Ammersricht BZR REL)",
"Location_Short": "AMME",
"IdLocation": 21118,
"Area_Name": "Ammersricht BZR (FGN)",
"Area_Short": "AMMER--00",
"IdArea": 15958,
"X": 52.52726,
"Y": 12.165488,
"Icon": 19,
"System": 8,
"Active": 0
},
{
"LD_Name": "Basisgerät mit SNMP MVP",
"IdLD": 50669,
"Device": "Basisgerät + SNMP",
"Link": "basisSNMP.aspx?&ver=1&id=50669",
"Location_Name": "Mylinghauserstraße Engelbert",
"Location_Short": "G-GEVELSBE-1",
"IdLocation": 24012,
"Area_Name": "Gevelsberg",
"Area_Short": "GMA-GEVELSBE",
"IdArea": 20919,
"X": 51.316799,
"Y": 7.33281,
"Icon": 14,
"System": 200,
"Active": 1
},
{
"LD_Name": "Server 3",
"IdLD": 50009,
"Device": "Notruf Server",
"Link": "nrs_server.aspx?ver=1&id=50009",
"Location_Name": "Militärringstraße Militärringstraße",
"Location_Short": "G-KÖLN-1",
"IdLocation": 24015,
"Area_Name": "Köln",
"Area_Short": "GMA-KÖLN",
"IdArea": 20921,
"X": 50.898399,
"Y": 6.92278,
"Icon": 19,
"System": 8,
"Active": 0
},
{
"LD_Name": "ICL Test 5",
"IdLD": 50054,
"Device": "ICL",
"Link": "icl.aspx?ver=1&id=50054",
"Location_Name": "Recheder Mühlenweg Dortmund-Ems-Kanal",
"Location_Short": "G-OLFEN-SE-1",
"IdLocation": 24022,
"Area_Name": "Olfen-Selm",
"Area_Short": "GMA-OLFEN-SE",
"IdArea": 20926,
"X": 51.702202,
"Y": 7.40822,
"Icon": 23,
"System": 100,
"Active": 0
},
{
"LD_Name": "ICL Test 3",
"IdLD": 50052,
"Device": "ICL",
"Link": "icl.aspx?ver=1&id=50052",
"Location_Name": "Weidenstraße Hestenberg",
"Location_Short": "G-PLETTENB-1",
"IdLocation": 24024,
"Area_Name": "Plettenberg",
"Area_Short": "GMA-PLETTENB",
"IdArea": 20928,
"X": 51.224098,
"Y": 7.86969,
"Icon": 23,
"System": 100,
"Active": 0
},
{
"LD_Name": "Test Februar Kai",
"IdLD": 50912,
"Device": "Dauerzählstelle DZ",
"Link": "dauz.aspx?ver=1&id=50912",
"Location_Name": "In der Hoffnung Kiesberg - BG Ost",
"Location_Short": "G-WUPPERTA-4",
"IdLocation": 24039,
"Area_Name": "Wuppertal",
"Area_Short": "GMA-WUPPERTA",
"IdArea": 20937,
"X": 51.238899,
"Y": 7.12715,
"Icon": 14,
"System": 110,
"Active": 1
}
]
}

182
API/GisStationsStatusDistrict.idMap.10.idUser.484.txt
View File

@@ -1,182 +0,0 @@
GisStationsStatusDistrict.idMap.10.idUser.484
// 20240426143804
// http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisStationsStatusDistrict
{
"Name": "Liste aller Statis der Geraete",
"Zeitstempel": "2024-04-26T14:38:04.5711759+02:00",
"IdMap": "10",
"Statis": [
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE04 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE05 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE06 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE07 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE09 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE10 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE12 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE13 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE14 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE15 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE16 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "system",
"Le": 4,
"Co": "#FF00FF",
"Me": "Eingang DE17 kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "minor",
"Le": 3,
"Co": "#FFFF00",
"Me": "KÃœG 07: Ãœbersapnnung kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50004,
"Na": "major",
"Le": 2,
"Co": "#FF9900",
"Me": "Fahrbahntemperatur okay",
"Feld": 53,
"Icon": 25
},
{
"IdLD": 50017,
"Na": "critical",
"Le": 1,
"Co": "#FF0000",
"Me": "KÃœG 01: Isolationsminderung kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "critical",
"Le": 1,
"Co": "#FF0000",
"Me": "KÃœG 02: Isolationsminderung kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "critical",
"Le": 1,
"Co": "#FF0000",
"Me": "KÃœG 03: Isolationsminderung kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "critical",
"Le": 1,
"Co": "#FF0000",
"Me": "KÃœG 04: Isolationsminderung kommend",
"Feld": 3,
"Icon": 0
},
{
"IdLD": 50017,
"Na": "critical",
"Le": 1,
"Co": "#FF0000",
"Me": "Ping True",
"Feld": 3,
"Icon": 0
}
]
}

108
API/GisSystemStatic.10.484.txt
View File

@@ -1,108 +0,0 @@
// 20240426143207
// http://10.10.0.13/talas5/ClientData/WebServiceMap.asmx/GisSystemStatic
{
"Name": "Liste aller angezeigten Systeme",
"Zeitstempel": "2024-04-26T14:32:06.9432321+02:00",
"IdMap": "10",
"Systems": [
{
"IdSystem": 1,
"Name": "TALAS",
"Longname": "Talas Meldestationen",
"Allow": 1,
"Icon": 1
},
{
"IdSystem": 2,
"Name": "ECI",
"Longname": "ECI Geräte",
"Allow": 1,
"Icon": 2
},
{
"IdSystem": 5,
"Name": "GSM Modem",
"Longname": "LR77 GSM Modems",
"Allow": 1,
"Icon": 5
},
{
"IdSystem": 6,
"Name": "Cisco Router",
"Longname": "Cisco Router",
"Allow": 1,
"Icon": 6
},
{
"IdSystem": 7,
"Name": "WAGO",
"Longname": "WAGO I/O Systeme",
"Allow": 1,
"Icon": 7
},
{
"IdSystem": 8,
"Name": "Siemens",
"Longname": "Siemens Notrufsystem",
"Allow": 1,
"Icon": 8
},
{
"IdSystem": 9,
"Name": "OTDR",
"Longname": "Glasfaserüberwachung OTU",
"Allow": 1,
"Icon": 9
},
{
"IdSystem": 10,
"Name": "WDM",
"Longname": " Wavelength Division Multiplexing",
"Allow": 1,
"Icon": 10
},
{
"IdSystem": 11,
"Name": "GMA",
"Longname": "Glättemeldeanlagen",
"Allow": 1,
"Icon": 11
},
{
"IdSystem": 13,
"Name": "Messstellen",
"Longname": "Messstellen",
"Allow": 1,
"Icon": 13
},
{
"IdSystem": 100,
"Name": "TALAS ICL",
"Longname": "Talas ICL Unterstationen",
"Allow": 1,
"Icon": 100
},
{
"IdSystem": 110,
"Name": "DAUZ",
"Longname": "Dauerzählstellen",
"Allow": 1,
"Icon": 110
},
{
"IdSystem": 111,
"Name": "SMS-Funkmodem",
"Longname": "SMS-Funkmodem",
"Allow": 1,
"Icon": 111
},
{
"IdSystem": 200,
"Name": "Sonstige",
"Longname": "Sonstige",
"Allow": 1,
"Icon": 200
}
]
}

13
components/MapComponent.js
View File

@@ -19,6 +19,7 @@ import { zoomTriggerState } from "../store/atoms/zoomTriggerState.js";
import { poiTypState } from "../store/atoms/poiTypState.js";
import ShowAddStationPopup from "./ShowAddStationPopup";
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
//import { createRoot } from "react-dom/client";
const plusRoundIcon = L.icon({
@@ -292,6 +293,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
{
text: "Station hinzufügen",
icon: "img/add_station.png",
//style background red color
className: "background-red",
callback: addStationCallback,
},
{
@@ -659,9 +662,13 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
});
// Popup konfigurieren
marker.bindPopup(
`<b>${location.description || "Unbekannt"}</b><br>Type: ${poiTypName}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
);
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
Type: ${poiTypName}<br>
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
</div>
`);
// Event-Handler hinzufügen
marker.on("mouseover", function () {

BIN
public/img/add_station.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 40 KiB

6
styles/global.css
View File

@@ -10,3 +10,9 @@
.leaflet-popup-content {
min-width: 250px; /* Adjust the width based on your requirements */
}
/* src/global.css */
.custom-marker-icon {
background-color: red !important;
padding: 10px !important;
color: white !important;
}