# 🌍 NodeMap – Interaktive Kartenvisualisierung mit Leaflet & React

NodeMap ist eine modulare Kartenanwendung zur Visualisierung und Bearbeitung von GIS-Daten, POIs und Gerätestatus in einer interaktiven Leaflet-Karte.  
Die Anwendung ist mit **Next.js**, **React**, **Redux Toolkit**, **Tailwind CSS** und **Leaflet** umgesetzt.

---

## 📌 Ziel des Projekts in 30 Sekunden

Diese Anwendung dient der Visualisierung und Bearbeitung von Karteninhalten (POIs, Gerätestatus) innerhalb von TALAS V5.  
Sie funktioniert vollständig lokal und offline auf Windows-Servern – gesteuert über URL-Parameter `?m=` (Map-ID) und `?u=` (User-ID).

---

## 🧭 Zielumgebung

- Windows-Produktionsserver (offline, kein Internet)
- Kommunikation nur im lokalen Netzwerk
- Nutzerzugriff per VPN + Remote Desktop (RDP)
- Integration per iFrame in TALAS V5 / TALAS.web

---

## 🔄 Wie funktioniert das System?

1. TALAS ruft die App mit URL auf: `http://10.10.0.13:3000/?m=10&u=484`
2. Die App liest `m` und `u` aus der URL
3. `MapComponent` lädt POIs, Linien, Rechte entsprechend
4. API-Endpunkte kommunizieren lokal mit Datenbankserver (MySQL)
5. Interaktive Bearbeitung (POI hinzufügen, verschieben, löschen) ist möglich

---

## 🚀 Funktionen

- Leaflet-basierte interaktive Karte
- Rechtebasierte UI durch URL-Parameter (`?m`, `?u`)
- POI hinzufügen, bearbeiten, verschieben, löschen
- Gerätestatus und Layeranzeige
- Intervallbasierte Datenaktualisierung
- Integration als iFrame in TALAS
- Versionsanzeige über `.env.local`
- Testdaten per Mock-API möglich

---

## 🧱 Projektstruktur

```bash
components/     → UI-Komponenten inkl. Map
config/         → zentrale Variablen (.env.local)
hooks/          → eigene React-Hooks
redux/          → globale Zustände (Slices)
services/       → API-Kommunikation, Mock-Logik
utils/          → POI- und Linienverarbeitung
lib/            → Formatierungen, Umrechnungen
public/         → mapTiles, Bilder, Icons
pages/          → Next.js Seiten & Routen
scripts/        → lokale Tools (nur Dev)
```

---

## ⚙ Lokale Entwicklung

```bash
npm install
npm run dev
```

> 🔧 Nur für Entwicklung. Kein VPN, kein iFrame nötig.  
> API-Aufrufe ggf. via Mockdaten.

---

## 🖥 Installation auf Server (Test oder Produktion)

### 1. Build erstellen

```bash
npm install
npm run build
```

### 2. Dateien übertragen nach:

```
C:\inetpub\wwwroot/talas5/nodeMap
```

Beinhaltet:

- `.next/`, `node_modules/`, `public/`
- `components/`, `pages/`, `redux/`, `hooks/`, `services/`, `config/`, `utils/`, `lib/`
- `package.json`, `.env.local`

### 3. Starten

```bash
npm start
```

---

## 🔁 Code-Update

Wenn keine neue Bibliotheken installiert ist mit npm install:

- `.next/` ersetzen
- `components/`, `redux/`, `config/`, etc. nur bei Änderungen
- `.env.local` ggf. anpassen

---

## 🌐 Portfreigabe

- Anwendung läuft auf Port `3000`
- Muss in Windows-Firewall freigegeben sein
- Kein Zugriff über `localhost` im Netzwerk – **nur über IP**

Beispiel:

```
http://10.10.0.13:3000/?m=8&u=482
```

---

## 🔗 Integration in TALAS

- Die App wird in einem **iFrame** geladen
- Startet über `?m=X&u=Y` für Map-/User-IDs
- Rechte und Inhalte werden automatisch geladen
- Kein statischer Export (`npm run export`) notwendig!

---

## 🔐 Konfiguration – `.env.local`

```env
NEXT_PUBLIC_APP_VERSION=1.1.59
NEXT_PUBLIC_USE_MOCK_API=true
NEXT_PUBLIC_SERVER_URL=http://10.10.0.13:3000
```

- Nur `NEXT_PUBLIC_...` ist im Browser sichtbar
- Keine Passwörter oder Tokens hier speichern

---

## 🧠 Zustand: Recoil zu Redux-Migration

| Zustand / Atom           | Migration             |
| ------------------------ | --------------------- |
| poiLayerVisible (Recoil) | ✅ zu Redux umgezogen |
| selectedPoi              | ❌ noch in Recoil     |
| mapLayersState           | ✅ bereits in Redux   |

➡ Neue Features bitte nur noch mit Redux umsetzen!

---

## 🧪 Mockdaten (nur Entwicklung)

```env
NEXT_PUBLIC_USE_MOCK_API=true
```

→ Lädt `/api/mockData/...` statt echtem Server.

---

## 🧰 Fehler & Debug

- Fehler per Toast oder `console.log`
- Logging möglich:

```bash
npm start > log.txt 2>&1
```

- Nur aktiv bei:

```js
if (process.env.NEXT_PUBLIC_DEBUG === 'true') console.log(...)
```

---

## 🚫 Tests

- Jest & Cypress = nur Entwicklung
- Leaflet schwer testbar → manuell prüfen

---

## 🧩 Abhängigkeiten

- Next.js, React, Redux Toolkit, Leaflet
- Tailwind CSS, Toastify
- Full list → `package.json`

---

## 🏷 Versionierung

```env
NEXT_PUBLIC_APP_VERSION=1.1.59
```

→ Wird in der Fußzeile angezeigt.

---

## 🧪 Beispiel `.env.local`

```env
NEXT_PUBLIC_APP_VERSION=1.1.59
NEXT_PUBLIC_USE_MOCK_API=true
NEXT_PUBLIC_SERVER_URL=http://10.10.0.13:3000
```

---

## 🛠 Zusätzliche Hinweise

### Voraussetzungen

- Node.js und npm müssen installiert sein: https://nodejs.org
- MySQL Datenbank läuft in einem Docker-Container (lokal bei Entwicklung)
- TALAS V5 ist im IIS lokal installiert

### Leaflet mapTiles

- Damit nicht ausversehen mapTiles gelöscht werden, werden die hier eingefügt, falls vorhanden ist dann nicht mehr nötig mapTiles auf dem server einzufügen:  
  `C:\inetpub\wwwroot\talas5\TileMap`

### Serverkonfiguration

- Port 3000 muss freigegeben sein
- `.env.local`, `config.js`, `[...]path.js` und `MapComponent.js` müssen IP und API-Endpunkte korrekt konfiguriert haben
- Die Anwendung wird über einen `nssm` Windows-Service gestartet (optional)
- Browser: Chrome ab Version 125.0.6420.142 empfohlen

---

## 🧭 Benutzeranleitung

- **Station öffnen:** Rechte Maustaste → "Station öffnen" oder "Station öffnen (Tab)"
- **POI hinzufügen:** Rechtsklick → "POI hinzufügen" → Formular ausfüllen
- **POI bearbeiten/löschen:** Kontextmenü verwenden
- **POI verschieben:** Drag & Drop des Markers, automatische DB-Aktualisierung
- **Koordinaten anzeigen:** Kontextmenüoption nutzen
- **Zoom:** Mausrad oder Kontextmenüoption
- **Layer filtern:** Checkboxen im rechten Panel (`DataSheet`)
- **Station auswählen:** Dropdown oben rechts
- **Zentrieren:** Rechtsklick → "Hier zentrieren"

---

## 🧰 Fehlerbehandlung

- Seite neu laden, wenn POIs nicht korrekt geladen werden
- Sicherstellen, dass alle API-Endpunkte erreichbar sind
- `.env.local` prüfen
- Port 3000 freigeben

---

## 📂 Erweiterte Verzeichnisstruktur

- `/styles/`: Tailwind- und CSS-Dateien
- `/store/`: Recoil-Atome (teilweise durch Redux ersetzt)
- `/api/`: POI-spezifische Endpunkte wie `addLocation.js`, `updateLocation.js`, `locations.js`
- `/config/config.js`: zentrale Konfigurationswerte (API, Server-IP, etc.)

---

## 📘 Hinweis

Diese README kombiniert technische Projektstruktur, Setup- & Deployment-Ablauf sowie Benutzeranleitung, um sowohl neue Entwickler als auch Administratoren umfassend einzuweisen.

---

## 📡 Webservice-Anbindung (Backend: TALAS.web)

NodeMap verwendet verschiedene Webservices, die von **TALAS V5** im IIS bereitgestellt werden.  
Diese Services liefern dynamische GIS-, Geräte- und Statusdaten für die MapComponent.

### URL des Webservice:

```
http://localhost/talas5/ClientData/WebServiceMap.asmx
```

> 🔧 In `.env.local` oder `config.js` muss die Adresse je nach Umgebung angepasst werden (z. B. `http://10.10.0.13/talas5/...`)

### Verfügbare Methoden (Auszug):

| Endpunkt                    | Zweck / Datenquelle                        |
| --------------------------- | ------------------------------------------ |
| `CablesStatic`              | Liste aller Stränge                        |
| `GetIconsStatic`            | Liste aller Icons                          |
| `GisLinesStatus`            | Liste aller Statis der Linien              |
| `GisStationsMeasurements`   | Liste aller Messungen der Geräte           |
| `GisStationsStaticDistrict` | Liste aller Geraete einer bestimmten Karte |
| `GisStationsStatusDistrict` | Liste aller Statis der Geräte              |
| `GisSystemStatic`           | Liste aller angezeigten Systeme            |

Die Webservices liefern meist JSON und werden im Frontend über `services/*.js` abgefragt.  
Die Daten werden verarbeitet, zwischengespeichert und z. T. über Redux oder Recoil in der Karte dargestellt.

➡ Damit alles funktioniert, müssen:

- der IIS laufen
- der `WebServiceMap.asmx` erreichbar sein
- die IP in `.env.local` korrekt gesetzt sein