From d500afbc0bdf46a2af480cfefc5e7238c1db32a7 Mon Sep 17 00:00:00 2001 From: ISA Date: Wed, 14 May 2025 08:54:28 +0200 Subject: [PATCH] README.md --- README.md | 317 +++++++++++++++++++++++++++++++++ config/appVersion.js | 2 +- nodeMap update auf v1.1.58.zip | Bin 3571 -> 0 bytes 3 files changed, 318 insertions(+), 1 deletion(-) create mode 100644 README.md delete mode 100644 nodeMap update auf v1.1.58.zip diff --git a/README.md b/README.md new file mode 100644 index 000000000..758f15751 --- /dev/null +++ b/README.md @@ -0,0 +1,317 @@ +# 🌍 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 diff --git a/config/appVersion.js b/config/appVersion.js index d81f02fa4..5b0f8cdf1 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.60"; +export const APP_VERSION = "1.1.61"; diff --git a/nodeMap update auf v1.1.58.zip b/nodeMap update auf v1.1.58.zip deleted file mode 100644 index fdbc9857e8d540346408e18456e56b844a24f950..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3571 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 ax-S1;S~Ak3p!{cq^g7b7vp(%V>c0ROz>)(1