https://reservation.grandecentrepointploenchit.com/propertyibe2/re…/components/availability-panel.js?rv=1.4.23

1"use strict";
2
3(function ($) {
4  var $aChart = $('#availability_chart');
5  var $aDatepicker = $('#availability_datepicker');
6  var $aCheckInOut = $('#check_in_out');
7  var $aCheckin = $('#a_checkin');
8  var $aCheckout = $('#a_checkout');
9  /**
10   * Watch global reservation data
11   * @since 2019-09-12
12   */
13
14  watch(TL.app.reservation, function (prop, method, newValue, oldValue) {
15    switch (prop) {
16      case 'propertyId':
17        Update.accesscode(newValue);
18        break;
19
20      case 'checkin':
21      case 'checkout':
22        Update.checkInOut(TL.app.reservation.get('checkin'), TL.app.reservation.get('checkout'));
23        break;
24
25      case 'numofroom':
26        Update.numOfRoom(newValue);
27        1 !== Number(newValue) ? Update.multipleMode(true) : Update.multipleMode(false);
28        break;
29
30      case 'numofadult':
31        Update.numOfAdult(newValue);
32        break;
33
34      case 'numofchild':
35        Update.numOfChild(newValue);
36        break;
37
38      case 'accesscode':
39        Update.accesscode(newValue);
40        break;
41
42      default:
43        ;
44    }
45  });
46  /**
47   * Update methods
48   * @since 2019-09-13
49   */
50
51  var Update = {
52    propertyId: function propertyId(value) {
53      $('#a_propertyid').val(value);
54    },
55    checkInOut: function checkInOut(checkin, checkout) {
56      var $aCheckInOut = $('#check_in_out');
57      var $aCheckin = $('#a_checkin');
58      var $aCheckout = $('#a_checkout');
59
60      if (checkin && checkout) {
61        // set date formatted
62        var _ci = moment(checkin);
63
64        var _co = moment(checkout);
65
66        var checkinFormat = "".concat(_ci.format('DD MMM'), " ").concat(TL.ui.localeYear(_ci.get('year')));
67        var checkoutFormat = "".concat(_co.format('DD MMM'), " ").concat(TL.ui.localeYear(_co.get('year')));
68        $aCheckInOut.val(checkinFormat + ' - ' + checkoutFormat); // set value
69
70        $aCheckin.val(_ci.format('YYYY-MM-DD'));
71        $aCheckout.val(_co.format('YYYY-MM-DD'));
72      }
73    },
74    numOfRoom: function numOfRoom(value) {
75      $('#a_room').val(value).trigger('change');
76    },
77    numOfAdult: function numOfAdult(value) {
78      $('#a_adult').val(value).trigger('change');
79    },
80    numOfChild: function numOfChild(value) {
81      $('#a_child').val(value).trigger('change');
82    },
83    numOfAll: function numOfAll(room, adult, child) {
84      this.numOfRoom(room);
85      this.numOfAdult(adult);
86      this.numOfChild(child);
87    },
88    accesscode: function accesscode(value) {
89      $('#a_promo').val(value);
90    },
91    multipleMode: function multipleMode(bool) {
92      bool ? $aChart.addClass('-multiple-rooms') : $aChart.removeClass('-multiple-rooms');
93    }
94  };
95  /**
96   * Availability Panel
97   * @since 2019-06-07
98   */
99
100  $(document).on('click', '.js-view-availability-panel', function (event) {
101    event.preventDefault();
102    var source = event.currentTarget.hash || event.currentTarget.dataset.target;
103    $.magnificPopup.open({
104      type: 'inline',
105      items: {
106        src: source
107      },
108      mainClass: 'component-popup mfp-slide-up',
109      removalDelay: 200,
110      alignTop: true,
111      callbacks: {
112        open: function open() {
113          // Update fields from global API
114          Update.checkInOut(reservationAPI.get('s_checkin'), reservationAPI.get('s_checkout'));
115          Update.numOfAll(reservationAPI.get('s_numofroom'), reservationAPI.get('s_numofadult'), reservationAPI.get('s_numofchild'));
116          Update.accesscode(reservationAPI.get('s_accesscode'));
117          Update.propertyId(reservationAPI.get('propertyId'));
118          ac.setRange(new Date(reservationAPI.get('s_checkin')), new Date(reservationAPI.get('s_checkout')));
119          ac.init(); // Bind submit.a_form event for update global API data
120
121          $('#availability_form').on('submit.a_form', function (event) {
122            event.preventDefault();
123            var data = $(event.currentTarget).serializeArray();
124            var dataObj = {};
125            data.forEach(function (el) {
126              dataObj[el.name] = el.value;
127            });
128            TL.app.reservation.set('s_checkin', dataObj.a_checkin);
129            TL.app.reservation.set('s_checkout', dataObj.a_checkout);
130            TL.app.reservation.set('s_numofroom', dataObj.a_room);
131            TL.app.reservation.set('s_numofadult', dataObj.a_adult);
132            TL.app.reservation.set('s_numofchild', dataObj.a_child);
133            TL.app.reservation.set('s_accesscode', dataObj.a_promo);
134          });
135        },
136        close: function close() {
137          // Remove submita._form event
138          $('#availability_form').off('submit.a_form');
139        }
140      }
141    });
142  });
143
144  var is_buddhist = function is_buddhist(lang) {
145    var language_codes = ['th'];
146    return language_codes.includes(lang);
147  };
148  /**
149   * Availability Calendar
150   * @since 2019-05
151   */
152  // ดึงข้อมูลจาก global
153
154
155  var calendarAPI = TL.app.calendar;
156  var reservationAPI = TL.app.reservation; // สร้าง Calendar สำหรับ Availability form
157
158  var ac = new Calendar('#availability_datepicker', {
159    minDate: new Date(localData.h_currentdate),
160    buddhist: is_buddhist(localData.h_lang),
161    weekDayName: moment.weekdaysMin(),
162    monthName: moment.months(),
163    navigation: {
164      prevText: '<i class="far fa-arrow-left"></i>',
165      nextText: '<i class="far fa-arrow-right"></i>'
166    }
167  });
168  $aDatepicker.on('show.bs.collapse', function (event) {
169    $(document).on('click.avd', function (event) {
170      var excerpt = '.btn-day';
171
172      if (!$(event.target).closest($aDatepicker).length && !$(event.target).closest(excerpt).length) {
173        $aDatepicker.collapse('hide');
174      }
175    });
176    $aDatepicker.on('ready', function (ev) {
177      Update.checkInOut(moment(ac.checkin).format('YYYY-MM-DD'), moment(ac.checkout).format('YYYY-MM-DD'));
178      $aDatepicker.collapse('hide');
179    });
180  });
181  $aDatepicker.on('hide.bs.collapse', function () {
182    $(document).off('click.avd');
183  });
184
185  function initPropertyDailyAvailability() {
186    $('#availability_datepicker').on('render', function (ev) {
187      var NA = window.ListNotAvailable;
188
189      if (NA) {
190        for (var i = 0; i < NA.length; i++) {
191          var d = NA[i];
192          var $el = $('#availability_datepicker').find("[data-date-format=\"".concat(d, "\"]"));
193          $el.attr('disabled', 'disabled');
194          $el.parent().addClass("".concat(ac.className.isDisabled, " ").concat(ac.className.isDisabledDate));
195        }
196      }
197    });
198  }
199
200  function initAvailabilityPanel() {
201    ac.checkin = reservationAPI.get('s_checkin');
202    ac.checkout = reservationAPI.get('s_checkout');
203    ac.weekDayName = moment.weekdaysMin();
204    ac.monthName = moment.months();
205    ac.buddhist = is_buddhist(localData.h_lang);
206    $('#availability_datepicker').on('stateChange', function (ev) {
207      if ('ready' === ev.detail) {
208        Update.checkInOut(moment(ac.checkin).format('YYYY-MM-DD'), moment(ac.checkout).format('YYYY-MM-DD'));
209        $(ev.currentTarget).collapse('hide');
210      }
211    });
212    initPropertyDailyAvailability();
213    $('#a_room').on('change', function () {
214      1 !== Number(this.value) ? Update.multipleMode(true) : Update.multipleMode(false);
215    });
216    ac.init(true);
217  }
218
219  if ('undefined' === typeof window.InitAvailabilityPanel) {
220    window.InitAvailabilityPanel = initAvailabilityPanel;
221  }
222})(jQuery);
223//# sourceMappingURL=availability-panel.js.map