127 lines
3.9 KiB
JavaScript
127 lines
3.9 KiB
JavaScript
import Alpine from 'alpinejs';
|
|
import Datepicker from 'flowbite-datepicker/Datepicker';
|
|
import de from '../../node_modules/flowbite-datepicker/js/i18n/locales/de.js';
|
|
Datepicker.locales.de = de.de;
|
|
import dayjs from 'dayjs';
|
|
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
dayjs.extend(customParseFormat);
|
|
import axios from 'axios';
|
|
import {error} from './toast.js';
|
|
import tippy from 'tippy.js';
|
|
|
|
import '../css/toastify.css';
|
|
import '../css/app.css';
|
|
import 'tippy.js/dist/tippy.css';
|
|
|
|
dayjs.extend(customParseFormat);
|
|
|
|
function initDatepicker(el) {
|
|
new Datepicker(el, {
|
|
autohide: true,
|
|
format: 'dd.mm.yyyy',
|
|
language: 'de',
|
|
update: true,
|
|
});
|
|
el.addEventListener('changeDate', function (event) {
|
|
event.target.dispatchEvent(new Event('input'));
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('[datepicker]').forEach((el) => initDatepicker(el));
|
|
|
|
window.Alpine = Alpine;
|
|
Alpine.data('form', () => ({
|
|
sent: false,
|
|
sending: false,
|
|
value: {
|
|
reason: '',
|
|
date: null,
|
|
guests: '',
|
|
birthday: null,
|
|
firstname: '',
|
|
lastname: '',
|
|
address: '',
|
|
zip: '',
|
|
location: '',
|
|
phone: '',
|
|
email: '',
|
|
misc: '',
|
|
parent_email: '',
|
|
parent_phone: '',
|
|
parent_name: '',
|
|
datenschutz: false,
|
|
},
|
|
isUnder18: function () {
|
|
if (!this.value.birthday || !this.value.date) {
|
|
return false;
|
|
}
|
|
|
|
return dayjs(this.value.birthday, 'DD.MM.YYYY').add(18, 'year').isAfter(dayjs(this.value.date, 'DD.MM.YYYY'));
|
|
},
|
|
onChangeDate: async function (n) {
|
|
const date = dayjs(this.value.date, 'DD.MM.YYYY');
|
|
|
|
if (!date.isValid()) {
|
|
return;
|
|
}
|
|
|
|
const response = await axios.post(
|
|
window.location.pathname,
|
|
{date: date.format('YYYY-MM-DD')},
|
|
{
|
|
headers: {
|
|
'X-Winter-Request-Handler': 'anfrage::onDateValidation',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
}
|
|
);
|
|
|
|
_paq.push(['trackEvent', 'anfrage', 'dateValidated', response.data.result ? 'valid' : 'invalid']);
|
|
|
|
tippy('[data-tippy-target]', {
|
|
content: response.data.result ? 'Dieser Termin ist voraussichtlich verfügbar' : 'Dieser Termin ist leider nicht buchbar',
|
|
showOnCreate: true,
|
|
trigger: 'manual',
|
|
theme: response.data.result ? 'success' : 'error',
|
|
placement: 'top',
|
|
onShown: function (t) {
|
|
window.setTimeout(() => t.hide(), 3000);
|
|
},
|
|
});
|
|
},
|
|
submit: async function () {
|
|
if (this.sending === true) {
|
|
return;
|
|
}
|
|
this.sending = true;
|
|
try {
|
|
await axios.post(window.location.pathname, this.value, {
|
|
headers: {
|
|
'X-Winter-Request-Handler': 'anfrage::onSubmit',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
},
|
|
});
|
|
this.sent = true;
|
|
window.scrollTo({
|
|
top: this.$el.getBoundingClientRect().top + window.scrollY - 50,
|
|
behaviour: 'smooth',
|
|
});
|
|
this.sending = false;
|
|
_paq.push(['trackEvent', 'anfrage', 'submitted']);
|
|
} catch (e) {
|
|
this.sending = false;
|
|
if (!e instanceof axios.AxiosError || !e.response || !e.response.data || !e.response.data['X_WINTER_ERROR_FIELDS']) {
|
|
_paq.push(['trackEvent', 'anfrage', 'submitInternalError']);
|
|
throw e;
|
|
}
|
|
const errors = e.response.data['X_WINTER_ERROR_FIELDS'];
|
|
_paq.push(['trackEvent', 'anfrage', 'submitValidationFailed']);
|
|
Object.keys(errors).forEach((k) => {
|
|
errors[k].forEach((msg) => error(msg));
|
|
});
|
|
}
|
|
},
|
|
}));
|
|
|
|
Alpine.start();
|