adjust api invocation order to eliminate race-condition and easier access to necessary objects

* add start-Datepicker
* add end-Datepicker
* toggle-Sidenav

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

@@ -1,4 +1,9 @@
-<mat-toolbar class="mat-toolbar">
+<meta content="width=device-width, initial-scale=1.0" name="viewport">
+<mat-toolbar class="mat-toolbar" color="primary">
+  <button (click)="sidenav.toggle()" aria-label="Example icon-button with menu icon" class="example-icon"
+          mat-icon-button>
+    <mat-icon>menu</mat-icon>
+  </button>
   <span>Bike Stations in London</span>
   <span class="toolbar-spacer"></span>
   <a class="button-wiki" color="primary"
@@ -6,16 +11,32 @@
      target="_blank">
     <mat-icon>library_books</mat-icon>
     Wiki</a>
+  <a class="button-back" color="primary"
+     mat-flat-button routerLink="/">
+    <mat-icon>map</mat-icon>
+    back to map</a>
 </mat-toolbar>
-<div class="sidenav-container">
+<mat-sidenav-container class="sidenav-container">
-  <mat-sidenav-container class="sidenav">
+  <mat-sidenav #sidenav class="sidenav" mode="side" opened role="region">
-    <section>Main</section>
+    <mat-form-field appearance="fill" class="datepicker-start" fxLayout="column" fxLayoutAlign="center center">
-    <mat-form-field appearance="fill">
+      <mat-label>Start der Zeitmessung</mat-label>
-      <mat-label>Choose a date</mat-label>
+      <input (dateChange)="addStartDate('input', $event)"
-      <input matInput [matDatepicker]="picker">
+             [matDatepicker]="picker" [max]="maxEndDate"
-      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+             [min]="maxStartDate" matInput>
+      <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
       <mat-datepicker #picker></mat-datepicker>
     </mat-form-field>
-  </mat-sidenav-container>
+    <mat-form-field appearance="fill" class="datepicker-end" fxLayout="column" fxLayoutAlign="center center">
-</div>
+      <mat-label>Ende der Zeitmessung</mat-label>
-
+      <input (dateChange)="addEndDate('input', $event)"
+             [matDatepicker]="picker1" [max]="maxEndDate" [min]="maxStartDate" matInput>
+      <mat-datepicker-toggle [for]="picker1" matSuffix></mat-datepicker-toggle>
+      <mat-datepicker #picker1></mat-datepicker>
+    </mat-form-field>
+  </mat-sidenav>
+  <mat-sidenav-content>
+    <div class="main-area">
+      <a>test</a>
+    </div>
+  </mat-sidenav-content>
+</mat-sidenav-container>

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

@@ -1,21 +1,32 @@
-
-
-.sidenav-container {
-  height: 100%;
-  width: 10vw;
-  position: fixed;
-  top: auto;
-  left: 0;
-  .sidenav {
-    background-color: gray;
-    height: 100%;
-  }
-}
-
 .toolbar-spacer {
   flex: 1 1 auto;
 }
 
-.mat-toolbar {
+.sidenav {
-  top: 0;
+  height: 100vh;
+  width: 20vw;
+  min-width: 20em;
+}
+
+mat-sidenav-container, mat-sidenav-content, mat-sidenav {
+  height: 100vh;
+}
+
+.main-area {
+}
+
+.button-back:hover {
+  background: #5a34a0;
+}
+
+.button-wiki:hover {
+  background: #5a34a0;
+}
+
+.datepicker-start {
+  margin-top: 50px;
+}
+
+.datepicker-end {
+  margin-top: 20px;
 }

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

@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {DashboardService} from '../service/dashboard.service';
+import {IDashboardCommonBikePoint} from '../service/domain/dashboard-common-bike-point';
+import {MatDatepickerInputEvent} from '@angular/material/datepicker';
 
 @Component({
   selector: 'app-dashboard',
@@ -8,6 +10,12 @@ import {DashboardService} from '../service/dashboard.service';
   styleUrls: ['./dashboard.component.scss']
 })
 export class DashboardComponent implements OnInit {
+  station: IDashboardCommonBikePoint;
+  maxStartDate: Date;
+  maxEndDate: Date;
+  actualStartDate: Date;
+  actualEndDate: Date;
+
 
   constructor(
     private route: ActivatedRoute,
@@ -16,8 +24,22 @@ export class DashboardComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.service.setBikeStation(this.route.snapshot.paramMap.get('id'));
+    this.service.initialDashboardStationFetch(this.route.snapshot.paramMap.get('id')).then(data => {
+      this.station = data;
+      this.maxStartDate = new Date(data.maxStartDate);
+      this.maxEndDate = new Date(data.maxEndDate);
+      console.log(data);
+    });
   }
 
+  addStartDate(type: string, event: MatDatepickerInputEvent<Date>): void {
+    this.actualStartDate = event.value;
+    console.log(this.actualStartDate);
+  }
+
+  addEndDate(type: string, event: MatDatepickerInputEvent<Date>): void {
+    this.actualEndDate = event.value;
+    console.log(this.actualEndDate);
+  }
 
 }

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

@@ -1,5 +1,4 @@
 import {Injectable} from '@angular/core';
-import {IDashboardCommonBikePoint} from './domain/dashboard-common-bike-point';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../environments/environment';
 
@@ -7,21 +6,11 @@ import {environment} from '../../environments/environment';
   providedIn: 'root'
 })
 export class DashboardService {
-  public station: IDashboardCommonBikePoint;
 
   constructor(private client: HttpClient) {
   }
 
-  setBikeStation(id: string): void {
+  public async initialDashboardStationFetch(id: string): Promise<any> {
-    this.initialDashboardStationFetch(id).then((data) => {
-      this.station = data;
-      console.log(this.station);
-    }).catch((error) => {
-      console.log('something went wrong: ' + JSON.stringify(error));
-    });
-  }
-
-  private async initialDashboardStationFetch(id: string): Promise<any> {
     return await this.client.get(environment.apiUrl + 'latest/dashboard/' + id + '/').toPromise();
   }
 }