Handle review submit
This commit is contained in:
parent
99c0b6fd6b
commit
0e1a4a70e2
11
web/package-lock.json
generated
11
web/package-lock.json
generated
@ -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"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
19
web/src/routes/diff-test/+server.ts
Normal file
19
web/src/routes/diff-test/+server.ts
Normal 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;
|
Loading…
Reference in New Issue
Block a user