diff --git a/README_NodeMap_Mit_Deployment_Ablauf.md b/README_NodeMap_Mit_Deployment_Ablauf.md new file mode 100644 index 000000000..b9d9432ae --- /dev/null +++ b/README_NodeMap_Mit_Deployment_Ablauf.md @@ -0,0 +1,384 @@ +# 🌍 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. + +--- + +> Diese README richtet sich an Entwickler, Administratoren und fortgeschrittene Benutzer. +> Sie enthĂ€lt technische Einrichtung, SystemĂŒberblick, Benutzeranleitung und Hinweise zur Webservice-Integration. + +## 📌 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 + +--- + +## 🔁 🧳 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.59.zip`) + +5. **ZIP auf Server hochladen** + +6. **ZIP entpacken auf dem Server** + z. B. nach: `C:\inetpub\wwwroot alas5 +odeMap V1.1.59` + +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** + + ```bash + npm start + ``` + +12. **Testen im Browser** + + ```url + http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&u=484 + ``` + +13. **(Zukunft)**: Windows-Dienst `NodeMapService` auf `npm start` anpassen diff --git a/config/appVersion.js b/config/appVersion.js index b75466c41..5c90e1a3a 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.62"; +export const APP_VERSION = "1.1.63";