CraftAttack/website
4
0
Fork 0
Code Issues 3 Pull Requests Actions Wiki Activity

use global modal for popup messages
All checks were successful
delpoy / build-and-deploy (push) Successful in 51s
Details

Browse Source
This commit is contained in:
bytedream
2024-12-02 21:02:23 +01:00
parent a1965c62e2
commit e30446598c
14 changed files with 252 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/routes/feedback/+page.svelte
View File

@ -3,13 +3,13 @@
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');
let submitModal: HTMLDialogElement;
let sentModal: HTMLDialogElement;
async function submitFeedback() {
await fetch(`${env.PUBLIC_BASE_PATH}/feedback`, {
method: 'POST',
@ -30,7 +30,37 @@
<form
onsubmit={(e) => {
e.preventDefault();
submitModal.show();
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">
@ -50,77 +80,3 @@
</div>
</form>
</div>
<dialog class="modal" bind:this={submitModal}>
<form method="dialog" class="modal-box">
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
<div>
<h3 class="font-roboto font-medium text-xl">
{type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abschicken?
</h3>
<div class="my-4">
{#if type === 'feedback'}
<p>Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.</p>
{:else}
<p>
Bitte hinterlege eine Rückmeldemöglichkeit in deiner Anfrage. Nachdem sie abgeschickt
wurde, kannst du die Nachricht nicht mehr bearbeiten.
</p>
{/if}
</div>
<div class="flex flex-row space-x-1">
<Input
type="submit"
value="Abschicken"
onclick={async () => {
await submitFeedback();
sentModal.show();
}}
/>
<Input type="submit" value="Abbrechen" />
</div>
</div>
</form>
<form method="dialog" class="modal-backdrop bg-[rgba(0,0,0,.3)]">
<button>close</button>
</form>
</dialog>
<dialog class="modal" bind:this={sentModal}>
<form
method="dialog"
class="modal-box"
onsubmit={() => {
content = '';
type = 'feedback';
}}
>
<button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
<div>
<h3 class="font-roboto font-medium text-xl">
{type === 'feedback' ? 'Feedback' : 'Kontaktanfrage'} abgeschickt
</h3>
<div class="my-4">
{#if type === 'feedback'}
<p>Dein Feedback wurde abgeschickt.</p>
{:else}
<p>
Deine Kontaktanfrage wurde abgeschickt. Jemand aus dem Team wird sich nächstmöglich bei
Dir melden.
</p>
{/if}
</div>
<Input type="submit" value="Schließen" />
</div>
</form>
<form
method="dialog"
class="modal-backdrop bg-[rgba(0,0,0,.3)]"
onsubmit={() => {
content = '';
type = 'feedback';
}}
>
<button>close</button>
</form>
</dialog>