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"> <mat-sidenav-content class="mat-sidenav-content" fxFlex fxLayout="column" fxLayoutAlign="center">
<div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center"> <div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
<div class="user-input" fxFlex="20%" fxLayout="column" fxLayoutAlign="space-between"> <div class="input-container" fxFlex="25%" fxLayout="column">
<mat-card class="mat-card-info" fxFlex> <div class="user-input" fxFlex fxLayout="column" fxLayoutAlign="space-between">
<mat-card-content> <div class="container-info" fxFlex="60%">
<form [formGroup]="form"> <mat-card fxFlex="100%">
<mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center"> <mat-card-header>
<mat-label>Enter a range</mat-label> <div class="example-header-image" mat-card-avatar></div>
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker" <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
formGroupName="daterange"> </mat-card-header>
<input formControlName="start" matStartDate placeholder="Start date"> <mat-card-content>
<input formControlName="end" matEndDate placeholder="End date"> <p>{{bikePoint?.status.NbBikes}}</p>
</mat-date-range-input> </mat-card-content>
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> </mat-card>
<mat-date-range-picker #picker></mat-date-range-picker> </div>
</mat-form-field> <div class="mat-card-info" fxFlex="40%" fxLayout="column" fxLayoutAlign="center center">
</form> <mat-card>
<div class="submit-date" fxLayout="row" fxLayoutAlign="center"> <mat-card-content>
<button (click)="onSubmit()" color="primary" mat-raised-button> <form [formGroup]="form">
<mat-icon>dashboard</mat-icon> <mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
<span id="submit-date-span"> reload dashboard</span> <mat-label>Enter a range</mat-label>
</button> <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
</div> formGroupName="daterange">
</mat-card-content> <input formControlName="start" matStartDate placeholder="Start date">
</mat-card> <input formControlName="end" matEndDate placeholder="End date">
<div class="container-info"> </mat-date-range-input>
<mat-card fxFlex> <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
<mat-card-header> <mat-date-range-picker #picker></mat-date-range-picker>
<div class="example-header-image" mat-card-avatar></div> </mat-form-field>
<mat-card-title>{{bikePoint?.commonName}}</mat-card-title> </form>
</mat-card-header> <div class="submit-date" fxLayout="row" fxLayoutAlign="center">
<mat-card-content> <button (click)="onSubmit()" color="primary" mat-raised-button>
<p>{{bikePoint?.status.NbBikes}}</p> <mat-icon>dashboard</mat-icon>
</mat-card-content> <span id="submit-date-span"> reload dashboard</span>
</mat-card> </button>
</div>
</mat-card-content>
</mat-card>
</div>
</div> </div>
</div> </div>

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

@ -24,6 +24,8 @@ a {
.datepicker { .datepicker {
margin-top: 2em; margin-top: 2em;
margin-left: 1em;
margin-right: 1em
} }
.submit-date { .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', type: 'bar',
height: chartHeight height: chartHeight
}, },
colors: ['#017bfe'],
plotOptions: { plotOptions: {
bar: { bar: {
horizontal: false, horizontal: false,
@ -202,6 +203,7 @@ export class DashboardComponent implements OnInit {
enabled: true enabled: true
} }
}, },
colors: ['#017bfe', '#51ca49'],
dataLabels: { dataLabels: {
enabled: false enabled: false
}, },