nodeMap/docs/architecture.md

🧠 Architekturübersicht – NodeMap

Dieses Dokument beschreibt die technische Gesamtarchitektur des Projekts NodeMap, einer kartenbasierten Webanwendung zur Anzeige, Bearbeitung und Verwaltung von GIS-Daten, POIs und Gerätestatus.

---

⚙️ Technologie-Stack

Komponente	Beschreibung
Frontend	React 18 + Next.js (App Router)
State-Management	Redux Toolkit mit zentralem Store, Thunks & Slices
UI	Tailwind CSS + Leaflet + React-Icons
Backend-Anbindung	Webservices via WebServiceMap.asmx (IIS) + lokale Next.js API für DB
Datenbank	MySQL (Produktiv & Entwicklung, z. T. via Docker)
Deployment	Windows Server (IIS), optional per nssm als Dienst

---

🗺️ Architekturüberblick

+------------------+       +------------------+       +------------------+
|   Leaflet Map    | <---> |   Redux Store    | <---> |   Webservices    |
| (Interaktivität) |       |  (Status & Data) |       |  (IIS, .asmx)    |
+------------------+       +------------------+       +------------------+
        ^
        |
        v
+------------------+       +------------------+        +-------------------+
|  POI-Komponenten | <---> |   Redux Slices   | <--->  | Next.js API-Routen|
|   (Add/Edit)     |       | (z. B. poiSlice) |        |   (Datenbank)     |
+------------------+       +------------------+        +-------------------+

---

🔁 Datenfluss (Beispiel: POI anzeigen)

1. Leaflet-Karte lädt bei MapComponent Mounting
2. Redux-Thunk fetchPoiMarkersThunk wird ausgelöst
3. Thunk ruft fetchPoiDataService.js (DB) oder Webservice (IIS) auf
4. Ergebnisse werden im Slice readPoiMarkersStoreSlice gespeichert
5. Komponenten lesen POI-Daten über useSelector(...) aus dem Store
6. POIs werden als Marker in Leaflet gesetzt

---

📁 Schlüsselfunktionen & Module

Bereich	Datei/Modul	Aufgabe
Kartenlogik	MapComponent.js	Zentrale Initialisierung und Layer-Logik
Webservices	services/webservice/	Kommunikation mit TALAS V5 Webservice
Datenbank	services/database/	Zugriff auf lokale Next.js-API & DB
POIs	AddPOIModal.js, PoiUpdateModal.js	UI für POI-Erstellung & -Bearbeitung
Redux	redux/slices/, redux/thunks/, redux/store	Globaler State, API-Steuerung
Konfiguration	.env.local, config.js, dynamic URLs	IP, basePath, Ports

---

🧩 Besonderheiten

• Konfigurierbarer basePath:
  Pfad wie /talas5 ist optional und kann per NEXT_PUBLIC_BASE_PATH in .env.local gesetzt werden.
• Rechteabhängige UI:
  Funktionen (z. B. POI bearbeiten) basieren auf Benutzerrechten (IdRight) vom Server.
• Zentrale Komponentensteuerung:
  Komponenten wie MapLayersControlPanel oder CoordinatePopup kontrollieren Layer & Interaktion.
• Kontextmenü-Logik:
  Marker & Polylinien besitzen eigene Kontextmenüs – dynamisch zusammengesetzt und verwaltet.

---

📦 Versionierung & Builds

• Version ist in appVersion.js definiert → wird über NEXT_PUBLIC_APP_VERSION eingeblendet
• Build erfolgt via npm run build, Auslieferung über .next/
• Nicht benötigte Dateien wie __tests__, docs/, scripts/ etc. werden nicht in den Build aufgenommen

---

📚 Weiterführende Dokumentation

• build-and-deploy.md
• env.local.schema.md
• redux/slices/
• services/webservice/

---

---

🔙 Zurück zu docs