99 lines
4.2 KiB
JavaScript
99 lines
4.2 KiB
JavaScript
|
var firstSeatLabel = 1;
|
||
|
|
||
|
$(document).ready(function() {
|
||
|
var $cart = $('#selected-seats'),
|
||
|
$counter = $('#counter'),
|
||
|
$total = $('#total'),
|
||
|
sc = $('#seat-map').seatCharts({
|
||
|
map: [
|
||
|
'cccccc',
|
||
|
'_',
|
||
|
'cccccc',
|
||
|
'cccccc',
|
||
|
],
|
||
|
seats: {
|
||
|
h: {
|
||
|
price : 2500,
|
||
|
classes : 'student-class',
|
||
|
category: 'Student Seat'
|
||
|
},
|
||
|
},
|
||
|
naming : {
|
||
|
rows: ['1','','2','3'],
|
||
|
top : false,
|
||
|
getLabel : function (character, row, column) {
|
||
|
if (row == '1') {
|
||
|
return column;
|
||
|
} else if (row == '2') {
|
||
|
return column;
|
||
|
} else if (row == '3') {
|
||
|
return column;
|
||
|
}
|
||
|
},
|
||
|
},
|
||
|
legend : {
|
||
|
node : $('#legend'),
|
||
|
items : [
|
||
|
[ 'c', 'available', 'Dostępne miejsce'],
|
||
|
[ 'f', 'unavailable', 'Zajęte miejsce']
|
||
|
]
|
||
|
},
|
||
|
click: function () {
|
||
|
if (this.status() == 'available' && recalculateTotal(sc) < 1) {
|
||
|
//let's create a new <li> which we'll add to the cart items
|
||
|
$('<li> rząd '+ this.settings.row + ', miejsce '+this.settings.label+ ' <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)+1);
|
||
|
|
||
|
return 'selected';
|
||
|
} else if (this.status() == 'selected') {
|
||
|
//update the counter
|
||
|
$counter.text(sc.find('selected').length-1);
|
||
|
//and total
|
||
|
$total.text(recalculateTotal(sc)-1);
|
||
|
|
||
|
//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 += 1;//this.data().price;
|
||
|
});
|
||
|
|
||
|
return total;
|
||
|
}
|