Frontend

Das Frontend wurde mit der JavaScript-Bibliothek React verwirklicht. Es besteht hauptsächlich aus 3 Modulen, welche in diesem Kapitel vorgestellt werden. Zur Kommunikation mit dem Backend wurde ein Request Manager implementiert, welcher Axios einsetzt. Alle vorgestellten Klassen erben von der Abstrakten Klasse React.Component, bis auf den Request Manager.

Screenshot

Inhalt

Seiten-Menü
OGC-Dienste
- Update der Dienste
Navigations-Menü
Request Manager
ModalDialog

React-Module

Seitenmenü

Das Seitenmenü hat die Hauptaufgabe die Funktionalitäten zum hin- und herschalten zwischen den einzelnen Funktionen zu ermöglichen und bei einem OnClick-Event ein neues Modul OGC zu erstellen. Hierfür wird in dem Data-Parameter der entsprechende Schlüssel abgefragt und übergeben. In der nachfolgenden Tabelle sind die Parameter für die Erstellung aufgelistet:

id	Funktion
wms	*Web Map Service* Modul
wfs	*Web Feature Sservice* Modul
wcs	*Web Coverage Service* Modul
geosn	*GeoMIS* Modul

Das Schlüsselwort wird als React-Property an das OGC-Modul übergeben.

const ogc =  < OGC service={service}/>;
            ReactDOM.render(
            ogc,
            document.getElementById('page_content'));

OGC-Dienste

Über dieses Modul können die einzelnen Funktionalitäten ausgewählt werden, mit welchen der jeweils gewählte Service manipuliert werden kann. Im Moment sind alle dafür notwendige Funktionen:

Update der Dienste
Neuen Dienst erstellen
Dienst löschen
Übersicht

vorhanden, jedoch ist nur der Upate der Dienste implementiert, die anderen Funktionen dienen als Platzhalter.

Update der Dienste

Die Funktion hat die Aufgabe über den Request-Manager den Update Prozess auf dem Backend anzustoßen. War dies erfolgreich gibt das Backend die Ergebnis-JSON zurück. Diese wird zum besseren Verständnis mit dem Modal-Dialog als Bootstrap-Card View dargestellt. Aus der JSON-Datei können dabei die Informationen entnommen werden, welche verwendet werden um den Status der Erstellung zu visualisieren. In der folgenden Abbildung ist ein Dialogfenster für den GeoDN Service abgebildet und zeigt dabei auch eine fehlgeschlagene Erstellung eines Diesntes, welcher rot hinterlegt wurde.

Geosn

Request Manager

Diese Klasse übernimmt die Kommunikation mit dem Backend und weißt dieses an, die Aktualisierung der Dienste anzustoßen. Dafür wurde die Methode updateOGCService() implementiert, welcher als Parameter der zu erstellende Dienst (wms,wcs,wfs,geosn) übergeben wird. Als Ajax-Bibliothek wurde Axios eingesetzt. Nachfolgend ist der Code abgebildet.

class RequestManager{
    static updateOGCService(_service){
        console.info("create services for: ",_service);
        return axios.post('https://monitor.ioer.de/monitor_api/admin/'+_service);
    }
}

Diese Klasse blendet einen sogenannten Dialog ein, dessen Style von Bootstrap Modal definiert wird. Über den Konstruktor wird dieser React-Komponente das HTML übergeben, welches innerhalb des Dialoges dargestellt (gerendert) werden soll.