cms/tibi-svelte-starter
Template
4
0
Fork 2
Code Issues Pull Requests Projects Releases Wiki Activity

Starter Projekt angefangen, etwas aufzubohren und ein paar grundlegend benötigte Collections, Teheming-Styles und Komponenten hinzugefügt. (WIP)

Browse Source
This commit is contained in:
Mario Linz
2022-05-24 16:44:55 +02:00
parent f4b6bb17ca
commit 47fdee2396
75 changed files with 2086 additions and 1234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/components/widgets/ContactForm.svelte Normal file
View File

@@ -0,0 +1,160 @@
<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>