use global modal for popup messages
All checks were successful
delpoy / build-and-deploy (push) Successful in 51s
All checks were successful
delpoy / build-and-deploy (push) Successful in 51s
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
import FeedbackSent from './FeedbackSent.svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let draft = $state(data.draft);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -12,13 +14,9 @@
|
||||
<meta name="robots" content="noindex" />
|
||||
</svelte:head>
|
||||
|
||||
{#if data.draft}
|
||||
{#if draft}
|
||||
<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
|
||||
<FeedbackDraft
|
||||
event={data.event}
|
||||
anonymous={data.anonymous}
|
||||
on:submit={() => (data.draft = false)}
|
||||
/>
|
||||
<FeedbackDraft event={data.event} anonymous={data.anonymous} onSubmit={() => (draft = false)} />
|
||||
</div>
|
||||
{:else}
|
||||
<div class="col-[1] row-[1]" transition:fly={{ x: 200, duration: 300 }}>
|
||||
|
||||
@@ -3,14 +3,15 @@
|
||||
import Textarea from '$lib/components/Input/Textarea.svelte';
|
||||
import { env } from '$env/dynamic/public';
|
||||
import { page } from '$app/stores';
|
||||
import { getPopupModalShowFn } from '$lib/context';
|
||||
|
||||
let { event, anonymous, onSubmit }: { event: string; anonymous: false; onSubmit?: () => void } =
|
||||
let { event, anonymous, onSubmit }: { event: string; anonymous: boolean; onSubmit?: () => void } =
|
||||
$props();
|
||||
|
||||
let content = $state('');
|
||||
let sendAnonymous = $state(true);
|
||||
let showPopupModal = getPopupModalShowFn();
|
||||
|
||||
let submitModal: HTMLDialogElement;
|
||||
let content = $state('');
|
||||
let sendAnonymous = $state(false);
|
||||
|
||||
async function submitFeedback() {
|
||||
await fetch(`${env.PUBLIC_BASE_PATH}/feedback/${$page.params.url_hash}`, {
|
||||
@@ -28,7 +29,21 @@
|
||||
<form
|
||||
onsubmit={(e) => {
|
||||
e.preventDefault();
|
||||
submitModal.show();
|
||||
|
||||
showPopupModal({
|
||||
title: 'Feedback abschicken?',
|
||||
text: 'Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.',
|
||||
actions: [
|
||||
{
|
||||
text: 'Abschicken',
|
||||
action: async () => {
|
||||
await submitFeedback();
|
||||
onSubmit?.();
|
||||
}
|
||||
},
|
||||
{ text: 'Abbrechen' }
|
||||
]
|
||||
});
|
||||
}}
|
||||
>
|
||||
<div class="space-y-4 my-4">
|
||||
@@ -38,45 +53,19 @@
|
||||
{/snippet}
|
||||
</Input>
|
||||
<Textarea required={true} rows={4} label="Feedback" bind:value={content} />
|
||||
{#if !anonymous}
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<Input type="checkbox" id="anonymous" size="xs" bind:checked={sendAnonymous} />
|
||||
<label
|
||||
for="anonymous"
|
||||
title="Dein Spielername wird nach dem Abschicken nicht mit dem Feedback zusammen gespeichert"
|
||||
>Anonym senden</label
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<Input type="submit" disabled={content === ''} value="Feedback senden" />
|
||||
</div>
|
||||
</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">Feedback abschicken?</h3>
|
||||
<div class="my-4">
|
||||
<p>Nach dem Abschicken des Feedbacks lässt es sich nicht mehr bearbeiten.</p>
|
||||
{#if !anonymous}
|
||||
<div class="flex items-center gap-2 mt-2">
|
||||
<Input type="checkbox" id="anonymous" size="xs" checked />
|
||||
<label
|
||||
for="anonymous"
|
||||
title="Dein Spielername wird nach dem Abschicken nicht mit dem Feedback zusammen gespeichert"
|
||||
>Anonym senden</label
|
||||
>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex flex-row space-x-1">
|
||||
<Input
|
||||
type="submit"
|
||||
value="Abschicken"
|
||||
onclick={async () => {
|
||||
await submitFeedback();
|
||||
onSubmit && onSubmit();
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user