diff --git a/.prettierrc b/.prettierrc index 0b2f36155..f04871118 100644 --- a/.prettierrc +++ b/.prettierrc @@ -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" + } + } + ] } diff --git a/README.md b/README.md index 31cf70cb2..8da88e7fa 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,15 @@ # 🌍 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. +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. +> 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) @@ -14,8 +17,10 @@ Die Anwendung ist mit **Next.js**, **React**, **Redux Toolkit**, **Tailwind CSS* ## 📌 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). +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). --- @@ -51,22 +56,19 @@ npm run dev ## 📦 Drittanbieter-Abhängigkeiten -| Paket / Bibliothek | Version | Zweck / Verwendung | Speicherort / Modul | -| ------------------------------- | ----------------- | ---------------------------------------------- | ------------------------------------- | -| `react` | ^18.3.1 | UI-Framework | `/components`, `/pages` | -| `next` | ^14.2.5 | SSR, Routing, Build, API-Routen | Root | -| `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-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 | -| `react-toastify` | ^10.0.5 | Benachrichtigungen im UI | z. B. bei Fehlern | -| `overlapping-marker-spiderfier` | ^0.2.7 | Marker-Darstellung bei Überlappung | `useCheckOverlappingMarkers` | -| `mysql`, `mysql2` | ^2.18.1 / ^3.11.0 | MySQL-Kommunikation in API | `pages/api/`, `services/database/` | -| `ws` | ^8.18.0 | WebSocket-Schnittstelle für Live-Daten | optional | -| `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 | +| Paket / Bibliothek | Version | Zweck / Verwendung | Speicherort / Modul | +| ------------------------------- | -------------- | ---------------------------------------------- | ------------------------------------- | +| `react` | ^18.3.1 | UI-Framework | `/components` | +| `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` | +| `leaflet` | ^1.9.4 | Interaktive Kartenvisualisierung | `MapComponent.js`, Marker, Polylinien | +| `leaflet-contextmenu` | ^1.4.0 | Kontextmenüs in Leaflet | Kontextmenü auf Karte | +| `tailwindcss` | ^3.4.7 | CSS-Utility-Framework | `styles/`, UI-Komponenten | +| `react-toastify` | ^10.0.5 | Benachrichtigungen im UI | z. B. bei Fehlern | +| `overlapping-marker-spiderfier` | ^0.2.7 | Marker-Darstellung bei Überlappung | `checkOverlappingMarkers` | +| `mysql` | ^2.18.1 | MySQL-Kommunikation in API | `pages/api/`, `services/database/` | +| `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` @@ -77,21 +79,42 @@ npm run dev ### Voraussetzungen - Windows Server mit IIS +- Sicherstellen, dass alle TALAS.web API-Endpunkte(WebService) erreichbar sind - Node.js & npm installiert (z. B. v18–20) - MySQL (lokal oder erreichbar) - Port 3000 freigegeben (Firewall) - 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 +--- + +## 🔗 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:** ```bash - git clone + git clone http://10.10.0.12:3000/ISA/nodeMap cd nodeMap npm install npm run build - ``` +```` 2. **ZIP-Paket vorbereiten (lokal):** @@ -102,39 +125,54 @@ npm run dev 3. **Auf Server kopieren nach:** ``` - C:\inetpub\wwwroot alas5 - odeMap + C:\inetpub\wwwroot\talas5\nodeMap\ ``` -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:** ```env - NEXT_PUBLIC_BASE_PATH=/talas5 - NEXT_PUBLIC_APP_VERSION=1.1.216 - NEXT_PUBLIC_API_PORT_MODE=prod + DB_HOST=localhost wenn die Datenbank auf dem selben Server ist + DB_USER=Datenbankbenutzername + 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 - - Ziel: `StartNodeApp.bat` + NEXT_PUBLIC_API_PORT_MODE=prod NEXT_PUBLIC_USE_MOCKS=false NEXT_PUBLIC_BASE_PATH=/talas5 -7. **Starten:** +```` - ```bash - npm start - ``` - - oder Dienst starten - -8. **Im Browser testen:** + +1. **Optional: Dienst registrieren** + +- Mit `nssm.exe` Windows-Dienst „nodeMapService“ erstellen +- Ziel: `StartNodeApp.bat` + +2. **Starten:** + +```bash +npm start +```` + +oder Dienst starten + +3. **Im Browser testen:** ``` + http:///talas5/MessagesMap/mapTypC.aspx?m=IdMap&u=IdUser + z.B. http:///talas5/MessagesMap/mapTypC.aspx?m=12&u=484 ``` @@ -142,35 +180,31 @@ npm run dev ## 🔁 Update-Richtlinien -| Art | Voraussetzung | Ersetzte Dateien | Bemerkung | -| ------------------ | ---------------------------------- | ---------------------------------- | ---------------------------- | -| **Kleines Update** | gleiche Hauptversion (z. B. 1.1.x) | `.next/`, `.env.local` | `node_modules` nicht nötig | -| **Großes Update** | neue Hauptversion (z. B. 1.2.x) | alle Dateien (wie Neuinstallation) | Dienst ggf. neu registrieren | +| Art | Ersetzte Dateien | Bemerkung | +| ------------------ | ---------------------------------- | ---------------------------- | +| **Kleines Update** | `.next/` | `node_modules` nicht nötig | +| **Großes Update** | alle Dateien (wie Neuinstallation) | Dienst ggf. neu registrieren | ### 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 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) -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: ```env NEXT_PUBLIC_BASE_PATH=/talas5 ``` -Wenn die Anwendung direkt unter der IP erreichbar sein soll (z. B. http://10.10.0.13/), -kann der Pfad leer gelassen werden: +Wenn die Anwendung direkt unter der IP erreichbar sein soll (z. B. http://10.10.0.13/), kann der +Pfad leer gelassen werden: ```env NEXT_PUBLIC_BASE_PATH= @@ -184,8 +218,7 @@ NEXT_PUBLIC_BASE_PATH= - Gerätestatus und Layeranzeige - Intervallbasierte Datenaktualisierung - Integration als iFrame in TALAS.web -- Versionsanzeige über `.env.local` -- Testdaten per Mock-API möglich (nur in der Entwicklungsumgebung) +- Testdaten möglich (nur in der Entwicklungsumgebung) - Rechtsklick auf Geräte-Marker öffnet ein Kontextmenü mit: - „Station öffnen (Tab)“ - 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) @@ -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. -- 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-` Keys im Redux `mapLayersSlice` - 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! -> 🧩 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 @@ -454,40 +258,26 @@ Beispiel: - [`priorityConfig.md`](docs/pages/api/talas_v5_DB/priorityConfig.md): Dokumentiert die Prioritätskonfiguration für Meldungsanzeige und Marker-Sortierung. - - [`device-layer-connection.md`](docs/architecture/device-layer-connection.md): - Beschreibt den technischen Ablauf vom GIS-System zum Marker über `System` ↔ `IdSystem` +- [`device-layer-connection.md`](docs/architecture/device-layer-connection.md): + 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 -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 per Toast oder `console.log` -- Logging möglich: - -```bash -npm start > log.txt 2>&1 -``` - -- Nur aktiv bei: +- Fehler per Toast, alert oder `console.log` +- Logging Kann aktiviert oder deaktiviert werden in .env.local: ```js if (process.env.NEXT_PUBLIC_DEBUG === 'true') console.log(...) @@ -513,43 +303,12 @@ if (process.env.NEXT_PUBLIC_DEBUG === 'true') console.log(...) ## 🏷 Versionierung -```env -NEXT_PUBLIC_APP_VERSION=1.1.59 -``` +wird mit husky Bibliothek automatisch erhöht bei "git commit message" → 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 @@ -560,7 +319,8 @@ NEXT_PUBLIC_USE_MOCK_API=true - **POI verschieben:** Drag & Drop des Markers, automatische DB-Aktualisierung - **Koordinaten anzeigen:** Kontextmenüoption nutzen - **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 - **Zentrieren:** Rechtsklick → "Hier zentrieren" - **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) -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. ### 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 ``` -> 🔧 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): @@ -611,89 +364,18 @@ http://localhost/talas5/ClientData/WebServiceMap.asmx | `GisSystemStatic` | Liste aller angezeigten Systeme | 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: - 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 --- ## 💾 Setup: Installationen & Tools -Für die lokale Entwicklung bitte folgende Tools manuell installieren: - | 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) | @@ -706,3 +388,8 @@ Für die lokale Entwicklung bitte folgende Tools manuell installieren: > - Port 3000 ist in der Firewall freigegeben > - 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 + +## 📁 Projektstruktur + +➡ Die vollständige und kommentierte Projektstruktur findest du hier: +[📄 docs/PROJECT_STRUCTURE.md](docs/PROJECT_STRUCTURE.md) diff --git a/config/appVersion.js b/config/appVersion.js index b7bdec81d..0e41d706a 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.222"; +export const APP_VERSION = "1.1.223"; diff --git a/docs/PROJECT_STRUCTURE.md b/docs/PROJECT_STRUCTURE.md new file mode 100644 index 000000000..1dd679e76 --- /dev/null +++ b/docs/PROJECT_STRUCTURE.md @@ -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 +```