Finalize booking form

martin-helmich · Apr 3, 2017 · 8225508 · 8225508
1 parent b513bd5
commit 8225508
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 20 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>MyEvents</title>
 
-    <!--<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />-->
+    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css" />
 </head>
 <body>
 <div id="myevents-app"></div>

diff --git a/src/components/event_booking_form.tsx b/src/components/event_booking_form.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import {ChangeEvent} from "react";
 import {Event} from "../model/event";
 import {FormRow} from "./form_row";
 
@@ -20,9 +21,9 @@ export class EventBookingForm extends React.Component<EventBookingFormProps, Eve
         }
     }
 
-    private handleNewAmount(n: number) {
+    private handleNewAmount(event: ChangeEvent<HTMLSelectElement>) {
         const newState: EventBookingFormState = {
-            selectedAmount: n
+            selectedAmount: parseInt(event.target.value)
         };
 
         this.setState(newState);
@@ -36,16 +37,13 @@ export class EventBookingForm extends React.Component<EventBookingFormProps, Eve
                     <p className="form-control-static">{this.props.event.Name}</p>
                 </FormRow>
                 <FormRow label="Number of tickets">
-                    <select className="form-control" value={this.state.selectedAmount} onChange={e => this.handleNewAmount(parseInt(e.target.value))}>
+                    <select className="form-control" value={this.state.selectedAmount} onChange={e => this.handleNewAmount(e)}>
                         <option value="1">1</option>
                         <option value="2">2</option>
                         <option value="3">3</option>
                         <option value="4">4</option>
                     </select>
                 </FormRow>
-                <FormRow label="Price">
-                    <p className="form-control-static">{this.state.selectedAmount * 99} €</p>
-                </FormRow>
                 <FormRow>
                         <button className="btn btn-primary" onClick={() => this.props.onSubmit(this.state.selectedAmount)}>Submit order</button>
                 </FormRow>

diff --git a/src/components/event_booking_form_container.tsx b/src/components/event_booking_form_container.tsx
@@ -9,7 +9,7 @@ export interface EventBookingFormContainerProps {
 }
 
 export interface EventBookingFormState {
-    loading: boolean;
+    state: "loading"|"ready"|"saving"|"done"|"error";
     event?: Event;
 }
 
@@ -18,21 +18,21 @@ export class EventBookingFormContainer extends React.Component<EventBookingFormC
         super(p);
 
         this.state = {
-            loading: true
+            state: "loading"
         };
 
         fetch(p.eventServiceURL + "/events/" + p.eventID)
             .then<Event>(resp => resp.json())
             .then(event => {
                 this.setState({
-                    loading: false,
+                    state: "ready",
                     event: event
                 });
             })
     }
 
     render() {
-        if (this.state.loading) {
+        if (this.state.state === "loading") {
             return <div>Loading...</div>;
         }
 
@@ -43,7 +43,21 @@ export class EventBookingFormContainer extends React.Component<EventBookingFormC
         return <EventBookingForm event={this.state.event} onSubmit={amount => this.handleSubmit(amount)}/>
     }
 
-    private handleSubmit(amount: number) {
+    private handleSubmit(seats: number) {
+        const url = this.props.bookingServiceURL + "/events/" + this.props.eventID + "/bookings";
+        const payload = {seats: seats};
 
+        this.setState({
+            event: this.state.event,
+            state: "saving"
+        });
+
+        fetch(url, {method: "POST", body: JSON.stringify(payload)})
+            .then(response => {
+                this.setState({
+                    event: this.state.event,
+                    state: response.ok ? "done" : "error"
+                });
+            })
     }
 }
diff --git a/src/components/form_row.tsx b/src/components/form_row.tsx
@@ -6,12 +6,12 @@ export interface FormRowProps {
 
 export class FormRow extends React.Component<FormRowProps, {}> {
     render() {
-        const label = this.props.label ? <label className="col-sm-2 control-label">{this.props.label}</label> : undefined;
-        const cls   = "col-sm-10" + (this.props.label ? "" : " col-sm-offset-2");
+        //const label = this.props.label ? <label className="col-sm-2 control-label">{this.props.label}</label> : undefined;
+        //const cls   = "col-sm-10" + (this.props.label ? "" : " col-sm-offset-2");
 
         return <div className="form-group">
-            {label}
-            <div className={cls}>
+            <label className="col-sm-2 control-label">{this.props.label}</label>
+            <div className="col-sm-10">
                 {this.props.children}
             </div>
         </div>

diff --git a/src/index.tsx b/src/index.tsx
@@ -5,10 +5,6 @@ import {EventListContainer} from "./components/event_list_container";
 import {Navigation} from "./components/navigation";
 import {EventBookingFormContainer} from "./components/event_booking_form_container";
 
-declare function require(n: string): any;
-
-const bs = require("bootstrap/dist/css/bootstrap.css");
-
 class App extends React.Component<{}, {}> {
     render() {
         const eventList = () => <EventListContainer eventServiceURL="http://localhost:8181"/>;