set IMapBikePoint to get status for meta-inf

projects/project-3/frontend/src/app/dashboard/dashboard.component.html

@@ -18,7 +18,7 @@
   <mat-sidenav-content class="mat-sidenav-content" fxFlex fxLayout="column" fxLayoutAlign="center">
     <div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
 
-      <div class="user-input" fxFlex="20%" fxLayout="column">
+      <div class="user-input" fxFlex="20%" fxLayout="column" fxLayoutAlign="space-between">
         <mat-card class="mat-card-info" fxFlex>
           <mat-card-content>
             <form [formGroup]="form">
@@ -45,9 +45,11 @@
           <mat-card fxFlex>
             <mat-card-header>
               <div class="example-header-image" mat-card-avatar></div>
-              <mat-card-title>{{station?.commonName}}</mat-card-title>
+              <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
             </mat-card-header>
-            <mat-card-content></mat-card-content>
+            <mat-card-content>
+            <p>{{bikePoint?.status.NbBikes}}</p>
+            </mat-card-content>
           </mat-card>
         </div>
       </div>

projects/project-3/frontend/src/app/dashboard/dashboard.component.ts

@@ -21,6 +21,7 @@ import {
   ApexYAxis,
   ChartComponent
 } from 'ng-apexcharts';
+import {IMapBikePoint} from '../service/domain/map-bike-point';
 
 export type ChartOptions = {
   title: ApexTitleSubtitle
@@ -61,6 +62,8 @@ export class DashboardComponent implements OnInit {
   actualEndDate: Date;
   form: FormGroup;
 
+  bikePoint: IMapBikePoint;
+
   constructor(
     private route: ActivatedRoute,
     private service: DashboardService,
@@ -95,22 +98,26 @@ export class DashboardComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.service.fetchDashboardInit(this.route.snapshot.paramMap.get('id')).then(data => {
-      this.station = data;
-      this.maxStartDate = new Date(data.maxStartDate);
-      this.maxEndDate = new Date(data.maxEndDate);
-      this.init_dashboard();
-    });
-
     this.form = this.fb.group({
       daterange: new FormGroup({
         start: new FormControl(),
         end: new FormControl()
       })
     });
+
+    this.service.fetchDashboardInit(this.route.snapshot.paramMap.get('id')).then(data => {
+      this.station = data;
+      this.maxStartDate = new Date(data.maxStartDate);
+      this.maxEndDate = new Date(data.maxEndDate);
+      this.initDashboard();
+    });
+
+    this.service.fetchBikePointForStatus(this.route.snapshot.paramMap.get('id')).then(data => {
+      this.bikePoint = data;
+    });
   }
 
-  init_dashboard(): void {
+  initDashboard(): void {
     const initDate = this.maxEndDate.toISOString().substring(0, 10);
     this.service.fetchDashboardStationTo(this.station.id, initDate, initDate).then((source) => {
       this.stationToSource = source;
@@ -208,7 +215,8 @@ export class DashboardComponent implements OnInit {
         },
         xaxis: {
           categories: timeFrame,
-          tickAmount: 24
+          tickAmount: 24,
+          tickPlacement: 'between'
         },
         yaxis: [{
           title: {
@@ -228,7 +236,6 @@ export class DashboardComponent implements OnInit {
         }
       };
     });
-
     this.map.drawDashboardMap(this.station.lat, this.station.lon, 17);
     this.map.drawDashboardStationMarker(this.station.lat, this.station.lon);
   }
@@ -350,7 +357,8 @@ export class DashboardComponent implements OnInit {
         },
         xaxis: {
           categories: timeFrame,
-          tickAmount: 24
+          tickAmount: 24,
+          tickPlacement: 'between'
         },
         yaxis: [{
           title: {

projects/project-3/frontend/src/app/service/dashboard.service.ts

@@ -10,24 +10,28 @@ export class DashboardService {
   constructor(private client: HttpClient) {
   }
 
-  public async fetchDashboardInit(id: string): Promise<any> {
+  public fetchDashboardInit(id: string): Promise<any> {
-    return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/`).toPromise();
+    return this.client.get(environment.apiUrl + `latest/dashboard/${id}/`).toPromise();
   }
 
-  public async fetchDashboardStationTo(id: string, startDate: string, endDate: string): Promise<any> {
+  public fetchBikePointForStatus(id: string): Promise<any> {
-    return await this.client.get(
+    return this.client.get(environment.apiUrl + `latest/bikepoints/${id}/`).toPromise();
+  }
+
+  public fetchDashboardStationTo(id: string, startDate: string, endDate: string): Promise<any> {
+    return this.client.get(
       environment.apiUrl + `latest/dashboard/${id}/to?start_date=${startDate}&end_date=${endDate}`
     ).toPromise();
   }
 
-  public async fetchDashboardStationFrom(id: string, startDate: string, endDate: string): Promise<any> {
+  public fetchDashboardStationFrom(id: string, startDate: string, endDate: string): Promise<any> {
-    return await this.client.get(
+    return this.client.get(
       environment.apiUrl + `latest/dashboard/${id}/from?start_date=${startDate}&end_date=${endDate}`
     ).toPromise();
   }
 
-  public async fetchDashboardStationCharts(id: string, startDate: string, endDate: string, type: string): Promise<any> {
+  public fetchDashboardStationCharts(id: string, startDate: string, endDate: string, type: string): Promise<any> {
-    return await this.client.get(
+    return this.client.get(
       environment.apiUrl + `latest/dashboard/${id}/${type}?start_date=${startDate}&end_date=${endDate}`
     ).toPromise();
   }