diff --git a/README.md b/README.md index ee3b8b8a8..6c369cbc1 100644 --- a/README.md +++ b/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) | diff --git a/components/pois/AddPOIModal.js b/components/pois/AddPOIModal.js index 9ba33770a..9851f3e12 100644 --- a/components/pois/AddPOIModal.js +++ b/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 ( -
-
e.stopPropagation()}> -
- setName(e.target.value)} placeholder="Name der Station" className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" /> + setName(e.target.value)} + placeholder="POI-Bezeichnung eingeben" + className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" + />
- setDeviceName(e.target.value)} + className="block p-2 w-full border-2 border-gray-200 rounded-md text-sm" + > {locationDeviceData.map((device, index) => ( ) : ( - poiTypData.map((poiTyp) => ( + poiTypData.map(poiTyp => ( @@ -124,10 +153,17 @@ const AddPOIModal = ({ onClose, map, latlng }) => { Lng: {longitude}
- {status === "loading" &&
Wird hinzugefügt...
} - {status === "failed" && error &&
❌ Fehler: {error}
} + {status === "loading" && ( +
Wird hinzugefügt...
+ )} + {status === "failed" && error && ( +
❌ Fehler: {error}
+ )} -
diff --git a/config/appVersion.js b/config/appVersion.js index fe30128f9..a5d449b41 100644 --- a/config/appVersion.js +++ b/config/appVersion.js @@ -1,2 +1,2 @@ // /config/appVersion -export const APP_VERSION = "1.1.234"; +export const APP_VERSION = "1.1.235"; diff --git a/docs/guide/faq.md b/docs/guide/faq.md new file mode 100644 index 000000000..0844b48ee --- /dev/null +++ b/docs/guide/faq.md @@ -0,0 +1,65 @@ + + +# ❓ 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:///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. diff --git a/docs/guide/glossar.md b/docs/guide/glossar.md new file mode 100644 index 000000000..1da49dcd1 --- /dev/null +++ b/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. | diff --git a/docs/guide/onboarding-checklist.md b/docs/guide/onboarding-checklist.md new file mode 100644 index 000000000..2ef1766a2 --- /dev/null +++ b/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! 🎉 diff --git a/docs/guide/setup-dev.md b/docs/guide/setup-dev.md new file mode 100644 index 000000000..0ebfc70e7 --- /dev/null +++ b/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) diff --git a/docs/screenshots/add-poi-formular.png b/docs/screenshots/add-poi-formular.png new file mode 100644 index 000000000..2b2d567ae Binary files /dev/null and b/docs/screenshots/add-poi-formular.png differ diff --git a/docs/screenshots/call-map.png b/docs/screenshots/call-map.png new file mode 100644 index 000000000..91844df0e Binary files /dev/null and b/docs/screenshots/call-map.png differ diff --git a/docs/screenshots/control-panel.png b/docs/screenshots/control-panel.png new file mode 100644 index 000000000..029cc4f13 Binary files /dev/null and b/docs/screenshots/control-panel.png differ diff --git a/docs/screenshots/iframe-in-talas.png b/docs/screenshots/iframe-in-talas.png new file mode 100644 index 000000000..bb81edb5b Binary files /dev/null and b/docs/screenshots/iframe-in-talas.png differ diff --git a/docs/screenshots/initial-contextmenu.png b/docs/screenshots/initial-contextmenu.png new file mode 100644 index 000000000..32e4bb0b6 Binary files /dev/null and b/docs/screenshots/initial-contextmenu.png differ diff --git a/docs/screenshots/no-db-no-lines.png b/docs/screenshots/no-db-no-lines.png new file mode 100644 index 000000000..5e6248ab4 Binary files /dev/null and b/docs/screenshots/no-db-no-lines.png differ diff --git a/docs/screenshots/out-of-service.png b/docs/screenshots/out-of-service.png new file mode 100644 index 000000000..7bcffed07 Binary files /dev/null and b/docs/screenshots/out-of-service.png differ diff --git a/docs/screenshots/overview.png b/docs/screenshots/overview.png new file mode 100644 index 000000000..678e3f373 Binary files /dev/null and b/docs/screenshots/overview.png differ diff --git a/docs/screenshots/poi-contextmenu.png b/docs/screenshots/poi-contextmenu.png new file mode 100644 index 000000000..e06110bcd Binary files /dev/null and b/docs/screenshots/poi-contextmenu.png differ