Nach dem erfolgreichen Testen des Web-Frontends mit der Anbindung zum Backend und damit auch mit live Daten des Raspberry Pi, möchten wir die finale Version des Frontends hier vorstellen.
Das Web-Frontend wurde mit React entwickelt und nutzt neben REST für initiale Anfragen ans Backend, SignalR um Echtzeit-Daten vom Backend zu empfangen.
Des weiteren nutzt es die Google Maps API zum Anzeigen von der Position von Geräten, canvas.js welches Daten als Graphen darstellen kann, sowie Font Awesome, welches sämtliche Icons zur Verfügung stellt.
Aufbau und Ablauf im Frontend:
1. Login
Zunächst loggt man sich über ein Login-Maske ein:
2. Dashboard
Danach wird dem Benutzer ein Dashboard mit allen Geräten des Benutzers angezeigt. Jedes Gerät enthält verschiedene Status um schnell überprüfen zu können, ob Probleme vorliegen.
3. Geräte-Detailansicht
Durch einen Klick auf eines der Geräte auf dem Dashboard wird eine Detailansicht angezeigt. In dieser werden alle Daten des Geräts mithilfe von Graphen dargestellt. Die Position des Geräts wird über die Google Maps API angezeigt.
Detailansicht 1 
Detailansicht 2
4. Geräte Manager
Mit den Buttons rechts unten in der Detailansicht können verschiedene Aktionen durchgeführt werden. Mit dem ersten Button können die Daten des Geräts zurückgesetzt werden, mit dem zweiten Button wird der Geräte Manager geöffnet und mit dem dritten Button kann das Gerät gelöscht werden.
Im Geräte Manager kann der Name des Geräts verändert werden und es können die verwendeten Sensoren ausgewählt werden. Beim Neuanlegen eines Geräts wird ebenfalls der Geräte Manager angezeigt, dies kann über das Plus im Dashboard in Gang gesetzt werden. Dabei wird schon beim Klick auf das Plus ein Gerät angelegt und anschließend werden die gesetzten Attribute darauf aktualisiert.
5. Map
Über die Sidebar auf der linken Seite kann jederzeit über den ersten Button zum Dashboard navigiert werden. Über den zweiten Button wird eine Karte mit den Positionen aller Geräte angezeigt.
