Update Umsetzung

Projektarbeit-3/Umsetzung.md

@@ -460,7 +460,7 @@ const NbBlockedDocks = this.station.status.NbDocks - this.station.status.NbBikes
 
 ### Toolbar
 Die Toolbar ist auf Top-Level Ebene angesiedelt und wird sowohl im Dashboard als auch auf der Startseite angezeigt. Nur der Inhalt der Toolbar unterscheidet sich je nach Route:
-
+<div> align="center">
 <table>
 <tr>
 <td>Startseite</td>
@@ -479,6 +479,43 @@ Die Toolbar ist auf Top-Level Ebene angesiedelt und wird sowohl im Dashboard als
 </td>
 </tr>
 </table>
+</div>
+
+Programmatisch wird über `ngIf` geprüft, ob die Route entweder das Schlagwort "dashboard" besitzt.
+
+```html
+  <div *ngIf="!hasRoute('dashboard')">
+    <app-map-interaction></app-map-interaction>
+  </div>
+  <div *ngIf="hasRoute('dashboard')">
+    <app-dashboard-interaction></app-dashboard-interaction>
+  </div>
+```
+#### auto-refresh
+Wir wollten dem User die Möglichkeit geben, in Echtzeit die Stationen zu analysieren. Mit dem Auto-Refresh, haben wir sichergestellt, dass alle 10 Sekunden unser Backend angesprochen wird und die aktuellen Informationen auf der Map anzeigt.
+
+<table>
+<tr>
+<td>
+<div align="center">
+  <img src="uploads/17a881d7ecbd627f38bace4b2f9a229a/image.png"/>
+</div>
+</td>
+<td>
+
+```typescript
+this.interval = setInterval(() => {
+  if (this.isFlagActive) {
+    this.map.autoRefresh().catch(error => console.log(error));
+  }
+}, 10000);
+```
+
+</td>
+</tr>
+</table>
+
+Ist der Auto-Refresh aktiv, wird alle 10 Sekunden eine Methode im Map Service aufgerufen, welche das Backend für neue Informationen anspricht und alle Layer neu generiert.
 
 ### Dashboard
 * Aufbau der Seite in Komponenten, detaillierte Erklärung in Unterkomponenten