wi-events/assets/eventregistration.js

import scrollToElement from "./scrollToElement.js";

var toastedOptions = {
  position: "top-right",
  duration: 3000,
  fitToScreen: true,
  fullWidth: true,
  theme: "material",
};

export default function (toasted) {
  var toasted = new toasted(toastedOptions);

  return {
    data: {
      event_id: null,
      firstname: "",
      lastname: "",
      address: "",
      zip: "",
      location: "",
      courses: [],
      fcourses: [],
      food_preferences: [],
      activity: "Teilnehmer*in",
      gender: "",
      email: "",
      birthday: "",
      agegroup: "",
      group: "",
      agegroup_leader: "",
      emergency_phone: "",
      phone: "",
      misc: "",
      foto: false,
      parent: false,
      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",
        },
        body: JSON.stringify(this.data),
      });

      promise.then(function (response) {
        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" : "";
      },
    },
  };
}