diff --git a/assets/eventregistration-basteltag.js b/assets/eventregistration-basteltag.js new file mode 100644 index 0000000..dda11e2 --- /dev/null +++ b/assets/eventregistration-basteltag.js @@ -0,0 +1,143 @@ +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, + gender: '', + firstname: '', + lastname: '', + birthday: '', + phone: '', + email: '', + group: null, + agegroup: null, + food_preferences: [], + misc: '', + parent: false, + foto: false, + }, + loading: false, + finished: false, + submitRequest: null, + errorFields: [], + active: 0, + slides: [ + 'Persönliches', + 'Veranstaltung', + 'Sonstiges' + ], + 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": "Rover", "name": "Rover"}, + {"id": "Leiter*in", "name": "Leiter*in"}, + ], + 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"}, + ], + 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('
')); + }); + }); + } + 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' : ''; + } + }, + }; +} +