161 lines
5.8 KiB
Svelte
161 lines
5.8 KiB
Svelte
<script lang="ts">
|
|
import { fade } from "svelte/transition"
|
|
import { mdiCheck, mdiChevronDown } from "@mdi/js"
|
|
import Icon from "mdi-svelte"
|
|
|
|
import { sendEmail } from "../../api"
|
|
|
|
export let type: string
|
|
export let collapsed: boolean = false
|
|
|
|
let formData: {
|
|
name: string
|
|
email: string
|
|
subject: string
|
|
message: string
|
|
privacy: boolean
|
|
} = {
|
|
name: null,
|
|
email: null,
|
|
subject: null,
|
|
message: null,
|
|
privacy: false,
|
|
}
|
|
let requestSucessfully: boolean = false
|
|
let requestPending: boolean = false
|
|
|
|
const submit = () => {
|
|
if (
|
|
formData["name"] &&
|
|
formData["email"] &&
|
|
formData["subject"] &&
|
|
formData["message"] &&
|
|
formData["privacy"]
|
|
) {
|
|
requestPending = true
|
|
sendEmail(type + "Form", formData)
|
|
.then(() => {
|
|
resetForm()
|
|
requestSucessfully = true
|
|
requestPending = false
|
|
|
|
setTimeout(() => {
|
|
requestSucessfully = false
|
|
}, 10000)
|
|
})
|
|
.catch((e) => {
|
|
console.error(e)
|
|
requestPending = false
|
|
})
|
|
.finally(() => {
|
|
requestPending = false
|
|
})
|
|
}
|
|
}
|
|
|
|
const resetForm = () => {
|
|
formData = {
|
|
name: null,
|
|
email: null,
|
|
subject: null,
|
|
message: null,
|
|
privacy: false,
|
|
}
|
|
}
|
|
|
|
$: isValid =
|
|
formData["name"] && formData["email"] && formData["subject"] && formData["message"] && formData["privacy"]
|
|
</script>
|
|
|
|
<div id="{type}">
|
|
<form on:submit|preventDefault="{submit}" class="mt-lg">
|
|
<div class="layout justify-content-space-between layout-gap-md">
|
|
<div class="hidden-sm icon {type}">
|
|
<!-- <img src="img/icon/{type}.svg" alt="" /> -->
|
|
</div>
|
|
<div class="titles" on:click="{() => (collapsed = !collapsed)}">
|
|
<h3 class="title">
|
|
{type === "contact" ? "Kontakt" : ""}
|
|
{type === "recipe" ? "Rezeptanfrage" : ""}
|
|
</h3>
|
|
<h4 class="subTitle">
|
|
{type === "contact" ? "Schreiben Sie uns Ihr Anliegen" : ""}
|
|
{type === "recipe" ? "Teilen Sie uns Ihren Rezeptwunsch mit" : ""}
|
|
</h4>
|
|
</div>
|
|
<div class="collapse-icon" class:collapsed="{!collapsed}" on:click="{() => (collapsed = !collapsed)}">
|
|
<Icon path="{mdiChevronDown}" size="2" />
|
|
</div>
|
|
</div>
|
|
{#if !collapsed}
|
|
<div>
|
|
<div class="row">
|
|
<div class="col-md-6 mt-sm">
|
|
<input
|
|
type="text"
|
|
bind:value="{formData['name']}"
|
|
placeholder="Name"
|
|
readonly="{requestPending}"
|
|
/>
|
|
</div>
|
|
<div class="col-md-6 mt-sm">
|
|
<input
|
|
type="text"
|
|
bind:value="{formData['email']}"
|
|
placeholder="E-Mail Adresse"
|
|
readonly="{requestPending}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row nospace">
|
|
<div class="col-md-12 mt-sm">
|
|
<input
|
|
type="text"
|
|
bind:value="{formData['subject']}"
|
|
placeholder="Betreff"
|
|
readonly="{requestPending}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="row nospace">
|
|
<div class="col-md-12 mt-sm">
|
|
<textarea bind:value="{formData['message']}" readonly="{requestPending}"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row nospace">
|
|
<div class="col-md-12 mt-sm">
|
|
<div class="layout layout-gap-md align-items-center">
|
|
<div
|
|
class="checkbox"
|
|
on:click="{() => {
|
|
formData.privacy = !formData.privacy
|
|
}}"
|
|
>
|
|
{#if formData.privacy}
|
|
<div class="icon">
|
|
<Icon path="{mdiCheck}" size="2" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div on:click="{() => (formData.privacy = !formData.privacy)}">
|
|
<a href="/datenschutz"><strong>Datenschutz</strong></a> akzeptieren
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{#if requestSucessfully}
|
|
<div class="mt-sm" transition:fade>
|
|
<div>
|
|
<strong>Vielen Dank für Ihre Kontaktaufnahme!</strong>
|
|
</div>
|
|
<p>Wir werden uns zeitnah mit Ihnen in Verbindung setzen!</p>
|
|
</div>
|
|
{/if}
|
|
<div class="layout justify-content-end mt-sm">
|
|
<button type="submit" disabled="{!isValid || requestPending}">Absenden</button>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</form>
|
|
</div>
|