89 lines
2.5 KiB
JavaScript
89 lines
2.5 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 '../css/toastify.css';
|
|
import '../css/app.css';
|
|
|
|
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'));
|
|
},
|
|
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;
|
|
} catch (e) {
|
|
this.sending = false;
|
|
if (!e instanceof axios.AxiosError || !e.response || !e.response.data || !e.response.data['X_WINTER_ERROR_FIELDS']) {
|
|
throw e;
|
|
}
|
|
const errors = e.response.data['X_WINTER_ERROR_FIELDS'];
|
|
Object.keys(errors).forEach((k) => {
|
|
errors[k].forEach((msg) => error(msg));
|
|
});
|
|
}
|
|
},
|
|
}));
|
|
|
|
Alpine.start();
|