wi-events/assets/eventregistration.js

import scrollToElement from './scrollToElement.js';

var toastedOptions = {
    position: 'top-right',
    duration: 3000,
    fitToScreen: true,
    fullWidth: true,
    theme: 'material',
};

export default function (toasted) {
    var toasted = new toasted(toastedOptions);

    return {
        data: {
            event_id: null,
            firstname: '',
            lastname: '',
            address: '',
            zip: '',
            location: '',
            food_preferences: [],
            activity: 'Teilnehmer*in',
            gender: '',
            email: '',
            birthday: '',
            agegroup: '',
            group: '',
            agegroup_leader: '',
            emergency_phone: '',
            phone: '',
            misc: '',
            foto: false,
            parent: false,
            vorteam: null,
        },
        meta: {
            finished: false,
            submitRequest: null,
            errorFields: [],
            active: 0,
            slides: [
                'Persönliches',
                'Veranstaltung',
                'Sonstiges'
            ],
            activities: [
                {"id": "Orga", "name": "Orga"},
                {"id": "Teilnehmer*in", "name": "Teilnehmer*in"},
            ],
            genders: [
                {"id": "Männlich", "name": "Männlich"},
                {"id": "Weiblich", "name": "Weiblich"},
                {"id": "Divers", "name": "Divers"},
            ],
            groups: [
                {"id": "Gallier", "name": "Gallier (Wuppertal)"},
                {"id": "Gandalf", "name": "Gandalf (SG-Mangenberg)"},
                {"id": "Gravenrode", "name": "Gravenrode (SG-Gräfrath)"},
                {"id": "Lennep", "name": "Lennep (RS-Lennep)"},
                {"id": "Silva", "name": "Silva (SG-Wald)"},
                {"id": "Sugambrer", "name": "Sugambrer (SG-Höhscheid)"},
                {"id": "Tenkterer", "name": "Tenkterer (SG-Löhdorf)"},
                {"id": "von Berg", "name": "von Berg (SG-Ohligs)"},
            ],
            agegroups: [
                {"id": "Biber", "name": "Biber"},
                {"id": "Wölfling", "name": "Wölfling"},
                {"id": "Jungpfadfinder", "name": "Jungpfadfinder"},
                {"id": "Pfadfinder", "name": "Pfadfinder"},
                {"id": "Rover", "name": "Rover"},
                {"id": "Leiter*in", "name": "Leiter*in"},
            ],
            agegroups_leaders: [
                {"id": "Biber", "name": "Biber"},
                {"id": "Wölfling", "name": "Wölfling"},
                {"id": "Jungpfadfinder", "name": "Jungpfadfinder"},
                {"id": "Pfadfinder", "name": "Pfadfinder"},
                {"id": "Rover", "name": "Rover"},
            ],
            boolean: [
                {"id": "Ja", "name": "Ja"},
                {"id": "Nein", "name": "Nein"},
            ],
            foodPreferences: [
                {"id": "Fleisch", "name": "Ich esse Fleisch"},
                {"id": "Vegan", "name": "Ich ernähre mich vegan"},
                {"id": "Glutenfrei", "name": "Ich vertrage kein Gluten"},
                {"id": "Laktosefrei", "name": "Ich vertrage keine Laktose"},
            ]
        },
        methods: {
            uuu(event) {
                console.log(event);
            },
            hasAddress() {
                return this.data.location && this.data.address && this.data.zip;
            },
            slideTo(e, index) {
                if (e !== null) {
                    e.preventDefault();
                }
                if (index < 0 || index > this.meta.slides.length-1) {
                    return;
                }
                this.scrollForm(this.$refs.form);
                this.meta.active = index;
                this.$refs.slider.scrollLeft = this.$refs.slider.scrollWidth / this.meta.slides.length * index;
                this.$refs.mobileSlider.scrollLeft = this.$refs.mobileSlider.scrollWidth / this.meta.slides.length * index;
            },
            scrollForm(el) {
                var margin = window.getComputedStyle(el).marginTop.replace('px', '');
                scrollToElement(el, 300, (margin?margin:0) * -1);
            },
            submit() {
                var _self = this;
                var promise = fetch(window.location.href, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-WINTER-REQUEST-HANDLER': this.meta.submitRequest,
                        'X-WINTER-REQUEST-PARTIALS': [],
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify(this.data),
                });

                promise.then(function(response) {
                    if (response.status === 422) {
                        response.json().then((errors) => {
                            _self.scrollToFirstError(errors);
                            Object.keys(errors).forEach((field) => {
                                toasted.error(errors[field].join('<br>'));
                            });
                        });
                    }
                    if (response.status === 201) {
                        _self.meta.finished = true;
                        _self.scrollForm(_self.$refs.form);
                    }
                });
            },
            scrollToFirstError(errors) {
                if (Object.keys(errors).length === 0) {
                    return;
                }

                var firstField = Object.keys(errors)[0];
                var field = this.$refs.form.querySelector('[name="'+firstField+'"]');

                if (field === null) {
                    return;
                }

                var slideElement = field.closest('.slider-element');
                this.slideTo(null, Array.from(slideElement.parentNode.children).indexOf(slideElement));
            },
        },
        spreads: {
            prevButton: {
                [':class']() {
                    return this.active == 0 ? 'opacity-40' : '';
                }
            },
            nextButton: {
                [':class']() {
                    return this.active == this.meta.slides.length - 1 ? 'opacity-40' : '';
                }
            },
        },
        init() {
        }
    };
}