rearrange dashboard-components

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

@@ -1,60 +1,71 @@
 <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"
      href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
      target="_blank">
     <mat-icon>library_books</mat-icon>
-    Wiki</a>
+    Wiki
+  </a>
   <a class="button-back" color="primary"
      mat-flat-button routerLink="/">
     <mat-icon>map</mat-icon>
-    back to map</a>
+    back to map
+  </a>
 </mat-toolbar>
-<mat-sidenav-container class="sidenav-container">
+<mat-sidenav-container>
-  <mat-sidenav #sidenav class="sidenav" mode="side" opened role="region">
+  <mat-sidenav-content class="mat-sidenav-content" fxFlex fxLayout="column" fxLayoutAlign="center">
-    <form [formGroup]="form">
+    <div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
-      <mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
-        <mat-label>Enter a range</mat-label>
-        <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker" formGroupName="daterange">
-          <input formControlName="start" matStartDate placeholder="Start date">
-          <input formControlName="end" matEndDate placeholder="End date">
-        </mat-date-range-input>
-        <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
-        <mat-date-range-picker #picker></mat-date-range-picker>
-      </mat-form-field>
-    </form>
-    <div class="submit-date" fxLayout="row" fxLayoutAlign="center">
-      <button (click)="onSubmit()" color="primary" mat-raised-button>
-        <mat-icon>dashboard</mat-icon>
-        <span id="submit-date-span"> reload dashboard</span>
-      </button>
-    </div>
-  </mat-sidenav>
-  <mat-sidenav-content fxFlex fxLayout="column" fxLayoutAlign="center">
 
-    <div class="container-map" fxFlex="100%" fxLayout="column">
+      <div class="user-input" fxFlex="20%" fxLayout="column">
-      <mat-card class="mat-card-map" fxFlex fxLayout="column">
+        <mat-card class="mat-card-info" fxFlex>
-        <div class="mini-map" fxFlex fxLayout="column">
+          <mat-card-content>
+            <form [formGroup]="form">
+              <mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
+                <mat-label>Enter a range</mat-label>
+                <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
+                                      formGroupName="daterange">
+                  <input formControlName="start" matStartDate placeholder="Start date">
+                  <input formControlName="end" matEndDate placeholder="End date">
+                </mat-date-range-input>
+                <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
+                <mat-date-range-picker #picker></mat-date-range-picker>
+              </mat-form-field>
+            </form>
+            <div class="submit-date" fxLayout="row" fxLayoutAlign="center">
+              <button (click)="onSubmit()" color="primary" mat-raised-button>
+                <mat-icon>dashboard</mat-icon>
+                <span id="submit-date-span"> reload dashboard</span>
+              </button>
+            </div>
+          </mat-card-content>
+        </mat-card>
+        <div class="container-info">
+          <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-header>
+            <mat-card-content></mat-card-content>
+          </mat-card>
+        </div>
+      </div>
+
+      <mat-card class="mat-card-map" fxFlex fxLayout="row">
+        <div class="mini-map" fxFlex>
           <div class="map-frame" fxFill>
             <div fxFill id="minimap"></div>
           </div>
         </div>
       </mat-card>
+
+
     </div>
 
 
-    <div class="container container-table"
+    <div class="container-table" fxFlex fxLayout="row" fxLayoutAlign="center">
-         fxFlex fxLayout="row" fxLayoutAlign="center"
+      <div class="dashboard-table-to" fxFlex>
-    >
-      <div class="dashboard-table-to"
-           fxFlex="40%"
-      >
         <table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
           <ng-container matColumnDef="endStationName">
             <th *matHeaderCellDef mat-header-cell> station of lend destination</th>
@@ -75,9 +86,7 @@
           <tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
         </table>
       </div>
-      <div class="dashboard-table-from"
+      <div class="dashboard-table-from" fxFlex>
-           fxFlex="40%"
-      >
         <table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
           <ng-container matColumnDef="startStationName">
             <th *matHeaderCellDef mat-header-cell> station of lend origin</th>
@@ -102,13 +111,12 @@
     </div>
 
     <div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
-      <mat-card fxFlex="85%" fxLayout="column"
+      <mat-card fxFlex fxLayout="column">
-      >
+        <mat-card-header class="chart-header">
-        <mat-card-header>
           <mat-card-title>Borrow Duration</mat-card-title>
         </mat-card-header>
         <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
-          <div fxFlex="90%" id="Station-Dashboard-Borrow-Duration">
+          <div class="station-dashboard-borrow-duration" fxFlex="97%">
             <apx-chart
               [chart]="durationChartOptions.chart"
               [dataLabels]="durationChartOptions.dataLabels"
@@ -118,12 +126,31 @@
               [series]="durationChartOptions.series"
               [stroke]="durationChartOptions.stroke"
               [xaxis]="durationChartOptions.xaxis"
-              [yaxis]="durationChartOptions.yaxis"
+              [yaxis]="durationChartOptions.yaxis"></apx-chart>
-            ></apx-chart>
           </div>
         </mat-card-content>
       </mat-card>
     </div>
 
+    <div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center">
+      <mat-card fxFlex fxLayout="column">
+        <mat-card-header class="chart-header">
+          <mat-card-title>Borrow Time</mat-card-title>
+        </mat-card-header>
+
+        <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
+          <div class="station-dashboard-borrow-time" fxFlex>
+            <apx-chart
+              [chart]="timeChartOptions.chart"
+              [dataLabels]="timeChartOptions.dataLabels"
+              [fill]="timeChartOptions.fill"
+              [series]="timeChartOptions.series"
+              [stroke]="timeChartOptions.stroke"
+              [xaxis]="timeChartOptions.xaxis"
+              [yaxis]="timeChartOptions.yaxis"></apx-chart>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

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

@@ -6,17 +6,7 @@ mat-sidenav-content {
   flex: 1 1 auto;
 }
 
-.sidenav {
+.button-back:hover, .button-wiki:hover {
-  height: 100vh;
-  width: 15vw;
-  min-width: 20em;
-}
-
-mat-sidenav-container, mat-sidenav-content, mat-sidenav {
-  height: 100vh;
-}
-
-.button-back:hover {
   background: #5a34a0;
 }
 
@@ -24,18 +14,31 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
   padding: 10px;
 }
 
-.button-wiki:hover {
+.user-input {
-  background: #5a34a0;
+  height: 10em;
 }
 
 .datepicker {
-  margin-top: 100px;
+  margin-top: 2em;
+}
+
+.submit-date {
+  padding-bottom: 2em;
 }
 
 .mat-card {
   padding: 1px 1px 1px;
-  margin: 2em;
+  margin: 10px;
 }
+
+.example-header-image {
+  margin-top: 1em;
+  margin-left: 1em;
+  margin-bottom: 1em;
+  background-image: url('../../assets/bike-point.png');
+  background-size: cover;
+}
+
 .mat-card-map {
   padding: 1px;
 }
@@ -44,36 +47,43 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
   margin-top: 1em;
 }
 
-.mat-card-header {
+.chart-header {
-  display: flex;
+  display: inline-flex;
   justify-content: center;
 }
 
 .container-map {
-  height: 40vh;
+  height: 40em;
+  margin: 1em 2em;
 }
 
 .container-table {
-  height: 20vh;
+  height: 20em;
-}
+  margin: 1em 3em;
-
-.container-borrow-duration {
-  height: 40vh
-}
-
-.container-bottom {
-  height: 30vh
 }
 
 .dashboard-table-to {
-  margin: 5px;
+  margin-right: 1em;
 }
 
 .dashboard-table-from {
-  margin: 5px;
+  margin-left: 1em;
 }
 
-.dashboard-chart-borrow-time {
+.container-borrow-duration {
-  margin: 5px;
+  height: 40em;
-  background: chartreuse;
+  margin: 1em 2em;
+}
+
+.container-borrow-time {
+  height: 40em;
+  margin: 1em 2em;
+}
+
+.station-dashboard-borrow-time {
+  margin: 1em;
+}
+
+.station-dashboard-borrow-duration {
+  margin: 1em;
 }

projects/project-3/frontend/src/app/map/pop-up/pop-up.component.ts

@@ -40,6 +40,4 @@ export class PopUpComponent implements OnInit {
   public route(): void {
     this.router.navigate(['/dashboard', this.station.id]);
   }
-
-
 }

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

@@ -15,14 +15,20 @@ export class DashboardService {
   }
 
   public async fetch_dashboard_station_to(id: string, startDate: string, endDate: string): Promise<any> {
-    return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/to?start_date=${startDate}&end_date=${endDate}`).toPromise();
+    return await this.client.get(
+      environment.apiUrl + `latest/dashboard/${id}/to?start_date=${startDate}&end_date=${endDate}`
+    ).toPromise();
   }
 
   public async fetch_dashboard_station_from(id: string, startDate: string, endDate: string): Promise<any> {
-    return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/from?start_date=${startDate}&end_date=${endDate}`).toPromise();
+    return await this.client.get(
+      environment.apiUrl + `latest/dashboard/${id}/from?start_date=${startDate}&end_date=${endDate}`
+    ).toPromise();
   }
 
-  public async fetch_dashboard_station_duration(id: string, startDate: string, endDate: string): Promise<any> {
+  public async fetch_dashboard_station_charts(id: string, startDate: string, endDate: string, type: string): Promise<any> {
-    return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/duration?start_date=${startDate}&end_date=${endDate}`).toPromise();
+    return await this.client.get(
+      environment.apiUrl + `latest/dashboard/${id}/${type}?start_date=${startDate}&end_date=${endDate}`
+    ).toPromise();
   }
 }