Doesn't work on mobile
Opened this issue · 4 comments
cmbasse commented
I've tested on both iPhone using safari and android using chrome and the seating chart doesn't render. This is the code I used.
var $cart = $('#selected-seats'),
$counter = $('#counter'),
$total = $('#total'),
sc = $('#seat-map').seatCharts({
map: [
'___ggggggggggg_ggggggggggg___',
'gggggggggggggg_gggggggggggggg',
'gggggggggggggg_gggggggggggggg',
'_ggggggggggggg_ggggggggggggg_',
'_ggggggggggggg_ggggggggggggg_',
'_ggggggggggggg_ggggggggggggg_',
'__gggggggggggg_gggggggggggg__',
'__gggggggggggg_gggggggggggg__',
'__gggggggggggg_gggggggggggg__',
'__gggggggggggg_gggggggggggg__',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
'___ggggggggggg_ggggggggggg___',
],
seats: {
g: {
general_price : 12,
student_price : 10,
classes : 'economy-class', //your custom CSS class
category: 'General Seating'
}
},
naming : {
top : false,
rows: ['A','B','C','D','E','F','G','H','J','K','L','M','N','O','P','Q','R','S','T','U'],
columns: ['27','25','23','21','19','17','15','13','11','9','7','5','3','1','0',
'2','4','6','8','10','12','14','16','18','20','22','24','26','28'],
getLabel : function (character, row, column) {
return row + '' + column;
},
},
legend : {
node : $('#legend'),
items : [
[ 'g', 'available', 'General Seating'],
[ 'f', 'unavailable', 'Already Booked'],
[ 't', 'enqued', 'Potential Conflict']
]
},
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+' <a href="#" class="cancel-cart-item">[cancel]</a></li>')
.attr('id', 'cart-item-'+this.settings.id)
.attr('name', this.settings.id)
.data('seatId', this.settings.id)
.appendTo($cart);
$counter.text(sc.find('selected').length+1);
$total.text(recalculateTotal(sc)+this.data().general_price);
var tosend = {
seat: this.settings.id,
user: $('#user').val(),
pid: $('#pid').val(),
"_token": "{{ csrf_token() }}"
};
$.ajax({
cache: "false",
type: "POST",
data: tosend,
url: "{{url()->current() . '/reserve'}}",
dataType: "json",
error: function(jqXHR, textStatus, errorThrown) {
console.log("The Problem: ", textStatus, errorThrown);
console.log(jqXHR);
},
success: function(response){
console.log("Seat added to que");
}//Close success
});//Close ajax
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().general_price);
//remove the item from our cart
$('#cart-item-'+this.settings.id).remove();
var tosend = {
seat: this.settings.id,
user: $('#user').val(),
pid: $('#pid').val(),
"_token": "{{ csrf_token() }}"
};
$.ajax({
cache: "false",
type: "DELETE",
data: tosend,
url: "{{url()->current() . '/reserve'}}",
dataType: "json",
error: function(jqXHR, textStatus, errorThrown) {
console.log("The Problem: ", textStatus, errorThrown);
console.log(jqXHR);
},
success: function(response){
console.log("Seat removed from que");
}//Close success
});//Close ajax
return 'available';
} else if (this.status() == 'unavailable') {
//seat has been already booked
return 'unavailable';
} else {
return this.style();
}
}
});
checkReservations(sc);
setInterval(function(){checkReservations(sc)}, 20000)
});
//this will handle "[cancel]" link clicks
$('#selected-seats').on('click', '.cancel-cart-item', function () {
sc.get($(this).parents('li:first').data('seatId')).click();
});
mateuszmarkowski commented
Does the demo map render for you?
cmbasse commented
Yes the demo worked. I reworked my js includes and where they load on the page and I can now get mine to render but the seats aren't clickable (i just updated click code it in my original post)
mateuszmarkowski commented
Are you seeing any JS warnings/errors in the console?
cmbasse commented
No I've been playing around with it a little and could it be that the map is too big? If on my phone I click the display desktop site it works. I'm using bootstrap to make the site mobile friendly could this be the issue?