123 lines
4.0 KiB
Plaintext
123 lines
4.0 KiB
Plaintext
---
|
|
import WebsiteLayout from '@layouts/website/WebsiteLayout.astro';
|
|
import ConfirmPopup from '@components/popup/ConfirmPopup.svelte';
|
|
import Popup from '@components/popup/Popup.svelte';
|
|
import Select from '@components/input/Select.svelte';
|
|
import Textarea from '@components/input/Textarea.svelte';
|
|
import Input from '@components/input/Input.svelte';
|
|
---
|
|
|
|
<WebsiteLayout title="Feedback & Kontakt">
|
|
<div class="flex justify-center items-center">
|
|
<div class="mt-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg">
|
|
<h2 class="text-3xl text-center">Feedback & Kontakt</h2>
|
|
<form id="feedback-contact">
|
|
<div class="space-y-4 mt-6 mb-4">
|
|
<Select id="type" values={{ 'website-feedback': 'Feedback', 'website-contact': 'Kontakt' }} />
|
|
<Textarea id="content" label="Feedback" dynamicWidth required rows={5} />
|
|
<Input id="email" type="email" label="Email" required hidden />
|
|
</div>
|
|
<button id="send" class="btn">Senden</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</WebsiteLayout>
|
|
|
|
<ConfirmPopup client:idle />
|
|
<Popup client:idle />
|
|
|
|
<script>
|
|
import { actions } from 'astro:actions';
|
|
import { confirmPopupState } from '@components/popup/ConfirmPopup';
|
|
import { popupState } from '@components/popup/Popup';
|
|
import { actionErrorPopup } from '../util/action';
|
|
|
|
function setupForm() {
|
|
const form = document.getElementById('feedback-contact') as HTMLFormElement;
|
|
const type = document.getElementById('type') as HTMLSelectElement;
|
|
const content = document.getElementById('content') as HTMLTextAreaElement;
|
|
const email = document.getElementById('email') as HTMLInputElement;
|
|
|
|
// reset form on site (re-)load
|
|
form.reset();
|
|
|
|
type.addEventListener('change', () => {
|
|
if (type.value === 'website-feedback') {
|
|
// content input
|
|
content.previousElementSibling!.firstChild!.textContent = 'Feedback';
|
|
// email input
|
|
email.parentElement!.hidden = true;
|
|
email.required = false;
|
|
} else if (type.value === 'website-contact') {
|
|
// content input
|
|
content.previousElementSibling!.firstChild!.textContent = 'Anfrage';
|
|
// email input
|
|
email.required = true;
|
|
email.parentElement!.hidden = false;
|
|
}
|
|
});
|
|
|
|
email.required = false;
|
|
|
|
form.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (type.value === 'website-feedback') {
|
|
confirmPopupState.set({
|
|
title: 'Feedback abschicken',
|
|
message: 'Soll das Feedback abgeschickt werden?',
|
|
onConfirm: () => sendFeedback().then(() => form.reset())
|
|
});
|
|
} else if (type.value === 'website-contact') {
|
|
confirmPopupState.set({
|
|
title: 'Kontaktanfrage abschicken',
|
|
message: 'Soll die Kontaktanfrage abgeschickt werden?',
|
|
onConfirm: () => sendContact().then(() => form.reset())
|
|
});
|
|
}
|
|
});
|
|
|
|
const sendFeedback = async () => {
|
|
const { error } = await actions.feedback.addWebsiteFeedback({
|
|
content: content.value
|
|
});
|
|
|
|
if (error) {
|
|
actionErrorPopup(error);
|
|
return;
|
|
}
|
|
|
|
popupState.set({
|
|
type: 'info',
|
|
title: 'Feedback abgeschickt',
|
|
message: 'Dein Feedback wurde abgeschickt. Vielen Dank, dass du uns hilfst, das Projekt besser zu machen!'
|
|
});
|
|
};
|
|
|
|
const sendContact = async () => {
|
|
const { error } = await actions.feedback.addWebsiteContact({
|
|
content: content.value,
|
|
email: email.value
|
|
});
|
|
|
|
if (error) {
|
|
actionErrorPopup(error);
|
|
return;
|
|
}
|
|
|
|
popupState.set({
|
|
type: 'info',
|
|
title: 'Kontaktanfrage abgeschickt',
|
|
message: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.'
|
|
});
|
|
};
|
|
}
|
|
|
|
const pathname = document.location.pathname;
|
|
document.addEventListener('astro:page-load', () => {
|
|
if (document.location.pathname !== pathname) return;
|
|
|
|
setupForm();
|
|
});
|
|
</script>
|