# 🌍 NodeMap – Kartenvisualisierung für TALAS.web (Next.js, Leaflet, Redux) 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. ## 🌍 Live-Vorschau der Karte ![Startansicht der NodeMap Karte](docs/screenshots/overview.png) --- > 🖥 Entwicklung & Test unter Windows 11 mit Node.js v18.17.1 und IIS > 📦 MySQL 8.0 läuft lokal in einem Docker-Container (nur für Entwicklung) > 🗄 Produktionsumgebung: TALAS.web und MySQL Server unter Windows Server --- ## 🧭 Zielumgebung - Windows-Produktionsserver (offline, kein Internet) - Kommunikation nur im lokalen Netzwerk - Nutzerzugriff per VPN + Remote Desktop (RDP) - Integration per iFrame in TALAS.web --- ## 🔄 Wie funktioniert das System? 1. TALAS.web ruft die App unter URL auf: `http:///talas5/MessagesMap/mapTypC.aspx?m=12&u=484` 2. Die App liest `m` und `u` aus der URL m(IdMap) u(IdUser) 3. `MapComponent` lädt POIs, Linien, Rechte, Geräte und Bereiche aus WebService von TALAS.web entsprechend 4. API-Endpunkte kommunizieren lokal mit Datenbankserver (MySQL) 5. Interaktive Bearbeitung (POI hinzufügen, verschieben, löschen) ist möglich --- ## 🧰 Erstinstallation auf Server ### Voraussetzungen - Windows Server mit IIS - Sicherstellen, dass alle TALAS.web API-Endpunkte(WebService) erreichbar sind - Node.js & npm installiert (z. B. v18–20) - MySQL (lokal oder erreichbar) - Port 3000 freigegeben (Firewall) - IIS-Datei `mapTypC.aspx` vorhanden in C:\inetpub\wwwroot\talas5\MessagesMap\ - Browser: Chrome ab Version 125.0.6420.142 empfohlen - Damit nicht ausversehen mapTiles gelöscht werden beim Code Update, werden die hier eingefügt, wenn vorhanden, müssen keine mapTiles manuell kopiert werden mapTiles auf dem server einzufügen: `C:\inetpub\wwwroot\talas5\TileMap` --- ## 🔗 Integration in TALAS.web ![iFrame-Integration](docs/screenshots/iframe-in-talas.png) - Die App wird in einem **iFrame** geladen - Startet über `?m=X&u=Y` für Map-/User-ID - Rechte und Inhalte werden automatisch geladen ``` z.B. `http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&u=484` ``` --- ### Schritt-für-Schritt Anleitung 1. **Projekt lokal klonen und kompilieren:** ```bash git clone http://10.10.0.12:3000/ISA/nodeMap cd nodeMap npm install npm run build ``` 2. **ZIP-Paket vorbereiten (lokal):** - Verzeichnis `.next/` - Verzeichnisse `public/`, `node_modules/` falls nich vorhanden sind oder etwas hinzugefügt wurd (Bilder oder Bibliothek) - Dateien `.env.production`, `package.json` falls nich vorhanden sind oder etwas hinzugefügt wurd (Umgebungsvariablen oder Bibliothek) - optional: `nssm.exe`, `StartNodeApp.bat`, `Start-Dev.ps1` um Windows Dienst zu erstellen falls noch nicht vorhanden ist Download: [nssm](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt) 3. **Auf Server kopieren nach:** Ein Ordner temp auf dem Desktop erstellen->ZIP-Paket einfügen->entpacken->Inhalt in folgende Verzeichnis einfügen, weil verhindert Windows Server direkt kopieren in folgende Verzeichnis ``` C:\inetpub\wwwroot\talas5\nodeMap\ ``` 4. **Kartenmaterial hinzufügen (falls nicht vorhanden):** Muss noch in Download-Server eingefügt werden, damit eine zentrale Stelle verfügbar ist ``` C:\inetpub\wwwroot\talas5\TileMap\ ``` 5. **.env.production konfigurieren** Die Datei `.env.production` enthält alle benötigten Verbindungs- und Betriebsvariablen wie z. B. Datenbank-Zugang, Pfade und Mock-Option. ➡ Vollständige Anleitung & Beispieldatei: [📄 docs/guide/env.md](docs/guide/env.md) 6. **Dienst registrieren falls nicht vorhanden** - Mit `nssm.exe` Windows-Dienst „nodeMapService“ erstellen - Ziel: `StartNodeApp.bat` - Anleitung: [nssm](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt) 7. **Starten:** Dienst starten , falls vorhanden einmal beenden und neustarten oder ```bash npm start in Terminal für Debugging ``` 8. **Im Browser testen:** ``` http:///talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser z.B. http:///talas5/MessagesMap/mapTypC.aspx?m=12&u=484 ``` --- ## 🔁 Update-Richtlinien | Art | Ersetzte Dateien | Bemerkung | | ------------------ | ---------------------------------- | ---------------------------- | | **Kleines Update** | `.next/` | `node_modules` nicht nötig | | **Großes Update** | alle Dateien (wie Neuinstallation) | Dienst ggf. neu registrieren | ### Empfohlener Ablauf für kleines Update: 1. `.next/` Verzeichnis nach Kompilieren kopieren und auf dem Server einfügen 2. Dienst oder `npm start` neu starten 3. Im Browser testen: ` http:///talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser` --- ## ✅ Tests & Qualitätssicherung - **E2E-Tests:** Cypress (nur in der Entwicklungsumgebung) - **Unit-Tests:** Aktuell keine Jest-Tests aufgrund Leaflet-Komplexität - **Empfehlung:** Manuelle Tests nach jedem Deployment durchführen (Checkliste vorbereiten) --- ## 🏷 Versionierung wird mit husky Bibliothek automatisch erhöht bei "git commit message" → Wird in der Fußzeile angezeigt. --- ## 💾 Setup: Installationen & Tools | Tool | Version | Link | | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Node.js | 20.12.1 | [nodejs](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt) | | Chrome | optional | [Chrome](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt) | | NSSM.exe | 2.24 | [nssm](https://littwinsystemtechnik.sharepoint.com/:f:/r/sites/LittwinSystemtechnik/Freigegebene%20Dokumente/Projekte/Masterkarte%20V2%20setup%20files?csf=1&web=1&e=Sm1wwt) | > Hinweis: Die Datei `MapTypC.aspx` in TALAS lädt NodeMap als iFrame über Port 3000. > Wenn die Seite nicht angezeigt wird, bitte sicherstellen: > > - Port 3000 ist in der Firewall freigegeben > - Die IP im Scriptteil von `MapTypC.aspx` ist aktuell (z. B. `10.10.0.13`) > - Windows-Dienst `NodeMapService` ist aktiv oder `npm start` in Terminal ausgeführt ## 📁 Dokumentation & technische Leitfäden | Thema | Link | | ------------------------- | ------------------------------------------------------- | | Benutzeranleitung | [docs/guide/user-guide.md](docs/guide/user-guide.md) | | Projektstruktur | [project-structure.md](docs/guide/project-structure.md) | | Webservices (TALAS) | [webservices.md](docs/guide/webservices.md) | | Umgebungsvariablen | [env.md](docs/guide/env.md) | | Mockdaten-Modus | [mock-data.md](docs/guide/mock-data.md) | | Zustandverwaltung (Redux) | [redux-zustand.md](docs/guide/redux-zustand.md) | | Abhängigkeiten | [dependencies.md](docs/guide/dependencies.md) | | Lokale Entwicklung | [setup-dev.md](docs/guide/setup-dev.md) | | FAQ & Fehlerbehandlung | [faq.md](docs/guide/faq.md) | | Glossar | [faq.md](docs/guide/glossar.md) |