Skip to content

Commit 72f63c1

Browse files
xkonsxkons
committed
Add My Bookings view
1 parent 35e841f commit 72f63c1

File tree

13 files changed

+193
-10
lines changed

13 files changed

+193
-10
lines changed

‎projects/bookings/src/app/booking-list/booking-list.component.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
ul {
2+
list-style: none;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
7+
li {
8+
border: 1px solid gray;
9+
padding: 10px;
10+
}
11+
12+
li + li {
13+
margin-top: 4px;
14+
}
15+
16+
section {
17+
border: 1px solid black;
18+
padding: 8px;
19+
}

‎projects/bookings/src/app/booking-list/booking-list.component.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<ul *ngIf="bookings.length; else noBookings">
2+
<li *ngFor="let booking of bookings">
3+
<p>{{ "booking-list.booking" | translate }} {{ booking.id }}</p>
4+
<p>{{ "booking-list.journey" | translate }} {{ booking.journeyId }}</p>
5+
<p>
6+
{{ "booking-list.reserveSeat" | translate }}:
7+
{{ booking.options.reserveSeat }}
8+
</p>
9+
<p>
10+
{{ "booking-list.firstClass" | translate }}:
11+
{{ booking.options.firstClass }}
12+
</p>
13+
</li>
14+
</ul>
15+
<ng-template #noBookings>
16+
<p>{{ "booking-list.noBookings" | translate }}</p>
17+
<section>
18+
<p>SPECIAL OFFER FOR PEOPLE WITHOUT BOOKINGS</p>
19+
<p>Go from Buxtehude to Bielefeld for just 12€!</p>
20+
<p><a routerLink="/bookings/journey/42">Book special offer now</a></p>
21+
</section>
22+
</ng-template>

‎projects/bookings/src/app/booking-list/booking-list.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import { Booking, BookingService } from '../booking.service';
3+
4+
@Component({
5+
selector: 'mf-booking-list',
6+
templateUrl: './booking-list.component.html',
7+
styleUrls: ['./booking-list.component.css'],
8+
})
9+
export class BookingListComponent implements OnInit {
10+
public bookings: Booking[] = [];
11+
12+
constructor(private bookingService: BookingService) {}
13+
14+
ngOnInit(): void {
15+
this.bookings = this.bookingService.getBookings();
16+
}
17+
}

‎projects/bookings/src/app/booking.module.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@ import { RouterModule } from '@angular/router';
77
import { HotToastModule } from '@ngneat/hot-toast';
88
import { TranslateModule } from '@ngx-translate/core';
99
import { BookingFormComponent } from './booking-form/booking-form.component';
10+
import { BookingListComponent } from './booking-list/booking-list.component';
1011
import { BookingComponent } from './booking.component';
1112
import { TranslationLoaderProvider } from './translation-loader.provider';
1213

1314
@NgModule({
14-
declarations: [BookingComponent, BookingFormComponent],
15+
declarations: [BookingComponent, BookingListComponent, BookingFormComponent],
1516
imports: [
1617
BrowserModule,
1718
HttpClientModule,
@@ -23,6 +24,11 @@ import { TranslationLoaderProvider } from './translation-loader.provider';
2324
component: BookingFormComponent,
2425
data: { title: 'Book journey' },
2526
},
27+
{
28+
path: 'bookings',
29+
component: BookingListComponent,
30+
data: { title: 'My bookings' },
31+
},
2632
]),
2733
HotToastModule.forRoot(),
2834
TranslateModule.forRoot({

‎projects/bookings/src/app/booking.service.ts‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,34 @@
11
import { Injectable } from '@angular/core';
22
import { Observable, of } from 'rxjs';
33

4+
export interface Booking {
5+
id: string;
6+
journeyId: string;
7+
options: { reserveSeat: boolean; firstClass: boolean };
8+
}
9+
410
@Injectable({
511
providedIn: 'root',
612
})
713
export class BookingService {
14+
private bookings: Booking[] = [];
15+
private autoIncrementId = 1;
16+
817
book(
9-
_journeyId: string,
10-
_options: { reserveSeat: boolean; firstClass: boolean }
11-
): Observable<void> {
12-
return of(null as unknown as void);
18+
journeyId: string,
19+
options: { reserveSeat: boolean; firstClass: boolean }
20+
): Observable<Booking> {
21+
const booking: Booking = {
22+
id: this.autoIncrementId.toString(),
23+
journeyId,
24+
options,
25+
};
26+
this.autoIncrementId++;
27+
this.bookings.push(booking);
28+
return of(booking);
29+
}
30+
31+
getBookings() {
32+
return this.bookings;
1333
}
1434
}

‎projects/bookings/src/assets/i18n/de.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,13 @@
66
"bookAction": "Buchen",
77
"confirmation": "Reise gebucht!",
88
"error": "Reise konnte nicht gebucht werden!"
9+
},
10+
"booking-list": {
11+
"booking": "Buchung",
12+
"journey": "Reise",
13+
"firstClass": "Erste Klasse",
14+
"reserveSeat": "Sitzplatzreservierung",
15+
"noBookings": "Sie haben noch keine Reise gebucht.",
16+
"goToAvailableJourneys": "Zu den Reiseangeboten"
917
}
1018
}

‎projects/bookings/src/assets/i18n/en.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,13 @@
66
"bookAction": "Book",
77
"confirmation": "Booked a journey!",
88
"error": "Journey could not be booked!"
9+
},
10+
"booking-list": {
11+
"booking": "Booking",
12+
"journey": "Journey",
13+
"firstClass": "First class",
14+
"reserveSeat": "Reserved seat",
15+
"noBookings": "You haven't booked any journey so far.",
16+
"goToAvailableJourneys": "Jump to the available journeys"
917
}
1018
}

‎projects/bookings/src/dev-platform/dev-platform/dev-platform.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<li>
44
<a routerLink="/" routerLinkActive="active-nav-item" [routerLinkActiveOptions]="{exact: true}">Home</a>
55
</li>
6+
<li>
7+
<a routerLink="/bookings" routerLinkActive="active-nav-item" [routerLinkActiveOptions]="{exact: true}">My Bookings</a>
8+
</li>
69
</ul>
710
<div class="page-options">
811
<div>

‎projects/bookings/src/micro-frontend/entry.component.ts‎

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,39 @@
1-
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
2-
import { Router } from '@angular/router';
1+
import {
2+
Component,
3+
EventEmitter,
4+
Input,
5+
OnChanges,
6+
OnDestroy,
7+
Output,
8+
SimpleChanges,
9+
} from '@angular/core';
10+
import { Router, RoutesRecognized } from '@angular/router';
311
import { TranslateService } from '@ngx-translate/core';
12+
import { Subscription } from 'rxjs';
13+
14+
export interface RouterEvent {
15+
url: string;
16+
replaceUrl: boolean;
17+
}
418

519
@Component({
620
template: '<mf-booking></mf-booking>',
721
})
8-
export class EntryComponent implements OnChanges {
22+
export class EntryComponent implements OnChanges, OnDestroy {
923
@Input() route?: string;
24+
@Output() routeChange = new EventEmitter<RouterEvent>();
1025

1126
@Input() language?: 'en' | 'de';
1227

28+
private subscription: Subscription;
29+
1330
constructor(
1431
private router: Router,
1532
private translateService: TranslateService
16-
) {}
33+
) {
34+
const routingSubscription = this.registerOutgoingRouting();
35+
this.subscription = routingSubscription;
36+
}
1737

1838
ngOnChanges(changes: SimpleChanges) {
1939
if (changes.route && this.route) {
@@ -23,4 +43,30 @@ export class EntryComponent implements OnChanges {
2343
this.translateService.use(this.language);
2444
}
2545
}
46+
47+
ngOnDestroy(): void {
48+
this.subscription.unsubscribe();
49+
}
50+
51+
private registerOutgoingRouting(): Subscription {
52+
return this.router.events.subscribe((event) => {
53+
if (
54+
event instanceof RoutesRecognized &&
55+
(!this.isRouteChangeFromPlatform() || this.isRedirect(event))
56+
) {
57+
this.routeChange.next({
58+
url: event.urlAfterRedirects,
59+
replaceUrl: this.isRedirect(event),
60+
});
61+
}
62+
});
63+
}
64+
65+
private isRouteChangeFromPlatform(): boolean {
66+
return this.router.getCurrentNavigation()?.extras?.state?.fromPlatform;
67+
}
68+
69+
private isRedirect(event: RoutesRecognized): boolean {
70+
return event.url !== event.urlAfterRedirects;
71+
}
2672
}

‎projects/train-platform/src/app/navbar/navbar.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
<li>
44
<a routerLink="/" routerLinkActive="active-nav-item" [routerLinkActiveOptions]="{exact: true}">{{ "navbar.home" | translate }}</a>
55
</li>
6+
<li>
7+
<a routerLink="/bookings" routerLinkActive="active-nav-item" [routerLinkActiveOptions]="{exact: true}">{{ "navbar.myBookings" | translate }}</a>
8+
</li>
69
</ul>
710
<div class="page-options">
811
<div>

0 commit comments

Comments
 (0)