115 lines
4.7 KiB
HTML
115 lines
4.7 KiB
HTML
<mat-card class="search-container">
|
|
|
|
<span matCardTitle>Search</span>
|
|
|
|
<mat-tab-group #tabGroup [animationDuration]="'0'" [selectedIndex]="selectedTab">
|
|
|
|
<!-- Guided Search Tab -->
|
|
<mat-tab label="Guided">
|
|
|
|
<mat-vertical-stepper>
|
|
<!-- Date input -->
|
|
<mat-step>
|
|
<ng-template matStepLabel>When do you want to travel?</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>
|
|
<!-- Multi presets -->
|
|
<mat-step>
|
|
<ng-template matStepLabel>Which climate makes you feel comfortable?</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>
|
|
<!-- Single presets -->
|
|
<mat-step>
|
|
<ng-template matStepLabel>What else is 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>
|
|
<!-- Tag selection -->
|
|
<mat-step>
|
|
<ng-template matStepLabel>What needs to be fulfilled?</ng-template>
|
|
<app-multi-tag-select [(model)]="selectedTags" [availableTags]="tags"></app-multi-tag-select>
|
|
</mat-step>
|
|
|
|
</mat-vertical-stepper>
|
|
</mat-tab>
|
|
|
|
<!-- Advanced Search Tab -->
|
|
<mat-tab label="Advanced">
|
|
<!-- Date -->
|
|
<section class="group">
|
|
<span class="title">Date</span>
|
|
<div class="content 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>
|
|
</section>
|
|
<!-- Text Filter -->
|
|
<section class="group">
|
|
<span class="title">Text</span>
|
|
<div class="content vertical-wrap">
|
|
<mat-form-field appearance="outline" style="margin-bottom: -1.25em">
|
|
<mat-label>Text search</mat-label>
|
|
<input [(ngModel)]="textFilter" matInput>
|
|
<button (click)="textFilter = ''" *ngIf="textFilter.length" mat-icon-button matSuffix>
|
|
<mat-icon>clear</mat-icon>
|
|
</button>
|
|
</mat-form-field>
|
|
<div class="horizontal space center">
|
|
<span>Search in description </span>
|
|
<mat-slide-toggle [(ngModel)]="fullText"></mat-slide-toggle>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Climate Params -->
|
|
<section class="group">
|
|
<span class="title small-bottom-margin">Climate</span>
|
|
<span class="desc">Choose your sweetspot</span>
|
|
<app-toggle-slider [(model)]="temperatureMeanMax" [label]="'Temperature'" [max]="45"
|
|
[min]="0"></app-toggle-slider>
|
|
<app-toggle-slider [(model)]="precipitation" [label]="'Precipitation'" [max]="500"
|
|
[min]="0"></app-toggle-slider>
|
|
</section>
|
|
<!-- Financial -->
|
|
<section class="group">
|
|
<span class="title small-bottom-margin">Fincancial</span>
|
|
<span class="desc">Choose your sweetspot</span>
|
|
<app-toggle-slider [(model)]="accommodation" [label]="'Accommodation'" [max]="60" [min]="0"></app-toggle-slider>
|
|
</section>
|
|
</mat-tab>
|
|
|
|
</mat-tab-group>
|
|
|
|
<button (click)="onSearch(tabGroup.selectedIndex === 1)" [disabled]="!from || !to" class="search-btn" color="primary"
|
|
mat-flat-button>Search
|
|
<mat-icon matSuffix>search</mat-icon>
|
|
</button>
|
|
|
|
</mat-card>
|