146 lines
4.1 KiB
JavaScript
146 lines
4.1 KiB
JavaScript
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: "",
|
|
group: null,
|
|
phone: "",
|
|
email: "",
|
|
agegroup_leader: null,
|
|
food_preferences: [],
|
|
foto: false,
|
|
misc: "",
|
|
},
|
|
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",
|
|
},
|
|
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" : "";
|
|
},
|
|
},
|
|
};
|
|
}
|