initial commit

src/pages/feedback.astro

@@ -0,0 +1,119 @@
+---
+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';
+
+  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;
+
+  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())
+      });
+    }
+  });
+
+  async function sendFeedback() {
+    const { error } = await actions.feedback.addWebsiteFeedback({
+      type: 'website-feedback',
+      content: content.value
+    });
+
+    if (error) {
+      popupState.set({
+        type: 'error',
+        title: 'Fehler beim senden des Feedbacks',
+        message: error.message
+      });
+      throw error;
+    }
+
+    popupState.set({
+      type: 'info',
+      title: 'Feedback abgeschickt',
+      message: 'Dein Feedback wurde abgeschickt. Vielen Dank, dass du uns hilfst, das Projekt besser zu machen!'
+    });
+  }
+
+  async function sendContact() {
+    const { error } = await actions.feedback.addWebsiteContact({
+      type: 'website-contact',
+      content: content.value,
+      email: email.value
+    });
+
+    if (error) {
+      popupState.set({
+        type: 'error',
+        title: 'Fehler beim senden der Kontaktanfrage',
+        message: error.message
+      });
+      throw error;
+    }
+
+    popupState.set({
+      type: 'info',
+      title: 'Kontaktanfrage abgeschickt',
+      message: 'Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei Dir melden.'
+    });
+  }
+</script>