#1 add create reservation functionality

proxy.config.json

@@ -2,12 +2,14 @@
   "/api": {
     "target": "http://localhost:8080",
     "secure": false,
+    "changeOrigin": true,
     "logLevel": "debug"
   },
 
   "/file": {
     "target": "http://localhost:8080",
     "secure": false,
+    "changeOrigin": true,
     "logLevel": "debug"
   }
 }

src/app/app.module.ts

@@ -6,7 +6,7 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { EventListComponent } from './event-list/event-list.component';
 import { EventDisplayComponent } from './event-display/event-display.component';
-import { HttpClientModule }    from '@angular/common/http';
+import { HttpClientModule, HttpClientXsrfModule }    from '@angular/common/http';
 
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -23,6 +23,10 @@ import { faCalendarAlt, faCalendarPlus, faCalendarCheck, faCompass, faClock } fr
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
+    HttpClientXsrfModule.withOptions({
+      cookieName: 'XSRF-TOKEN',
+      headerName: 'X-CSRF-TOKEN',
+    }),
     FontAwesomeModule,
     FormsModule,
     ReactiveFormsModule

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

@@ -7,9 +7,7 @@
   <div>
     <img [src]="event.locationDescriptor.mapUrl">
   </div>
-
-
-  <form [formGroup]="reservationForm">
+  <form [formGroup]="reservationForm" (submit)="submitForm(event.event.shortName, reservationForm.value)">
     <div>
         <ul>
           <li *ngFor="let category of event.ticketCategories;let counter = index"
@@ -25,5 +23,7 @@
         </ul>
     </div>
     {{reservationForm.value|json}}
+
+    <button type="submit">Next</button>
   </form>
 </div>

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

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { EventService } from '../shared/event.service';
 import { ActivatedRoute } from '@angular/router';
 import { FormGroup, FormBuilder } from '@angular/forms';
+import { ReservationService } from '../shared/reservation.service';
 
 @Component({
   selector: 'app-event-display',
@@ -18,6 +19,7 @@ export class EventDisplayComponent implements OnInit {
   constructor(
     private route: ActivatedRoute,
     private eventService: EventService,
+    private reservationService: ReservationService,
     private formBuilder: FormBuilder) { }
 
   ngOnInit() {
@@ -35,4 +37,8 @@ export class EventDisplayComponent implements OnInit {
     return event.ticketCategories.map(category => this.formBuilder.group({ticketCategoryId: category.id, amount: 0}));
   }
 
+  submitForm(eventShortName, reservation) {
+    this.reservationService.reserveTickets(eventShortName, reservation).subscribe(e => console.log(e));
+  }
+
 }

src/app/shared/reservation.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import { Observable } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ReservationService {
+
+    constructor(private http: HttpClient) { }
+
+    public reserveTickets(eventShortName: string, reservation: any): Observable<any> {
+        return this.http.post(`/api/v2/public/event/${eventShortName}/reserve-tickets`, reservation);
+    }
+}