diff --git a/README.md b/README.md index a1ea56435..b9a145672 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,9 @@ Die Anwendung ist mit **Next.js**, **React**, **Redux Toolkit**, **Tailwind CSS* > Diese README richtet sich an Entwickler, Administratoren und fortgeschrittene Benutzer. > 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 +> 📦 MySQL 8.0 läuft lokal in einem Docker-Container (nur für Entwicklung) +> 🗄 In der Produktionsumgebung läuft ein echter Windows-MySQL-Dienst ## 📌 Ziel des Projekts in 30 Sekunden @@ -16,6 +19,17 @@ Sie funktioniert vollständig lokal und offline auf Windows-Servern – gesteuer --- +## 🧰 Erste Schritte für Entwickler + +```bash +git clone http://10.10.0.12:3000/ISA/nodeMap +cd nodeMap +npm install +npm run dev +``` + +--- + ## 🧭 Zielumgebung - Windows-Produktionsserver (offline, kein Internet) @@ -27,7 +41,7 @@ Sie funktioniert vollständig lokal und offline auf Windows-Servern – gesteuer ## 🔄 Wie funktioniert das System? -1. TALAS ruft die App mit URL auf: `http://10.10.0.13:3000/?m=10&u=484` +1. TALAS ruft die App mit URL auf: `http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&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) @@ -42,9 +56,9 @@ Sie funktioniert vollständig lokal und offline auf Windows-Servern – gesteuer - POI hinzufügen, bearbeiten, verschieben, löschen - Gerätestatus und Layeranzeige - Intervallbasierte Datenaktualisierung -- Integration als iFrame in TALAS +- Integration als iFrame in TALAS.web - Versionsanzeige über `.env.local` -- Testdaten per Mock-API möglich +- Testdaten per Mock-API möglich (nur in der Entwicklungsumgebung) --- @@ -95,11 +109,13 @@ C:\inetpub\wwwroot/talas5/nodeMap Beinhaltet: - `.next/`, `node_modules/`, `public/` -- `components/`, `pages/`, `redux/`, `hooks/`, `services/`, `config/`, `utils/`, `lib/` - `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 ``` @@ -108,11 +124,10 @@ npm start ## 🔁 Code-Update -Wenn keine neue Bibliotheken installiert ist mit npm install: +Wenn keine neuen Bibliotheken installiert wurden mit npm install: - `.next/` ersetzen -- `components/`, `redux/`, `config/`, etc. nur bei Änderungen -- `.env.local` ggf. anpassen +- `.env.local` bei Änderung --- @@ -125,12 +140,12 @@ Wenn keine neue Bibliotheken installiert ist mit npm install: Beispiel: ``` -http://10.10.0.13:3000/?m=8&u=482 +`http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&u=484` ``` --- -## 🔗 Integration in TALAS +## 🔗 Integration in TALAS.web - Die App wird in einem **iFrame** geladen - Startet über `?m=X&u=Y` für Map-/User-IDs @@ -148,7 +163,7 @@ NEXT_PUBLIC_SERVER_URL=http://10.10.0.13:3000 ``` - Nur `NEXT_PUBLIC_...` ist im Browser sichtbar -- Keine Passwörter oder Tokens hier speichern +- Keine Passwörter oder vertraulichen Daten mit `NEXT_PUBLIC_` speichern – diese sind im Browser sichtbar --- @@ -191,10 +206,11 @@ if (process.env.NEXT_PUBLIC_DEBUG === 'true') console.log(...) --- -## 🚫 Tests +## ✅ Tests & Qualitätssicherung -- Jest & Cypress = nur Entwicklung -- Leaflet schwer testbar → manuell prüfen +- **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) --- @@ -232,11 +248,11 @@ NEXT_PUBLIC_SERVER_URL=http://10.10.0.13:3000 - 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 +- TALAS V5/TALAS.web 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: +- 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 @@ -280,15 +296,9 @@ NEXT_PUBLIC_SERVER_URL=http://10.10.0.13:3000 --- -## 📘 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. +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. ### URL des Webservice: @@ -305,13 +315,13 @@ http://localhost/talas5/ClientData/WebServiceMap.asmx | --------------------------- | ------------------------------------------ | | `CablesStatic` | Liste aller Stränge | | `GetIconsStatic` | Liste aller Icons | -| `GisLinesStatus` | Liste aller Statis der Linien | +| `GisLinesStatus` | Liste aller Status 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 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. ➡ Damit alles funktioniert, müssen: @@ -319,3 +329,72 @@ Die Daten werden verarbeitet, zwischengespeichert und z. T. über Redux oder R - 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.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 diff --git a/README_NodeMap_Mit_Deployment_Ablauf.md b/README_NodeMap_Mit_Deployment_Ablauf.md deleted file mode 100644 index b9d9432ae..000000000 --- a/README_NodeMap_Mit_Deployment_Ablauf.md +++ /dev/null @@ -1,384 +0,0 @@ -# 🌍 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/Start-Dev.ps1 b/Start-Dev.ps1 index b107ff334..268ed63e2 100644 --- a/Start-Dev.ps1 +++ b/Start-Dev.ps1 @@ -2,5 +2,5 @@ cd 'C:\inetpub\wwwroot\talas5\nodeMap' # F�hre den npm Befehl aus -npm run dev +npm start diff --git a/config/appVersion.js b/config/appVersion.js index 5c90e1a3a..06fe66a93 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.63"; +export const APP_VERSION = "1.1.64";