68 lines
1.8 KiB
Svelte
68 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import Textarea from '$lib/components/Input/Textarea.svelte';
|
|
import Input from '$lib/components/Input/Input.svelte';
|
|
import { env } from '$env/dynamic/public';
|
|
import { page } from '$app/stores';
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let reportedName: string;
|
|
export let reason: string;
|
|
|
|
async function submitReport() {
|
|
await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_id}`, {
|
|
method: 'POST'
|
|
});
|
|
}
|
|
|
|
let dispatch = createEventDispatcher();
|
|
|
|
let submitModal: HTMLDialogElement;
|
|
</script>
|
|
|
|
<div>
|
|
<h2 class="text-3xl text-center">Report für <code>{reportedName}</code></h2>
|
|
<form on:submit|preventDefault={() => submitModal.show()}>
|
|
<div class="space-y-4 my-4">
|
|
<div>
|
|
<Input type="text" value={reason} required={true} pickyWidth={false}>
|
|
<span slot="label">Report Grund</span>
|
|
</Input>
|
|
</div>
|
|
<div>
|
|
<Textarea required={true} rows={4} label="Details über den Report Grund" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Input type="submit" value="Reporten" />
|
|
</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">Report abschicken?</h3>
|
|
<div class="my-4">
|
|
<p>
|
|
Nach dem Abschicken des Reports wird sich ein Moderator schnellstmöglich darum kümmern.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-row space-x-1">
|
|
<Input
|
|
type="submit"
|
|
value="Abschicken"
|
|
on:click={async () => {
|
|
await submitReport();
|
|
dispatch('submit');
|
|
}}
|
|
/>
|
|
<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>
|