tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change simple search to stepper

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-22 18:33:26 +02:00
parent d82ce649eb
commit ad180b00cc
3 changed files with 66 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/app.module.ts
View File

@ -22,10 +22,13 @@ import {TranslateModule, TranslateService} from '@ngx-translate/core';
import * as enLang from '../assets/i18n/en.json';
import {HttpClientModule} from '@angular/common/http';
import {
MatBadgeModule,
MatButtonToggleModule,
MatCheckboxModule,
MatDialogModule,
MatDividerModule,
MatRadioModule,
MatStepperModule,
MatTabsModule,
MatTooltipModule
} from '@angular/material';
@ -83,7 +86,10 @@ import {DeviceDetectorModule} from 'ngx-device-detector';
MatTooltipModule,
MatDialogModule,
DeviceDetectorModule,
MatTabsModule
MatTabsModule,
MatBadgeModule,
MatStepperModule,
MatRadioModule
],
providers: [],
bootstrap: [AppComponent],

74
frontend/src/app/components/search-input/search-input.component.html
View File

@ -1,41 +1,41 @@
<mat-card class="search-container">
<section class="group">
<h2>When is your trip?</h2>
<mat-form-field appearance="outline">
<mat-label>Start</mat-label>
<input (change)="checkDates()" [(ngModel)]="from" [min]="today" matInput required type="date">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>End</mat-label>
<input (change)="checkDates()" [(ngModel)]="to" [min]="from" matInput required type="date">
</mat-form-field>
</section>
<section>
<h2>What would you prefer?</h2>
<div *ngFor="let key of multiPresetsKeys" class="sub-group">
<span class="label">{{key|translate}}:</span><br>
<mat-button-toggle-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
<mat-button-toggle
#btn
(click)="btn.checked = onMultiPresetSelect(preset)"
*ngFor="let preset of multiPresets.get(key)"
[value]="preset.preset_id"
>
{{preset.tag_label|translate}}
</mat-button-toggle>
</mat-button-toggle-group>
</div>
</section>
<section>
<h2>Whats most important to you?</h2>
<div class="vertical">
<mat-checkbox *ngFor="let preset of singlePresets"
[(ngModel)]="singlePresetSelection[preset.preset_id]">{{preset.tag_label|translate}}</mat-checkbox>
</div>
</section>
<span matCardTitle>Search</span>
<mat-vertical-stepper>
<mat-step>
<ng-template matStepLabel>When is your trip?</ng-template>
<div class="vertical-wrap">
<mat-form-field appearance="outline">
<mat-label>Start</mat-label>
<input (change)="checkDates()" [(ngModel)]="from" [min]="today" matInput required type="date">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>End</mat-label>
<input (change)="checkDates()" [(ngModel)]="to" [min]="from" matInput required type="date">
</mat-form-field>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>What climate would you prefer?</ng-template>
<div *ngFor="let key of multiPresetsKeys" class="sub-group">
<span class="label">{{key|translate}}:</span><br>
<mat-radio-group [ngModel]="multiPresetSelection[key]" [value]="undefined">
<mat-radio-button
#btn
(click)="btn.checked = onMultiPresetSelect(preset)"
*ngFor="let preset of multiPresets.get(key)"
[value]="preset.preset_id"
>{{preset.tag_label|translate}}</mat-radio-button>
</mat-radio-group>
</div>
</mat-step>
<mat-step>
<ng-template matStepLabel>Whats most important to you?</ng-template>
<div class="vertical">
<mat-checkbox *ngFor="let preset of singlePresets"
[(ngModel)]="singlePresetSelection[preset.preset_id]">{{preset.tag_label|translate}}</mat-checkbox>
</div>
</mat-step>
</mat-vertical-stepper>
<button (click)="onSearch()" [disabled]="!from || !to" class="search-btn" color="primary" mat-flat-button>Search
<mat-icon matSuffix>search</mat-icon>
</button>

24
frontend/src/app/components/search-input/search-input.component.scss
View File

@ -15,14 +15,34 @@
}
.sub-group {
margin-bottom: 0.5rem;
margin-bottom: 2rem;
display: flex;
flex-direction: column;
> .label {
.label {
font-weight: bold;
}
mat-radio-group {
display: flex;
flex-direction: column;
}
mat-radio-button {
margin: 0 1rem 0.5rem 0;
width: 40%;
}
}
.vertical {
display: flex;
flex-direction: column;
}
.vertical-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}