pille
/
wi-events
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add ausbildung

This commit is contained in:
Philipp Lang 2023-05-07 17:54:59 +02:00
parent 06072bb01d
commit 934bcc4f82
1 changed files with 128 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
assets/eventregistration-ausbildung.js
View File

@ -1,4 +1,4 @@
import scrollToElement from './scrollToElement.js'; import scrollToElement from "./scrollToElement.js";
var toastedOptions = { var toastedOptions = {
position: "bottom-right", position: "bottom-right",
@ -9,83 +9,137 @@ var toastedOptions = {
}; };
export default function (toasted) { export default function (toasted) {
var toasted = new toasted(toastedOptions); var toasted = new toasted(toastedOptions);
return { return {
finished: false, data: {
submitRequest: null, event_id: null,
errorFields: [], gender: "",
active: 0, firstname: "",
slideTo(e, index) { lastname: "",
if (e !== null) { birthday: "",
e.preventDefault(); group: null,
} phone: "",
if (index < 0 || index > this.slides.length-1) { email: "",
return; agegroup_leader: null,
} food_preferences: [],
this.scrollForm(this.$refs.form); foto: false,
this.active = index; misc: "",
this.$refs.slider.scrollLeft = this.$refs.slider.scrollWidth / this.slides.length * index; },
this.$refs.mobileSlider.scrollLeft = this.$refs.mobileSlider.scrollWidth / this.slides.length * index; 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)" },
],
agegroupLeaders: [
{ 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" },
],
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",
}, },
scrollForm(el) { body: JSON.stringify(this.data),
var margin = window.getComputedStyle(el).marginTop.replace('px', ''); });
scrollToElement(el, 300, (margin?margin:0) * -1);
}, promise.then(function (response) {
submit() { _self.loading = false;
var _self = this; if (response.status === 422) {
var promise = fetch(window.location.href, { response.json().then((errors) => {
method: 'POST', _self.scrollToFirstError(errors);
headers: { Object.keys(errors).forEach((field) => {
'Content-Type': 'application/json', toasted.error(errors[field].join("<br>"));
'Accept': 'application/json',
'X-WINTER-REQUEST-HANDLER': this.submitRequest,
'X-WINTER-REQUEST-PARTIALS': [],
'X-Requested-With': 'XMLHttpRequest',
},
body: JSON.stringify(this.data),
}); });
});
}
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) { var firstField = Object.keys(errors)[0];
if (response.status === 422) { var field = this.$refs.form.querySelector('[name="' + firstField + '"]');
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]; if (field === null) {
var field = this.$refs.form.querySelector('[name="'+firstField+'"]'); return;
}
if (field === null) { var slideElement = field.closest(".slider-element");
return; this.slideTo(
} null,
Array.from(slideElement.parentNode.children).indexOf(slideElement)
var slideElement = field.closest('.slider-element'); );
this.slideTo(null, Array.from(slideElement.parentNode.children).indexOf(slideElement)); },
}, prevButton: {
prevButton: { [":class"]() {
[':class']() { return this.active == 0 ? "opacity-40" : "";
return this.active == 0 ? 'opacity-40' : ''; },
} },
}, nextButton: {
nextButton: { [":class"]() {
[':class']() { return this.active == this.slides.length - 1 ? "opacity-40" : "";
return this.active == this.core.slides.length - 1 ? 'opacity-40' : ''; },
} },
}, };
};
} }