35 lines
1.6 KiB
HTML
35 lines
1.6 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>
|
|
<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 *ngIf="region.temperature_mean_max && region.temperature_mean_max[0]" class="region-stats-group">
|
|
<span class="group-title">Temperatures [°C]</span>
|
|
<app-graph [colors]="['blue', 'red']" [labels]="['Min', 'Max']"
|
|
[monthlyDatas]="[region.temperature_mean_min, region.temperature_mean_max]" class="graph"></app-graph>
|
|
</div>
|
|
<div *ngIf="region.precipitation && region.precipitation[0]" class="region-stats-group">
|
|
<span class="group-title">Precipitation [mm]</span>
|
|
<app-graph [monthlyDatas]="[region.precipitation]" class="graph"></app-graph>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!region" class="spinner">
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|