-
Notifications
You must be signed in to change notification settings - Fork 0
/
bookingForm.js
97 lines (84 loc) · 3.69 KB
/
bookingForm.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React, {Component} from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom';
const burl = "https://developerfunnelrestapi.herokuapp.com/restaurantdetails"
const placeorder = "https://developerfunnelrestapi.herokuapp.com/placeorder"
class BookingForm extends Component{
constructor(props){
super()
this.state = {
order_id: Math.floor(Math.random()*10000),
rest_name: '',
name:'',
phone:'',
person:''
}
}
handleChangeName = (event) => {
console.log(event.target.value)
this.setState({name:event.target.value})
}
handleChangePhone = (event) => {
this.setState({phone:event.target.value})
}
handleChangePerson = (event) => {
this.setState({person:event.target.value})
}
handleSubmit = () => {
fetch(placeorder, {
method:'POST',
headers:{
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body:JSON.stringify(this.state)
})
.then((this.props.history.push('/orders')))
}
async componentDidMount(){
let restid = this.props.match.params.id;
axios.get(`${burl}/${restid}`)
.then((res) => {this.setState({rest_name:res.data[0].name})})
}
render(){
return(
<div className="container">
<div className="panel panel-info">
<div className="panel-heading">
<h3>Place Your Order</h3>
</div>
<div className="panel-body">
<div className="form-group">
<label>Order ID</label> <br/>
<input type="text" name="order_id" value={this.state.order_id} readOnly className="form-control"/>
</div>
<div className="form-group">
<label>Restaurant Name</label> <br/>
<input type="text" name="rest_name" value={this.state.rest_name} readOnly className="form-control"/>
</div>
<div className="form-group">
<label>Name</label> <br/>
<input type="text" name="name" value={this.state.name} className="form-control" onChange={this.handleChangeName}/>
</div>
<div className="form-group">
<label>Phone</label> <br/>
<input type="text" name="phone" value={this.state.phone} className="form-control" onChange={this.handleChangePhone}/>
</div>
<div className="form-group">
<label>Number Of Persons</label> <br/>
<select type="text" name="person" value={this.state.person} className="form-control" onChange={this.handleChangePerson}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select>
</div>
<Link type="button" class="btn btn-success btn-md" onClick={this.handleSubmit}>Submit</Link>
</div>
</div>
</div>
)
}
}
export default BookingForm;