121 lines
3.0 KiB
Svelte
121 lines
3.0 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 Search from '$lib/components/Input/Search.svelte';
|
|
import Select from '$lib/components/Input/Select.svelte';
|
|
import { getPopupModalShowFn } from '$lib/context';
|
|
|
|
let {
|
|
reporterName = $bindable(),
|
|
reportedName = $bindable(null),
|
|
reason = $bindable(),
|
|
body = $bindable(),
|
|
users,
|
|
onsubmit
|
|
}: {
|
|
reporterName: string;
|
|
reportedName: string | null;
|
|
reason: string;
|
|
body: string;
|
|
users: string[];
|
|
onsubmit: () => void;
|
|
} = $props();
|
|
|
|
let showPopupModal = getPopupModalShowFn();
|
|
|
|
let reported = $state(reportedName);
|
|
|
|
async function submitReport() {
|
|
await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_hash}`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
reported: reported || null,
|
|
subject: reason,
|
|
body: body
|
|
})
|
|
});
|
|
}
|
|
|
|
async function suggestNames(input: string): Promise<{ name: string; value: string }[]> {
|
|
let i = 0;
|
|
return users
|
|
.filter((v) => v.includes(input) && v != reporterName && i++ < 6)
|
|
.map((v) => {
|
|
return { name: v, value: v };
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<h2 class="text-3xl text-center">
|
|
Report von <span class="underline">{reporterName}</span> gegen
|
|
<span class="underline">{reported !== null ? reported : 'unbekannt'}</span>
|
|
</h2>
|
|
<form
|
|
onsubmit={(e) => {
|
|
e.preventDefault();
|
|
if (reported != null && users.findIndex((u) => u === reported) === -1) {
|
|
showPopupModal({
|
|
title: 'Fehler',
|
|
text: 'Der zu reportende Spieler existiert nicht.',
|
|
actions: [{ text: 'Schließen' }]
|
|
});
|
|
} else {
|
|
showPopupModal({
|
|
title: 'Report abschicken?',
|
|
text: 'Nach dem Abschicken des Reports wird sich ein Admin schnellstmöglich darum kümmern.',
|
|
actions: [
|
|
{
|
|
text: 'Abschicken',
|
|
action: async () => {
|
|
await submitReport();
|
|
onsubmit();
|
|
}
|
|
},
|
|
{ text: 'Abbrechen' }
|
|
]
|
|
});
|
|
}
|
|
}}
|
|
>
|
|
<div class="space-y-4 my-4">
|
|
<div class="flex justify-center gap-4">
|
|
<Select
|
|
value={+(reported === null)}
|
|
size="sm"
|
|
pickyWidth={false}
|
|
onChange={(e) => {
|
|
reported = e.value === 0 ? reportedName || '' : null;
|
|
}}
|
|
>
|
|
<option value={0}>Ich möchte einen bestimmten Spieler reporten</option>
|
|
<option value={1}>Ich möchte einen unbekannten Spieler reporten</option>
|
|
</Select>
|
|
{#if reported !== null}
|
|
<Search size="sm" bind:value={reported} searchSuggestionFunc={suggestNames} />
|
|
{/if}
|
|
</div>
|
|
<div>
|
|
<Input type="text" bind:value={reason} required={true} pickyWidth={false}>
|
|
{#snippet label()}
|
|
<span>Report Grund</span>
|
|
{/snippet}
|
|
</Input>
|
|
</div>
|
|
<div>
|
|
<Textarea
|
|
required={true}
|
|
rows={4}
|
|
label="Details über den Report Grund"
|
|
bind:value={body}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Input type="submit" value="Reporten" />
|
|
</div>
|
|
</form>
|
|
</div>
|