wi-events/assets/eventregistration-bela.js

import scrollToElement from './scrollToElement.js';

var toastedOptions = {
    position: 'bottom-right',
    duration: 3000,
    fitToScreen: false,
    fullWidth: false,
    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: false,
        },
        loading: false,
        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"},
        ],
        agegroupsroverleiter: [
            {"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"},
        ],
        foodPreferencesVeg: [
            {"id": "Vegan", "name": "Ich ernähre mich vegan"},
            {"id": "Glutenfrei", "name": "Ich vertrage kein Gluten"},
            {"id": "Laktosefrei", "name": "Ich vertrage keine Laktose"},
        ],
        slideTo(e, index) {
            if (e !== null) {
                e.preventDefault();
            }
            if (index < 0 || index > this.slides.length-1) {
                return;
            }
            this.scrollForm(this.$refs.form);
            this.active = index;
            this.$refs.slider.scrollLeft = this.$refs.slider.scrollWidth / this.slides.length * index;
            this.$refs.mobileSlider.scrollLeft = this.$refs.mobileSlider.scrollWidth / this.slides.length * index;
        },
        scrollForm(el) {
            var margin = window.getComputedStyle(el).marginTop.replace('px', '');
            scrollToElement(el, 300, (margin?margin:0) * -1);
        },
        submit() {
            var _self = this;
            _self.loading = true;
            var promise = fetch(window.location.href, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-WINTER-REQUEST-HANDLER': this.submitRequest,
                    'X-WINTER-REQUEST-PARTIALS': [],
                    'X-Requested-With': 'XMLHttpRequest',
                },
                body: JSON.stringify(this.data),
            });

            promise.then(function(response) {
                _self.loading = false;
                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.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));
        },
        prevButton: {
            [':class']() {
                return this.active == 0 ? 'opacity-40' : '';
            }
        },
        nextButton: {
            [':class']() {
                return this.active == this.slides.length - 1 ? 'opacity-40' : '';
            }
        },
    };
}