#1 refactor, fetch event info from event endpoint

src/app/app-routing.module.ts

@@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { EventListComponent } from './event-list/event-list.component';
 import { EventDisplayComponent } from './event-display/event-display.component';
-import { BookingComponent } from './booking/booking.component';
-import { OverviewComponent } from './overview/overview.component';
-import { SuccessComponent } from './success/success.component';
+import { BookingComponent } from './reservation/booking/booking.component';
+import { OverviewComponent } from './reservation/overview/overview.component';
+import { SuccessComponent } from './reservation/success/success.component';
 import { ReservationComponent } from './reservation/reservation.component';
 
 const routes: Routes = [

src/app/app.module.ts

@@ -12,10 +12,11 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { faInfoCircle, faGift, faTicketAlt } from '@fortawesome/free-solid-svg-icons'
 import { faCalendarAlt, faCalendarPlus, faCalendarCheck, faCompass, faClock } from '@fortawesome/free-regular-svg-icons';
-import { BookingComponent } from './booking/booking.component';
-import { OverviewComponent } from './overview/overview.component';
-import { SuccessComponent } from './success/success.component';
+import { BookingComponent } from './reservation/booking/booking.component';
+import { OverviewComponent } from './reservation/overview/overview.component';
+import { SuccessComponent } from './reservation/success/success.component';
 import { ReservationComponent } from './reservation/reservation.component';
+import { EventHeaderComponent } from './event-header/event-header.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +26,8 @@ import { ReservationComponent } from './reservation/reservation.component';
     BookingComponent,
     OverviewComponent,
     SuccessComponent,
-    ReservationComponent
+    ReservationComponent,
+    EventHeaderComponent
   ],
   imports: [
     BrowserModule,

src/app/event-display/event-display.component.html

@@ -1,16 +1,14 @@
 <div *ngIf="event">
+    <app-event-header [event]="event"></app-event-header>
+</div>
+<div *ngIf="tmpEvent">
   <div>
-    <img
-      [alt]="event.event.displayName"
-      [src]="event.event.fileBlobIdIsPresent ? ('/file/'+event.event.fileBlobId) : event.event.imageUrl">
+    <img [src]="tmpEvent.locationDescriptor.mapUrl">
   </div>
-  <div>
-    <img [src]="event.locationDescriptor.mapUrl">
-  </div>
-  <form [formGroup]="reservationForm" (submit)="submitForm(event.event.shortName, reservationForm.value)">
+  <form [formGroup]="reservationForm" (submit)="submitForm(tmpEvent.event.shortName, reservationForm.value)">
     <div>
         <ul>
-          <li *ngFor="let category of event.ticketCategories;let counter = index"
+          <li *ngFor="let category of tmpEvent.ticketCategories;let counter = index"
               formArrayName="reservation">
               <div [formGroupName]="counter">
                   <p>{{category.name}}</p>

src/app/event-display/event-display.component.ts

@@ -3,6 +3,7 @@ import { EventService } from '../shared/event.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormGroup, FormBuilder } from '@angular/forms';
 import { ReservationService } from '../shared/reservation.service';
+import { Event } from '../model/event';
 
 @Component({
   selector: 'app-event-display',
@@ -11,7 +12,8 @@ import { ReservationService } from '../shared/reservation.service';
 })
 export class EventDisplayComponent implements OnInit {
 
-  event: any;
+  event: Event;
+  tmpEvent: any;
   reservationForm: FormGroup;
 
   //https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/
@@ -25,12 +27,20 @@ export class EventDisplayComponent implements OnInit {
 
   ngOnInit() {
     this.route.params.subscribe(params => {
-      this.eventService.getEventTicketsInfo(params['eventShortName']).subscribe(e => {
+
+      const eventShortName = params['eventShortName'];
+
+      this.eventService.getEvent(eventShortName).subscribe(e => {
+        console.log(e);
+        this.event = e;
+      });
+
+      this.eventService.getEventTicketsInfo(eventShortName).subscribe(e => {
         this.reservationForm = this.formBuilder.group({
           reservation: this.formBuilder.array(this.createItems(e))
         });
-        this.event = e;
-      })
+        this.tmpEvent = e;
+      });
     })
   }
 

src/app/event-header/event-header.component.html

@@ -0,0 +1,3 @@
+<div>
+  <img [alt]="event.displayName" [src]="event.fileBlobIdIsPresent ? ('/file/'+event.fileBlobId) : event.imageUrl">
+</div>

src/app/event-header/event-header.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventHeaderComponent } from './event-header.component';
+
+describe('EventHeaderComponent', () => {
+  let component: EventHeaderComponent;
+  let fixture: ComponentFixture<EventHeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventHeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EventHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/event-header/event-header.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Event } from '../model/event';
+
+@Component({
+  selector: 'app-event-header',
+  templateUrl: './event-header.component.html',
+  styleUrls: ['./event-header.component.scss']
+})
+export class EventHeaderComponent implements OnInit {
+
+  @Input()
+  event: Event;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/model/event.ts

@@ -0,0 +1,6 @@
+export class Event {
+    displayName: string;
+    fileBlobIdIsPresent: boolean;
+    fileBlobId: string;
+    imageUrl: string;
+}

src/app/booking/booking.component.ts → src/app/reservation/booking/booking.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ReservationService } from '../shared/reservation.service';
+import { ReservationService } from '../../shared/reservation.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormBuilder, FormGroup } from '@angular/forms';
 

src/app/overview/overview.component.ts → src/app/reservation/overview/overview.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ReservationService } from '../shared/reservation.service';
+import { ReservationService } from '../../shared/reservation.service';
 import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({

src/app/reservation/reservation.component.html

@@ -1,5 +1,4 @@
-<p>
-  reservation works!
-</p>
-
-<router-outlet></router-outlet>
+<div *ngIf="event">
+    <app-event-header [event]="event"></app-event-header>
+    <router-outlet></router-outlet>
+</div>

src/app/reservation/reservation.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Event } from '../model/event';
+import { ActivatedRoute } from '@angular/router';
+import { EventService } from '../shared/event.service';
 
 @Component({
   selector: 'app-reservation',
@@ -7,9 +10,18 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ReservationComponent implements OnInit {
 
-  constructor() { }
+  event: Event;
+
+  constructor(
+    private route: ActivatedRoute,
+    private eventService: EventService) { }
 
   ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.eventService.getEvent(params['eventShortName']).subscribe(event => {
+        this.event = event;
+      })
+    });
   }
 
 }

src/app/success/success.component.ts → src/app/reservation/success/success.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { ReservationService } from '../shared/reservation.service';
+import { ReservationService } from '../../shared/reservation.service';
 import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({

src/app/shared/event.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from "@angular/common/http";
 import { Observable } from 'rxjs';
+import { Event } from '../model/event'
 
 @Injectable({
   providedIn: 'root'
@@ -13,9 +14,8 @@ export class EventService {
     return this.http.get('/api/v2/public/tmp/events');
   }
 
-
-  public getEvent(eventShortName: string): Observable<any> {
-    return this.http.get(`/api/v2/public/event/${eventShortName}`);
+  public getEvent(eventShortName: string): Observable<Event> {
+    return this.http.get<Event>(`/api/v2/public/event/${eventShortName}`);
   }
 
   public getEventTicketsInfo(eventShortName: string) : Observable<any> {