From 13e176fda8f7d8dac66ea2e885d92f3de82f7fcc Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 19 May 2025 13:10:11 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Recoil=20vollst=C3=A4ndig=20entfernt,?= =?UTF-8?q?=20Projekt=20nutzt=20nur=20noch=20Redux?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - RecoilRoot aus _app.js entfernt - recoil aus package.json & package-lock.json gelöscht - README.md aktualisiert: Redux statt Recoil - DataSheet.md & Wiki.md angepasst - Projekt ist jetzt vollständig Recoil-frei --- CHANGELOG.md | 22 ++++ README.md | 19 +-- Wiki.md | 175 -------------------------- config/appVersion.js | 2 +- docs/frontend/components/DataSheet.md | 49 ++++++-- package-lock.json | 27 +--- package.json | 1 - pages/_app.js | 12 +- redux/slices/currentPoiSlice.js | 2 +- 9 files changed, 75 insertions(+), 234 deletions(-) delete mode 100644 Wiki.md diff --git a/CHANGELOG.md b/CHANGELOG.md index de3266d1e..30d4c3e66 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,28 @@ Alle bedeutenden Änderungen an diesem Projekt werden in dieser Datei dokumentie --- +## [1.1.97] – 2025-05-19 + +### Changed + +- Recoil vollständig aus dem Projekt entfernt: + - `_app.js`: `RecoilRoot` entfernt + - `package.json`: `recoil` deinstalliert + - `package-lock.json`: Recoil-Abhängigkeiten entfernt +- Projekt verwendet ausschließlich Redux mit `@reduxjs/toolkit` +- `README.md` aktualisiert: + - Hinweis entfernt, dass Recoil verwendet wird + - Abschnitt hinzugefügt, warum Redux bevorzugt wird (Übersicht, SSR-Fähigkeit bei Next.js) +- `DataSheet.md` überarbeitet: Recoil entfernt, Redux-Einsatz dokumentiert +- `Wiki.md` als veraltet markiert, da alle Dokumentationen in `/docs/` konsolidiert sind + +### Removed + +- `recoil` aus `package.json` und `node_modules` +- Erwähnungen von Recoil in Projekt-Dokumentation + +--- + ## [1.1.95] – 2025-05-19 ### Changed diff --git a/README.md b/README.md index 7b0a724c6..df4e3688c 100644 --- a/README.md +++ b/README.md @@ -166,15 +166,20 @@ NEXT_PUBLIC_USE_MOCK_API=true --- -## 🧠 Zustand: Recoil zu Redux-Migration +## 🧠 Zustand: Redux (ehemals Recoil) -| Zustand / Atom | Migration | -| ------------------------ | --------------------- | -| poiLayerVisible (Recoil) | ✅ zu Redux umgezogen | -| selectedPoi | ❌ noch in Recoil | -| mapLayersState | ✅ bereits in Redux | +Die Anwendung verwendet vollständig **Redux Toolkit** für die globale Zustandverwaltung. +Alle ehemaligen Recoil-Atoms wurden erfolgreich in Redux-Slices überführt. -➡ Neue Features bitte nur noch mit Redux umsetzen! +> Recoil wurde vollständig entfernt, um die Skalierbarkeit und Wartbarkeit zu verbessern. + +### Gründe für Redux statt Recoil: + +- Bessere Nachvollziehbarkeit durch zentrale Store-Struktur +- Unterstützung für DevTools, Logging, Debugging +- Einheitliche Behandlung von Status, auch bei komplexen Komponenten + +➡ Neue Features bitte ausschließlich mit Redux umsetzen! --- diff --git a/Wiki.md b/Wiki.md deleted file mode 100644 index 49c6ae9aa..000000000 --- a/Wiki.md +++ /dev/null @@ -1,175 +0,0 @@ -# TALAS V5 nodeMap - -

- -## Einführung - -Dieses Dokument bietet einen umfassenden Überblick über die TALAS V5-GIS-Webanwendung nodeMap. Diese Anwendung ermöglicht es, verschiedene Daten und Informationen visuell und interaktiv zu speichern, zu verwalten und anzuzeigen. Sie basiert auf Geographic Information Systems (GIS) und verwendet MySQL als Datenbank. - -

- -## Installation - -### Voraussetzungen - -- **Node.js und npm:** Stellen Sie sicher, dass Node.js und npm auf Ihrem System installiert sind. Besuchen Sie [Node.js](https://nodejs.org) für Installationsanleitungen. - -### Projekt herunterladen und vorbereiten - -Laden Sie nodeMap.zip aus dem Team-URL herunter und entpacken Sie die Datei mit Werkzeugen wie 7-Zip. -Kopieren Sie den entpackten Ordner nodeMap in das Verzeichnis C:\inetpub\wwwroot\talas5. - -### mapTiles einfügen - -Fügen Sie das mapTiles-Verzeichnis in `C:\inetpub\wwwroot\talas5\nodeMap\public` ein. Die mapTiles sollten lokal sein. - -## Serverkonfiguration - -1. **Projekt Kopieren**: Kopieren Sie das Projekt direkt, anstatt es von Gitea zu klonen, um Probleme mit `npm install` und Abhängigkeiten zu vermeiden. - -2. **Port Freigabe**: Der Port `3000` muss auf dem Server freigegeben werden, damit die Anwendung auch außerhalb des Servers erreichbar ist. - -3. **API IP Konfiguration**: Konfigurieren Sie die Server-IP und den Port in den entsprechenden Dateien, um den Zugriff auf die Anwendung zu ermöglichen. Beispielkonfigurationen: - - - In `C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx`: `"http://10.10.0.30:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);` - - Bei localhost kommt dieser Meldung: _localhost hat die Verbindung abgelehnt_. Also, nur über IP ist intern und extern erreichbar: `"http://localhost:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue);` - -4. **Konfiguration in `[...path].js`**: - - - In `/pages/api/[...path].js` muss die IP des Servers eingetragen werden: `target: "http://localhost",` - - In `/config/config.js` API-Endpoint prüfen. - -5. **Datenbank-Host-IP**: In `.env.local`: `DB_HOST=localhost,` - -6. **Map URL**: In `/components/MapComponent.js`: `const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";` - -7. **ServerURL in MapComponent**: Stellen Sie sicher, dass `serverURL` die richtige IP-Adresse und API-Endpoint hat und für Benutzer-Berechtigung: `const serverURL = "http://10.10.0.13";` - -8. **baseURL in MapComponent**: Stellen Sie sicher, dass `baseURL` die localhost und API-Endpoint hat und für Benutzer-Berechtigung und Stationen öffnen: `const baseUrl = "http://localhost/talas5/devices/";` - -9. **App als Service starten**: Starten Sie die App als Service, damit sie mit dem Server-System startet: `nssm.exe install ->Batch-Datei ->Projekt-Ordner -> 3. kann leer sein` - -10. **Chrome Version**: Der Web-Browser Chrome muss ab Version `125.0.6420.142` sein. - -

- -## Benutzeranleitung - -### Karte ansehen - -Die Hauptseite zeigt eine interaktive Karte, auf der verschiedene geografische Punkte dargestellt werden. - -- Beim Überfahren eines Elements (Station oder Poi) mit der Maus erscheint ein Popup mit Informationen über dieses Element. - -- Überlappende Stationen werden durch ein Plus-Icon angezeigt. Bei einem Linksklick auf das Icon werden die Stationen visuell auseinandergezogen, und Informationen zu einer Station werden bei Mausüberfahrt angezeigt. -- **Verschieben:** Halten Sie die linke Maustaste gedrückt und bewegen Sie die Maus, um die Karte zu verschieben um verschiedene Bereiche zu erkunden. - -#### Station wählen - -Oben rechts auf der Karte befindet sich ein Dropdown-Menü, mit dem Sie direkt zu einer ausgewählten Station zoomen können. - -#### Layer auswählen - -In derselben Oberfläche können Sie über Checkboxen verschiedene System-Layer ein- oder ausblenden, um spezifische Informationen auf der Karte anzuzeigen oder zu verbergen. - -#### Rauszoomen-Icon - -Ein Icon zum Rauszoomen ermöglicht es Ihnen, schnell zu einem definierten Bereich zurückzukehren. - -### Kontextmenü - -#### Station öffnen - -Stationen können im selben Browser-Fenster oder in einem neuen Tab geöffnet werden. - -- Maus über eine Station -> Rechte Maustaste -> Kontextmenü öffnen und "Station öffnen (Tab)" wählen, um die Station in einem neuen Browser-Tab zu öffnen, oder "Station öffnen", um sie im selben Fenster zu öffnen. - -#### Hinzufügen neuer Poi - -Nutzer können über ein Formular neue Marker (Poi) zur Datenbank hinzufügen. - -- Rechte Maustaste -> Poi hinzufügen -> Formular ausfüllen -> "Poi hinzufügen" Button klicken. Der Poi erscheint dann auf der Karte. - -#### Koordinaten anzeigen - -Im Kontextmenü können Sie die aktuellen Koordinaten der Mausposition in einem Alert-Fenster anzeigen lassen. - -#### Zoom - -Sie können mit dem Mausrad ein- und auszoomen, um näher an Bereiche heranzukommen oder sich für eine Übersicht zu entfernen. -Sie haben auch die Möglichkeit im Kontextmenü ein- und auszoomen. - -#### Hier zentrieren - -Die aktuellen Mauskoordinaten werden im Browser-Fenster zentriert. - -### Pois hinzufügen und bearbeiten - -1. **Poi hinzufügen:** - - - Rechtsklicken Sie auf den gewünschten Ort auf der Karte, um das Kontextmenü zu öffnen. - - Wählen Sie die Option "Poi hinzufügen". - - Füllen Sie das Formular mit den notwendigen Informationen über den Poi aus und klicken Sie auf "POI hinzufügen", um den PoI zur Karte und zur Datenbank hinzuzufügen. - -2. **Poi verschieben:** - - Um einen bestehenden Poi zu verschieben, klicken und halten Sie den Marker des POI und ziehen Sie ihn an die neue Position. - - Lassen Sie den Marker los, um die neue Position zu bestätigen. Die Position wird automatisch in der MySQL-Datenbank aktualisiert. -3. **Poi bearbeiten:** - - Im Kontextmenü "Poi bearbeiten klicken, dann öffnet Formular-Fenster, drin können die Werte geändert dann auf "POI aktualisieren" klicken. -4. **Poi löschen** - - In das vorherige Fenster "Poi löschen" klicken um von der Karte und von der Datenbank entfernen. - -

- -## Fehlerbehebung - -### Problembehandlung bei der Installation - -Stellen Sie sicher, dass alle Umgebungsvariablen korrekt gesetzt sind. - -### Lösungen bei häufigen Fehlern - -Bei Problemen während der Weiterentwicklung könnte es hilfreich sein, die Seite neu zu laden (aktualisieren). - -

- -## Verzeichnisstruktur - -### /pages - -- **\_app.js**: Grundlegende Konfiguration und Layout für die gesamte Anwendung. Importiert globale Styles und Recoil-Root für das State Management. -- **index.js**: Startseite der Anwendung, lädt die Hauptkomponenten und initiiert die Karte. -- **[...path].js**: Dynamische Route, die verwendet wird, um verschiedene URLs zu verarbeiten, die spezifische Ansichten oder Funktionen in der Anwendung darstellen. - -### /components - -- **DataSheet.js**: Verantwortlich für die Anzeige und Interaktion mit den Layer- und Stationsauswahlen. Ermöglicht das Aktivieren/Deaktivieren von Layern und zeigt Informationen zu geografischen Punkten. -- **MapComponent.js**: Kernkomponente für die Darstellung der Karte. Beinhaltet Logik für das Hinzufügen von Layern, Zoom-Funktionen und andere interaktive Elemente. -- **PoiUpdateModal.js**:Komponente zum Aktualisieren(update) und löschen von Pois. -- **AddPoiModalWindow.js**:Komponente zum hinzufügen von Pois. - -### /public - -- Speicherort für statische Dateien wie MapTiles (falls Internet nicht vorhanden), Bilder, Icons und andere Medien, die in der Benutzeroberfläche verwendet werden. - -### /styles - -- Enthält CSS-Dateien und andere Styling-Ressourcen für das Tailwind CSS-Framework. - -### /store - -- Zustandsmanagement-Dateien, die mit Recoil erstellt wurden. Diese Dateien definieren Atome und Selektoren für den globalen Zustand der Anwendung. - -### /api - -- **addLocation.js**: API-Route zur Handhabung des Hinzufügens neuer Standortdaten zur Datenbank. -- **updateLocation.js**: API-Route zur Aktualisierung bestehender Standortdaten. -- **locations.js**: API-Route, die für das Abrufen von Standortdaten zuständig ist. - -### /config - -- **config.js**: Konfigurationsdatei, die wichtige Konstanten und Einstellungen für die Anwendung enthält, wie z.B. API-Endpoints. - -

- -Diese Dokumentation und Benutzeranleitung kann weiter angepasst und erweitert werden. diff --git a/config/appVersion.js b/config/appVersion.js index 6d1bda5bc..4b3772cff 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.95"; +export const APP_VERSION = "1.1.97"; diff --git a/docs/frontend/components/DataSheet.md b/docs/frontend/components/DataSheet.md index f9c3f86e0..600e54c1d 100644 --- a/docs/frontend/components/DataSheet.md +++ b/docs/frontend/components/DataSheet.md @@ -1,16 +1,18 @@ # Komponenten-Dokumentation: `DataSheet.js` ## Zweck + Die Komponente `DataSheet` dient als Kontrollzentrale für die interaktive Kartenanwendung. Sie bietet Funktionen für: - Auswahl von Bereichen ("Stationen") aus einem Dropdown-Menü - Steuerung der Sichtbarkeit von Layern wie POIs und Polyline (z. B. Kabelstrecken) -- Aktivierung des Editiermodus +- Aktivierung des Editiermodus - Steuerung von Layer-Zuständen über Redux und Recoil --- ## Position im UI + Die Komponente wird als Floating-Panel oben rechts auf der Karte angezeigt. Sie hat eine feste Breite (min/max) und ist als "Sidebar-Lightbox" implementiert. --- @@ -18,18 +20,19 @@ Die Komponente wird als Floating-Panel oben rechts auf der Karte angezeigt. Sie ## Abhängigkeiten ### Redux + - `gisStationsStaticDistrictSlice` - `gisSystemStaticSlice` - `mapLayersSlice` - `polylineLayerVisibleSlice` - `gisStationsStaticSlice` -### Recoil -- `selectedAreaState` -- `zoomTriggerState` -- `poiLayerVisibleState` +* `poiLayerVisibleSlice` +* `zoomTriggerSlice` +* `selectedAreaSlice` ### Hooks + - `useInitGisStationsStatic()` --- @@ -37,26 +40,31 @@ Die Komponente wird als Floating-Panel oben rechts auf der Karte angezeigt. Sie ## Funktionalität im Überblick ### 1. **Bereiche Dropdown** + - Gefüllt aus `GisStationsStatic.Points` - Wird aktualisiert, wenn sich die Redux-Daten ändern - Bei Auswahl wird `selectedAreaState` aktualisiert ### 2. **Systemlayer-Checkboxen** + - Daten kommen aus `GisSystemStatic` - Jeder Eintrag hat `Name` und einen intern generierten `key` - Sichtbarkeit wird über `mapLayersState` verwaltet - Zustand wird in `localStorage` gespeichert ### 3. **TALAS-Untermenu** + - Bei Systemname "TALAS" wird eine Untergruppe angezeigt: - Checkbox für Polyline (Kabelstrecken) - Sichtbarkeit auch in `localStorage` ### 4. **POI-Checkbox** -- Recoil-State `poiLayerVisibleState` + +- Redux-Slice `poiLayerVisibleSlice` - Sichtbarkeit von POI-Layern auf der Karte ### 5. **EditModeToggle** + - Eine separate Komponente - Aktiviert/Deaktiviert den Bearbeitungsmodus (z. B. für Kontextmenü-Einträge) - Bei aktivem EditMode sind Checkboxen deaktiviert @@ -64,18 +72,20 @@ Die Komponente wird als Floating-Panel oben rechts auf der Karte angezeigt. Sie --- ## Lokale Speicherwerte (localStorage) + Folgende Werte werden zwischen Sitzungen gespeichert: -| Key | Zweck | -|------------------------|----------------------------------| -| `poiVisible` | Sichtbarkeit POI-Layer | -| `polylineVisible` | Sichtbarkeit Kabelstrecken | -| `mapLayersVisibility` | Sichtbarkeitsstatus für alle Layer | -| `editMode` | Status des Bearbeitungsmodus | +| Key | Zweck | +| --------------------- | ---------------------------------- | +| `poiVisible` | Sichtbarkeit POI-Layer | +| `polylineVisible` | Sichtbarkeit Kabelstrecken | +| `mapLayersVisibility` | Sichtbarkeitsstatus für alle Layer | +| `editMode` | Status des Bearbeitungsmodus | --- ## Bekannte Besonderheiten + - **Fallbacks** für Redux-Selector: z. B. `|| []` bei leeren Listen - **Fehlerprüfung** für `GisStationsStatic.Points` im useEffect - **Doppelte Initialisierung von stationListing** (einmal aus `Points`, einmal aus `District`) @@ -83,13 +93,15 @@ Folgende Werte werden zwischen Sitzungen gespeichert: --- ## Voraussetzungen für korrekte Funktion + - API-Endpunkt `/GisStationsStatic?idMap=...` muss korrekte Struktur liefern: `{ Points: [...] }` -- Recoil- und Redux-Stores müssen korrekt initialisiert sein +- Redux Store muss korrekt initialisiert sein - Hook `useInitGisStationsStatic` muss beim Mount ausgeführt werden --- ## Weiterführende Dateien + - `/hooks/useMapComponentState.js` - `/components/EditModeToggle.js` - Redux-Slices unter `/redux/slices/` @@ -97,4 +109,15 @@ Folgende Werte werden zwischen Sitzungen gespeichert: --- ## Speicherort für Dokumentation + Empfohlenes Ziel: `/docs/DataSheet.md` + +--- + +--- + +## Hinweis zur Umstellung + +Diese Komponente wurde ursprünglich mit Recoil entwickelt. +Seit Version `1.1.96` ist der Zustand vollständig auf **Redux Toolkit** umgestellt. +Die Recoil-Atoms wurden entfernt und durch Redux-Slices ersetzt. diff --git a/package-lock.json b/package-lock.json index 55fc59d4e..8634f0801 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "NodeMap V1.0.19.4_04.03.2025", + "name": "19.05.2025 NodeMap", "lockfileVersion": 3, "requires": true, "packages": { @@ -31,7 +31,6 @@ "react-redux": "^9.2.0", "react-select": "^5.8.0", "react-toastify": "^10.0.5", - "recoil": "^0.7.7", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "tailwindcss": "^3.4.7", @@ -3404,11 +3403,6 @@ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" }, - "node_modules/hamt_plus": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/hamt_plus/-/hamt_plus-1.0.2.tgz", - "integrity": "sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==" - }, "node_modules/harmony-reflect": { "version": "1.6.2", "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz", @@ -5478,25 +5472,6 @@ "node": ">=8.10.0" } }, - "node_modules/recoil": { - "version": "0.7.7", - "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz", - "integrity": "sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==", - "dependencies": { - "hamt_plus": "1.0.2" - }, - "peerDependencies": { - "react": ">=16.13.1" - }, - "peerDependenciesMeta": { - "react-dom": { - "optional": true - }, - "react-native": { - "optional": true - } - } - }, "node_modules/redux": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", diff --git a/package.json b/package.json index 9c5043d1d..c91baf30a 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "react-redux": "^9.2.0", "react-select": "^5.8.0", "react-toastify": "^10.0.5", - "recoil": "^0.7.7", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "tailwindcss": "^3.4.7", diff --git a/pages/_app.js b/pages/_app.js index f4d0e26c3..6ccbfebff 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,21 +1,13 @@ // /pages/_app.js import React from "react"; -import { RecoilRoot } from "recoil"; import { Provider } from "react-redux"; -import { store } from "../redux/store"; // ← Stelle sicher, dass der Import korrekt ist! +import { store } from "../redux/store"; import "../styles/global.css"; -//import "../public/css/geocoder.css"; function MyApp({ Component, pageProps }) { return ( - {" "} - {/* Redux Provider */} - - {" "} - {/* Recoil Provider */} - - + ); } diff --git a/redux/slices/currentPoiSlice.js b/redux/slices/currentPoiSlice.js index 00e44da63..7b4998621 100644 --- a/redux/slices/currentPoiSlice.js +++ b/redux/slices/currentPoiSlice.js @@ -2,7 +2,7 @@ import { createSlice } from "@reduxjs/toolkit"; const initialState = { - currentPoi: null, // Standardwert wie im Recoil-Atom + currentPoi: null, }; const currentPoiSlice = createSlice({