https://www.spiez.com/_assets/f5cc445876d7372e7a3652fce7568636/JavaScript/load/tosc5.js?1772795188

1//import {baseSettings} from '../../../../../../../ndsbase/Resources/Public/Assets/Js/Base/settings.min.js';
2//import {defaultSettings as flatpickrSettings} from '../../../../../../../ndspatterns/Resources/Public/Assets/Js/Components/Flatpickr/flatpickrModule.min.js';
3//import {customSettings} from '../../../../../../../ndstemplate/Resources/Public/Assets/Js/Settings/customSettings.js';
4//import {isSessionStorageNameSupported} from '../../../../../../../ndsbase/Resources/Public/Assets/Js/Base/helperLib.min.js';
5
6const ibesearchSelector = '.js-ibesearch-form-tosc5',
7  ibesearchDatepickerSelector = '.js-ibesearch-dates',
8  ibesearchDateFromTextSelector = '.js-ibesearch-dates-from',
9  ibesearchDateToTextSelector = '.js-ibesearch-dates-to',
10  ibesearchDatesA11yFieldsSelector = '.js-ibesearch-a11y-date-',
11  ibesearchSelectChildrenSelector = '.js-ibesearch-children',
12  ibesearchSelectChildrenFieldSelector = '.js-ibesearch-children-field',
13  ibesearchSelectAdultsSelector = '.js-ibesearch-adults',
14  ibesearchSelectAdultsFieldSelector = '.js-ibesearch-adults-field';
15
16let storageSupported;
17
18function initDatepicker(datepickerElem, ibesearchForm) {
19
20  const hasPreselectedDate = datepickerElem.classList.contains('is-preselected');
21
22  const formatDateForInputField = function (date, noHyphens) {
23    const glue = (noHyphens) ? '' : '-';
24    return date.getFullYear() + glue + ('0' + (date.getMonth() + 1)).slice(-2) + glue + ('0' + date.getDate()).slice(-2);
25  };
26
27  const formatDateForText = function (date) {
28    let day = date.getDate();
29    if (day < 10) {
30      day = '0' + day;
31    }
32    let month = date.getMonth() + 1;
33    if (month < 10) {
34      month = '0' + month;
35    }
36    return day + '.' + month + '.' + date.getFullYear();
37  };
38
39  const getInitDateValue = function (type) {
40    let dateValue = datepickerElem.getAttribute('data-date-' + type);
41    if (storageSupported && !hasPreselectedDate && sessionStorage.getItem('ndsibesearch_date_' + type)) {
42      let date = new Date(sessionStorage.getItem('ndsibesearch_date_' + type));
43      dateValue = formatDateForText(date);
44    }
45    return dateValue;
46  };
47
48  const updateDatepickerFromStorage = function () {
49    if (storageSupported
50      && !hasPreselectedDate
51      && sessionStorage.getItem('ndsibesearch_date_start')
52      && sessionStorage.getItem('ndsibesearch_date_end')) {
53      const startDate = new Date(sessionStorage.getItem('ndsibesearch_date_start'));
54      const endDate = new Date(sessionStorage.getItem('ndsibesearch_date_end'));
55      updateDatepicker(startDate, endDate);
56    }
57  };
58
59  const updateDatepicker = function (startDate, endDate) {
60    updateDaterangeField(formatDateForText(startDate), formatDateForText(endDate));
61    updateA11yFields(startDate, endDate);
62    ibesearchForm.querySelector('.js-ibesearch-children-ages-enddate').innerHTML = formatDateForText(endDate);
63  };
64
65  const updateDaterangeField = function (startDateStr, endDateStr) {
66    datepickerElem.querySelector(ibesearchDateFromTextSelector).innerHTML = startDateStr;
67    datepickerElem.querySelector(ibesearchDateToTextSelector).innerHTML = endDateStr;
68  };
69
70  const updateA11yFields = function (startDate, endDate) {
71    datepickerElem.querySelector(ibesearchDatesA11yFieldsSelector + 'start').value = formatDateForInputField(startDate);
72    datepickerElem.querySelector(ibesearchDatesA11yFieldsSelector + 'end').value = formatDateForInputField(endDate);
73  };
74
75  const langKey = baseSettings.lang || 'de';
76  const langSettings = flatpickrSettings.lang[langKey];
77  const options = {
78    defaults: extend({}, flatpickrSettings.options, langSettings.options)
79  };
80  let flatpickrTranslations = langSettings.translations;
81  if (customSettings.flatpickr.lang.hasOwnProperty(langKey)) {
82    flatpickrTranslations = extend({}, langSettings.translations, customSettings.flatpickr.lang[langKey].translations);
83  }
84
85  const startDate = getInitDateValue('start');
86  const endDate = getInitDateValue('end');
87
88  updateDatepickerFromStorage();
89
90  let datepickerOptions = extend({}, options.defaults, {
91    mode: 'range',
92    defaultDate: [startDate, endDate],
93    altInput: false,
94    onChange: function (selectedDates, dateStr) {
95      if (Array.isArray(selectedDates) && selectedDates.length === 2) {
96        updateDatepicker(selectedDates[0], selectedDates[1], dateStr);
97      }
98    }
99  });
100  flatpickr.localize(flatpickrTranslations);

101  flatpickr(datepickerElem, datepickerOptions);
102}
103
104function initSelectAdults(selectAdultsElem, selectAdultsFieldElem, ibesearchForm) {
105  if (storageSupported && sessionStorage.getItem('ndsibesearch_adults')) {
106    selectAdultsFieldElem.querySelector('.js-ibesearch-step-value').innerHTML = sessionStorage.getItem('ndsibesearch_adults');
107    selectAdultsElem.value = sessionStorage.getItem('ndsibesearch_adults');
108  }
109}
110
111const getChildrenAges = function (ibesearchForm) {
112  const ageFields = ibesearchForm.querySelectorAll('.js-ibesearch-child-age-select');
113  let ageValues = [];
114  ageFields.forEach(function (ageField) {
115    ageValues.push(ageField.value);
116  });
117  return ageValues;
118};
119
120function initSelectChildren(selectChildrenElem, selectChildrenFieldElem, ibesearchForm) {
121  const agesContainerSelector = '.js-ibesearch-children-ages',
122    agesWrapSelector = '.js-ibesearch-children-ages-wrap',
123    ageFieldSelector = '.js-ibesearch-child-age-field',
124    ageFieldAgeSelector = '.js-ibesearch-child-age-select',
125    clonedItemClassname = 'cloned-select-age',
126    clonedItemSelector = '.' + clonedItemClassname;
127
128  const childrenAgesContainer = ibesearchForm.querySelector(agesContainerSelector);
129  const childrenAgesWrap = ibesearchForm.querySelector(agesWrapSelector);
130  const defaultAge = childrenAgesContainer.getAttribute('data-default-age');
131  let childrenAges = false;
132
133  const updateChildrenFields = function (childrenAges) {
134    const countChildren = selectChildrenElem.value;
135    const firstChildAgeElem = childrenAgesWrap.querySelector(ageFieldSelector);
136    const clonedAgeElements = childrenAgesWrap.querySelectorAll(clonedItemSelector);
137    const errors = ibesearchForm.querySelector('.js-ibesearch-errors');
138
139    if (typeof childrenAges === "undefined" && storageSupported && sessionStorage.getItem('ndsibesearch_children_ages')) {
140      childrenAges = sessionStorage.getItem('ndsibesearch_children_ages').split(',');
141    }
142
143    clonedAgeElements.forEach(function (el, i) {
144      childrenAgesWrap.removeChild(el);
145    });
146
147    if (countChildren < 1) {
148      childrenAgesContainer.classList.add('hidden');
149      errors.classList.add('hidden');
150      firstChildAgeElem.querySelector(ageFieldAgeSelector).setAttribute('disabled', 'disabled');
151
152      if (storageSupported) {
153        sessionStorage.setItem('ndsibesearch_children', 0);
154      }
155    } else {
156      firstChildAgeElem.querySelector(ageFieldAgeSelector).removeAttribute('disabled');
157      if (childrenAges && childrenAges[0]) {
158        firstChildAgeElem.querySelector(ageFieldAgeSelector).value = childrenAges[0];
159      }
160      if (countChildren > 1) {
161        for (let i = 2; i <= countChildren; i++) {
162          let newItem = firstChildAgeElem.cloneNode(true);
163          newItem.classList.add(clonedItemClassname);
164          newItem.querySelector(ageFieldAgeSelector).setAttribute('name', 'childAge' + i);
165          newItem.querySelector(ageFieldAgeSelector).value = (childrenAges && childrenAges[i - 1]) ? childrenAges[i - 1] : defaultAge;
166          childrenAgesWrap.appendChild(newItem);
167        }
168      }
169      childrenAgesContainer.classList.remove('hidden');
170    }
171
172    if (storageSupported) {
173      const childAgeSelects = childrenAgesWrap.querySelectorAll(ageFieldSelector);
174
175      childAgeSelects.forEach(function (childAgeSelectElem) {
176        childAgeSelectElem.addEventListener('change', function () {
177          const childrenAges = getChildrenAges(ibesearchForm);
178          if (childrenAges.length > 0) {
179            sessionStorage.setItem('ndsibesearch_children_ages', childrenAges.join());
180          }
181        });
182      });
183    }
184  };
185
186  if (storageSupported && sessionStorage.getItem('ndsibesearch_children') && sessionStorage.getItem('ndsibesearch_children_ages')) {
187    selectChildrenElem.value = sessionStorage.getItem('ndsibesearch_children');
188    selectChildrenFieldElem.querySelector('.js-ibesearch-step-value').innerHTML = sessionStorage.getItem('ndsibesearch_children');
189
190    if (sessionStorage.getItem('ndsibesearch_children_ages').length > 0) {
191      childrenAges = sessionStorage.getItem('ndsibesearch_children_ages').split(',');
192    }
193    updateChildrenFields(childrenAges);
194  }
195
196  selectChildrenElem.addEventListener('change', function () {
197    updateChildrenFields();
198  });
199}
200
201function initSubmitForm(ibesearchForm) {
202

203  const saveFormValuesInStorage = function () {
204    if (storageSupported) {
205      const datepickerElem = ibesearchForm.querySelector(ibesearchDatepickerSelector);
206      if (datepickerElem !== null) {
207        let startDate = new Date(datepickerElem.querySelector('.js-ibesearch-a11y-date-start').value);
208        let endDate = new Date(datepickerElem.querySelector('.js-ibesearch-a11y-date-end').value);
209        sessionStorage.setItem('ndsibesearch_date_start', startDate);
210        sessionStorage.setItem('ndsibesearch_date_end', endDate);
211
212      }
213      const selectAdultsElem = ibesearchForm.querySelector(ibesearchSelectAdultsSelector);
214      if (selectAdultsElem !== null) {
215        sessionStorage.setItem('ndsibesearch_adults', selectAdultsElem.value);
216      }
217      const selectChildrenElem = ibesearchForm.querySelector(ibesearchSelectChildrenSelector);
218      if (selectChildrenElem !== null) {
219        sessionStorage.setItem('ndsibesearch_children', selectChildrenElem.value);
220      }
221      const childrenAges = getChildrenAges(ibesearchForm);
222      if (childrenAges.length > 0) {
223        sessionStorage.setItem('ndsibesearch_children_ages', childrenAges.join());
224      }
225    }
226  };
227
228  const validate = function () {
229    const childrenCount = ibesearchForm.querySelector('.js-ibesearch-children');
230    const errors = ibesearchForm.querySelector('.js-ibesearch-errors');
231    const childrenSelects = ibesearchForm.querySelectorAll('.js-ibesearch-child-age-select');
232    let errorCount = 0;
233
234    if (childrenCount.value > 0) {
235      childrenSelects.forEach(function (el, i) {
236        if (el.value >= 0) {
237          el.parentNode.classList.remove('ibesearch-error');
238        } else {
239          el.parentNode.classList.add('ibesearch-error');
240          errorCount++;
241        }
242      });
243
244      if (errorCount > 0) {
245        errors.classList.remove('hidden');
246        return false;
247      } else {
248        errors.classList.add('hidden');
249        return true;
250      }
251    } else {
252      errors.classList.add('hidden');
253    }
254
255    return true;
256  };
257
258  ibesearchForm.addEventListener('submit', function (event) {
259    event.preventDefault();
260    let ageValues = [];
261
262    const childAgeSelectElems = ibesearchForm.querySelectorAll('.js-ibesearch-child-age-select:not([disabled])');

263    childAgeSelectElems.forEach(function (childAgeSelectElem) {
264      ageValues.push(parseInt(childAgeSelectElem.value));
265    });
266
267    const dateStart = ibesearchForm.querySelector('.js-ibesearch-a11y-date-start').value;
268    const dateEnd = ibesearchForm.querySelector('.js-ibesearch-a11y-date-end').value;
269    const adults = parseInt(ibesearchForm.querySelector('.js-ibesearch-adults').value);
270
271    const tosc5Path = ibesearchForm.dataset.tosc5Path;
272    const tosc5LinkKey = ibesearchForm.dataset.tosc5Linkkey;
273
274    const units = 1;
275
276    saveFormValuesInStorage();
277
278    if (validate()) {
279      tosc5submit(tosc5LinkKey, dateStart, dateEnd, units, adults, ageValues, tosc5Path);
280    }
281  });
282
283  const tosc5submit = function(linkKey, dateFrom, dateTo, units, adults, children, callbackPath) {
284    let guestDataObj = {
285      dateFrom: new Date(dateFrom),
286      dateTo: new Date(dateTo),
287      occupancy1: {
288        units: units,
289        adults: adults,
290        children: children
291      }
292    };
293    dw.accommodationQuickFind(
294      linkKey,
295      guestDataObj,
296      function() {
297        window.location.href = callbackPath
298      });
299  }
300}
301
302function initIbesearch() {
303  const ibesearchForms = document.querySelectorAll(ibesearchSelector);
304  storageSupported = isSessionStorageNameSupported() && customSettings.ndsibesearch && !!customSettings.ndsibesearch.useSessionStorage;
305  ibesearchForms.forEach(function (ibesearchForm) {
306    const datepickerElem = ibesearchForm.querySelector(ibesearchDatepickerSelector);
307    if (datepickerElem !== null) {
308      initDatepicker(datepickerElem, ibesearchForm);
309    }
310    const selectChildrenElem = ibesearchForm.querySelector(ibesearchSelectChildrenSelector);
311    const selectChildrenFieldElem = ibesearchForm.querySelector(ibesearchSelectChildrenFieldSelector);
312    if (selectChildrenElem !== null) {
313      initSelectChildren(selectChildrenElem, selectChildrenFieldElem, ibesearchForm);
314    }
315    const selectAdultsElem = ibesearchForm.querySelector(ibesearchSelectAdultsSelector);
316    const selectAdultsFieldElem = ibesearchForm.querySelector(ibesearchSelectAdultsFieldSelector);
317    if (selectAdultsElem !== null) {
318      initSelectAdults(selectAdultsElem, selectAdultsFieldElem, ibesearchForm);
319    }
320
321    initSubmitForm(ibesearchForm);
322  });
323}
324
325if (document.querySelector(ibesearchSelector) !== null) {
326  initIbesearch();
327}