From eacb65064f742b178834515609d6397a95ca88ff Mon Sep 17 00:00:00 2001 From: philipp lang Date: Thu, 23 Mar 2023 00:19:31 +0100 Subject: [PATCH] update events --- assets/eventregistration-ausbildung.js | 10 +- ...ation_old.js => eventregistration-bela.js} | 9 +- assets/eventregistration-tdw.js | 163 ++++++++++++++++++ assets/eventregistration.js | 18 +- components/eventform/navigation.htm | 7 +- 5 files changed, 189 insertions(+), 18 deletions(-) rename assets/{eventregistration_old.js => eventregistration-bela.js} (97%) create mode 100644 assets/eventregistration-tdw.js diff --git a/assets/eventregistration-ausbildung.js b/assets/eventregistration-ausbildung.js index ac4e508..b7444a7 100644 --- a/assets/eventregistration-ausbildung.js +++ b/assets/eventregistration-ausbildung.js @@ -1,11 +1,11 @@ import scrollToElement from './scrollToElement.js'; var toastedOptions = { - position: 'top-right', - duration: 3000, - fitToScreen: true, - fullWidth: true, - theme: 'material', + position: "bottom-right", + duration: 3000, + fitToScreen: false, + fullWidth: false, + theme: "material", }; export default function (toasted) { diff --git a/assets/eventregistration_old.js b/assets/eventregistration-bela.js similarity index 97% rename from assets/eventregistration_old.js rename to assets/eventregistration-bela.js index 149be4f..377cdd6 100644 --- a/assets/eventregistration_old.js +++ b/assets/eventregistration-bela.js @@ -1,10 +1,10 @@ import scrollToElement from './scrollToElement.js'; var toastedOptions = { - position: 'top-right', + position: 'bottom-right', duration: 3000, - fitToScreen: true, - fullWidth: true, + fitToScreen: false, + fullWidth: false, theme: 'material', }; @@ -36,6 +36,7 @@ export default function (toasted) { parent: false, vorteam: null, }, + loading: false, finished: false, submitRequest: null, errorFields: [], @@ -130,6 +131,7 @@ export default function (toasted) { }, submit() { var _self = this; + _self.loading = true; var promise = fetch(window.location.href, { method: 'POST', headers: { @@ -143,6 +145,7 @@ export default function (toasted) { }); promise.then(function(response) { + _self.loading = false; if (response.status === 422) { response.json().then((errors) => { _self.scrollToFirstError(errors); diff --git a/assets/eventregistration-tdw.js b/assets/eventregistration-tdw.js new file mode 100644 index 0000000..1649894 --- /dev/null +++ b/assets/eventregistration-tdw.js @@ -0,0 +1,163 @@ +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: "", + ticket: false, + essen: [], + food_preferences: [], + essen_misc: '', + gender: "", + email: "", + birthday: "", + group: "", + emergency_phone: "", + phone: "", + misc: "", + foto: false, + parent: false, + vorteam: null, + }, + 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" }, + ], + essens: [ + { id: "Rohkost", name: "Rohkost" }, + { id: "Pizzaschnecken", name: "Pizzaschnecken" }, + { id: "Brot / Brötchen", name: "Brot / Brötchen" }, + { id: "Muffins / Kuchen", name: "Muffins / Kuchen" }, + { id: "Dips", name: "Dips" }, + { id: "Frikadellen", name: "Frikadellen" }, + { id: "Sandwiches", name: "Sandwiches" }, + { id: "Zimtschnecken", name: "Zimtschnecken" }, + { id: "Gummibärchen", name: "Gummibärchen" }, + { id: "Obst", name: "Obst" }, + { id: "Käse", name: "Käse" } + ], + 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)" }, + ], + 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" : ""; + }, + }, + }; +} diff --git a/assets/eventregistration.js b/assets/eventregistration.js index dbe7fae..1365ed6 100644 --- a/assets/eventregistration.js +++ b/assets/eventregistration.js @@ -1,10 +1,10 @@ import scrollToElement from "./scrollToElement.js"; var toastedOptions = { - position: "top-right", + position: "bottom-right", duration: 3000, - fitToScreen: true, - fullWidth: true, + fitToScreen: false, + fullWidth: false, theme: "material", }; @@ -130,15 +130,15 @@ export default function (toasted) { without: [], }, { - id: "2e", - name: "Baustein 2e", - hint: "Präventionsschulung - Sonntag 10 - 13 Uhr", + id: "3c", + name: "Baustein 3c", + hint: "Finanzen, Haftung, Versicherung - Sonntag 10 - 13 Uhr", without: ["s2"], }, { - id: "3c", - name: "Baustein 3c", - hint: "Finanzen, Haftung, Versicherung - Sonntag 14 - 17 Uhr", + id: "2e", + name: "Baustein 2e", + hint: "Präventionsschulung - Sonntag 14 - 17 Uhr", without: ["s2"], }, { diff --git a/components/eventform/navigation.htm b/components/eventform/navigation.htm index 33b9759..e6f395a 100644 --- a/components/eventform/navigation.htm +++ b/components/eventform/navigation.htm @@ -9,6 +9,11 @@ Weiter {% else %} - + {% endif %}