for reservation units, the compoent js file also need updated for the latest the version of reservation. please check my code below. ps. can we make not assets injection from php code(insert js and css) ? because if I want use some Vuejs lib or Angularjs. So if you have any solution that can help me enable/disable the default css/js output in template?

thanks

Mike eg. http://element.eleme.io/#/en-US/component/quickstart that will be great.

/**
 * Reservation units form.
 *
 * @param $ jQuery
 */
var reservationform = function($) {

    if ($("#date").length > 0) {
        var $dateinput = $("#date").pickadate({
            format: datepicker_format(dateFormat),
            min: "0",
            disable: get_work_days(disableDays, firstDay),
            firstDay: firstDay,
            onSet: function (context) {
                loadBookedTimes(new Date(context.select));
            }
        });

        var datepicker = $dateinput.pickadate('picker');

        if ($("#time").length > 0) {

            $("#time").pickatime({
                format: datepicker_format(timeFormat),
                min: convertTimeToArray(startWork),
                max: convertTimeToArray(finishWork),
                interval: timeInterval,
                onSet: function () {
                    var date = datepicker.get('value');
                    loadAvailableCapacity(date, this.get('value'));
                }
            });

            disableAllTimes();
            disableAllQuantities();
        }
    }
};
/**
 * Disable all timepicker dates.
 */
function disableAllTimes()
{
    var $input = $("#time").pickatime();
    var picker = $input.pickatime("picker");
    picker.set("disable", [{
        from: [0, 0],
        to: [23, 45]
    }]);
}
/**
 * Load booked times for given date and disable them in timepicker.
 *
 * @param selectedDate
 */
 function loadBookedTimes(date) {

     // convert date to dd/mm/yyyy format
     var day = (date.getDate() < 10 ? '0' : '') + date.getDate();
     var month = date.getMonth() + 1;
     month = (month < 10 ? '0' : '') + month;
     var selectedDate = day + '/' + month + '/' + date.getFullYear();

     // get today date
     var dateNow = new Date();
     var dateNowFormat = (dateNow.getDate() < 10 ? '0' : '') + dateNow.getDate();
     dateNowFormat += '/' + (dateNow.getMonth() < 9 ? '0' : '') + (dateNow.getMonth() + 1);
     dateNowFormat += '/' + dateNow.getFullYear();

     // get selected date
     var $input = $('#time').pickatime();
     var picker = $input.pickatime('picker');

     picker.set('disable', false);
     var dates = [];

     // hide pass timeslots when is today
     var isToday = dateNowFormat === selectedDate;
     if (isToday) {
         dates.push({
             from: [0, 0],
             to: [dateNow.getHours(), Math.floor(dateNow.getMinutes() / timeInterval) * timeInterval]
         });
     }

     // convert taken time slots to array
     if (selectedDate in booked) {
         $.each(booked[selectedDate], function() {
             dates.push(convertTimeToArray(this));
         });
     }

     picker.set('disable', dates);
 }

/**
 * Load available capacity for selected date and time.
 *
 * @param selectedDate
 * @param selectedTime
 */
function loadAvailableCapacity(selectedDate, selectedTime)
{
    if (booked[selectedDate] !== undefined && booked[selectedDate][selectedTime] !== undefined) {
        var capacity = booked[selectedDate][selectedTime];
        if (capacity[0] > 0) {
            showOptionsFor(capacity[1], capacity[0]);
        }

    } else {
        showOptionsFor(minimumCapacity, maximumCapacity);
    }
}

/**
 * Show quantity option by capacity.
 *
 * @param minimum
 * @param capacity
 */
function showOptionsFor(minimum, capacity)
{
    if (!$.isNumeric(minimum)) {
        minimum = minimumCapacity;
    }

    if (!$.isNumeric(capacity)) {
        capacity = maximumCapacity;
    }

    var input = $('#passengers');
    disableAllQuantities();
    for (var i = minimum; i <= capacity; i++) {
        input.append($("<option></option>").attr("value", i).text(i));
    }
    input.trigger('updated');
}

/**
 * Remove all quantity options.
 */
function disableAllQuantities()
{
    var input = $('#passengers');
    input.find('option:not(:disabled)').remove();
    input.trigger('updated');
}

jQuery(document).ready(reservationform);

Last updated 7 years ago

Hi mike. Yes, you are right, there is some work need to be done with last reservation update. I'm working on it right now. I'll send you an update after finish it.

Thanks for letting me know.

Version 1.1.0 ready in the Market, please Update! :-)

issue fixed, Thanks!