diff --git a/assets/eventregistration.js b/assets/eventregistration.js index 0d0b3d0..dbe7fae 100644 --- a/assets/eventregistration.js +++ b/assets/eventregistration.js @@ -1,187 +1,228 @@ -import scrollToElement from './scrollToElement.js'; +import scrollToElement from "./scrollToElement.js"; var toastedOptions = { - position: 'top-right', - duration: 3000, - fitToScreen: true, - fullWidth: true, - theme: 'material', + position: "top-right", + duration: 3000, + fitToScreen: true, + fullWidth: true, + theme: "material", }; export default function (toasted) { - var toasted = new toasted(toastedOptions); + var toasted = new toasted(toastedOptions); - return { - data: { - event_id: null, - firstname: '', - lastname: '', - address: '', - zip: '', - location: '', - courses: [], - fcourses: [], - food_preferences: [], - activity: 'Teilnehmer*in', - gender: '', - email: '', - birthday: '', - agegroup: '', - group: '', - agegroup_leader: '', - emergency_phone: '', - phone: '', - misc: '', - foto: false, - parent: false, - vorteam: null, + return { + data: { + event_id: null, + firstname: "", + lastname: "", + address: "", + zip: "", + location: "", + courses: [], + fcourses: [], + food_preferences: [], + activity: "Teilnehmer*in", + gender: "", + email: "", + birthday: "", + agegroup: "", + group: "", + agegroup_leader: "", + emergency_phone: "", + phone: "", + misc: "", + foto: false, + parent: false, + vorteam: null, + }, + 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" }, + ], + fcourses: [ + { + id: "Ich bin Samstags beim Abendprogramm dabei", + name: "Ich bin Samstags beim Abendprogramm dabei", + }, + { + id: "Ich esse sonntag Mittag mit", + name: "Ich esse sonntag Mittag mit", + }, + ], + 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" }, + ], + updateCourses() { + this.data.courses.forEach((course) => { + let currentCourseOption = this.courses.find((c) => c.id === course); + currentCourseOption.without.forEach((c) => { + this.data.courses = this.data.courses.filter((tc) => tc !== c); + }); + }); + }, + get courses() { + return this.data.agegroup === "Rover" + ? [ + { + id: "s2", + name: "Schritt 2", + hint: "Sonntag, 10 - 18 Uhr", + without: ["3c", "2e"], + }, + ] + : [ + { + id: "2c", + name: "Baustein 2c", + hint: "Pfadfinderische Methodik - Samstag 10 - 18 Uhr", + without: [], + }, + { + id: "2e", + name: "Baustein 2e", + hint: "Präventionsschulung - Sonntag 10 - 13 Uhr", + without: ["s2"], + }, + { + id: "3c", + name: "Baustein 3c", + hint: "Finanzen, Haftung, Versicherung - Sonntag 14 - 17 Uhr", + without: ["s2"], + }, + { + id: "s2", + name: "Schritt 2", + hint: "Sonntag, 10 - 18 Uhr", + without: ["3c", "2e"], + }, + ]; + }, + 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; + 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", }, - 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"}, - ], - fcourses: [ - {"id": "Ich bin Samstags beim Abendprogramm dabei", "name": "Ich bin Samstags beim Abendprogramm dabei"}, - {"id": "Ich esse sonntag Mittag mit", "name": "Ich esse sonntag Mittag mit"}, - ], - 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"}, - ], - get courses() { - return this.data.agegroup === 'Rover' ? [ - {id: 'Schritt 2', name: 'Schritt 2', hint: 'Sonntag, 10 - 18 Uhr'}, - ] : [ - {id: 'Baustein 2c', name: 'Baustein 2c', hint: 'Pfadfinderische Methodik - Samstag 10 - 18 Uhr'}, - {id: 'Baustein 2e', name: 'Baustein 2e', hint: 'Präventionsschulung - Sonntag 10 - 13 Uhr'}, - {id: 'Baustein 3c', name: 'Baustein 3c', hint: 'Finanzen, Haftung, Versicherung - Sonntag 14 - 17 Uhr'}, - {id: 'Schritt 2', name: 'Schritt 2', hint: 'Sonntag, 10 - 18 Uhr'}, - ]; - }, - 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; - 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), + 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("
")); }); + }); + } + if (response.status === 201) { + _self.finished = true; + _self.scrollForm(_self.$refs.form); + } + }); + }, + scrollToFirstError(errors) { + if (Object.keys(errors).length === 0) { + return; + } - 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('
')); - }); - }); - } - 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 + '"]'); - var firstField = Object.keys(errors)[0]; - var field = this.$refs.form.querySelector('[name="'+firstField+'"]'); + if (field === null) { + return; + } - 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' : ''; - } - }, - }; + 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" : ""; + }, + }, + }; } - diff --git a/views/macros.htm b/views/macros.htm index abcec61..bd9b10b 100644 --- a/views/macros.htm +++ b/views/macros.htm @@ -63,7 +63,7 @@ {% endmacro %} -{% macro checkboxes(context, name, label, required, options) %} +{% macro checkboxes(context, name, label, required, options, settings) %}