phil/treetrail-frontend
1
0
Fork 0
forked from philorg/treetrail-frontend
Code Pull requests Activity

first commit

Browse source
This commit is contained in:
phil 2024-10-19 11:53:15 +02:00
commit 62506c830a
1207 changed files with 40706 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/app/trail-detail/trail-detail.component.html Normal file
View file

@ -0,0 +1,34 @@
<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>