UI initial for Bus Reservation System

TBSLabs · Aug 23, 2015 · 281bfd4 · 281bfd4
1 parent b05c96d
commit 281bfd4
Show file tree

Hide file tree

Showing 6 changed files with 903 additions and 0 deletions.
diff --git a/jquery-ui/booking.html b/jquery-ui/booking.html
@@ -0,0 +1,146 @@
+
+<!doctype html>
+
+<html>
+	<head>
+		<title>JSC Demo</title>
+
+		<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
+		<link rel="stylesheet" type="text/css" href="./jquery.seat-charts.css">
+		<link rel="stylesheet" type="text/css" href="style.css">
+	</head>
+
+	<body>
+		<div class="wrapper">
+			<div class="container">
+				<div id="seat-map">
+					<div class="front-indicator">Front</div>
+
+				</div>
+				<div class="booking-details">
+					<h2>Booking Details</h2>
+
+					<h3> Selected Seats (<span id="counter">0</span>):</h3>
+					<ul id="selected-seats"></ul>
+
+					Total: <b>$<span id="total">0</span></b>
+
+					<button class="checkout-button">Checkout &raquo;</button>
+
+					<div id="legend"></div>
+				</div>
+			</div>
+		</div>
+
+		<script src="./jquery-1.11.0.min.js"></script>
+		<script src="./jquery.seat-charts.js"></script>
+
+		<script>
+			var firstSeatLabel = 1;
+
+			$(document).ready(function() {
+				var $cart = $('#selected-seats'),
+					$counter = $('#counter'),
+					$total = $('#total'),
+					sc = $('#seat-map').seatCharts({
+					map: [
+						'ff_ff',
+						'ff_ff',
+						'ee_ee',
+						'ee_ee',
+						'ee___',
+						'ee_ee',
+						'ee_ee',
+						'ee_ee',
+						'eeeee',
+					],
+					seats: {
+						f: {
+							price   : 100,
+							classes : 'first-class', //your custom CSS class
+							category: 'First Class'
+						},
+						e: {
+							price   : 40,
+							classes : 'economy-class', //your custom CSS class
+							category: 'Economy Class'
+						}					
+
+					},
+					naming : {
+						top : false,
+						getLabel : function (character, row, column) {
+							return firstSeatLabel++;
+						},
+					},
+					legend : {
+						node : $('#legend'),
+					    items : [
+							[ 'f', 'available',   'First Class' ],
+							[ 'e', 'available',   'Economy Class'],
+							[ 'f', 'unavailable', 'Already Booked']
+					    ]					
+					},
+					click: function () {
+						if (this.status() == 'available') {
+							//let's create a new <li> which we'll add to the cart items
+							$('<li>'+this.data().category+' Seat # '+this.settings.label+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
+								.attr('id', 'cart-item-'+this.settings.id)
+								.data('seatId', this.settings.id)
+								.appendTo($cart);
+
+							/*
+							 * Lets update the counter and total
+							 *
+							 * .find function will not find the current seat, because it will change its stauts only after return
+							 * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
+							 */
+							$counter.text(sc.find('selected').length+1);
+							$total.text(recalculateTotal(sc)+this.data().price);
+
+							return 'selected';
+						} else if (this.status() == 'selected') {
+							//update the counter
+							$counter.text(sc.find('selected').length-1);
+							//and total
+							$total.text(recalculateTotal(sc)-this.data().price);
+
+							//remove the item from our cart
+							$('#cart-item-'+this.settings.id).remove();
+
+							//seat has been vacated
+							return 'available';
+						} else if (this.status() == 'unavailable') {
+							//seat has been already booked
+							return 'unavailable';
+						} else {
+							return this.style();
+						}
+					}
+				});
+
+				//this will handle "[cancel]" link clicks
+				$('#selected-seats').on('click', '.cancel-cart-item', function () {
+					//let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
+					sc.get($(this).parents('li:first').data('seatId')).click();
+				});
+
+				//let's pretend some seats have already been booked
+				sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
+
+		});
+
+		function recalculateTotal(sc) {
+			var total = 0;
+
+			//basically find every selected seat and sum its price
+			sc.find('selected').each(function () {
+				total += this.data().price;
+			});
+
+			return total;
+		}
+
+		</script>
+	</body>
+</html>
diff --git a/jquery-ui/index.html b/jquery-ui/index.html
@@ -0,0 +1,61 @@
+<html>
+<head>
+	<title> Seat Booking </title>
+	<link rel="StyleSheet" type="text/css" href="./jquery.seat-charts.css"/> 
+	<script type="text/javascript" src="./jquery.seat-charts.js"></script> 
+	<script>
+		$(document).ready(function() {
+
+    var sc = $('#seat-map').seatCharts({
+        map: [
+            'aaaaaaaaaaaa',
+            'aaaaaaaaaaaa',
+            'bbbbbbbbbb__',
+            'bbbbbbbbbb__',
+            'bbbbbbbbbbbb',
+            'cccccccccccc'
+        ],
+        seats: {
+            a: {
+                price   : 99.99,
+                classes : 'front-seat' //your custom CSS class
+            }
+
+        },
+        click: function () {
+            if (this.status() == 'available') {
+                //do some stuff, i.e. add to the cart
+                return 'selected';
+            } else if (this.status() == 'selected') {
+                //seat has been vacated
+                return 'available';
+            } else if (this.status() == 'unavailable') {
+                //seat has been already booked
+                return 'unavailable';
+            } else {
+                return this.style();
+            }
+        }
+    });
+
+    //Make all available 'c' seats unavailable
+    sc.find('c.available').status('unavailable');
+
+    /*
+    Get seats with ids 2_6, 1_7 (more on ids later on),
+    put them in a jQuery set and change some css
+    */
+    sc.get(['2_6', '1_7']).node().css({
+        color: '#ffcfcf'
+    });
+
+    console.log('Seat 1_2 costs ' + sc.get('1_2').data().price + ' and is currently ' + sc.status('1_2'));
+
+});
+	</script> 
+</head>
+<body>
+	<h1> Wel come to Tiket Booking System </h1>
+	<div id='seat-map'> Booking System </div>
+</body>
+</html>
diff --git a/jquery-ui/jquery-1.11.0.min.js b/jquery-ui/jquery-1.11.0.min.js
diff --git a/jquery-ui/jquery.seat-charts.css b/jquery-ui/jquery.seat-charts.css
@@ -0,0 +1,68 @@
+div.seatCharts-container {
+	/*min-width: 700px;*/
+}
+div.seatCharts-cell {
+
+	height: 16px;
+	width: 16px;
+	margin: 3px;
+	float: left;
+	text-align: center;
+	outline: none;
+	font-size: 13px;
+	line-height:16px;
+	color: blue;
+
+}
+div.seatCharts-seat {
+	background-color: green;
+	color: white;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+	cursor: default;
+}
+div.seatCharts-seat:focus {
+	border: none;
+}
+/*
+.seatCharts-seat:focus {
+	outline: none;
+}
+*/
+
+div.seatCharts-space {
+	background-color: white;
+}
+div.seatCharts-row {
+	height: 50px;
+}
+
+div.seatCharts-row:after {
+	clear: both;
+}
+
+div.seatCharts-seat.selected {
+	background-color: aqua;
+}
+
+div.seatCharts-seat.focused {
+	background-color: #6db131;
+}
+
+div.seatCharts-seat.available {
+	background-color: green;
+}
+
+div.seatCharts-seat.unavailable {
+	background-color: red;
+	cursor: not-allowed;
+}
+
+ul.seatCharts-legendList {
+	list-style: none;
+}
+li.seatCharts-legendItem {
+	margin-top: 10px;
+	line-height: 2;
+}