travopti/frontend/src/app/components/result/result.component.html
2020-06-25 12:27:10 +02:00

64 lines
2.4 KiB
HTML

<div class="result-mat-card">
<img alt="Picture of {{result.name}}" class="result-img"
src="https://travopti.de/api/v1/regions/{{result.region_id}}/image">
<div class="result-title">
<div class="result-header">
<span class="result-name">{{result.name}}<span *ngIf="debug"> ({{result.score}})</span></span>
<span class="result-country">| {{result.country}}</span>
</div>
<app-bookmark-button [region]="result"></app-bookmark-button>
<app-share-button [region]="result"></app-share-button>
</div>
<div class="result-details">
<mat-divider *ngIf="totalCosts"></mat-divider>
<div *ngIf="totalCosts" class="total-price-container">
<div matTooltip="Total">
<mat-icon>euro</mat-icon>
<span>{{totalCosts|number:'1.0-0'}}€</span>
</div>
<div matTooltip="Accommodation">
<mat-icon>hotel</mat-icon>
<span>{{totalAccommodation|number:'1.0-0'}}€</span>
</div>
<div matTooltip="Lifestyle">
<mat-icon>people</mat-icon>
<span>{{totalLifeStyle|number:'1.0-0'}}€</span>
</div>
<div (click)="onTravelCostRequest($event)" matTooltip="Travel (request)">
<mat-icon>commute</mat-icon>
<span>- - -</span>
</div>
</div>
<mat-divider *ngIf="result.scores.length > 0"></mat-divider>
<div *ngIf="result.scores.length > 0" class="searched-params">
<table>
<tr *ngFor="let score of result.scores" [ngClass]="{'undefined': score.value == undefined}">
<td>
<div class="cell space">
<mat-icon>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].icon : 'bar_chart'}}</mat-icon>
<span>{{score.type|translate}}:</span>
</div>
</td>
<td>
<div class="cell right">
<span>{{score.value != undefined ? (score.value|number:PROPERTY_VIS_DEF[score.type].decimals) : 'N/A'}}</span>
</div>
</td>
<td>
<div class="cell">
<span>{{PROPERTY_VIS_DEF[score.type] ? PROPERTY_VIS_DEF[score.type].unit : ''}}</span>
</div>
</td>
<td *ngIf="debug">
<div class="cell">
<span>({{score.score}})</span>
</div>
</td>
</tr>
</table>
</div>
<mat-divider></mat-divider>
<div class="result-desc">Estimated values for {{duration}} {{duration > 1 ? 'days' : 'day'}}</div>
</div>
</div>