Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: README.md überarbeitet und optimiert für Onboarding

Browse Source
This commit is contained in:
ISA
2025-06-03 09:25:53 +02:00
parent f133add7fb
commit c155efbcfa
4 changed files with 267 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
.prettierrc
View File

@@ -1,3 +1,19 @@
{ {
"printWidth": 250 "semi": true,
"singleQuote": false,
"tabWidth": 2,
"useTabs": false,
"printWidth": 100,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid",
"proseWrap": "always",
"overrides": [
{
"files": "*.md",
"options": {
"proseWrap": "always"
}
}
]
} }

539
README.md
View File

@@ -1,12 +1,15 @@
# 🌍 NodeMap – Interaktive Kartenvisualisierung mit Leaflet & React # 🌍 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. NodeMap ist eine modulare Kartenanwendung zur Visualisierung und Bearbeitung von GIS-Daten, POIs und
Die Anwendung ist mit **Next.js**, **React**, **Redux Toolkit**, **Tailwind CSS** und **Leaflet** umgesetzt. Gerätestatus in einer interaktiven Leaflet-Karte.
Die Anwendung ist mit **Next.js**, **React**, **Redux Toolkit**, **Tailwind CSS** und **Leaflet**
umgesetzt.
--- ---
> Diese README richtet sich an Entwickler, Administratoren und fortgeschrittene Benutzer. > Diese README richtet sich an Entwickler, Administratoren und fortgeschrittene Benutzer.
> Sie enthält technische Einrichtung, Systemüberblick, Benutzeranleitung und Hinweise zur Webservice-Integration. > Sie enthält technische Einrichtung, Systemüberblick, Benutzeranleitung und Hinweise zur
> Webservice-Integration.
> 🖥 Entwicklung & Test unter Windows 11 mit Node.js v18.17.1 und IIS > 🖥 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) > 📦 MySQL 8.0 läuft lokal in einem Docker-Container (nur für Entwicklung)
@@ -14,8 +17,10 @@ Die Anwendung ist mit **Next.js**, **React**, **Redux Toolkit**, **Tailwind CSS*
## 📌 Ziel des Projekts in 30 Sekunden ## 📌 Ziel des Projekts in 30 Sekunden
Diese Anwendung dient der Visualisierung und Bearbeitung von Karteninhalten (POIs, Gerätestatus) innerhalb von TALAS V5. Diese Anwendung dient der Visualisierung und Bearbeitung von Karteninhalten (POIs, Gerätestatus)
Sie funktioniert vollständig lokal und offline auf Windows-Servern – gesteuert über URL-Parameter `?m=` (Map-ID) und `?u=` (User-ID). 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).
--- ---
@@ -51,22 +56,19 @@ npm run dev
## 📦 Drittanbieter-Abhängigkeiten ## 📦 Drittanbieter-Abhängigkeiten
| Paket / Bibliothek | Version | Zweck / Verwendung | Speicherort / Modul | | Paket / Bibliothek | Version | Zweck / Verwendung | Speicherort / Modul |
| ------------------------------- | ----------------- | ---------------------------------------------- | ------------------------------------- | | ------------------------------- | -------------- | ---------------------------------------------- | ------------------------------------- |
| `react` | ^18.3.1 | UI-Framework | `/components`, `/pages` | | `react` | ^18.3.1 | UI-Framework | `/components` |
| `next` | ^14.2.5 | SSR, Routing, Build, API-Routen | Root | | `next` | ^14.2.5 | Routing, Build, API-Routen | Root, `/pages` |
| `redux`, `@reduxjs/toolkit` | ^5.0.1, ^2.5.1 | Zustandverwaltung (statt Recoil) | `/redux/`, `store.js` | | `redux`, `@reduxjs/toolkit` | ^5.0.1, ^2.5.1 | Zustandverwaltung (statt Recoil) | `/redux/`, `store.js` |
| `leaflet` | ^1.9.4 | Interaktive Kartenvisualisierung | `MapComponent.js`, Marker, Polylinien | | `leaflet` | ^1.9.4 | Interaktive Kartenvisualisierung | `MapComponent.js`, Marker, Polylinien |
| `leaflet-contextmenu` | ^1.4.0 | Kontextmenüs in Leaflet | Kontextmenü auf Karte | | `leaflet-contextmenu` | ^1.4.0 | Kontextmenüs in Leaflet | Kontextmenü auf Karte |
| `leaflet-control-geocoder` | ^3.1.0 | Geokoordinaten / Adresssuche | optionales Widget | | `tailwindcss` | ^3.4.7 | CSS-Utility-Framework | `styles/`, UI-Komponenten |
| `tailwindcss` | ^3.4.7 | CSS-Utility-Framework | `styles/`, UI-Komponenten | | `react-toastify` | ^10.0.5 | Benachrichtigungen im UI | z. B. bei Fehlern |
| `react-toastify` | ^10.0.5 | Benachrichtigungen im UI | z. B. bei Fehlern | | `overlapping-marker-spiderfier` | ^0.2.7 | Marker-Darstellung bei Überlappung | `checkOverlappingMarkers` |
| `overlapping-marker-spiderfier` | ^0.2.7 | Marker-Darstellung bei Überlappung | `useCheckOverlappingMarkers` | | `mysql` | ^2.18.1 | MySQL-Kommunikation in API | `pages/api/`, `services/database/` |
| `mysql`, `mysql2` | ^2.18.1 / ^3.11.0 | MySQL-Kommunikation in API | `pages/api/`, `services/database/` | | `nssm.exe` | 2.24 | Windows-Service zur Ausführung von `npm start` | für Serverbetrieb |
| `ws` | ^8.18.0 | WebSocket-Schnittstelle für Live-Daten | optional | | `WebService TALAS` | intern | Datenquelle für GIS- und Geräteinformationen | `services/webservice/`, IIS-Aufruf |
| `http-proxy-middleware` | ^3.0.0 | API-Proxying für dev ↔ prod | `pages/api/[...path].js` |
| `nssm.exe` | 2.24 | Windows-Service zur Ausführung von `npm start` | für Serverbetrieb |
| `WebService TALAS` | intern | Datenquelle für GIS- und Geräteinformationen | `services/webservice/`, IIS-Aufruf |
→ vollständige Liste: siehe `package.json` → vollständige Liste: siehe `package.json`
@@ -77,21 +79,42 @@ npm run dev
### Voraussetzungen ### Voraussetzungen
- Windows Server mit IIS - Windows Server mit IIS
- Sicherstellen, dass alle TALAS.web API-Endpunkte(WebService) erreichbar sind
- Node.js & npm installiert (z. B. v18–20) - Node.js & npm installiert (z. B. v18–20)
- MySQL (lokal oder erreichbar) - MySQL (lokal oder erreichbar)
- Port 3000 freigegeben (Firewall) - Port 3000 freigegeben (Firewall)
- IIS-Datei `mapTypC.aspx` vorhanden - IIS-Datei `mapTypC.aspx` vorhanden
- 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`
### Schritt-für-Schritt Anleitung ### Schritt-für-Schritt Anleitung
---
## 🔗 Integration in TALAS.web
- 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!
```
`http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&u=484`
```
````
---
1. **Projekt lokal klonen und bauen:** 1. **Projekt lokal klonen und bauen:**
```bash ```bash
git clone <repo-url> git clone http://10.10.0.12:3000/ISA/nodeMap
cd nodeMap cd nodeMap
npm install npm install
npm run build npm run build
``` ````
2. **ZIP-Paket vorbereiten (lokal):** 2. **ZIP-Paket vorbereiten (lokal):**
@@ -102,39 +125,54 @@ npm run dev
3. **Auf Server kopieren nach:** 3. **Auf Server kopieren nach:**
``` ```
C:\inetpub\wwwroot alas5 C:\inetpub\wwwroot\talas5\nodeMap\
odeMap
``` ```
4. **Kartenmaterial hinzufügen (optional):** 4. **Kartenmaterial hinzufügen (falls nicht vorhanden):**
``` ```
C:\inetpub\wwwroot alas5\TileMap C:\inetpub\wwwroot\talas5\TileMap\
``` ```
5. **Konfiguration `.env.local` anpassen:** 5. **Konfiguration `.env.local` anpassen:**
```env ```env
NEXT_PUBLIC_BASE_PATH=/talas5 DB_HOST=localhost wenn die Datenbank auf dem selben Server ist
NEXT_PUBLIC_APP_VERSION=1.1.216 DB_USER=Datenbankbenutzername
NEXT_PUBLIC_API_PORT_MODE=prod DB_PASSWORD=Datenbankbenutzerpasswort
DB_NAME=Datenbank Name
DB_PORT=Datenbank Port
NEXT_PUBLIC_BASE_PATH=/talas5 ->je nachdem , ob das leer ist oder andere Verzeichnisname hat
NEXT_PUBLIC_API_PORT_MODE=prod -> in Produktionsumgebung
NEXT_PUBLIC_USE_MOCKS=false -> in Produktionsumgebung
Beispiel
``` ```
6. **Optional: Dienst registrieren** DB_HOST=localhost DB_USER=root DB_PASSWORD="root#$" DB_NAME=talas_v5 DB_PORT=3306
- Mit `nssm.exe` Windows-Dienst „nodeMapService“ erstellen NEXT_PUBLIC_API_PORT_MODE=prod NEXT_PUBLIC_USE_MOCKS=false NEXT_PUBLIC_BASE_PATH=/talas5
- Ziel: `StartNodeApp.bat`
7. **Starten:** ````
```bash
npm start 1. **Optional: Dienst registrieren**
```
- Mit `nssm.exe` Windows-Dienst „nodeMapService“ erstellen
oder Dienst starten - Ziel: `StartNodeApp.bat`
8. **Im Browser testen:** 2. **Starten:**
```bash
npm start
````
oder Dienst starten
3. **Im Browser testen:**
``` ```
http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser
z.B.
http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=12&u=484 http://<ip>/talas5/MessagesMap/mapTypC.aspx?m=12&u=484
``` ```
@@ -142,35 +180,31 @@ npm run dev
## 🔁 Update-Richtlinien ## 🔁 Update-Richtlinien
| Art | Voraussetzung | Ersetzte Dateien | Bemerkung | | Art | Ersetzte Dateien | Bemerkung |
| ------------------ | ---------------------------------- | ---------------------------------- | ---------------------------- | | ------------------ | ---------------------------------- | ---------------------------- |
| **Kleines Update** | gleiche Hauptversion (z. B. 1.1.x) | `.next/`, `.env.local` | `node_modules` nicht nötig | | **Kleines Update** | `.next/` | `node_modules` nicht nötig |
| **Großes Update** | neue Hauptversion (z. B. 1.2.x) | alle Dateien (wie Neuinstallation) | Dienst ggf. neu registrieren | | **Großes Update** | alle Dateien (wie Neuinstallation) | Dienst ggf. neu registrieren |
### Empfohlener Ablauf für kleines Update: ### Empfohlener Ablauf für kleines Update:
1. `.next/` und `.env.local` vom neuen Build kopieren 1. `.next/` vom neuen Build kopieren
2. Dienst oder `npm start` neu starten 2. Dienst oder `npm start` neu starten
3. Im Browser testen: `?m=...&u=...` 3. Im Browser testen: `?m=...&u=...`
### Kompatibilitätsregel:
- Solange `1.1.x` bleibt, ist einfaches Update möglich
- Ab `1.2.0` vollständige Neuinstallation empfohlen (z. B. bei neuen Verzeichnisstrukturen)
--- ---
### 🔧 Konfigurierbarer Basispfad (basePath) ### 🔧 Konfigurierbarer Basispfad (basePath)
Standardmäßig wird angenommen, dass die Anwendung unter einem Unterverzeichnis wie `/talas5` läuft. Standardmäßig wird angenommen, dass die Anwendung unter einem Unterverzeichnis wie `/talas5`
läuft.
Der Basispfad kann nun über `.env.local` konfiguriert werden: Der Basispfad kann nun über `.env.local` konfiguriert werden:
```env ```env
NEXT_PUBLIC_BASE_PATH=/talas5 NEXT_PUBLIC_BASE_PATH=/talas5
``` ```
Wenn die Anwendung direkt unter der IP erreichbar sein soll (z. B. http://10.10.0.13/), Wenn die Anwendung direkt unter der IP erreichbar sein soll (z. B. http://10.10.0.13/), kann der
kann der Pfad leer gelassen werden: Pfad leer gelassen werden:
```env ```env
NEXT_PUBLIC_BASE_PATH= NEXT_PUBLIC_BASE_PATH=
@@ -184,8 +218,7 @@ NEXT_PUBLIC_BASE_PATH=
- Gerätestatus und Layeranzeige - Gerätestatus und Layeranzeige
- Intervallbasierte Datenaktualisierung - Intervallbasierte Datenaktualisierung
- Integration als iFrame in TALAS.web - Integration als iFrame in TALAS.web
- Versionsanzeige über `.env.local` - Testdaten möglich (nur in der Entwicklungsumgebung)
- Testdaten per Mock-API möglich (nur in der Entwicklungsumgebung)
- Rechtsklick auf Geräte-Marker öffnet ein Kontextmenü mit: - Rechtsklick auf Geräte-Marker öffnet ein Kontextmenü mit:
- „Station öffnen (Tab)“ - „Station öffnen (Tab)“
- Koordinaten anzeigen - Koordinaten anzeigen
@@ -193,230 +226,6 @@ NEXT_PUBLIC_BASE_PATH=
--- ---
## 🧱 Projektstruktur
```bash
components/ → UI-Komponenten inkl. Karte und Layer-Control-Panel (`MapLayersControlPanel`)
📦components
┣ 📂contextmenu
┃ ┣ 📜CoordinatePopup.js
┃ ┗ 📜useMapContextMenu.js
┣ 📂gisPolylines
┃ ┣ 📂icons
┃ ┃ ┣ 📜CircleIcon.js
┃ ┃ ┣ 📜EndIcon.js
┃ ┃ ┣ 📜StartIcon.js
┃ ┃ ┗ 📜SupportPointIcons.js
┃ ┗ 📜PolylineContextMenu.js
┣ 📂icons
┃ ┗ 📂devices
┃ ┃ ┗ 📂overlapping
┃ ┃ ┃ ┗ 📜PlusRoundIcon.js
┣ 📂mainComponent
┃ ┣ 📂hooks
┃ ┃ ┗ 📜useInitializeMap.js
┃ ┗ 📜MapComponent.js
┣ 📂pois
┃ ┣ 📜AddPOIModal.js
┃ ┗ 📜PoiUpdateModal.js
┣ 📂uiWidgets
┃ ┣ 📂mapLayersControlPanel
┃ ┃ ┣ 📜EditModeToggle.js
┃ ┃ ┗ 📜MapLayersControlPanel.js
┃ ┣ 📜CoordinateInput.js
┃ ┗ 📜VersionInfoModal.js
┗ 📜TestScript.js
config/ → zentrale Variablen (.env.local)
hooks/ → eigene React-Hooks
utils/ → POI- und Linienverarbeitung
lib/ → Formatierungen, Umrechnungen
public/ → mapTiles, Bilder, Icons
pages/ → Next.js Seiten & Routen
scripts/ → lokale Tools (nur Dev)
redux/ → globale Zustände (Slices)
📦redux
┣ 📂slices
┃ ┣ 📂database
┃ ┃ ┣ 📂pois
┃ ┃ ┃ ┣ 📜addPoiOnPolylineSlice.js
┃ ┃ ┃ ┣ 📜addPoiSlice.js
┃ ┃ ┃ ┣ 📜currentPoiSlice.js
┃ ┃ ┃ ┣ 📜poiIconsDataSlice.js
┃ ┃ ┃ ┣ 📜poiLayerVisibleSlice.js
┃ ┃ ┃ ┣ 📜poiReadFromDbTriggerSlice.js
┃ ┃ ┃ ┣ 📜poiTypesSlice.js
┃ ┃ ┃ ┣ 📜poiTypSlice.js
┃ ┃ ┃ ┣ 📜readPoiMarkersStoreSlice.js
┃ ┃ ┃ ┗ 📜selectedPoiSlice.js
┃ ┃ ┣ 📂polylines
┃ ┃ ┃ ┣ 📜gisLinesSlice.js
┃ ┃ ┃ ┣ 📜polylineContextMenuSlice.js
┃ ┃ ┃ ┣ 📜polylineEventsDisabledSlice.js
┃ ┃ ┃ ┗ 📜polylineLayerVisibleSlice.js
┃ ┃ ┣ 📜locationDevicesFromDBSlice.js
┃ ┃ ┣ 📜locationDevicesSlice.js
┃ ┃ ┗ 📜priorityConfigSlice.js
┃ ┣ 📂webservice
┃ ┃ ┣ 📜gisLinesStatusSlice.js
┃ ┃ ┣ 📜gisStationsMeasurementsSlice.js
┃ ┃ ┣ 📜gisStationsStaticDistrictSlice.js
┃ ┃ ┣ 📜gisStationsStatusDistrictSlice.js
┃ ┃ ┣ 📜gisSystemStaticSlice.js
┃ ┃ ┗ 📜userRightsSlice.js
┃ ┣ 📜lineVisibilitySlice.js
┃ ┣ 📜mapLayersSlice.js
┃ ┣ 📜selectedAreaSlice.js
┃ ┣ 📜selectedDeviceSlice.js
┃ ┣ 📜urlParameterSlice.js
┃ ┗ 📜zoomTriggerSlice.js
┣ 📂thunks
┃ ┣ 📂database
┃ ┃ ┣ 📂pois
┃ ┃ ┃ ┣ 📜addPoiThunk.js
┃ ┃ ┃ ┣ 📜deletePoiThunk.js
┃ ┃ ┃ ┣ 📜fetchPoiIconsDataThunk.js
┃ ┃ ┃ ┣ 📜fetchPoiTypThunk.js
┃ ┃ ┃ ┗ 📜updatePoiThunk.js
┃ ┃ ┣ 📂polylines
┃ ┃ ┃ ┗ 📜fetchGisLinesThunk.js
┃ ┃ ┣ 📜fetchLocationDevicesThunk.js
┃ ┃ ┣ 📜fetchPriorityConfigThunk.js
┃ ┃ ┗ 📜getDeviceIdByNameThunk.js
┃ ┗ 📂webservice
┃ ┃ ┣ 📜fetchGisLinesStatusThunk.js
┃ ┃ ┣ 📜fetchGisStationsMeasurementsThunk.js
┃ ┃ ┣ 📜fetchGisStationsStaticDistrictThunk.js
┃ ┃ ┣ 📜fetchGisStationsStatusDistrictThunk.js
┃ ┃ ┣ 📜fetchGisSystemStaticThunk.js
┃ ┃ ┗ 📜fetchUserRightsThunk.js
┗ 📜store.js
services/ → API-Kommunikation, Mock-Logik
📦services
┣ 📂database
┃ ┣ 📂pois
┃ ┃ ┣ 📜addPoiService.js
┃ ┃ ┣ 📜deletePoiService.js
┃ ┃ ┣ 📜fetchPoiDataByIdService.js
┃ ┃ ┣ 📜fetchPoiDataService.js
┃ ┃ ┣ 📜fetchPoiIconsDataService.js
┃ ┃ ┣ 📜fetchPoiTypService.js
┃ ┃ ┗ 📜updatePoiService.js
┃ ┣ 📂polylines
┃ ┃ ┗ 📜fetchGisLinesService.js
┃ ┣ 📜fetchDeviceNameByIdService.js
┃ ┣ 📜fetchLocationDevicesService.js
┃ ┣ 📜fetchPriorityConfigService.js
┃ ┣ 📜getDeviceIdByNameService.js
┃ ┗ 📜updateLocationInDatabaseService.js
┣ 📂utils
┃ ┗ 📜fetchWithTimeout.js
┗ 📂webservice
┃ ┣ 📜fetchGisLinesStatusService.js
┃ ┣ 📜fetchGisStationsMeasurementsService.js
┃ ┣ 📜fetchGisStationsStaticDistrictService.js
┃ ┣ 📜fetchGisStationsStatusDistrictService.js
┃ ┣ 📜fetchGisSystemStaticService.js
┃ ┗ 📜fetchUserRightsService.js
```
---
## ⚙ 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/`
- `package.json`, `.env.local`
-Zum Erstellen des Windows-Dienstes nodeMapService werden folgende Dateien benötigt: nssm.exe, nssm Installation.md, Start-Dev.ps1 und StartNodeApp.bat
### 3. Starten
Erstellte Windows Dienst "nodeMapService" starten oder im Terminal
```bash
npm start
```
---
## 🔁 Code-Update
Wenn keine neuen Bibliotheken installiert wurden mit npm install:
- `.next/` ersetzen
- `.env.local` bei Änderung
---
## 🌐 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/talas5/MessagesMap/mapTypC.aspx?m=12&u=484`
```
---
## 🔗 Integration in TALAS.web
- 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
```
- Nur `NEXT_PUBLIC_...` ist im Browser sichtbar
- Keine Passwörter oder vertraulichen Daten mit `NEXT_PUBLIC_` speichern – diese sind im Browser sichtbar
--- ---
## 🧠 Zustand: Redux (ehemals Recoil) ## 🧠 Zustand: Redux (ehemals Recoil)
@@ -426,7 +235,8 @@ Alle ehemaligen Recoil-Atoms wurden erfolgreich in Redux-Slices überführt.
> Recoil wurde vollständig entfernt, um die Skalierbarkeit und Wartbarkeit zu verbessern. > Recoil wurde vollständig entfernt, um die Skalierbarkeit und Wartbarkeit zu verbessern.
- Dynamische Gerätegruppen (Layer) werden automatisch über `IdSystem` aus `GisSystemStatic` initialisiert - Dynamische Gerätegruppen (Layer) werden automatisch über `IdSystem` aus `GisSystemStatic`
initialisiert
- Layer-Steuerung erfolgt über `system-<IdSystem>` Keys im Redux `mapLayersSlice` - Layer-Steuerung erfolgt über `system-<IdSystem>` Keys im Redux `mapLayersSlice`
- Marker für Geräte werden über Vergleich `System` ↔ `IdSystem` angezeigt - Marker für Geräte werden über Vergleich `System` ↔ `IdSystem` angezeigt
@@ -438,12 +248,6 @@ Alle ehemaligen Recoil-Atoms wurden erfolgreich in Redux-Slices überführt.
➡ Neue Features bitte ausschließlich mit Redux umsetzen! ➡ Neue Features bitte ausschließlich mit Redux umsetzen!
> 🧩 Ausnahme:
> Der Hook `/hooks/layers/useAreaMarkersLayer.js` verwendet bewusst einen lokalen `fetch()`,
> da die Marker-Objekte direkt mit Leaflet (`L.marker(...)`) erzeugt und verwaltet werden.
> Diese Marker sind UI-spezifisch und **nicht zustandsfähig** im Redux-Store.
> Das Aktualisieren der Marker-Koordinaten beim Drag-and-Drop erfolgt aber vollständig über Redux (`updateAreaThunk()`).
--- ---
## 📄 Dokumentation ## 📄 Dokumentation
@@ -454,40 +258,26 @@ Beispiel:
- [`priorityConfig.md`](docs/pages/api/talas_v5_DB/priorityConfig.md): - [`priorityConfig.md`](docs/pages/api/talas_v5_DB/priorityConfig.md):
Dokumentiert die Prioritätskonfiguration für Meldungsanzeige und Marker-Sortierung. Dokumentiert die Prioritätskonfiguration für Meldungsanzeige und Marker-Sortierung.
- [`device-layer-connection.md`](docs/architecture/device-layer-connection.md): - [`device-layer-connection.md`](docs/architecture/device-layer-connection.md):
Beschreibt den technischen Ablauf vom GIS-System zum Marker über `System` ↔ `IdSystem` Beschreibt den technischen Ablauf vom GIS-System zum Marker über `System` ↔ `IdSystem`
--- ---
## 🧪 Mockdaten (nicht mehr verwendet) ## 🧪 Mockdaten (nur in der Entwicklung)
Früher konnten über folgende Umgebungsvariable Mockdaten geladen werden: Nur in der Entwicklungsumgebung könnte NEXT_PUBLIC_USE_MOCKS auf true gesetzt werden. In
Produktionsumgebung muss NEXT_PUBLIC_USE_MOCKS=false sein
```env ```env
NEXT_PUBLIC_USE_MOCK_API=true NEXT_PUBLIC_USE_MOCKS=false
``` ```
Diese Funktion wurde vollständig entfernt.
Alle Datenzugriffe erfolgen jetzt über reale APIs – entweder:
über die lokale Next.js-API (Port 3000, z. B. via Docker/MySQL)
oder über die TALAS.web-Services im IIS
Das frühere Verzeichnis /webServiceMockdata/ wurde gelöscht.
--- ---
## 🧰 Fehler & Debug ## 🧰 Fehler & Debug
- Fehler per Toast oder `console.log` - Fehler per Toast, alert oder `console.log`
- Logging möglich: - Logging Kann aktiviert oder deaktiviert werden in .env.local:
```bash
npm start > log.txt 2>&1
```
- Nur aktiv bei:
```js ```js
if (process.env.NEXT_PUBLIC_DEBUG === 'true') console.log(...) if (process.env.NEXT_PUBLIC_DEBUG === 'true') console.log(...)
@@ -513,43 +303,12 @@ if (process.env.NEXT_PUBLIC_DEBUG === 'true') console.log(...)
## 🏷 Versionierung ## 🏷 Versionierung
```env wird mit husky Bibliothek automatisch erhöht bei "git commit message"
NEXT_PUBLIC_APP_VERSION=1.1.59
```
→ Wird in der Fußzeile angezeigt. → Wird in der Fußzeile angezeigt.
--- ---
## 🧪 Beispiel `.env.local`
```env
NEXT_PUBLIC_APP_VERSION=1.1.59
NEXT_PUBLIC_USE_MOCK_API=true
```
---
## 🛠 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/TALAS.web ist im IIS lokal installiert
### Leaflet mapTiles
- 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`
### Serverkonfiguration
- Port 3000 muss freigegeben sein
- .env.local, MapComponent.js und alle Services verwenden dynamische API-Endpunkte basierend auf window.location und NEXT_PUBLIC_API_PORT_MODE
- Die Anwendung wird über einen `nssm` Windows-Service gestartet (optional)
- Browser: Chrome ab Version 125.0.6420.142 empfohlen
--- ---
## 🧭 Benutzeranleitung ## 🧭 Benutzeranleitung
@@ -560,7 +319,8 @@ NEXT_PUBLIC_USE_MOCK_API=true
- **POI verschieben:** Drag & Drop des Markers, automatische DB-Aktualisierung - **POI verschieben:** Drag & Drop des Markers, automatische DB-Aktualisierung
- **Koordinaten anzeigen:** Kontextmenüoption nutzen - **Koordinaten anzeigen:** Kontextmenüoption nutzen
- **Zoom:** Mausrad oder Kontextmenüoption - **Zoom:** Mausrad oder Kontextmenüoption
- **Layer steuern:** GIS-Geräte-Layer (z. B. TALAS, WAGO, GMA) ein-/ausblenden über Checkboxen im rechten Panel (`MapLayersControlPanel`) - **Layer steuern:** GIS-Geräte-Layer (z. B. TALAS, WAGO, GMA) ein-/ausblenden über Checkboxen im
rechten Panel (`MapLayersControlPanel`)
- **Station auswählen:** Dropdown oben rechts - **Station auswählen:** Dropdown oben rechts
- **Zentrieren:** Rechtsklick → "Hier zentrieren" - **Zentrieren:** Rechtsklick → "Hier zentrieren"
- **Geräte-Kontextmenü:** Rechtsklick auf Marker → „Station öffnen (Tab)“ - **Geräte-Kontextmenü:** Rechtsklick auf Marker → „Station öffnen (Tab)“
@@ -576,18 +336,10 @@ NEXT_PUBLIC_USE_MOCK_API=true
--- ---
## 📂 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.)
---
## 📡 Webservice-Anbindung (Backend: TALAS.web) ## 📡 Webservice-Anbindung (Backend: TALAS.web)
NodeMap verwendet verschiedene Webservices, die von **TALAS V5/TALAS.web** im IIS bereitgestellt werden. NodeMap verwendet verschiedene Webservices, die von **TALAS V5/TALAS.web** im IIS bereitgestellt
werden.
Diese Services liefern dynamische GIS-, Geräte- und Statusdaten für die MapComponent. Diese Services liefern dynamische GIS-, Geräte- und Statusdaten für die MapComponent.
### URL des Webservice: ### URL des Webservice:
@@ -596,7 +348,8 @@ Diese Services liefern dynamische GIS-, Geräte- und Statusdaten für die MapCom
http://localhost/talas5/ClientData/WebServiceMap.asmx 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/...`) > 🔧 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): ### Verfügbare Methoden (Auszug):
@@ -611,89 +364,18 @@ http://localhost/talas5/ClientData/WebServiceMap.asmx
| `GisSystemStatic` | Liste aller angezeigten Systeme | | `GisSystemStatic` | Liste aller angezeigten Systeme |
Die Webservices liefern JSON und werden im Frontend über `services/*.js` abgefragt. Die Webservices liefern 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. Die Daten werden verarbeitet, zwischengespeichert und z. T. über Redux oder Recoil in der Karte
dargestellt.
➡ Damit alles funktioniert, müssen: ➡ Damit alles funktioniert, müssen:
- der IIS laufen - der IIS laufen
- der `WebServiceMap.asmx` erreichbar sein - der `WebServiceMap.asmx` erreichbar sein
- die IP in `.env.local` korrekt gesetzt sein
---
## 🔁 🧳 Standard-Deployment-Ablauf auf dem Server
### Zielverzeichnis:
```
C:\inetpub\wwwroot/talas5/nodeMap
```
### Schritte:
1. **Build erstellen**
Führe `npm run build` in der Entwicklungsumgebung aus
2. **Build-Dateien sammeln**
Kopiere folgende Ordner/Dateien in einen neuen Ordner:
- `.next/`
- `node_modules/`
- `public/`
- `package.json`
- `.env.local`
3. **IP-Adresse aktualisieren**
Verwende „Find in Files“ in VSCode, um z. B. `10.10.0.13` durch neue Server-IP zu ersetzen
4. **ZIP erstellen**
Packe den Build-Ordner als ZIP (z. B. `nodeMap_V1.1.62.zip`)
5. **ZIP auf Server hochladen**
6. **ZIP entpacken auf dem Server**
z. B. nach: `C:\inetpub\wwwroot/talas5/nodeMap V1.1.62`
7. **Dienst beenden (falls aktiv)**
Beende `NodeMapService`, falls dieser noch `npm run dev` nutzt
8. **Backup vom alten nodeMap-Ordner erstellen**
Benenne z. B. um in `nodeMap_Alt_1.1.56`
9. **Neuen Ordner umbenennen → `nodeMap`**
10. **Wechsle in neuen Ordner**
```powershell
cd C:\inetpub\wwwroot/talas5/nodeMap
```
11. **App starten**
Windows Server Dienst "nodeMapService" starten
oder in Terminal
```bash
npm start
```
12. **Testen im Browser**
```url
http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&u=484
```
13. Bei erst Installation auf dem Server Windows-Dienst `NodeMapService` auf dem Server erstellen
mit nssm.exe
> Der Dienst führt Batch-Skript `StartNodeApp.bat` aus.
> `StartNodeApp.bat` führt `Start-Dev.ps1` aus
> `Start-Dev.ps1`führt `npm start` aus
--- ---
## 💾 Setup: Installationen & Tools ## 💾 Setup: Installationen & Tools
Für die lokale Entwicklung bitte folgende Tools manuell installieren:
| Tool | Version | Link | | 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) | | 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) |
@@ -706,3 +388,8 @@ Für die lokale Entwicklung bitte folgende Tools manuell installieren:
> - Port 3000 ist in der Firewall freigegeben > - Port 3000 ist in der Firewall freigegeben
> - Die IP im Scriptteil von `MapTypC.aspx` ist aktuell (z. B. `10.10.0.13`) > - Die IP im Scriptteil von `MapTypC.aspx` ist aktuell (z. B. `10.10.0.13`)
> - `npm start` läuft oder der Windows-Dienst `NodeMapService` ist aktiv > - `npm start` läuft oder der Windows-Dienst `NodeMapService` ist aktiv
## 📁 Projektstruktur
➡ Die vollständige und kommentierte Projektstruktur findest du hier:
[📄 docs/PROJECT_STRUCTURE.md](docs/PROJECT_STRUCTURE.md)

2
config/appVersion.js
View File

@@ -1,2 +1,2 @@
// /config/appVersion // /config/appVersion
export const APP_VERSION = "1.1.222"; export const APP_VERSION = "1.1.223";

136
docs/PROJECT_STRUCTURE.md Normal file
View File

@@ -0,0 +1,136 @@
## 🧱 Projektstruktur
```bash
components/ → UI-Komponenten inkl. Karte und Layer-Control-Panel (`MapLayersControlPanel`)
📦components
┣ 📂contextmenu
┃ ┣ 📜CoordinatePopup.js
┃ ┗ 📜useMapContextMenu.js
┣ 📂gisPolylines
┃ ┣ 📂icons
┃ ┃ ┣ 📜CircleIcon.js
┃ ┃ ┣ 📜EndIcon.js
┃ ┃ ┣ 📜StartIcon.js
┃ ┃ ┗ 📜SupportPointIcons.js
┃ ┗ 📜PolylineContextMenu.js
┣ 📂icons
┃ ┗ 📂devices
┃ ┃ ┗ 📂overlapping
┃ ┃ ┃ ┗ 📜PlusRoundIcon.js
┣ 📂mainComponent
┃ ┣ 📂hooks
┃ ┃ ┗ 📜useInitializeMap.js
┃ ┗ 📜MapComponent.js
┣ 📂pois
┃ ┣ 📜AddPOIModal.js
┃ ┗ 📜PoiUpdateModal.js
┣ 📂uiWidgets
┃ ┣ 📂mapLayersControlPanel
┃ ┃ ┣ 📜EditModeToggle.js
┃ ┃ ┗ 📜MapLayersControlPanel.js
┃ ┣ 📜CoordinateInput.js
┃ ┗ 📜VersionInfoModal.js
┗ 📜TestScript.js
config/ → zentrale Variablen (.env.local)
hooks/ → eigene React-Hooks
utils/ → POI- und Linienverarbeitung
lib/ → Formatierungen, Umrechnungen
public/ → Bilder, Icons, mapTiles sind nicht im nodeMap Projekt Verzeichnis sondern in TALAS Verzeichnis
pages/ → Next.js Seiten & Routen
scripts/ → lokale Tools (nur Dev)
redux/ → globale Zustände (Slices)
📦redux
┣ 📂slices
┃ ┣ 📂database
┃ ┃ ┣ 📂pois
┃ ┃ ┃ ┣ 📜addPoiOnPolylineSlice.js
┃ ┃ ┃ ┣ 📜addPoiSlice.js
┃ ┃ ┃ ┣ 📜currentPoiSlice.js
┃ ┃ ┃ ┣ 📜poiIconsDataSlice.js
┃ ┃ ┃ ┣ 📜poiLayerVisibleSlice.js
┃ ┃ ┃ ┣ 📜poiReadFromDbTriggerSlice.js
┃ ┃ ┃ ┣ 📜poiTypesSlice.js
┃ ┃ ┃ ┣ 📜poiTypSlice.js
┃ ┃ ┃ ┣ 📜readPoiMarkersStoreSlice.js
┃ ┃ ┃ ┗ 📜selectedPoiSlice.js
┃ ┃ ┣ 📂polylines
┃ ┃ ┃ ┣ 📜gisLinesSlice.js
┃ ┃ ┃ ┣ 📜polylineContextMenuSlice.js
┃ ┃ ┃ ┣ 📜polylineEventsDisabledSlice.js
┃ ┃ ┃ ┗ 📜polylineLayerVisibleSlice.js
┃ ┃ ┣ 📜locationDevicesFromDBSlice.js
┃ ┃ ┣ 📜locationDevicesSlice.js
┃ ┃ ┗ 📜priorityConfigSlice.js
┃ ┣ 📂webservice
┃ ┃ ┣ 📜gisLinesStatusSlice.js
┃ ┃ ┣ 📜gisStationsMeasurementsSlice.js
┃ ┃ ┣ 📜gisStationsStaticDistrictSlice.js
┃ ┃ ┣ 📜gisStationsStatusDistrictSlice.js
┃ ┃ ┣ 📜gisSystemStaticSlice.js
┃ ┃ ┗ 📜userRightsSlice.js
┃ ┣ 📜lineVisibilitySlice.js
┃ ┣ 📜mapLayersSlice.js
┃ ┣ 📜selectedAreaSlice.js
┃ ┣ 📜selectedDeviceSlice.js
┃ ┣ 📜urlParameterSlice.js
┃ ┗ 📜zoomTriggerSlice.js
┣ 📂thunks
┃ ┣ 📂database
┃ ┃ ┣ 📂pois
┃ ┃ ┃ ┣ 📜addPoiThunk.js
┃ ┃ ┃ ┣ 📜deletePoiThunk.js
┃ ┃ ┃ ┣ 📜fetchPoiIconsDataThunk.js
┃ ┃ ┃ ┣ 📜fetchPoiTypThunk.js
┃ ┃ ┃ ┗ 📜updatePoiThunk.js
┃ ┃ ┣ 📂polylines
┃ ┃ ┃ ┗ 📜fetchGisLinesThunk.js
┃ ┃ ┣ 📜fetchLocationDevicesThunk.js
┃ ┃ ┣ 📜fetchPriorityConfigThunk.js
┃ ┃ ┗ 📜getDeviceIdByNameThunk.js
┃ ┗ 📂webservice
┃ ┃ ┣ 📜fetchGisLinesStatusThunk.js
┃ ┃ ┣ 📜fetchGisStationsMeasurementsThunk.js
┃ ┃ ┣ 📜fetchGisStationsStaticDistrictThunk.js
┃ ┃ ┣ 📜fetchGisStationsStatusDistrictThunk.js
┃ ┃ ┣ 📜fetchGisSystemStaticThunk.js
┃ ┃ ┗ 📜fetchUserRightsThunk.js
┗ 📜store.js
services/ → API-Kommunikation, Mock-Logik
📦services
┣ 📂database
┃ ┣ 📂pois
┃ ┃ ┣ 📜addPoiService.js
┃ ┃ ┣ 📜deletePoiService.js
┃ ┃ ┣ 📜fetchPoiDataByIdService.js
┃ ┃ ┣ 📜fetchPoiDataService.js
┃ ┃ ┣ 📜fetchPoiIconsDataService.js
┃ ┃ ┣ 📜fetchPoiTypService.js
┃ ┃ ┗ 📜updatePoiService.js
┃ ┣ 📂polylines
┃ ┃ ┗ 📜fetchGisLinesService.js
┃ ┣ 📜fetchDeviceNameByIdService.js
┃ ┣ 📜fetchLocationDevicesService.js
┃ ┣ 📜fetchPriorityConfigService.js
┃ ┣ 📜getDeviceIdByNameService.js
┃ ┗ 📜updateLocationInDatabaseService.js
┣ 📂utils
┃ ┗ 📜fetchWithTimeout.js
┗ 📂webservice
┃ ┣ 📜fetchGisLinesStatusService.js
┃ ┣ 📜fetchGisStationsMeasurementsService.js
┃ ┣ 📜fetchGisStationsStaticDistrictService.js
┃ ┣ 📜fetchGisStationsStatusDistrictService.js
┃ ┣ 📜fetchGisSystemStaticService.js
┃ ┗ 📜fetchUserRightsService.js
```