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

Add after

This commit is contained in:
Philipp Lang 2023-02-16 09:55:46 +01:00
parent 17e1456ee7
commit f4a4a4e626
2 changed files with 218 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

391
assets/eventregistration.js
View File

@ -1,187 +1,228 @@
import scrollToElement from './scrollToElement.js'; import scrollToElement from "./scrollToElement.js";
var toastedOptions = { var toastedOptions = {
position: 'top-right', position: "top-right",
duration: 3000, duration: 3000,
fitToScreen: true, fitToScreen: true,
fullWidth: true, fullWidth: true,
theme: 'material', theme: "material",
}; };
export default function (toasted) { export default function (toasted) {
var toasted = new toasted(toastedOptions); var toasted = new toasted(toastedOptions);
return { return {
data: { data: {
event_id: null, event_id: null,
firstname: '', firstname: "",
lastname: '', lastname: "",
address: '', address: "",
zip: '', zip: "",
location: '', location: "",
courses: [], courses: [],
fcourses: [], fcourses: [],
food_preferences: [], food_preferences: [],
activity: 'Teilnehmer*in', activity: "Teilnehmer*in",
gender: '', gender: "",
email: '', email: "",
birthday: '', birthday: "",
agegroup: '', agegroup: "",
group: '', group: "",
agegroup_leader: '', agegroup_leader: "",
emergency_phone: '', emergency_phone: "",
phone: '', phone: "",
misc: '', misc: "",
foto: false, foto: false,
parent: false, parent: false,
vorteam: null, 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, body: JSON.stringify(this.data),
submitRequest: null, });
errorFields: [],
active: 0, promise.then(function (response) {
slides: [ if (response.status === 422) {
'Persönliches', response.json().then((errors) => {
'Veranstaltung', _self.scrollToFirstError(errors);
'Sonstiges' Object.keys(errors).forEach((field) => {
], toasted.error(errors[field].join("<br>"));
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),
}); });
});
}
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.slides.length - 1 ? 'opacity-40' : ''; },
} },
}, };
};
} }

4
views/macros.htm
View File

@ -63,7 +63,7 @@
</div> </div>
</div> </div>
{% endmacro %} {% endmacro %}
{% macro checkboxes(context, name, label, required, options) %} {% macro checkboxes(context, name, label, required, options, settings) %}
<div> <div>
<span <span
class="text-gray-600 flex text-sm" class="text-gray-600 flex text-sm"
@ -72,7 +72,7 @@
<div class="mt-2 grid gap-2"> <div class="mt-2 grid gap-2">
<template x-for="option, index in {{options}}"> <template x-for="option, index in {{options}}">
<label :for="`{{name}}-${index}`" class="block relative flex items-center"> <label :for="`{{name}}-${index}`" class="block relative flex items-center">
<input type="checkbox" name="{{name}}[]" :value="option.name" x-model="data.{{name}}" class="peer absolute invisible" :id="`{{name}}-${index}`" /> <input type="checkbox" name="{{name}}[]" :value="option.id" x-model="data.{{name}}" {% if settings.after %} @change="{{settings.after}}" {% endif %} class="peer absolute invisible" :id="`{{name}}-${index}`" />
<span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span> <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
<span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block"></span> <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded-sm block"></span>
<span class="pl-8 text-sm sm:text-base flex flex-col"> <span class="pl-8 text-sm sm:text-base flex flex-col">