Handle review submit

This commit is contained in:
orosmatthew 2023-04-28 10:07:23 -04:00
parent 99c0b6fd6b
commit 0e1a4a70e2
4 changed files with 79 additions and 11 deletions

11
web/package-lock.json generated
View File

@ -14,7 +14,8 @@
"diff": "^5.1.0", "diff": "^5.1.0",
"diff2html": "^3.4.35", "diff2html": "^3.4.35",
"highlight.js": "^11.7.0", "highlight.js": "^11.7.0",
"prisma": "^4.13.0" "prisma": "^4.13.0",
"zod": "^3.21.4"
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/adapter-auto": "^2.0.1", "@sveltejs/adapter-auto": "^2.0.1",
@ -3210,6 +3211,14 @@
"funding": { "funding": {
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
},
"node_modules/zod": {
"version": "3.21.4",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.21.4.tgz",
"integrity": "sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==",
"funding": {
"url": "https://github.com/sponsors/colinhacks"
}
} }
} }
} }

View File

@ -37,6 +37,7 @@
"diff": "^5.1.0", "diff": "^5.1.0",
"diff2html": "^3.4.35", "diff2html": "^3.4.35",
"highlight.js": "^11.7.0", "highlight.js": "^11.7.0",
"prisma": "^4.13.0" "prisma": "^4.13.0",
"zod": "^3.21.4"
} }
} }

View File

@ -3,9 +3,16 @@
import 'diff2html/bundles/css/diff2html.min.css'; import 'diff2html/bundles/css/diff2html.min.css';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import type { PageData } from './$types'; import type { PageData } from './$types';
import type { DiffPostData } from './+server';
import { goto } from '$app/navigation';
export let data: PageData; export let data: PageData;
let incorrectBtn: HTMLInputElement;
let correctBtn: HTMLInputElement;
let submitBtn: HTMLButtonElement;
let messageText: HTMLTextAreaElement;
onMount(() => { onMount(() => {
const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, data.diff, { const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, data.diff, {
drawFileList: false, drawFileList: false,
@ -17,17 +24,25 @@
}); });
diff2htmlUi.draw(); diff2htmlUi.draw();
let incorrectBtn = document.getElementById('btn_incorrect')! as HTMLInputElement; incorrectBtn.addEventListener('change', () => {
let correctBtn = document.getElementById('btn_correct')! as HTMLInputElement;
let submitBtn = document.getElementById('submit_btn')! as HTMLButtonElement;
incorrectBtn?.addEventListener('change', () => {
submitBtn.disabled = false; submitBtn.disabled = false;
}); });
correctBtn?.addEventListener('change', () => { correctBtn.addEventListener('change', () => {
submitBtn.disabled = false; submitBtn.disabled = false;
}); });
}); });
async function onSubmitClick() {
if (incorrectBtn.checked) {
let data: DiffPostData = { correct: false, message: messageText.value };
await fetch('/diff-test', { method: 'POST', body: JSON.stringify(data) });
goto('/reviews');
} else if (correctBtn.checked) {
let data: DiffPostData = { correct: true, message: messageText.value };
await fetch('/diff-test', { method: 'POST', body: JSON.stringify(data) });
goto('/reviews');
}
}
</script> </script>
<svelte:head> <svelte:head>
@ -39,14 +54,38 @@
<a href="/reviews" class="btn btn-outline-primary">Back</a> <a href="/reviews" class="btn btn-outline-primary">Back</a>
<div class="mt-3" id="diff" /> <div class="mt-3" id="diff" />
<h5>Message</h5>
<textarea bind:this={messageText} 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"> <div class="btn-group" role="group">
<input type="radio" class="btn-check" name="btnradio" id="btn_incorrect" autocomplete="off" /> <input
bind:this={incorrectBtn}
type="radio"
class="btn-check"
name="btnradio"
id="btn_incorrect"
autocomplete="off"
/>
<label class="btn btn-outline-danger" for="btn_incorrect">Incorrect</label> <label class="btn btn-outline-danger" for="btn_incorrect">Incorrect</label>
<input type="radio" class="btn-check" name="btnradio" id="btn_correct" autocomplete="off" /> <input
bind:this={correctBtn}
type="radio"
class="btn-check"
name="btnradio"
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> </div>
<button id="submit_btn" type="button" class="btn btn-primary" disabled>Submit</button> <button
bind:this={submitBtn}
on:click={onSubmitClick}
id="submit_btn"
type="button"
class="btn btn-primary"
disabled>Submit</button
>
</div> </div>
</div> </div>

View File

@ -0,0 +1,19 @@
import { error, json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';
import { z } from 'zod';
const diffPostData = z.object({
correct: z.boolean(),
message: z.string()
});
export type DiffPostData = z.infer<typeof diffPostData>;
export const POST = (async ({ request }) => {
const req = diffPostData.safeParse(await request.json());
if (!req.success) {
throw error(400, 'Invalid data format');
}
console.log(req.data.correct);
console.log(req.data.message);
return json({ success: true });
}) satisfies RequestHandler;