78 lines
2.2 KiB
Markdown
78 lines
2.2 KiB
Markdown
<!-- /docs/components/README.md -->
|
||
|
||
# 🧩 `components/` – Übersicht über alle UI-Komponenten
|
||
|
||
Dieses Verzeichnis enthält die gesamten React-Komponenten der TALAS-Kartenanwendung.
|
||
Sie sind thematisch gegliedert in Teilbereiche für Kontextmenüs, POIs, Polylinien, Modale und die zentrale `MapComponent`.
|
||
|
||
---
|
||
|
||
## 📁 Strukturübersicht
|
||
|
||
```bash
|
||
components/
|
||
├── contextmenu/ # Komponenten für rechte Maustaste & Kontextaktionen
|
||
│ ├── CoordinatePopup.js
|
||
│ └── useMapContextMenu.js
|
||
|
||
├── gisPolylines/ # Polylinien (Kabelstrecken)
|
||
│ ├── PolylineContextMenu.js
|
||
│ └── icons/
|
||
│ ├── CircleIcon.js
|
||
│ ├── EndIcon.js
|
||
│ ├── StartIcon.js
|
||
│ └── SupportPointIcons.js
|
||
|
||
├── icons/devices/overlapping/ # Zusätzliche Overlap-Icons für Geräte
|
||
│ └── PlusRoundIcon.js
|
||
|
||
├── mainComponent/ # Hauptkomponenten für Karteninitialisierung
|
||
│ ├── MapComponent.js
|
||
│ └── hooks/
|
||
│ └── useInitializeMap.js
|
||
|
||
├── pois/ # POI-spezifische Modale
|
||
│ ├── AddPOIModal.js
|
||
│ └── PoiUpdateModal.js
|
||
|
||
├── uiWidgets/ # UI-Widgets
|
||
│ ├── CoordinateInput.js
|
||
│ ├── VersionInfoModal.js
|
||
│ ├── TestScript.js
|
||
│ └── mapLayersControlPanel/
|
||
│ ├── EditModeToggle.js
|
||
│ └── MapLayersControlPanel.js
|
||
```
|
||
|
||
---
|
||
|
||
## 🔎 Beschreibung der Hauptbereiche
|
||
|
||
### `contextmenu/`
|
||
|
||
Rechtsklick-Menüs für Marker, POIs, Polylinien. Steuert Anzeige & Verhalten.
|
||
|
||
### `gisPolylines/`
|
||
|
||
Komponenten für das Zeichnen, Bearbeiten und Interagieren mit Linien/Strecken.
|
||
|
||
### `mainComponent/`
|
||
|
||
Zentrale Leaflet-Map-Logik & Initialisierung via `MapComponent` und `useInitializeMap`.
|
||
|
||
### `pois/`
|
||
|
||
Modale für das Hinzufügen und Bearbeiten von POIs (Points of Interest).
|
||
|
||
### `uiWidgets/`
|
||
|
||
Komponenten wie Eingabefelder für Koordinaten-Suche, Infoboxen und Control Panel für Geräte Layers .
|
||
|
||
---
|
||
|
||
## ✅ Besonderheiten
|
||
|
||
- Verwendet **Tailwind CSS** für Styling
|
||
- Integration mit Redux, Leaflet, OverlappingMarkerSpiderfier
|
||
- Vollständig modular & testbar aufgebaut
|