add: Wiki and nssm.exe

This commit is contained in:
ISA
2024-06-06 09:46:10 +02:00
parent 3d72b3682f
commit 342fcd81a9
3 changed files with 177 additions and 240 deletions

177
Wiki.txt Normal file
View File

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

BIN
nssm.exe Normal file

Binary file not shown.

240
tree.txt
View File

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