Display title on booking form

Author: xkons

projects/train-platform/src/assets/i18n/de.json

@@ -13,6 +13,7 @@
     }
   },
   "booking": {
+    "title": "Reise {{ id }} buchen",
     "reserveSeatQuestion": "Möchten Sie einen Sitzplatz reservieren?",
     "firstClassQuestion": "Möchten Sie in der ersten Klasse sitzen?",
     "bookAction": "Buchen",

projects/train-platform/src/assets/i18n/en.json

@@ -13,6 +13,7 @@
     }
   },
   "booking": {
+    "title": "Book journey {{ id }}",
     "reserveSeatQuestion": "Do you want to reserve a seat?",
     "firstClassQuestion": "Do you want to sit in first class?",
     "bookAction": "Book",

projects/train-platform/src/booking/booking/booking.component.html

@@ -1,3 +1,6 @@
+<h2 *ngIf="journeyId$ | async as journeyId">
+  {{ "booking.title" | translate: { id: journeyId } }}
+</h2>
 <div class="booking-options">
   <div>
     <label>{{ "booking.reserveSeatQuestion" | translate }}</label>

projects/train-platform/src/booking/booking/booking.component.ts

@@ -1,17 +1,20 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { HotToastService } from '@ngneat/hot-toast';
 import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
 import { BookingService } from '../booking.service';
 
 @Component({
   selector: 'app-booking',
   templateUrl: './booking.component.html',
   styleUrls: ['./booking.component.css'],
 })
-export class BookingComponent {
+export class BookingComponent implements OnInit {
   reserveSeat = false;
   firstClass = false;
+  journeyId$!: Observable<string>;
 
   constructor(
     private bookingService: BookingService,
@@ -20,6 +23,13 @@ export class BookingComponent {
     private translateService: TranslateService
   ) {}
 
+  ngOnInit(): void {
+    this.journeyId$ = this.route.params.pipe(
+      map((params) => params.journeyId),
+      filter((journeyId) => journeyId)
+    );
+  }
+
   book(): void {
     this.bookingService
       .book(this.route.snapshot.params.journeyId, {