first commit

src/app/trail-detail/trail-detail.component.html

@@ -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>

src/app/trail-detail/trail-detail.component.scss

@@ -0,0 +1,53 @@
+:host {
+  font-family: Arial, Helvetica, sans-serif;
+  background: rgb(250 200 100 / 50%);
+}
+
+.container {
+  margin: 0.5em;
+}
+
+h1 {
+  margin: 0;
+  text-align: center;
+}
+
+.name {
+  font-style: italic;
+}
+
+.plant {
+  cursor: pointer;
+}
+
+.mat-toolbar {
+  background-color: inherit;
+}
+
+.plants {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.viewport {
+  height: 100%;
+}
+
+.mat-mdc-card-actions {
+  text-align: center;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+}
+
+.photo {
+  max-height: 15em;
+  flex: 2 1 0;
+}
+
+.content dl {
+  flex: 2 1 0;
+}

src/app/trail-detail/trail-detail.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit,
+  ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core'
+import { Router, ActivatedRoute, ParamMap } from '@angular/router'
+import { switchMap, map } from 'rxjs/operators'
+
+import { DataService } from '../data.service'
+import { All, Trail, Trails } from '../models'
+
+@Component({
+  selector: 'app-trail-detail',
+  templateUrl: './trail-detail.component.html',
+  styleUrls: ['./trail-detail.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TrailDetailComponent implements OnInit {
+  trail: Trail
+
+  constructor(
+    private route: ActivatedRoute,
+    public router: Router,
+    public dataService: DataService,
+    public cdr: ChangeDetectorRef,
+  ) { }
+
+  ngOnInit(): void {
+    this.route.paramMap.pipe(
+      switchMap((params: ParamMap) =>
+        this.dataService.all.pipe(map(
+          (all: All) => all.trails[params.get('id')]
+          )
+        )
+      )
+    ).subscribe(
+      trail => {
+        this.trail = trail
+        this.cdr.markForCheck()
+      }
+    )
+  }
+
+  showOnMap() {
+    this.router.navigate(['map'], this.trail.mapRouteArgs)
+  }
+}