add dashboard-station-to object to fill first table

* add flexLayout to display columns

projects/project-3/frontend/src/app/app.module.ts

@@ -23,6 +23,7 @@ import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatNativeDateModule} from '@angular/material/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material/input';
+import {MatTableModule} from '@angular/material/table';
 
 @NgModule({
   declarations: [
@@ -51,7 +52,8 @@ import {MatInputModule} from '@angular/material/input';
     MatNativeDateModule,
     FormsModule,
     ReactiveFormsModule,
-    MatInputModule
+    MatInputModule,
+    MatTableModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -35,8 +35,54 @@
     </mat-form-field>
   </mat-sidenav>
   <mat-sidenav-content>
-    <div class="main-area">
+    <div class="container container-top"
-      <a>test</a>
+         fxLayout
+         fxLayout.xs="column"
+         fxLayoutAlign="center"
+         fxLayoutGap="10px"
+         fxLayoutGap.xs="0"
+    >
+      <div class="dashboard-table-to"
+           fxFlex="35%"
+      >
+
+      </div>
+      <div class="dashboard-table-from"
+           fxFlex="35%"
+      >
+        dashboard-table-from
+      </div>
+      <div class="mini-map"
+           fxFlex
+      >
+        mini-map
+      </div>
+    </div>
+    <div class="container container-middle"
+         fxLayout
+         fxLayout.xs="column"
+         fxLayoutAlign="center"
+         fxLayoutGap="10px"
+         fxLayoutGap.xs="0"
+    >
+      <div class="dashboard-chart-borrow-duration"
+           fxFlex
+      >
+        dashboard-chart-borrow-duration
+      </div>
+    </div>
+    <div class="container container-bottom"
+         fxLayout
+         fxLayout.xs="column"
+         fxLayoutAlign="center"
+         fxLayoutGap="10px"
+         fxLayoutGap.xs="0"
+    >
+      <div class="dashboard-chart-borrow-time"
+           fxFlex
+      >
+        dashboard-chart-borrow-time
+      </div>
     </div>
   </mat-sidenav-content>
 </mat-sidenav-container>

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

@@ -4,7 +4,7 @@
 
 .sidenav {
   height: 100vh;
-  width: 20vw;
+  width: 15vw;
   min-width: 20em;
 }
 
@@ -12,9 +12,6 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
   height: 100vh;
 }
 
-.main-area {
-}
-
 .button-back:hover {
   background: #5a34a0;
 }
@@ -24,9 +21,48 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
 }
 
 .datepicker-start {
+  margin: 5px;
   margin-top: 50px;
 }
 
 .datepicker-end {
+  margin: 5px;
   margin-top: 20px;
 }
+
+.container-top {
+  height: 30vh;
+}
+
+.container-middle {
+  height: 30vh
+}
+
+.container-bottom {
+  height: 30vh
+}
+
+.dashboard-table-to {
+  margin: 5px;
+  background: gray;
+}
+
+.dashboard-table-from {
+  margin: 5px;
+  background: aquamarine;
+}
+
+.mini-map {
+  margin: 5px;
+  background: blueviolet;
+}
+
+.dashboard-chart-borrow-duration {
+  margin: 5px;
+  background: blue;
+}
+
+.dashboard-chart-borrow-time {
+  margin: 5px;
+  background: chartreuse;
+}

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

@@ -0,0 +1,16 @@
+export interface IDashboardStationTo {
+  startStationName?: string;
+  endStationName?: string;
+  stationNumber?: number;
+  avgDuration?: number;
+}
+
+export class DashboardStationTo implements IDashboardStationTo {
+  constructor(
+    public startStationName?: string,
+    public endStationName?: string,
+    public stationNumber?: number,
+    public avgDuration?: number
+  ) {
+  }
+}