diff --git a/README.md b/README.md index c149836c3..fdd3c6a20 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,7 @@ # 🌍 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. +Gerätestatus in einer interaktiven Leaflet-Karte. ## 🌍 Live-Vorschau der Karte @@ -17,6 +15,17 @@ umgesetzt. --- +## Technologie-Stack + +| Technologie | Zweck | +| ------------- | ------------------------------ | +| Next.js | React-Framework (Frontend/SSR) | +| Leaflet | Kartendarstellung | +| Redux Toolkit | Zustandverwaltung | +| Tailwind CSS | Styling | +| MySQL | Datenbank | +| Node.js / IIS | Server und Auslieferung | + ## 🧭 Zielumgebung - Windows-Produktionsserver (offline, kein Internet) @@ -28,15 +37,10 @@ umgesetzt. ## 🔄 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 - - Die Bearbeitungsfunktionen (POI hinzufügen, bearbeiten) sind nur aktiv, wenn der Nutzer das - entsprechende Recht (ID 56) besitzt. - - Ist dies nicht der Fall, erscheint das Bearbeitungs-Icon ausgegraut mit Tooltip. +Die Anwendung wird von TALAS.web im iFrame geladen. Die URL enthält Parameter für Map- und +User-ID. + NodeMap lädt anschließend Daten über WebServices und MySQL. + ➡ Details zur Architektur: [docs/architecture.md](docs/architecture.md) --- @@ -49,11 +53,11 @@ umgesetzt. - 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\ +- IIS-Datei `mapTypC.aspx` vorhanden in C:\inetpub\wwwroot\talas5\MessagesMap\ + (Server-IP mit Port 3000) - 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` +- Karten Material vorhanden in: `C:\inetpub\wwwroot\talas5\TileMap\mapTiles` + ![mapTiles](docs/screenshots/mapTiles.png) --- @@ -71,67 +75,60 @@ umgesetzt. --- -### Schritt-für-Schritt Anleitung +## 🪛 Schritt-für-Schritt: NodeMap auf dem Server installieren -1. **Projekt lokal klonen und kompilieren:** +1. **Projekt lokal klonen und kompilieren:** - ```bash - git clone http://10.10.0.12:3000/ISA/nodeMap - cd nodeMap - npm install - npm run build + ```bash + git clone http://10.10.0.12:3000/ISA/nodeMap + cd nodeMap # zu den Verzeichnis wechseln + npm install # Abhängigkeiten installieren (lädt alle Pakete aus package.json) + npm run build # Erstellt ein optimiertes Produktions-Build im Ordner .next/ + ``` - ``` +2. **ZIP-Paket vorbereiten (lokal):** -2. **ZIP-Paket vorbereiten (lokal):** +- Verzeichnis `.next/` +- Verzeichnisse `public/`, `node_modules/` falls auf dem Server nicht vorhanden sind oder etwas + hinzugefügt wurde (Bilder oder Bibliothek) +- Dateien `.env.production`, `package.json` falls auf dem Server nicht vorhanden sind oder etwas + hinzugefügt wurde (Umgebungsvariablen oder Bibliothek) +- `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) - - Verzeichnis `.next/` - - Verzeichnisse `public/`, `node_modules/` falls nicht vorhanden sind oder etwas hinzugefügt - wurde (Bilder oder Bibliothek) - - Dateien `.env.production`, `package.json` falls nicht vorhanden sind oder etwas hinzugefügt - wurde (Umgebungsvariablen oder Bibliothek) - - `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 -3. **Auf Server kopieren nach:** Ein Ordner temp auf dem Desktop erstellen->ZIP-Paket - einfügen->entpacken->Inhalt in folgende Verzeichnis einfügen + ``` + C:\inetpub\wwwroot\talas5\nodeMap\ + ``` - ``` - C:\inetpub\wwwroot\talas5\nodeMap\ - ``` +4. **Kartenmaterial hinzufügen (falls nicht vorhanden):** -4. **Kartenmaterial hinzufügen (falls nicht vorhanden):** + Muss noch in Download-Server eingefügt werden, damit eine zentrale Stelle verfügbar ist - Muss noch in Download-Server eingefügt werden, damit eine zentrale Stelle verfügbar ist + ``` + C:\inetpub\wwwroot\talas5\TileMap\ + ``` - ``` - C:\inetpub\wwwroot\talas5\TileMap\ - ``` +5. **.env.production konfigurieren** -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. -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: [.env.production](docs/guide/env.md) -➡ Vollständige Anleitung & Beispieldatei: -[📄 docs/guide/env.md](docs/guide/env.md) - -6. **Dienst registrieren falls nicht vorhanden** +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 +1. **Starten:** Dienst starten , falls vorhanden einmal beenden und neustarten - ```bash - npm start in Terminal für Debugging - ``` - -8. **Im Browser testen:** +2. **Im Browser testen:** ``` http:///talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser z.B. @@ -150,7 +147,7 @@ Datenbank-Zugang, Pfade und Mock-Option. ### 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 +2. Dienst neu starten 3. Im Browser testen: ` http:///talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser` --- @@ -191,6 +188,7 @@ wird mit husky Bibliothek automatisch erhöht bei "git commit message" | Thema | Link | | ------------------------- | ------------------------------------------------------- | | Benutzeranleitung | [docs/guide/user-guide.md](docs/guide/user-guide.md) | +| Architekturübersicht | [architecture.md](docs/architecture.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) | diff --git a/config/appVersion.js b/config/appVersion.js index 105052f78..d94fdd854 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.255"; +export const APP_VERSION = "1.1.256"; diff --git a/docs/architecture.md b/docs/architecture.md index 510d694bb..2eaecc008 100644 --- a/docs/architecture.md +++ b/docs/architecture.md @@ -21,6 +21,26 @@ Gerätestatus. --- +## 🔄 Systemübersicht (Ablauf) + +```mermaid +sequenceDiagram + participant Browser + participant TALASweb + participant NodeMap + participant MySQL + + Browser->>TALASweb: mapTypC.aspx?m=12&u=484 + TALASweb-->>Browser: iFrame lädt NodeMap + Browser->>NodeMap: Liest m & u aus URL + NodeMap->>TALASweb: WebService-Requests (5 APIs) + NodeMap->>MySQL: API-Anfragen zu POIs, Geräten, Linien + NodeMap-->>Browser: Interaktive Karte anzeigen + +``` + +--- + ## 🗺️ Architekturüberblick ``` diff --git a/docs/screenshots/mapTiles.png b/docs/screenshots/mapTiles.png new file mode 100644 index 000000000..5fde9da05 Binary files /dev/null and b/docs/screenshots/mapTiles.png differ