67 lines
2.9 KiB
HTML
67 lines
2.9 KiB
HTML
<div #container *ngIf="region">
|
|
<img alt="Picture of {{region.name}}" class="region-img"
|
|
src="https://travopti.de/api/v1/regions/{{region.region_id}}/image">
|
|
<div class="region-details-header">
|
|
<div class="region-title">
|
|
<span class="region-country">{{region.country}}</span>
|
|
<span class="region-name">{{region.name}}</span>
|
|
</div>
|
|
<app-bookmark-button [region]="region"></app-bookmark-button>
|
|
<a href="https://www.google.com/flights?q=flight+to+{{uriRegionName}}" mat-icon-button matTooltip="Search flights"
|
|
rel="noopener" target="_blank">
|
|
<mat-icon>flight_takeoff</mat-icon>
|
|
</a>
|
|
<app-share-button [region]="region"></app-share-button>
|
|
</div>
|
|
<p *ngIf="region.description" class="region-decsription">
|
|
<span>{{region.description.substr(0, DESC_CUT_POINT)}}</span>
|
|
<span (click)="isDescExtended=true" *ngIf="!isDescExtended && region.description.length > DESC_CUT_POINT"
|
|
class="more-btn"> ...more</span>
|
|
<span *ngIf="isDescExtended">{{region.description.substr(DESC_CUT_POINT)}}</span>
|
|
</p>
|
|
<div class="region-stats-group">
|
|
<app-region-stats [region]="region" [shownKeys]="SHOWN_PROPS"></app-region-stats>
|
|
</div>
|
|
<div class="region-stats-group">
|
|
<span class="group-title">Monthly Data</span>
|
|
<mat-tab-group>
|
|
<mat-tab *ngIf="region.avg_price_relative" label="Price Deviation">
|
|
<ng-template matTabContent>
|
|
<app-graph [monthlyDatas]="[region.avg_price_relative]" class="graph" formatSting="##,##%" graphType="column">
|
|
</app-graph>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="region.temperature_mean_max && region.temperature_mean_max[0]" label="Temperatures">
|
|
<ng-template matTabContent>
|
|
<app-graph [colors]="['blue', 'red']" [labels]="['Min', 'Max']"
|
|
[monthlyDatas]="[region.temperature_mean_min, region.temperature_mean_max]" class="graph"
|
|
formatSting="##,##°C">
|
|
</app-graph>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="region.precipitation && region.precipitation[0]" label="Precipitation">
|
|
<ng-template matTabContent>
|
|
<app-graph [monthlyDatas]="[region.precipitation]" class="graph" formatSting="####mm">
|
|
</app-graph>
|
|
</ng-template>
|
|
</mat-tab>
|
|
<mat-tab *ngIf="region.rain_days && region.rain_days[0]" label="Rain days">
|
|
<ng-template matTabContent>
|
|
<app-graph [monthlyDatas]="[region.rain_days]" class="graph" formatSting="####" graphType="column">
|
|
</app-graph>
|
|
</ng-template>
|
|
</mat-tab>
|
|
</mat-tab-group>
|
|
</div>
|
|
<div class="places-container">
|
|
<span class="group-title">Places</span>
|
|
<div class="places">
|
|
<app-place *ngFor="let place of places" [place]="place"></app-place>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!region" class="spinner">
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|