141 lines
5.5 KiB
JavaScript
141 lines
5.5 KiB
JavaScript
$(document).ready(function() {
|
|
|
|
function createMap(seats_rows, seats_container) {
|
|
let $cart = $('#selected-seats');
|
|
let seat_selected = false;
|
|
|
|
seats_container.seatCharts({
|
|
map: seats_rows,
|
|
naming: {
|
|
rows: ['', '', '', ''],
|
|
top: false,
|
|
left: false,
|
|
},
|
|
legend: {
|
|
node: $('#legend'),
|
|
items: [
|
|
['c', 'available', 'Dostępne miejsce'],
|
|
['f', 'unavailable', 'Zajęte miejsce']
|
|
]
|
|
},
|
|
click: function () {
|
|
if (this.status() === 'available' && !seat_selected) {
|
|
// let's create a new <li> which we'll add to the cart items
|
|
$('<span> ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[x]</a></span>')
|
|
.attr('id', 'cart-item-' + this.settings.id)
|
|
.data('seatId', this.settings.id)
|
|
.appendTo($cart);
|
|
seat_selected = true;
|
|
return 'selected';
|
|
} else if (this.status() === 'selected') {
|
|
//remove the item from our cart
|
|
$('#cart-item-' + this.settings.id).remove();
|
|
$('#item-' + this.settings.id).remove();
|
|
seat_selected = false;
|
|
return 'available';
|
|
} else if (this.status() === 'unavailable') {
|
|
return 'unavailable';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
}
|
|
});
|
|
|
|
$('#selected-seats').on('click', '.cancel-cart-item', function () {
|
|
const id = $(this).parent().data('seatId');
|
|
$('#seat-map').find(`#${id}`).click();
|
|
});
|
|
}
|
|
|
|
function createTwoPartsMap(seat_rows_first, seat_rows_second, seat_container_first, seat_container_second) {
|
|
let $cart = $('#selected-seats');
|
|
let seat_selected = false;
|
|
|
|
seat_container_first.seatCharts({
|
|
map: seat_rows_first,
|
|
naming: {
|
|
rows: ['', '', '', ''],
|
|
top: false,
|
|
left: false,
|
|
},
|
|
legend: {
|
|
node: $('#legend'),
|
|
items: [
|
|
['c', 'available', 'Dostępne miejsce'],
|
|
['f', 'unavailable', 'Zajęte miejsce']
|
|
]
|
|
},
|
|
click: function () {
|
|
if (this.status() === 'available' && !seat_selected) {
|
|
// //let's create a new <li> which we'll add to the cart items
|
|
$('<span> ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[x]</a></span>')
|
|
.attr('id', 'cart-item-' + this.settings.id)
|
|
.data('seatId', this.settings.id)
|
|
.appendTo($cart);
|
|
seat_selected = true;
|
|
return 'selected';
|
|
} else if (this.status() === 'selected') {
|
|
// //remove the item from our cart
|
|
$('#cart-item-' + this.settings.id).remove();
|
|
$('#item-' + this.settings.id).remove();
|
|
seat_selected = false;
|
|
return 'available';
|
|
} else if (this.status() === 'unavailable') {
|
|
return 'unavailable';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
}
|
|
});
|
|
|
|
seat_container_second.seatCharts({
|
|
map: seat_rows_second,
|
|
naming: {
|
|
rows: ['', '', '', ''],
|
|
top: false,
|
|
left: false,
|
|
},
|
|
click: function () {
|
|
if (this.status() === 'available' && !seat_selected) {
|
|
// //let's create a new <li> which we'll add to the cart items
|
|
$('<span> ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[x]</a></span>')
|
|
.attr('id', 'cart-item-' + this.settings.id)
|
|
.data('seatId', this.settings.id)
|
|
.appendTo($cart);
|
|
seat_selected = true;
|
|
return 'selected';
|
|
} else if (this.status() === 'selected') {
|
|
// //remove the item from our cart
|
|
$('#cart-item-' + this.settings.id).remove();
|
|
$('#item-' + this.settings.id).remove();
|
|
seat_selected = false;
|
|
return 'available';
|
|
} else if (this.status() === 'unavailable') {
|
|
return 'unavailable';
|
|
} else {
|
|
return this.style();
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
$('#selected-seats').on('click', '.cancel-cart-item', function () {
|
|
const id = $(this).parent().data('seatId');
|
|
$('#twoparts-map').find(`#${id}`).click();
|
|
});
|
|
}
|
|
|
|
const seat_map = $('#room_arrangement').val().split('++');
|
|
if (seat_map.length > 4) {
|
|
const first_part = seat_map.slice(0, 4);
|
|
const second_part = seat_map.slice(5);
|
|
const seats_container_first = $('#seat-map-first');
|
|
const seats_container_second = $('#seat-map-second');
|
|
createTwoPartsMap(first_part, second_part, seats_container_first, seats_container_second);
|
|
} else {
|
|
const seats_container = $('#seat-map');
|
|
createMap(seat_map, seats_container);
|
|
}
|
|
});
|
|
|