docs: Screenshots in README.md

README.md

@@ -5,6 +5,10 @@ Gerätestatus in einer interaktiven Leaflet-Karte.
 Die Anwendung ist mit **Next.js**, **React**, **Redux Toolkit**, **Tailwind CSS** und **Leaflet**
 umgesetzt.
 
+## 🌍 Live-Vorschau der Karte
+
+![Startansicht der NodeMap Karte](docs/screenshots/overview.png)
+
 ---
 
 > 🖥 Entwicklung & Test unter Windows 11 mit Node.js v18.17.1 und IIS  
@@ -13,17 +17,6 @@ umgesetzt.
 
 ---
 
-## 🧰 Erste Schritte für Entwickler
-
-```bash
-git clone http://10.10.0.12:3000/ISA/nodeMap
-cd nodeMap
-npm install
-npm run dev
-```
-
----
-
 ## 🧭 Zielumgebung
 
 - Windows-Produktionsserver (offline, kein Internet)
@@ -44,7 +37,7 @@ npm run dev
 
 ---
 
-## 🧰 Erstinstallation auf Server (z. B. Windows IIS)
+## 🧰 Erstinstallation auf Server
 
 ### Voraussetzungen
 
@@ -63,10 +56,13 @@ npm run dev
 
 ## 🔗 Integration in TALAS.web
 
+![iFrame-Integration](docs/screenshots/iframe-in-talas.png)
+
 - Die App wird in einem **iFrame** geladen
 - Startet über `?m=X&u=Y` für Map-/User-ID
 - Rechte und Inhalte werden automatisch geladen
   ```
+  z.B.
   `http://10.10.0.13/talas5/MessagesMap/mapTypC.aspx?m=12&u=484`
   ```
 
@@ -86,13 +82,18 @@ npm run dev
 
 2. **ZIP-Paket vorbereiten (lokal):**
 
-   - Verzeichnisse `.next/`, `public/`, `node_modules/`
-   - Dateien `.env.production`, `package.json`
-   - optional: `nssm.exe`, `StartNodeApp.bat`, `Start-Dev.ps1` um Windows Dienst zu erstellen
-     Download:
+   - Verzeichnis `.next/`
+   - Verzeichnisse `public/`, `node_modules/` falls nich vorhanden sind oder etwas hinzugefügt wurd
+     (Bilder oder Bibliothek)
+   - Dateien `.env.production`, `package.json` falls nich vorhanden sind oder etwas hinzugefügt wurd
+     (Umgebungsvariablen oder Bibliothek)
+   - optional: `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:**
+3. **Auf Server kopieren nach:** Ein Ordner temp auf dem Desktop erstellen->ZIP-Paket
+   einfügen->entpacken->Inhalt in folgende Verzeichnis einfügen, weil verhindert Windows Server
+   direkt kopieren in folgende Verzeichnis
 
    ```
    C:\inetpub\wwwroot\talas5\nodeMap\
@@ -100,6 +101,8 @@ npm run dev
 
 4. **Kartenmaterial hinzufügen (falls nicht vorhanden):**
 
+   Muss noch in Download-Server eingefügt werden, damit eine zentrale Stelle verfügbar ist
+
    ```
    C:\inetpub\wwwroot\talas5\TileMap\
    ```
@@ -120,7 +123,7 @@ Datenbank-Zugang, Pfade und Mock-Option.
   [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 oder
+   Dienst starten , falls vorhanden einmal beenden und neustarten oder
 
    ```bash
    npm start in Terminal für Debugging
@@ -179,7 +182,7 @@ wird mit husky Bibliothek automatisch erhöht bei "git commit message"
 >
 > - 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
+> - Windows-Dienst `NodeMapService` ist aktiv oder `npm start` in Terminal ausgeführt
 
 ## 📁 Dokumentation & technische Leitfäden
 
@@ -192,15 +195,6 @@ wird mit husky Bibliothek automatisch erhöht bei "git commit message"
 | Mockdaten-Modus           | [mock-data.md](docs/guide/mock-data.md)                 |
 | Zustandverwaltung (Redux) | [redux-zustand.md](docs/guide/redux-zustand.md)         |
 | Abhängigkeiten            | [dependencies.md](docs/guide/dependencies.md)           |
-
----
-
-## 🧰 Fehlerbehandlung
-
-- **App startet leer?** → `.env.production` prüfen
-- **Kartenkacheln fehlen?** → `public/mapTiles/` korrekt eingebunden?
-- **Keine Marker sichtbar?** → Webservice erreichbar?
-- Seite neu laden, wenn POIs nicht korrekt geladen werden
-- Port 3000 freigeben
-
----
+| Lokale Entwicklung        | [setup-dev.md](docs/guide/setup-dev.md)                 |
+| FAQ & Fehlerbehandlung    | [faq.md](docs/guide/faq.md)                             |
+| Glossar                   | [faq.md](docs/guide/glossar.md)                         |

components/pois/AddPOIModal.js

@@ -11,9 +11,9 @@ import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/pois/fetchPo
 const AddPOIModal = ({ onClose, map, latlng }) => {
   const dispatch = useDispatch();
 
-  const poiTypData = useSelector((state) => state.poiTypes.data);
-  const status = useSelector((state) => state.addPoi.status);
-  const error = useSelector((state) => state.addPoi.error);
+  const poiTypData = useSelector(state => state.poiTypes.data);
+  const status = useSelector(state => state.addPoi.status);
+  const error = useSelector(state => state.addPoi.error);
 
   const [name, setName] = useState("");
   const [poiTypeId, setPoiTypeId] = useState("");
@@ -33,7 +33,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
 
   useEffect(() => {
     if (locationDeviceData?.length > 0) {
-      setDeviceName((prev) => prev || locationDeviceData[0]?.LD_Name || "");
+      setDeviceName(prev => prev || locationDeviceData[0]?.LD_Name || "");
     }
   }, [locationDeviceData]);
 
@@ -41,7 +41,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
     dispatch(fetchPoiTypThunk());
   }, [dispatch]);
 
-  const handleSubmit = async (event) => {
+  const handleSubmit = async event => {
     event.preventDefault();
 
     const formData = {
@@ -49,7 +49,7 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
       poiTypeId: Number(poiTypeId),
       latitude,
       longitude,
-      idLD: locationDeviceData.find((device) => device.LD_Name === deviceName)?.IdLD,
+      idLD: locationDeviceData.find(device => device.LD_Name === deviceName)?.IdLD,
     };
 
     try {
@@ -72,25 +72,48 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
   };
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[1000]" onClick={onClose}>
-      <div className="relative bg-white p-6 rounded-lg shadow-lg w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
-        <button onClick={onClose} className="absolute top-2 right-2 text-gray-600 hover:text-gray-900">
+    <div
+      className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-[1000]"
+      onClick={onClose}
+    >
+      <div
+        className="relative bg-white p-6 rounded-lg shadow-lg w-96 max-w-full"
+        onClick={e => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-2 right-2 text-gray-600 hover:text-gray-900"
+        >
           ✖
         </button>
 
         <form onSubmit={handleSubmit} className="m-0 p-2 w-full">
           <div className="flex items-center mb-4">
             <label htmlFor="name" className="block mr-2 flex-none">
-              Name:
+              Bezeichnung:
             </label>
-            <input type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" />
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={name}
+              onChange={e => setName(e.target.value)}
+              placeholder="POI-Bezeichnung eingeben"
+              className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
+            />
           </div>
 
           <div className="flex items-center mb-4">
             <label htmlFor="deviceName" className="block mr-2 flex-none">
               Gerät:
             </label>
-            <select id="deviceName" name="deviceName" value={deviceName} onChange={(e) => setDeviceName(e.target.value)} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
+            <select
+              id="deviceName"
+              name="deviceName"
+              value={deviceName}
+              onChange={e => setDeviceName(e.target.value)}
+              className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
+            >
               <option value="">-- Gerät auswählen --</option>
               {locationDeviceData.map((device, index) => (
                 <option key={device?.IdLD || index} value={device?.LD_Name}>
@@ -104,13 +127,19 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
             <label htmlFor="idPoiTyp2" className="block mr-2 flex-none">
               Typ:
             </label>
-            <select id="idPoiTyp2" name="idPoiTyp2" value={poiTypeId} onChange={(e) => setPoiTypeId(Number(e.target.value))} className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm">
+            <select
+              id="idPoiTyp2"
+              name="idPoiTyp2"
+              value={poiTypeId}
+              onChange={e => setPoiTypeId(Number(e.target.value))}
+              className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm"
+            >
               {poiTypData.length === 0 ? (
                 <option value="" disabled>
                   Keine POI-Typen verfügbar
                 </option>
               ) : (
-                poiTypData.map((poiTyp) => (
+                poiTypData.map(poiTyp => (
                   <option key={poiTyp.idPoiTyp} value={poiTyp.idPoiTyp}>
                     {poiTyp.name}
                   </option>
@@ -124,10 +153,17 @@ const AddPOIModal = ({ onClose, map, latlng }) => {
             <span>Lng: {longitude}</span>
           </div>
 
-          {status === "loading" && <div className="text-blue-500 mb-2 text-sm">Wird hinzugefügt...</div>}
-          {status === "failed" && error && <div className="text-red-500 mb-2 text-sm">❌ Fehler: {error}</div>}
+          {status === "loading" && (
+            <div className="text-blue-500 mb-2 text-sm">Wird hinzugefügt...</div>
+          )}
+          {status === "failed" && error && (
+            <div className="text-red-500 mb-2 text-sm">❌ Fehler: {error}</div>
+          )}
 
-          <button type="submit" className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full">
+          <button
+            type="submit"
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-full"
+          >
             POI hinzufügen
           </button>
         </form>

config/appVersion.js

@@ -1,2 +1,2 @@
 // /config/appVersion
-export const APP_VERSION = "1.1.234";
+export const APP_VERSION = "1.1.235";

docs/guide/faq.md

@@ -0,0 +1,65 @@
+<!--  /docs/guide/faq.md -->
+
+# ❓ FAQ – Häufige Fragen
+
+---
+
+### 🔹 Warum sehe ich nur eine weiße Seite?
+
+- Stelle sicher, dass `.env.production` korrekt konfiguriert ist.
+- Prüfe, ob `NEXT_PUBLIC_USE_MOCKS=false` gesetzt ist (nur in Produktion).
+- Starte den Dienst neu (**NodeMapService**) oder führe `npm start` im Terminal aus.
+
+---
+
+### 🔹 Was bedeutet die URL `?m=12&u=484`?
+
+- `m=12` ist die **Map-ID** (z. B. Leverkusen).
+- `u=484` ist die **User-ID**.
+- Diese IDs werden vom übergeordneten System (**TALAS.web**) übergeben und steuern, was angezeigt
+  wird.
+
+---
+
+### 🔹 Wie kann ich POIs hinzufügen oder bearbeiten?
+
+- Rechtsklick auf die Karte → **„POI hinzufügen“** oder **„bearbeiten“**.
+- Daten werden automatisch gespeichert, wenn du das Formular bestätigst.
+
+---
+
+### 🔹 Wie kann ich die Karte lokal testen, ohne Backend?
+
+- Setze in `.env.local` die Variable `NEXT_PUBLIC_USE_MOCKS=true`.
+- Starte mit `npm run dev`.
+- Die App lädt jetzt Mockdaten aus `/mockData/`.
+
+---
+
+### 🔹 Was mache ich, wenn keine Marker angezeigt werden?
+
+- Prüfe die Verbindung zum Webservice:  
+   `http://<ip>/talas5/ClientData/WebServiceMap.asmx`
+- Stelle sicher, dass die **Map-ID** und **User-ID** in der URL gültig sind.
+
+---
+
+### 🔹 Wie erkenne ich, ob mein Layer (z. B. TALAS, WAGO, GMA) geladen ist?
+
+- Im rechten Panel (**LayerControl**) sollten Checkboxen für jeden Layer erscheinen.
+- Wenn keine Layer sichtbar sind, prüfe `redux/mapLayersSlice` und den Webservice `GisSystemStatic`.
+
+---
+
+### 🔹 Was tun bei der Meldung „Fehler beim Laden der Kartenkacheln“?
+
+- Verzeichnis `C:\inetpub\wwwroot\talas5\TileMap` prüfen.
+- Kartenkacheln müssen im `public/`-Pfad korrekt verlinkt sein (z. B. `mapTiles/...`).
+
+---
+
+### 🔹 Wie kann ich die Anwendung aktualisieren?
+
+- **Kleines Update:** Nur `.next/` kopieren.
+- **Größeres Update:** Gesamte App inkl. `node_modules`, `.env.production` und `public/` ersetzen.
+- Dienst neu starten.

docs/guide/glossar.md

@@ -0,0 +1,28 @@
+# 📘 Glossar
+
+Eine Übersicht wichtiger Begriffe rund um NodeMap und die verwendeten Technologien.
+
+| Begriff              | Erklärung                                                                                 |
+| -------------------- | ----------------------------------------------------------------------------------------- |
+| **NodeMap**          | Die Kartenanwendung zur Darstellung von GIS-Daten (z. B. POIs, Geräte) in TALAS.web.      |
+| **Next.js**          | Ein Webframework für React, das Server-Rendering und Routing vereinfacht.                 |
+| **React**            | Eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen (UI).                   |
+| **Redux Toolkit**    | Ein Tool zur einfacheren Zustandverwaltung (State Management) für React.                  |
+| **Tailwind CSS**     | Ein CSS-Framework mit vordefinierten Klassen für schnelles UI-Design.                     |
+| **Leaflet**          | Eine JavaScript-Bibliothek für interaktive Karten auf Webseiten.                          |
+| **POI**              | „Point of Interest“ – Ein Marker auf der Karte (z. B. ein Gerät, Schacht oder Messpunkt). |
+| **MapComponent**     | Die Hauptkomponente, die die Karte lädt und alle Inhalte darauf anzeigt.                  |
+| **WebService**       | Ein Serverdienst, der Daten wie POIs, Linien, Geräte liefert (z. B. aus TALAS).           |
+| **.env.production**  | Eine Konfigurationsdatei mit Zugangsdaten und Einstellungen für den Live-Betrieb.         |
+| **Mockdaten**        | Testdaten, die lokal geladen werden, wenn kein Server verfügbar ist (`USE_MOCKS=true`).   |
+| **iFrame**           | Ein HTML-Element, mit dem eine andere Webseite innerhalb einer Seite eingebettet wird.    |
+| **nssm.exe**         | Ein Tool, um Node.js-Anwendungen als Windows-Dienst laufen zu lassen.                     |
+| **Port 3000**        | Der lokale Entwicklungs-Port, unter dem NodeMap im Browser erreichbar ist.                |
+| **Redux Slice**      | Ein Teil des globalen Redux-Zustands, der z. B. POIs oder Linien speichert.               |
+| **Thunk**            | Eine asynchrone Funktion in Redux, z. B. um Daten vom Server zu laden.                    |
+| **Contextmenü**      | Ein Rechtsklick-Menü mit Funktionen wie „POI hinzufügen“, „Station öffnen“.               |
+| **Layer**            | Ein Karten-Overlay (z. B. Geräte, Linien), das ein- oder ausgeblendet werden kann.        |
+| **IdSystem / IdMap** | Interne IDs zur Zuordnung von Layern und Karten in TALAS.                                 |
+| **GisSystemStatic**  | Eine Webservice-Antwort mit Systeminformationen für die Kartendarstellung.                |
+| **mapTiles**         | Bildkacheln (z. B. `.png`), die die Grundkarte darstellen – wie bei Google Maps.          |
+| **TALAS.web**        | Die bestehende (ältere) Verwaltungssoftware, in die NodeMap eingebettet wird.             |

docs/guide/onboarding-checklist.md

@@ -0,0 +1,76 @@
+## ✅ Onboarding-Checkliste für neue Entwickler bei NodeMap
+
+Willkommen im NodeMap-Team! Diese Checkliste begleitet dich Schritt für Schritt beim Einstieg ins
+Projekt.
+
+---
+
+### 🚦 Schritte zum Start
+
+1. **README.md lesen**  
+   _Verschaffe dir einen Überblick über das Projekt._  
+   ☐ Erledigt
+
+2. **Repository clonen & installieren**
+
+   ```bash
+   git clone http://10.10.0.12:3000/ISA/nodeMap
+   cd nodeMap
+   npm install
+   ```
+
+   ☐ Erledigt
+
+3. **`.env.local` anlegen**  
+   _Siehe [env.md](docs/guide/env.md) für Details._  
+   ☐ Erledigt
+
+4. **Mock-Modus aktivieren**
+
+   ```env
+   NEXT_PUBLIC_USE_MOCKS=true
+   ```
+
+   ☐ Erledigt
+
+5. **Projekt starten**
+
+   ```bash
+   npm run dev
+   ```
+
+   ☐ Erledigt
+
+6. **App im Browser öffnen**  
+   _Gehe zu:_ [http://localhost:3000](http://localhost:3000)  
+   ☐ Erledigt
+
+7. **POIs testen**  
+   _Hinzufügen, Verschieben, Löschen – siehe [user-guide.md](docs/guide/user-guide.md)._  
+   ☐ Erledigt
+
+8. **Redux DevTools installieren & testen**  
+   _Empfohlen für Debugging._  
+   ☐ Erledigt
+
+9. **Projektstruktur ansehen**  
+   _Wichtige Ordner: `components/`, `redux/`, `services/` – siehe
+   [project-structure.md](docs/guide/project-structure.md)._  
+   ☐ Erledigt
+
+10. **Webservices überfliegen**  
+     _Siehe [webservices.md](docs/guide/webservices.md)._  
+     ☐ Erledigt
+
+11. **Fehlerbehandlung beachten**  
+     _Hinweise dazu findest du im README._  
+     ☐ Erledigt
+
+12. **Fragen notieren & klären**  
+     _Sammle offene Punkte und sprich sie im Team an._  
+     ☐ Erledigt
+
+---
+
+**Tipp:** Hake jeden Schritt ab, sobald du ihn erledigt hast.  
+Viel Erfolg beim Einstieg! 🎉

docs/guide/setup-dev.md

@@ -0,0 +1,54 @@
+# 🧑‍💻 Lokale Entwicklung mit NodeMap
+
+Diese Anleitung richtet sich an Entwickler, die NodeMap lokal weiterentwickeln möchten.
+
+---
+
+## Voraussetzungen
+
+- Node.js v18+
+- NPM
+- Chrome / Edge / Firefox
+
+---
+
+## Schritte
+
+```bash
+npm install
+npm run dev
+```
+
+---
+
+## Optionen
+
+- **Mockdaten-Modus aktivieren:**
+
+```env
+NEXT_PUBLIC_USE_MOCKS=true
+```
+
+- **Umgebungsvariablen lokal definieren:**
+
+Datei `.env.local` mit Inhalten wie:
+
+```
+NEXT_PUBLIC_API_URL=http://localhost:3001
+NEXT_PUBLIC_USE_MOCKS=true
+```
+
+---
+
+## Debugging
+
+- Verwende `console.log` in Komponenten oder Redux-Slices
+- Browser-DevTools & Redux DevTools empfohlen
+
+---
+
+## Weitere Dokumentation
+
+- Projektstruktur: [project-structure.md](project-structure.md)
+- Webservices: [webservices.md](webservices.md)
+- Zustandverwaltung: [redux-zustand.md](redux-zustand.md)