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

71
src/routes/report/[...url_hash]/ReportDraft.svelte
View File

@ -5,6 +5,7 @@
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,
@ -20,12 +21,11 @@
onsubmit: () => void;
} = $props();
let showPopupModal = getPopupModalShowFn();
let reported = $state(reportedName);
let content = $state('');
let userErrorModal: HTMLDialogElement;
let submitModal: HTMLDialogElement;
async function submitReport() {
await fetch(`${env.PUBLIC_BASE_PATH}/report/${$page.params.url_hash}`, {
method: 'POST',
@ -56,9 +56,26 @@
onsubmit={(e) => {
e.preventDefault();
if (reported != null && users.findIndex((u) => u === reported) === -1) {
userErrorModal.show();
showPopupModal({
title: 'Fehler',
text: 'Der zu reportende Spieler existiert nicht.',
actions: [{ text: 'Schließen' }]
});
} else {
submitModal.show();
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' }
]
});
}
}}
>
@ -100,47 +117,3 @@
</div>
</form>
</div>
<dialog class="modal" bind:this={userErrorModal}>
<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">Fehler</h3>
<div class="my-4">
<p>Der zu reportende Spieler existiert nicht</p>
</div>
<div class="flex flex-row space-x-1">
<Input type="submit" value="Schließen" />
</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={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 Admin schnellstmöglich darum kümmern.</p>
</div>
<div class="flex flex-row space-x-1">
<Input
type="submit"
value="Abschicken"
onclick={async () => {
await submitReport();
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>