From 19b523c5c137fce1067c76cb29e2d3c83890ff16 Mon Sep 17 00:00:00 2001
From: Tim Herbst <herbst.tim@icloud.com>
Date: Tue, 19 Jan 2021 17:03:17 +0000
Subject: [PATCH] Update Umsetzung

---
 Projektarbeit-3/Umsetzung.md | 41 ++++++++++++++++++++++++++++++++----
 1 file changed, 37 insertions(+), 4 deletions(-)

diff --git a/Projektarbeit-3/Umsetzung.md b/Projektarbeit-3/Umsetzung.md
index 02c594b..72f64c5 100644
--- a/Projektarbeit-3/Umsetzung.md
+++ b/Projektarbeit-3/Umsetzung.md
@@ -372,14 +372,47 @@ for (const accident of data) {
   }
 const accidentLayer = L.layerGroup(accidents);
 ```
-Wir iterieren durch das API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Grün und Rot.
+Wir iterieren durch das API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Orange und Rot.
 
 Anschließend erstellen wir für jeden Unfall ein Objekt vom Typ Circle. Auch die Unfälle fügen wir der Map nicht direkt hinzu, sondern gehen über die `L.layerGroup`. So können wir auch die Unfälle in unserem Menü nach Belieben auf und abschalten.
 
 ## Erläuterung "the Angular way"
-* Pop-Up Komponentengenerierung auf Button-click
-* Abhängigkeiten der Services zu den jeweiligen Komponenten
-* auto-refresh
+
+### Pop-up Generierung bei Marker-"click"
+Eine besondere Komplexität und Schwierigkeit betraf die Generierung der Pop-up Komponente bei Klick auf einen Marker. Schnell hat sich herausgestellt, dass nicht ohne Weiteres die Methode `marker.bindPopup()` genutzt werden konnte. Da wir den Inhalt des Pop-up in eine eigene Komponente ausgelagert haben wird, sobald das Marker-Objekt initialisiert ist die OnInit-Methode der Komponente ausgeführt. Da dies aber erst geschehen darf, wenn der Benutzer auf einen Marker klickt, mussten wir hier einen anderen Weg finden.
+
+Nach ausführlicher Analyse der Leaflet-Dokumentation in Bezug auf Event-handling, haben wir uns für folgende Listener-Methode entschieden:
+
+```typescript
+object.on('event', methodToExecute);
+```
+Jedes Leaflet-Objekt hat sein eigenes Set an Events. Das erste Argument der Methode ist das Event-Objekt. Das zweite Argument ist die Methode, die bei Auftreten des Events ausgeführt werden soll.
+
+```typescript
+marker.on('click', e => {
+  e.target.bindPopup(this.popUpService.makeAvailabilityPopUp(station), {maxWidth: 'auto'})
+            .openPopup();
+  this.map.panTo(e.target.getLatLng());
+});
+```
+
+In dem Fall übergeben wir mittels einer Pfeilfunktion das Event `e` an den Body der Funktion und können den Marker mittels `e.target` direkt ansprechen. Anschließend machen wir uns noch dem PopupService zu eigen und setzen bestimmte Parameter, um das Chart der Station zu generieren. Mit `this.map.panTo(e.target.getLatLng());` lassen wir die Map auf den geklickten Marker zentrieren.
+
+Schauen wir uns nun `this.popUpService.makeAvailabilityPopUp(station)` genauer an:
+
+```typescript
+makeAvailabilityPopUp(station: IMapBikePoint): any {
+  const factory = this.componentFactoryResolver.resolveComponentFactory(PopUpComponent);
+  const component = factory.create(this.injector);
+
+  component.instance.station = station
+  component.changeDetectorRef.detectChanges();
+
+  return component.location.nativeElement;
+}
+```
+
+Im PopupService muss sichergestellt werden, dass eine Komponente programmatisch erstellt wird. Dies ist in Angular nur mittels des `ComponentFactoryResolver` möglich. Weiterhin bezieht das Availability-Chart seine Daten aus dem MapBikePoint. Diese wird auch über den ComponentFactoryResolver direkt gesetzt. Zum Schluss geben wir die Position des Pop-ups zurück.
 
 ## Komponenten
 Einführung in das Dashboard sowie auf die Map