83 lines
2.2 KiB
Svelte
83 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import Input from '$lib/components/Input/Input.svelte';
|
|
import Textarea from '$lib/components/Input/Textarea.svelte';
|
|
import { env } from '$env/dynamic/public';
|
|
import Select from '$lib/components/Input/Select.svelte';
|
|
import { getPopupModalShowFn } from '$lib/context';
|
|
|
|
let showPopupModal = getPopupModalShowFn();
|
|
|
|
let content = $state('');
|
|
let type = $state('feedback');
|
|
|
|
async function submitFeedback() {
|
|
await fetch(`${env.PUBLIC_BASE_PATH}/feedback`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
content: content,
|
|
type: type
|
|
})
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Feedback & Kontakt</title>
|
|
</svelte:head>
|
|
|
|
<div>
|
|
<h2 class="text-3xl text-center">Feedback & Kontakt</h2>
|
|
<form
|
|
onsubmit={(e) => {
|
|
e.preventDefault();
|
|
|
|
showPopupModal({
|
|
title: `${type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abschicken?`,
|
|
text:
|
|
type === 'feedback'
|
|
? 'Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.'
|
|
: 'Bitte hinterlege eine Rückmeldemöglichkeit in deiner Anfrage. Nachdem sie abgeschickt wurde, kannst du die Nachricht nicht mehr bearbeiten.',
|
|
actions: [
|
|
{
|
|
text: 'Abschicken',
|
|
action: () =>
|
|
setTimeout(async () => {
|
|
await submitFeedback();
|
|
|
|
showPopupModal({
|
|
title: `${type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abgeschickt`,
|
|
text:
|
|
type === 'feedback'
|
|
? 'Dein Feedback wurde abgeschickt.'
|
|
: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.',
|
|
actions: [{ text: 'Schließen' }],
|
|
onClose: () => {
|
|
content = '';
|
|
type = 'feedback';
|
|
}
|
|
});
|
|
}, 200)
|
|
},
|
|
{ text: 'Abbrechen' }
|
|
]
|
|
});
|
|
}}
|
|
>
|
|
<div class="space-y-4 mt-6 mb-4">
|
|
<Select size="sm" bind:value={type}>
|
|
<option value="feedback">Feedback</option>
|
|
<option value="contact">Kontakt</option>
|
|
</Select>
|
|
<Textarea
|
|
required={true}
|
|
rows={4}
|
|
label={type === 'feedback' ? 'Feedback' : 'Anfrage'}
|
|
bind:value={content}
|
|
/>
|
|
<div>
|
|
<Input type="submit" disabled={type === '' || content === ''} value="Senden" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|