73 lines
2.8 KiB
HTML
73 lines
2.8 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="##,##%">
|
|
</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>
|
|
|
|
<div *ngIf="!region" class="spinner">
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|