update events

assets/eventregistration-ausbildung.js

@@ -1,11 +1,11 @@
 import scrollToElement from './scrollToElement.js';
 
 var toastedOptions = {
-    position: 'top-right',
+  position: "bottom-right",
   duration: 3000,
-    fitToScreen: true,
+  fitToScreen: false,
-    fullWidth: true,
+  fullWidth: false,
-    theme: 'material',
+  theme: "material",
 };
 
 export default function (toasted) {

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,
+    fitToScreen: false,
-    fullWidth: true,
+    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);

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("<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" : "";
+      },
+    },
+  };
+}

assets/eventregistration.js

@@ -1,10 +1,10 @@
 import scrollToElement from "./scrollToElement.js";
 
 var toastedOptions = {
-  position: "top-right",
+  position: "bottom-right",
   duration: 3000,
-  fitToScreen: true,
+  fitToScreen: false,
-  fullWidth: true,
+  fullWidth: false,
   theme: "material",
 };
 
@@ -130,15 +130,15 @@ export default function (toasted) {
               without: [],
             },
             {
-              id: "2e",
+              id: "3c",
-              name: "Baustein 2e",
+              name: "Baustein 3c",
-              hint: "Präventionsschulung - Sonntag 10 - 13 Uhr",
+              hint: "Finanzen, Haftung, Versicherung - Sonntag 10 - 13 Uhr",
               without: ["s2"],
             },
             {
-              id: "3c",
+              id: "2e",
-              name: "Baustein 3c",
+              name: "Baustein 2e",
-              hint: "Finanzen, Haftung, Versicherung - Sonntag 14 - 17 Uhr",
+              hint: "Präventionsschulung - Sonntag 14 - 17 Uhr",
               without: ["s2"],
             },
             {

components/eventform/navigation.htm

@@ -9,6 +9,11 @@
         Weiter
     </div>
     {% else %}
-    <button type="submit" class="bg-primary hover:bg-emerald-600 px-4 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg">{% if p %} Anmeldung aktualisieren {% else %} Anmeldung absenden {% endif %}</button>
+        <button type="submit" class="relative flex items-center bg-primary hover:bg-emerald-600 px-8 py-2 shadow text-teal-200 leading-none cursor-pointer rounded-lg">
+            <div x-show="loading" class="absolute left-1">
+                <div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div></div></div>
+            </div>
+            {% if p %} Anmeldung aktualisieren {% else %} Anmeldung absenden {% endif %}
+        </button>
     {% endif %}
 </div>