Layouting stuff for the user input

This commit is contained in:
Marcel Schwarz 2021-01-12 01:11:22 +01:00
parent 94c3fb99f4
commit cf6ab406f4

View File

@ -5,26 +5,25 @@
{{bikePoint?.commonName}} {{bikePoint?.commonName}}
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content class="p-4 d-flex flex-column justify-content-center"> <mat-card-content class="p-4 d-flex flex-column justify-content-center align-content-between">
<div> <p>Select a range to analyze data</p>
<p>Select a range to analyze data</p> <form [formGroup]="form" (submit)="onSubmit()">
<form [formGroup]="form" class="d-flex flex-row justify-content-between"> <mat-form-field appearance="fill" class="w-100">
<mat-form-field appearance="fill"> <mat-label>Enter a range</mat-label>
<mat-label>Enter a range</mat-label> <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker" formGroupName="dateRange">
formGroupName="dateRange"> <input formControlName="start" matStartDate placeholder="Start date">
<input formControlName="start" matStartDate placeholder="Start date"> <input formControlName="end" matEndDate placeholder="End date">
<input formControlName="end" matEndDate placeholder="End date"> </mat-date-range-input>
</mat-date-range-input> <mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle> <mat-date-range-picker #picker></mat-date-range-picker>
<mat-date-range-picker #picker></mat-date-range-picker> </mat-form-field>
</mat-form-field> <button (click)="onSubmit()" color="primary" type="submit" (keyup.enter)="onSubmit()" class="w-100" mat-raised-button>
<button (click)="onSubmit()" class="mt-n3" color="primary" mat-raised-button> reload
<mat-icon>cached</mat-icon> <mat-icon>cached</mat-icon>
reload </button>
</button> </form>
</form> <br/>
</div>
<div class="ml-n4" id="chart"> <div class="ml-n4" id="chart">
<apx-chart <apx-chart
[chart]="chartOptions.chart" [chart]="chartOptions.chart"