atcheck/public/js/map/seatchart.js

var firstSeatLabel = 1;

$(document).ready(function() {
    const seat_map = $('#room_arrangement').val().split('++');

    var $cart = $('#selected-seats'),
        seatNumber = '',
        $counter = $('#counter'),
        $total = $('#total'),
        sc = $('#seat-map').seatCharts({
        map: seat_map,
        seats: {
            h: {
                price   : 2500,
                classes : 'student-class',
                category: 'Student Seat'
            },
        },
        naming : {
            rows: ['','','',''],
            top : false,
            left: 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
                $('<span> '+this.settings.label+ '</span>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);

                seatNumber = 'rząd: ' + this.settings.row + ' miejsce: ' + this.settings.label;
                localStorage.setItem('myElement', seatNumber);
                /*
                 * 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();
                $('#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;
}