Use form for reviewing

This commit is contained in:
orosmatthew 2023-04-29 12:38:29 -04:00
parent 027f87167c
commit bf830b0849
3 changed files with 73 additions and 78 deletions

View File

@ -1,4 +1,4 @@
import type { PageServerLoad } from './$types'; import type { Actions, PageServerLoad } from './$types';
import * as Diff from 'diff'; import * as Diff from 'diff';
import { error, redirect } from '@sveltejs/kit'; import { error, redirect } from '@sveltejs/kit';
import { db } from '$lib/server/prisma'; import { db } from '$lib/server/prisma';
@ -20,3 +20,20 @@ export const load = (async ({ params }) => {
); );
return { diff: diff }; return { diff: diff };
}) satisfies PageServerLoad; }) satisfies PageServerLoad;
export const actions = {
submit: async ({ request, params }) => {
const submissionId = parseInt(params.submissionId);
if (isNaN(submissionId)) {
return { success: false };
}
const data = await request.formData();
const correct = data.get('correct');
if (!correct) {
return { success: false };
}
const correctBool = correct.toString().toLowerCase() === 'true';
await db.submission.delete({ where: { id: submissionId } });
return { success: true };
}
} satisfies Actions;

View File

@ -2,17 +2,30 @@
import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-base'; import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-base';
import 'diff2html/bundles/css/diff2html.min.css'; import 'diff2html/bundles/css/diff2html.min.css';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { DiffPostData } from './+server'; import type { Actions, PageData } from './$types';
import { enhance } from '$app/forms';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import type { PageData } from './$types';
import { page } from '$app/stores';
export let data: PageData; export let data: PageData;
export let form: Actions;
$: if (form && form.success) {
goto('/admin/reviews');
}
let incorrectBtn: HTMLInputElement; let incorrectBtn: HTMLInputElement;
let correctBtn: HTMLInputElement; let correctBtn: HTMLInputElement;
let submitBtn: HTMLButtonElement; let submitBtn: HTMLButtonElement;
let messageText: HTMLTextAreaElement;
let correct = false;
function updateCorrect() {
if (correctBtn.checked) {
correct = true;
} else {
correct = false;
}
}
onMount(() => { onMount(() => {
const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, data.diff, { const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, data.diff, {
@ -27,29 +40,13 @@
incorrectBtn.addEventListener('change', () => { incorrectBtn.addEventListener('change', () => {
submitBtn.disabled = false; submitBtn.disabled = false;
updateCorrect();
}); });
correctBtn.addEventListener('change', () => { correctBtn.addEventListener('change', () => {
submitBtn.disabled = false; submitBtn.disabled = false;
updateCorrect();
}); });
}); });
async function onSubmitClick() {
if (incorrectBtn.checked) {
let postData: DiffPostData = {
correct: false,
message: messageText.value
};
await fetch($page.url, { method: 'POST', body: JSON.stringify(postData) });
goto('/admin/reviews');
} else if (correctBtn.checked) {
let postData: DiffPostData = {
correct: true,
message: messageText.value
};
await fetch($page.url, { method: 'POST', body: JSON.stringify(postData) });
goto('/admin/reviews');
}
}
</script> </script>
<svelte:head> <svelte:head>
@ -58,41 +55,45 @@
<h1 style="text-align:center" class="mb-4">Diff</h1> <h1 style="text-align:center" class="mb-4">Diff</h1>
{#if form && !form.success}
<div class="alert alert-danger">Submission was not successful</div>
{:else if form && form.success}
<div class="alert alert-success">Success!</div>
{/if}
<a href="/admin/reviews" class="btn btn-outline-primary">Back</a> <a href="/admin/reviews" class="btn btn-outline-primary">Back</a>
<div class="mt-3" id="diff" /> <div class="mt-3" id="diff" />
<h5>Message</h5> <form method="POST" action="?/submit" use:enhance>
<textarea bind:this={messageText} class="mb-3 form-control" /> <h5>Message</h5>
<textarea class="mb-3 form-control" />
<div class="row justify-content-end"> <div class="row justify-content-end">
<div class="text-end"> <div class="text-end">
<div class="btn-group" role="group"> <input name="correct" type="hidden" value={correct} />
<input <div class="btn-group" role="group">
bind:this={incorrectBtn} <input
type="radio" bind:this={incorrectBtn}
class="btn-check" type="radio"
name="btnradio" class="btn-check"
id="btn_incorrect" name="btnradio"
autocomplete="off" id="btn_incorrect"
/> autocomplete="off"
<label class="btn btn-outline-danger" for="btn_incorrect">Incorrect</label> />
<input <label class="btn btn-outline-danger" for="btn_incorrect">Incorrect</label>
bind:this={correctBtn} <input
type="radio" bind:this={correctBtn}
class="btn-check" type="radio"
name="btnradio" class="btn-check"
id="btn_correct" name="btnradio"
autocomplete="off" id="btn_correct"
/> autocomplete="off"
<label class="btn btn-outline-success" for="btn_correct">Correct</label> />
<label class="btn btn-outline-success" for="btn_correct">Correct</label>
</div>
<button bind:this={submitBtn} id="submit_btn" type="submit" class="btn btn-primary" disabled
>Submit</button
>
</div> </div>
<button
bind:this={submitBtn}
on:click={onSubmitClick}
id="submit_btn"
type="button"
class="btn btn-primary"
disabled>Submit</button
>
</div> </div>
</div> </form>

View File

@ -1,23 +0,0 @@
import { error, json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { z } from 'zod';
import { db } from '$lib/server/prisma';
const diffPostData = z.object({
correct: z.boolean(),
message: z.string()
});
export type DiffPostData = z.infer<typeof diffPostData>;
export const POST = (async ({ request, params }) => {
const submissionId = parseInt(params.submissionId);
if (isNaN(submissionId)) {
throw error(400, 'Invalid submission');
}
const req = diffPostData.safeParse(await request.json());
if (!req.success) {
throw error(400, 'Invalid data format');
}
await db.submission.delete({ where: { id: submissionId } });
return json({ success: true });
}) satisfies RequestHandler;