100 lines
2.7 KiB
Vue
100 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<form class="flex flex-col gap-2" @submit.prevent="setup">
|
||
|
|
<p class="text-center">Feuerwehr-/Vereinsdaten</p>
|
||
|
|
<div class="-space-y-px">
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
id="name"
|
||
|
|
name="name"
|
||
|
|
type="text"
|
||
|
|
placeholder="Feuerwehr-/Vereinsname (optional)"
|
||
|
|
class="rounded-b-none!"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
id="imprint"
|
||
|
|
name="imprint"
|
||
|
|
type="url"
|
||
|
|
placeholder="Link zum Impressum (optional)"
|
||
|
|
class="rounded-none!"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
id="privacy"
|
||
|
|
name="privacy"
|
||
|
|
type="url"
|
||
|
|
placeholder="Link zur Datenschutzerklärung (optional)"
|
||
|
|
class="rounded-none!"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<input
|
||
|
|
id="website"
|
||
|
|
name="website"
|
||
|
|
type="url"
|
||
|
|
placeholder="Link zur Webseite (optional)"
|
||
|
|
class="rounded-t-none!"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="text-primary cursor-pointer ml-auto" @click="skip('club')">überspringen</p>
|
||
|
|
|
||
|
|
<div class="flex flex-row gap-2">
|
||
|
|
<button type="submit" primary :disabled="setupStatus == 'loading' || setupStatus == 'success'">
|
||
|
|
Vereinsdaten speichern
|
||
|
|
</button>
|
||
|
|
<Spinner v-if="setupStatus == 'loading'" class="my-auto" />
|
||
|
|
<SuccessCheckmark v-else-if="setupStatus == 'success'" />
|
||
|
|
<FailureXMark v-else-if="setupStatus == 'failed'" />
|
||
|
|
</div>
|
||
|
|
<p v-if="setupMessage" class="text-center">{{ setupMessage }}</p>
|
||
|
|
</form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { defineComponent } from "vue";
|
||
|
|
import Spinner from "@/components/Spinner.vue";
|
||
|
|
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||
|
|
import FailureXMark from "@/components/FailureXMark.vue";
|
||
|
|
import { mapActions } from "pinia";
|
||
|
|
import { useSetupStore } from "../../stores/setup";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default defineComponent({
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
setupStatus: undefined as undefined | "loading" | "success" | "failed",
|
||
|
|
setupMessage: "" as string,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(useSetupStore, ["setClub", "skip"]),
|
||
|
|
setup(e: any) {
|
||
|
|
let formData = e.target.elements;
|
||
|
|
this.setupStatus = "loading";
|
||
|
|
this.setupMessage = "";
|
||
|
|
this.setClub({
|
||
|
|
name: formData.name.value,
|
||
|
|
imprint: formData.imprint.value,
|
||
|
|
privacy: formData.privacy.value,
|
||
|
|
website: formData.website.value,
|
||
|
|
})
|
||
|
|
.then((result) => {
|
||
|
|
// this.setupStatus = "success";
|
||
|
|
})
|
||
|
|
.catch((err) => {
|
||
|
|
this.setupStatus = "failed";
|
||
|
|
this.setupMessage = err.response.data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|