add basteltag
This commit is contained in:
Philipp Lang
parent
934bcc4f82
commit
d310a7d94a
|
|
@ -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('<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' : '';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
Loading…
Reference in New Issue