Show upcoming scheduled events in a table.

booking-form.liquid

{% comment %}
BookThatApp auto installed snippet. Changes made to this file will be lost if installed again.
{% endcomment %}

{% if product.metafields.bookthatapp.product_id %}

<table id="events" style="width:100%">
<tr>
    <th colspan="4">Upcoming Classes</th>
</tr>
<tr>
    <td colspan="4" class="loading">Loading...</td>
</tr>
</table>

{{ 'date.js' | asset_url | script_tag }}
<script type="text/javascript">
    var start = Date.today(), end = Date.today().add(6).months();
    {% assign account = shop.permanent_domain | split: '.' %}
    $.getJSON("http://{{ account.first }}.bookthatapp.com/availability/schedule.json?callback=?", {
        start: start.toString("yyyy-MM-dd"),
        end: end.toString("yyyy-MM-dd"),
        handle: "{{ product.handle }}"
    }, function (data) {
        var events = $.map(data.schedule, function (item, n) {
            return $.extend(item, {
                start:new Date(item.start[0], item.start[1] - 1, item.start[2], item.start[3], item.start[4], item.start[5]),
                end:new Date(item.end[0], item.end[1] - 1, item.end[2], item.end[3], item.end[4], item.end[5])
            })
        });
        
        $('#events td.loading').parent().remove();
        $.each(events, function(i, e) {
            if (i > 15) {
                return false;
            }
            
            var row = $('<tr>'),
                radio = $('<input type="radio" name="properties[booking-start]">'),
                available = (e.bookingCount < e.capacity),
                remaining = (e.capacity - e.bookingCount);
                
            radio.val(e.start.toString("yyyy-MM-ddTHH:mm"));
            
            row.append($('<td>').append(radio));
            row.append($('<td>').append(e.start.toString('dd MMM yyyy hh:mm tt')));
            row.append($('<td>').append(e.start.getDayName()));
            if (available) {
                if (remaining < 4) {
                    row.append($('<td>').append(remaining + (remaining == 1 ? ' Place' : ' Places') + ' Left'));
                } else {
                    row.append($('<td>').append('Space Available'));
                }
            } else {
                row.append($('<td>').append('Booked Out'));
                radio.attr('disabled', 'disabled');
            }
            $('#events').append(row);
        })
            
        var start = document.location.href.split('?');
        if (start.length > 1) {
            var time = start[1].split('='), ts = new Date(parseInt(time[1], 10));
            ts.setTime(ts.getTime() + ts.getTimezoneOffset() * 60000);
            $("form[action='/cart/add'] input[value*='" + ts.toString("yyyy-MM-ddTHH:mm") + "']").attr('checked', 'checked');
        } else {
            $("form[action='/cart/add'] input[type=radio]:first").attr('checked', 'checked');
        }
    });
</script>
{% endif %}