<!-- /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`](./build-and-deploy.md)
- [`env.local.schema.md`](./env.local.schema.md)
- [`redux/slices/`](./redux/slices/)
- [`services/webservice/`](./services/webservice/)

---

## Dynamische Layer-Verwaltung mit Redux

```mermaid
flowchart TD
    %% Webservice
    subgraph Webservice
        A1[GisSystemStatic API]
        A2[GisStationsStaticDistrict API]
    end

    %% Redux
    subgraph Redux
        B1[fetchGisSystemStaticThunk]
        B2[fetchGisStationsStaticDistrictThunk]
        C1["gisSystemStaticSlice → selectGisSystemStatic"]
        C2["gisStationsStaticDistrictSlice → selectGisStationsStaticDistrict"]
        C3["mapLayersSlice → mapLayersVisibility"]
    end

    %% React
    subgraph React-Komponente
        D1[MapComponent.js]
        D2["useEffect: dynamische Layer"]
        D3["createAndSetDevices"]
        D4["layerRefs (useRef)"]
        D5["markerStates (useState)"]
        D6["useEffect: Sichtbarkeit prüfen"]
        D7["Map aktualisieren / add/remove"]
        D8["checkOverlappingMarkers"]
    end

    %% Datenfluss
    A1 --> B1 --> C1 --> D2
    A2 --> B2 --> C2 --> D3
    C3 --> D6
    D2 --> D3
    D3 --> D4
    D3 --> D5
    D5 --> D6
    D6 --> D7
    D6 --> D8
    D7 --> D1


```