travopti/frontend/src/app/components/search-input/search-input.component.html
2020-06-19 17:50:37 +02:00

43 lines
1.4 KiB
HTML

<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 [(ngModel)]="from" matInput required type="date">
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>End</mat-label>
<input [(ngModel)]="to" 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>
<button (click)="onSearch()" class="search-btn" color="primary" mat-flat-button>Search
<mat-icon matSuffix>search</mat-icon>
</button>
</mat-card>