forked from philorg/treetrail-frontend
35 lines
1 KiB
HTML
35 lines
1 KiB
HTML
|
<div *ngIf="trail" class="container">
|
||
|
|
<h1 class="title">
|
||
|
|
Trail: <span class='name'>{{ trail.name }}</span>
|
||
|
|
</h1>
|
||
|
|
<div class="content">
|
||
|
|
<div class="photo">
|
||
|
|
<img class='photo' src="{{ trail.getPhotoUrl() }}">
|
||
|
|
</div>
|
||
|
|
<dl>
|
||
|
|
<dt>Length</dt>
|
||
|
|
<dd>{{ trail.length.toFixed() }} m</dd>
|
||
|
|
<dt>Number of trees</dt>
|
||
|
|
<dd>{{ trail.treeList.length }}</dd>
|
||
|
|
<dt>Number of species</dt>
|
||
|
|
<dd>{{ (trail.getTreeBucket() | keyvalue).length }}</dd>
|
||
|
|
<button mat-raised-button (click)="showOnMap()" color='primary'>
|
||
|
|
<mat-icon>map</mat-icon>
|
||
|
|
View on map
|
||
|
|
</button>
|
||
|
|
</dl>
|
||
|
|
</div>
|
||
|
|
<mat-divider></mat-divider>
|
||
|
|
<h2>
|
||
|
|
Discover these species on this trail:
|
||
|
|
</h2>
|
||
|
|
<div class="plants">
|
||
|
|
<div *ngFor="let plantekey of trail.getTreeBucket() | keyvalue">
|
||
|
|
<app-plant-list-item *ngIf="(dataService.all | async).plants[plantekey.key]; let plant"
|
||
|
|
[plant]="(dataService.all | async).plants[plantekey.key]"
|
||
|
|
[count]="plantekey.value">
|
||
|
|
</app-plant-list-item>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|