59 lines
1.9 KiB
HTML
59 lines
1.9 KiB
HTML
<div *ngIf="region">
|
|
<img 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>
|
|
<button mat-icon-button>
|
|
<mat-icon>bookmark</mat-icon>
|
|
</button>
|
|
<button mat-icon-button>
|
|
<mat-icon>share</mat-icon>
|
|
</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">
|
|
<div>
|
|
<table>
|
|
<tr *ngFor="let prop of SHOWN_PROPS">
|
|
<td>
|
|
<div class="cell">
|
|
<mat-icon>{{prop.icon}}</mat-icon>
|
|
<span>{{prop.property|translate}}:</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="cell right">
|
|
<span>{{region[prop.property].toFixed(2)}}</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="cell">
|
|
<span>{{prop.unit}}</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="region-stats-group">
|
|
<span class="group-title">Max Temperatures [°C]</span>
|
|
<app-graph [monthlyData]="region.temperature_mean_max" class="graph"></app-graph>
|
|
</div>
|
|
<div class="region-stats-group">
|
|
<span class="group-title">Precipitation [mm]</span>
|
|
<app-graph [monthlyData]="region.precipitation" class="graph"></app-graph>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="!region" class="spinner">
|
|
<mat-spinner></mat-spinner>
|
|
</div>
|