wn-discoteam-theme/resources/js/app.js

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',
                },
            }
        );

        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;
        } 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();