-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreserve.html
133 lines (110 loc) · 4.5 KB
/
reserve.html
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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reservation Page</title>
<!-- Latest compiled and minified CSS & JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1 class="text-center">
<span class="fa fa-fire"></span> Hot Restaurant</h1>
<hr>
<h2 class="text-center">Make your reservation</h2>
<br>
<div class="text-center">
<a href="/tables">
<button class="btn btn-lg btn-primary">
<span class="fa fa-list-alt"></span> View Tables</button>
</a>
<a href="/">
<button class="btn btn-lg btn-default">
<span class="fa fa-home"></span>
</button>
</a>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<!-- Reservation Page -->
<div class="card">
<div class="card-header">
Table Reservation
</div>
<div class="card-body">
<form role="form">
<div class="form-group">
<label for="reserve-name">Name</label>
<input type="text" class="form-control" id="reserve-name">
</div>
<div class="form-group">
<label for="reserve-phone">Phone Number</label>
<input type="text" class="form-control" id="reserve-phone">
</div>
<div class="form-group">
<label for="reserve-email">Email</label>
<input type="text" class="form-control" id="reserve-email">
</div>
<div class="form-group">
<label for="reserve-unique-id">Unique ID</label>
<input type="text" class="form-control" id="reserve-unique-id">
</div>
<button type="submit" class="btn btn-primary submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p>
<a href="/api/tables">API Table Link</a> |
<a href="/api/waitlist">API Wait List</a>
</div>
</footer>
</div>
</body>
</html>
<!-- BELOW CODE IS CRITICAL. IT HANDLES HOW FORM DATA IS SENT TO OUR SERVER -->
<script type="text/javascript">
// In this code below we create the Front-end JavaScript which "POSTS" our form data to our express server.
// In essence, when the user hits submit, jQuery grabs all of the fields then sends a post request to our api
// Our api recognizes the route (/api/tables)... and then runs the associated code (found in api-routes.js).
// In this case the associated code "saves" the data to the table-data.js file or waitinglist-data.js file
$(".submit").on("click", function(event) {
event.preventDefault();
// Here we grab the form elements
var newReservation = {
customerName: $("#reserve-name").val().trim(),
phoneNumber: $("#reserve-phone").val().trim(),
customerEmail: $("#reserve-email").val().trim(),
customerID: $("#reserve-unique-id").val().trim()
};
console.log(newReservation);
// This line is the magic. It"s very similar to the standard ajax function we used.
// Essentially we give it a URL, we give it the object we want to send, then we have a "callback".
// The callback is the response of the server. In our case, we set up code in api-routes that "returns" true or false
// depending on if a tables is available or not.
$.post("/api/tables", newReservation,
function(data) {
// If a table is available... tell user they are booked.
if (data) {
alert("Yay! You are officially booked!");
}
// If a table is available... tell user they on the waiting list.
else {
alert("Sorry you are on the wait list");
}
// Clear the form when submitting
$("#reserve-name").val("");
$("#reserve-phone").val("");
$("#reserve-email").val("");
$("#reserve-unique-id").val("");
});
});
</script>