hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change dashboard user-input alignment

Browse Source
This commit is contained in:
Tim Herbst 2020-12-27 11:44:34 +01:00
parent f1f82b9dd1
commit 110f8f2595
3 changed files with 41 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -18,39 +18,43 @@
<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" fxLayoutAlign="space-between">
<mat-card class="mat-card-info" fxFlex>
<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>{{bikePoint?.commonName}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>{{bikePoint?.status.NbBikes}}</p>
</mat-card-content>
</mat-card>
<div class="input-container" fxFlex="25%" fxLayout="column">
<div class="user-input" fxFlex fxLayout="column" fxLayoutAlign="space-between">
<div class="container-info" fxFlex="60%">
<mat-card fxFlex="100%">
<mat-card-header>
<div class="example-header-image" mat-card-avatar></div>
<mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<p>{{bikePoint?.status.NbBikes}}</p>
</mat-card-content>
</mat-card>
</div>
<div class="mat-card-info" fxFlex="40%" fxLayout="column" fxLayoutAlign="center center">
<mat-card>
<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>
</div>
</div>

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

@ -24,6 +24,8 @@ a {
.datepicker {
margin-top: 2em;
margin-left: 1em;
margin-right: 1em
}
.submit-date {

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

@ -140,6 +140,7 @@ export class DashboardComponent implements OnInit {
type: 'bar',
height: chartHeight
},
colors: ['#017bfe'],
plotOptions: {
bar: {
horizontal: false,
@ -202,6 +203,7 @@ export class DashboardComponent implements OnInit {
enabled: true
}
},
colors: ['#017bfe', '#51ca49'],
dataLabels: {
enabled: false
},