Movie-Ticket-Booking/index.html at master · virajs07/Movie-Ticket-Booking · GitHub

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
<html>
	<head>
	<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="js/underscore-min.js"></script>
	<script type="text/javascript" src="js/backbone.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/prima.css">
	</head>
	<title>
		Movie Seat Reservation
	</title>
	<body>
		<div class="text-center">
			<label id='title'>MOVIE SEAT RESERVATION</label>
		</div>
		<form class='form-inline selectionForm'>
			<div class="form-group required">
				<label for="name">Name:</label>
				<input type="text" class="form-control" id='name' placeholder="Jane Doe" required="required"/>
			</div>
			<div class="form-group required">
				<label for="seats">Number Of Seats:</label>
				<input type="number" id='seats' class="form-control" placeholder="3" required="required"/>
			</div>
			<div class="text-center">
				<button type="button" class="btn btn-primary btn-lg submitBtn" id="submitSelection">Start Selecting</button>
			</div>
			<div class="text-center">
				<font color="Red"><label class="error"></label></font>
			</div>

		</form>
		<div class="screen-ui">
			<div id="screen">
				<font color="white">SCREEN</font>
			</div>

			<table class="table" id="table-screen">
				<thead id="screen-head">
					<tr>
						<script type="text/template" id='table-screen-header'>
			   				<% _.each(_.range(0,columns+1),function(item){ %>
			   					<% if(item==0) {%>
			            			<th></th>
			            		<% } else {%>
			            			<th><%= item %></th>
			            		<% } %>
			    			<% }) %>
			    		</script>
		    		</tr>
		    	</thead>
		    	<tbody id="screen-body">
		    		<script type="text/template" id='table-screen-body'>
		    			<% _.each(rows,function(row){ %>
		    				<tr id='table-screen-row'>
		    					<td><%=row%></td>
		    					<% _.each(_.range(1,columns+1),function(column){ %>
		    						<% var id=(_.indexOf(rows,row)*columns)+column; var reservedSeats=JSON.parse(localStorage.getItem('ReservedSeats')); if(reservedSeats!=null && _.indexOf(reservedSeats,String(id))!=-1) {%>
			            				<td><img src="img/reserved-seat.png" class="reserved-seat" id="<%=id%>"/></td>
			            			<% }else {%>
			            				<td><img src="img/empty-seat.png" class="empty-seat" id="<%=id%>"/></td>
			            			<% }}) %>
	    					</tr>
	    				<% }) %>
					</script>
		    	</tbody>
			</table>

			<div class="text-center">
				<button type="button" class="btn btn-primary btn-lg submitBtn" id="confirmSelection">Confirm Selection</button>
				<div class="screen-map">
				<label for="empty-seat-map">Selected Seat</label>
				<img src="img/booked-seat.png" class="booked-seat-map" id="booked-seat-map">
				<br/>
				<label for="">Reserved Seat</label>
				<img src="img/reserved-seat.png" class="reserved-seat-map" id="reserved-seat-map">
				<br/>
				<label for="">Empty Seat</label>
				<img src="img/empty-seat.png" class="empty-seat-map" id="empty-seat-map">
			</div>
			</div>

		</div>
		<div class="table-responsive">
			<table class="table table-bordered">
				<thead>
					<tr>
						<th>Name</th>
						<th>Number of Seats</th>
						<th>Seats</th>
					</tr>
				</thead>
				<tbody id="ticket-sold-info">
					<script type="text/template" id='table-ticket-info'>
						<% _.each(items,function(item){%>
							<tr>
								<td><%-item.names%></td>
								<td><%-item.numbers%></td>
								<td><%-item.seats%></td>
							</tr>
						<%})%>
					</script>
				</tbody>
			</table>
		</div>
	</body>
	<script type="text/javascript" src="js/prima.js"></script>
</html>