feat: Recoil vollständig entfernt, Projekt nutzt nur noch Redux

- 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

@@ -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

README.md

@@ -166,15 +166,20 @@ NEXT_PUBLIC_USE_MOCK_API=true
 
 ---
 
-## 🧠 Zustand: Recoil zu Redux-Migration
+## 🧠 Zustand: Redux (ehemals Recoil)
 
-| Zustand / Atom           | Migration             |
+Die Anwendung verwendet vollständig **Redux Toolkit** für die globale Zustandverwaltung.  
-| ------------------------ | --------------------- |
+Alle ehemaligen Recoil-Atoms wurden erfolgreich in Redux-Slices überführt.
-| poiLayerVisible (Recoil) | ✅ zu Redux umgezogen |
-| selectedPoi              | ❌ noch in Recoil     |
-| mapLayersState           | ✅ bereits in Redux   |
 
-➡ 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!
 
 ---
 

Wiki.md

@@ -1,175 +0,0 @@
-# TALAS V5 nodeMap
-
-<br><br>
-
-## 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.
-
-<br><br>
-
-## 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.
-
-<br><br>
-
-## 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.
-
-<br><br>
-
-## 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).
-
-<br><br>
-
-## 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.
-
-<br><br>
-
-Diese Dokumentation und Benutzeranleitung kann weiter angepasst und erweitert werden.

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.95";
+export const APP_VERSION = "1.1.97";

docs/frontend/components/DataSheet.md

@@ -1,6 +1,7 @@
 # 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ü
@@ -11,6 +12,7 @@ Die Komponente `DataSheet` dient als Kontrollzentrale für die interaktive Karte
 ---
 
 ## 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
+* `poiLayerVisibleSlice`
-- `selectedAreaState`
+* `zoomTriggerSlice`
-- `zoomTriggerState`
+* `selectedAreaSlice`
-- `poiLayerVisibleState`
 
 ### 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,10 +72,11 @@ 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 |
@@ -76,6 +85,7 @@ Folgende Werte werden zwischen Sitzungen gespeichert:
 ---
 
 ## 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.

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",

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",

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 (
     <Provider store={store}>
-      {" "}
-      {/* Redux Provider */}
-      <RecoilRoot>
-        {" "}
-        {/* Recoil Provider */}
       <Component {...pageProps} />
-      </RecoilRoot>
     </Provider>
   );
 }

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({