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 * as enLang from '../assets/i18n/en.json';
import {HttpClientModule} from '@angular/common/http'; import {HttpClientModule} from '@angular/common/http';
import { import {
MatBadgeModule,
MatButtonToggleModule, MatButtonToggleModule,
MatCheckboxModule, MatCheckboxModule,
MatDialogModule, MatDialogModule,
MatDividerModule, MatDividerModule,
MatRadioModule,
MatStepperModule,
MatTabsModule, MatTabsModule,
MatTooltipModule MatTooltipModule
} from '@angular/material'; } from '@angular/material';
@ -83,7 +86,10 @@ import {DeviceDetectorModule} from 'ngx-device-detector';
MatTooltipModule, MatTooltipModule,
MatDialogModule, MatDialogModule,
DeviceDetectorModule, DeviceDetectorModule,
MatTabsModule MatTabsModule,
MatBadgeModule,
MatStepperModule,
MatRadioModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent], bootstrap: [AppComponent],

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

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

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

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