add dashboard-station-to object to fill first table

* add flexLayout to display columns
This commit is contained in:
Tim Herbst 2020-12-22 17:05:23 +01:00
parent bcdd859be9
commit 8dd31f3703
4 changed files with 107 additions and 7 deletions

View File

@ -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]

View File

@ -35,8 +35,54 @@
</mat-form-field>
</mat-sidenav>
<mat-sidenav-content>
<div class="main-area">
<a>test</a>
<div class="container container-top"
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>

View File

@ -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;
}

View File

@ -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
) {
}
}