diff --git a/Wiki.txt b/Wiki.txt new file mode 100644 index 000000000..756c5c426 --- /dev/null +++ b/Wiki.txt @@ -0,0 +1,177 @@ +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 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 : Projekt kopieren und nicht von Gitea clonen wegen 'npm install' und Abhängigkeiten + + 2-Port Freigabe: Der Port 3000 muss auf dem Server freigegeben werden damit dass auch außerhalb der Server erreichbar ist. + + 3-API IP: Konfigurieren Sie die Server-IP und den Port in den entsprechenden Dateien, um den Zugriff auf die Anwendung zu ermöglichen, + z.B. in C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx und /pages/api/[...path].js. + + Beispielkonfigurationen + In C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx + "http://10.10.0.30:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue); oder + "http://localhost:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue); + + 4-[...path].js : + + In /pages/api/[...path].js muss die IP des Servers eingetragen werden. + target: "10.10.0.30", + + In /config/config.js API-Endpoint prüfen. + + 5-Datenbank-Host-IP: In .env.local . + DB_HOST=10.10.0.30, oder DB_HOST=localhost, + + 6-Map URL: In /components/MapComponent.js . + const onlineTileLayer = "http://10.10.0.30:3000/mapTiles/{z}/{x}/{y}.png";, + + 7-ServerURL in MapComponent: In /components/MapComponent.js . + Stellen Sie sicher, dass serverURL die richtige IP-Adresse und API-Endpoint hat und für Benutzer-Berechtigung. + + 8-baseURL in MapComponent: In /components/MapComponent.js . + Stellen Sie sicher, dass baseURL die richtige IP-Adresse oder localhost und API-Endpoint hat und für Benutzer-Berechtigung und Stationen öffnen. + + 9-App als Service starten: damit die App mit dem Server-System startet. nssm.exe install ->Batch-Datei ->Projekt-Ordner -> 3. kann leer sein + + 10-Chrome Version: Web-Browser Chrome muss ab Version '125.0.6422.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. + ShowAddStationPopup.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. \ No newline at end of file diff --git a/nssm.exe b/nssm.exe new file mode 100644 index 000000000..6ccfe3cfb Binary files /dev/null and b/nssm.exe differ diff --git a/tree.txt b/tree.txt deleted file mode 100644 index 444339e69..000000000 --- a/tree.txt +++ /dev/null @@ -1,240 +0,0 @@ -kannst du mir den wiki besser formulieren und anpassen -# TALAS V5 nodeMap - -## Einführung -Dieses Dokument bietet einen umfassenden Überblick über das TALAS V5-GIS-Projekt Web-Anwendung nodeMap, die es ermöglicht visuell und auf interaktive Weise, verschiedene Daten und Informationen zu speichern, zu verwalten und anzuzeigen. Die Anwendung 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 von Teams herunterladen - -nodeMap.zip von Teams herunterladen von den URL ... - -### Projekt entpacken und kopieren - - -Mit 7-Zip oder andere Tools die Datei entpacken. -Den entpackte Ordner "nodeMap" in diesen Verzeichnis kopieren C:\inetpub\wwwroot\talas5 - -### mapTiles Ordner in den Projekt einfügen - -mapTiles Verzeichnis in C:\inetpub\wwwroot\talas5\nodeMap\public Verzeichnis einfügen, die mapTiles sollen lokal sein - -### Konfiguration des Servers - -Port 3000 muss auf dem Server Frei gegeben. - -In C:\inetpub\wwwroot\talas5\MessagesMap\MapTypC.aspx muss die IP des Servers und pPort 3000 eingegeben aber kein localhost oder 127.0.0.1 -z.B. -"http://10.10.0.30:3000?m=" + encodeURIComponent(mValue) + "&u=" + encodeURIComponent(uValue); - -In /pages/api/[...path].js muss die IP des Servers eingegeben werden -z.B. target: "10.10.0.30", - - - - - -### Lokale Entwicklungsumgebung starten - -In C:\inetpub\wwwroot\talas5\nodeMap die Datei StartNodeApp.bat von Projekt Ordner kopieren und auf dem Desktop kopierren um Zeit zu sparen ,doppelklick dann wird die App gestartet, dann kann den Kommandozeile minimiert werden, Den Fenster nicht schließen. - - - -## Nutzung - -### Karte ansehen -Die Hauptseite zeigt eine interaktive Karte, auf der verschiedene geografische Punkte dargestellt werden. --Mit der Maus über ein Element (Station oder PoI) ercheint ein Popuo mit Informationen üder dieses Element --Überlappende Stationen erkennt man mit Plus Icon: Falls mehrere Station überlappend sind kann mit linke Mausklick, wird dan die Stationen visuell auseinander gehen ,und dann über Mausover auf ein Station bekommt man über ein popup Information dieses Station. - - -### Layer auswählen -Benutzer können verschiedene Layer über Checkboxen ein- und ausblenden, um spezifische Daten auf der Karte anzuzeigen oder zu verbergen. - - -### Station wählen -In Dropdown Menü kann nach Station gesucht werden, wird dann zu den ausgewählter Station Reingezoomt. - -### Feste Zoom-Stufe - Falls Rein- und Rausgezoomt wird , hier kann den Icon klick zu einer bestimmte Zoom-Stufe gehen. - - - - - -### Station öffnen - -Station kann in selben Browser-Fenster oder in einem neuen Tab geöffnet werden - -Maus über eine Station -> Rechte Maustaste um konetxt menü öffnen dann auf "station öffnen (tab)" klicken falls in neue Browser-Tab geöffnet werden soll oder "Station öffnen " klicken fall in selben Browser-fenster geöffnet werden soll. - - -### Hinzufügen neuer PoI -Nutzer können über ein Formular neue Marker(PoI) zur Datenbank hinzufügen. -Rechter Maustaste -> POI hinzufügen -> Formular ausfühlen -> "POI hinzufügen" Button klicken. -dann erscheint POI schon auf die Karte - - -### Koordinaten anzeigen -im Kontext-Menü den Koordinaten anzeigen klicken, wird ein alert Fenster geöffnet mit den Koordinaten - -### Zoom -Mit Mausrad oder in Kontextmenü Reinzoomen oder Rauszoom. -### Hier zentrieren -die aktuelle Maus Koordinaten wird im Browser-Fenster in zu mitte stationiert - - - - - - -## Fehlerbehebung - -### Problembehandlung bei der Installation -Stellen Sie sicher, dass alle Umgebungsvariablen korrekt gesetzt sind. - -### Lösungen bei häufigen Fehlern -Bei Neben-Effekten 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 State Management. -- index.js - Startseite der Anwendung, lädt die Hauptkomponenten und initiiert die Karte. -- [...path].js - Eine Dynamic 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. - -### /public -- Speicherort für statische Dateien wie Map (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. - -# Benutzeranleitung - -## Hauptfunktionen - -### Karteninteraktionen - -#### Zoomen und Verschieben -- **Zoomen:** Sie können mit dem Mausrad ein- und auszoomen, um näher an Bereiche heranzukommen oder sich für eine Übersicht zu entfernen. -- **Verschieben:** Halten Sie die linke Maustaste gedrückt und bewegen Sie die Maus, um die Karte zu verschieben und verschiedene Bereiche zu erkunden. - -#### Kontextmenü -- **Zoom-Optionen:** Das Kontextmenü bietet Funktionen zum gezielten Rein- und Rauszoomen in definierte Bereiche. -- **Zentrieren:** Sie können eine bestimmte Koordinate in der Mitte des Bildschirms zentrieren, indem Sie diese Option im Kontextmenü auswählen. - -#### Steuerung der Kartenansicht -- **Stationsauswahl:** Oben rechts auf der Karte befindet sich ein Dropdown-Menü, mit dem Sie direkt zu einer ausgewählten Station zoomen können. -- **Layer-Kontrolle:** 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. - -#### Koordinatenanzeige -- **Koordinaten-Alert:** Im Kontextmenü können Sie die aktuellen Koordinaten der Mausposition in einem Alert-Fenster anzeigen lassen. - -### 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 "Neuen Standort hinzufügen". - - Füllen Sie das Formular mit den notwendigen Informationen über den POI aus und klicken Sie auf "Speichern", um den Standort zur Karte und zur Datenbank hinzuzufügen. - -2. **POI bearbeiten:** - - 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. - -### Autostart - - -Die Datei StartNodeApp.bat kann kopiert werden und in einem beliebige Ort eingefügt werden,bei Doppel-Klick startet die Datei dann die - Start-Dev.ps1, Start-Dev.ps1 startet die Web-Anwendung - - - - -Diese Dokumentation und Benutzeranleitung kann weiter angepasst und erweitert werden. - - -PS C:\Users\isa.LTW\Desktop\24.05.2024> .\FilterTreeOutput.ps1 -Auflistung der Ordnerpfade f³r Volume OS -Volumeseriennummer : ECF0-871C -C:\USERS\ISA.LTW\DESKTOP\24.05.2024\NODEMAP 24.05.2024 -| .env.local -| .gitignore -| package-lock.json -| package.json -| postcss.config.js -| Recoil in Next.js-Projekt _ Wiki.js.pdf -| Start-Dev.ps1 -| StartNodeApp.bat -| tailwind.config.js -| -+---.next -| | build-manifest.json -| | package.json -| | react-loadable-manifest.json -| | trace -| | -| +---cache -| | +---swc -| | | \---plugins -| | | \---v7_windows_x86_64_0.106.15 -| | \---webpack -| | -| +---server -| | | components_MapComponent_js.js -| | | interception-route-rewrite-manifest.js -| | | middleware-build-manifest.js -| | | middleware-manifest.json -| | | middleware-react-loadable-manifest.js -| | | next-font-manifest.js -| | | next-font-manifest.json -| | | pages-manifest.json -| | | webpack-api-runtime.js -| | | webpack-runtime.js -| | | _error.js -| | | -| | +---pages -| | | | index.js -| | | | _app.js -| | | | _document.js -| | | | _error.js -| | | | -| | | \---api -| | | | getPoiById.js -| | | | readLocations.js -| | | | readPoiTyp.js -| | | | [...path].js -| | | | -| | | \---talas_v5 -| | | location_device.js -| | | -| | \---vendor-chunks -| | @heroicons.js -PS C:\Users\isa.LTW\Desktop\24.05.2024> \ No newline at end of file