Update Umsetzung
parent
48e18e8911
commit
87e4c5f73e
@ -460,7 +460,7 @@ const NbBlockedDocks = this.station.status.NbDocks - this.station.status.NbBikes
|
|||||||
|
|
||||||
### Toolbar
|
### 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:
|
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>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>Startseite</td>
|
<td>Startseite</td>
|
||||||
@ -479,6 +479,43 @@ Die Toolbar ist auf Top-Level Ebene angesiedelt und wird sowohl im Dashboard als
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</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
|
### Dashboard
|
||||||
* Aufbau der Seite in Komponenten, detaillierte Erklärung in Unterkomponenten
|
* Aufbau der Seite in Komponenten, detaillierte Erklärung in Unterkomponenten
|
||||||
|
Loading…
Reference in New Issue
Block a user