From 1b412e8e93de8858841008aaf04b9da7494892dd Mon Sep 17 00:00:00 2001
From: orosmatthew <orosmatthew@pm.me>
Date: Sat, 29 Apr 2023 15:27:51 -0400
Subject: [PATCH] Add submissions page

---
 web/prisma/schema.prisma                      | 19 +++--
 web/src/routes/admin/+layout.svelte           |  1 +
 .../admin/diff/[submissionId]/+page.server.ts | 12 ++-
 .../admin/diff/[submissionId]/+page.svelte    |  4 +-
 web/src/routes/admin/reviews/+page.server.ts  |  9 ++
 .../routes/admin/submissions/+page.server.ts  | 25 ++++++
 web/src/routes/admin/submissions/+page.svelte | 77 +++++++++++++++++
 .../[submissionId]/+page.server.ts            | 44 ++++++++++
 .../submissions/[submissionId]/+page.svelte   | 83 +++++++++++++++++++
 9 files changed, 262 insertions(+), 12 deletions(-)
 create mode 100644 web/src/routes/admin/submissions/+page.server.ts
 create mode 100644 web/src/routes/admin/submissions/+page.svelte
 create mode 100644 web/src/routes/admin/submissions/[submissionId]/+page.server.ts
 create mode 100644 web/src/routes/admin/submissions/[submissionId]/+page.svelte

diff --git a/web/prisma/schema.prisma b/web/prisma/schema.prisma
index 56842ae..890502d 100644
--- a/web/prisma/schema.prisma
+++ b/web/prisma/schema.prisma
@@ -28,15 +28,16 @@ enum SubmissionState {
 }
 
 model Submission {
-  id             Int             @id @default(autoincrement())
-  createdAt      DateTime        @default(now())
-  state          SubmissionState
-  actualOutput   String
-  message        String?
-  team           Team            @relation(fields: [teamId], references: [id])
-  teamId         Int
-  problem        Problem         @relation(fields: [problemId], references: [id])
-  problemId      Int
+  id           Int             @id @default(autoincrement())
+  createdAt    DateTime        @default(now())
+  gradedAt     DateTime?
+  state        SubmissionState
+  actualOutput String
+  message      String?
+  team         Team            @relation(fields: [teamId], references: [id])
+  teamId       Int
+  problem      Problem         @relation(fields: [problemId], references: [id])
+  problemId    Int
 }
 
 model Problem {
diff --git a/web/src/routes/admin/+layout.svelte b/web/src/routes/admin/+layout.svelte
index 46d3860..a0bcf6f 100644
--- a/web/src/routes/admin/+layout.svelte
+++ b/web/src/routes/admin/+layout.svelte
@@ -2,6 +2,7 @@
 	<ul class="nav col-12 col-md-auto justify-content-center">
 		<li><a href="/admin" class="nav-link px-2">Home</a></li>
 		<li><a href="/admin/reviews" class="nav-link px-2">Reviews</a></li>
+		<li><a href="/admin/submissions" class="nav-link px-2">Submissions</a></li>
 		<li><a href="/admin/problems" class="nav-link px-2">Problems</a></li>
 		<li><a href="/admin/scoreboard" class="nav-link px-2">Scoreboard</a></li>
 		<li><a href="/admin/teams" class="nav-link px-2">Teams</a></li>
diff --git a/web/src/routes/admin/diff/[submissionId]/+page.server.ts b/web/src/routes/admin/diff/[submissionId]/+page.server.ts
index 7b1cc88..4e7c480 100644
--- a/web/src/routes/admin/diff/[submissionId]/+page.server.ts
+++ b/web/src/routes/admin/diff/[submissionId]/+page.server.ts
@@ -2,6 +2,7 @@ import type { Actions, PageServerLoad } from './$types';
 import * as Diff from 'diff';
 import { error, redirect } from '@sveltejs/kit';
 import { db } from '$lib/server/prisma';
+import { SubmissionState } from '@prisma/client';
 
 export const load = (async ({ params }) => {
 	const submissionId = parseInt(params.submissionId);
@@ -33,11 +34,20 @@ export const actions = {
 		}
 		const data = await request.formData();
 		const correct = data.get('correct');
+		const message = data.get('message');
 		if (!correct) {
 			return { success: false };
 		}
 		const correctBool = correct.toString().toLowerCase() === 'true';
-		await db.submission.delete({ where: { id: submissionId } });
+		const gradedTime = new Date();
+		await db.submission.update({
+			where: { id: submissionId },
+			data: {
+				state: correctBool ? SubmissionState.Correct : SubmissionState.Incorrect,
+				message: message ? message.toString() : '',
+				gradedAt: gradedTime
+			}
+		});
 		return { success: true };
 	}
 } satisfies Actions;
diff --git a/web/src/routes/admin/diff/[submissionId]/+page.svelte b/web/src/routes/admin/diff/[submissionId]/+page.svelte
index 49b758f..1049cb1 100644
--- a/web/src/routes/admin/diff/[submissionId]/+page.svelte
+++ b/web/src/routes/admin/diff/[submissionId]/+page.svelte
@@ -61,12 +61,12 @@
 	<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">All Reviews</a>
 <div class="mt-3" id="diff" />
 
 <form method="POST" action="?/submit" use:enhance>
 	<h5>Message</h5>
-	<textarea class="mb-3 form-control" />
+	<textarea name="message" class="mb-3 form-control" />
 
 	<div class="row justify-content-end">
 		<div class="text-end">
diff --git a/web/src/routes/admin/reviews/+page.server.ts b/web/src/routes/admin/reviews/+page.server.ts
index a32fcc9..47e3059 100644
--- a/web/src/routes/admin/reviews/+page.server.ts
+++ b/web/src/routes/admin/reviews/+page.server.ts
@@ -38,6 +38,15 @@ export const actions = {
 			return { success: false };
 		}
 		if (problem.realOutput === actual.toString()) {
+			await db.submission.create({
+				data: {
+					state: SubmissionState.Correct,
+					actualOutput: actual.toString(),
+					teamId: teamIdInt,
+					problemId: problemIdInt,
+					gradedAt: new Date()
+				}
+			});
 			return { success: true };
 		}
 		await db.submission.create({
diff --git a/web/src/routes/admin/submissions/+page.server.ts b/web/src/routes/admin/submissions/+page.server.ts
new file mode 100644
index 0000000..a31b7a6
--- /dev/null
+++ b/web/src/routes/admin/submissions/+page.server.ts
@@ -0,0 +1,25 @@
+import { db } from '$lib/server/prisma';
+import type { PageServerLoad } from './$types';
+
+export const load = (async () => {
+	const submissions = await db.submission.findMany();
+	const problems = await db.problem.findMany();
+	const teams = await db.team.findMany();
+	return {
+		submissions: submissions.map((row) => {
+			return {
+				id: row.id,
+				createdAt: row.createdAt,
+				gradedAt: row.gradedAt,
+				message: row.message,
+				state: row.state,
+				problemName: problems.find((problem) => {
+					return problem.id == row.problemId;
+				})?.friendlyName,
+				teamName: teams.find((team) => {
+					return team.id == row.teamId;
+				})?.name
+			};
+		})
+	};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/admin/submissions/+page.svelte b/web/src/routes/admin/submissions/+page.svelte
new file mode 100644
index 0000000..b405ff1
--- /dev/null
+++ b/web/src/routes/admin/submissions/+page.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { SubmissionState } from '@prisma/client';
+	import type { PageData } from './$types';
+	import { goto } from '$app/navigation';
+
+	export let data: PageData;
+
+	$: data.submissions.sort((a, b) => {
+		return b.createdAt.valueOf() - a.createdAt.valueOf();
+	});
+</script>
+
+<svelte:head>
+	<title>Submissions</title>
+</svelte:head>
+
+<h1 style="text-align:center" class="mb-4">Submissions</h1>
+
+<p>Rows are color coded: Red - Incorrect, Green - Correct, Yellow - In Review</p>
+
+<table class="table table-bordered table-hover">
+	<thead>
+		<tr>
+			<th>Team</th>
+			<th>Problem</th>
+			<th>Submit Time</th>
+			<th>Graded Time</th>
+			<th>Message</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each data.submissions as submission}
+			<tr
+				on:click={() => {
+					goto('/admin/submissions/' + submission.id.toString());
+				}}
+				class={(submission.state == SubmissionState.InReview
+					? 'table-warning'
+					: submission.state == SubmissionState.Correct
+					? 'table-success'
+					: submission.state == SubmissionState.Incorrect
+					? 'table-danger'
+					: '') + ' submission-row'}
+			>
+				<td>
+					{#if submission.teamName}
+						{submission.teamName}
+					{/if}
+				</td>
+				<td>
+					{#if submission.problemName}
+						{submission.problemName}
+					{/if}
+				</td>
+				<td
+					>{submission.createdAt.toLocaleDateString() +
+						' ' +
+						submission.createdAt.toLocaleTimeString()}</td
+				>
+				<td>
+					{#if submission.gradedAt}
+						{submission.gradedAt.toLocaleDateString() +
+							' ' +
+							submission.gradedAt.toLocaleTimeString()}
+					{/if}
+				</td>
+				<td>{submission.message ? submission.message : ''}</td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+
+<style>
+	.submission-row:hover {
+		cursor: pointer;
+	}
+</style>
diff --git a/web/src/routes/admin/submissions/[submissionId]/+page.server.ts b/web/src/routes/admin/submissions/[submissionId]/+page.server.ts
new file mode 100644
index 0000000..871c6ac
--- /dev/null
+++ b/web/src/routes/admin/submissions/[submissionId]/+page.server.ts
@@ -0,0 +1,44 @@
+import { error, redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+import { db } from '$lib/server/prisma';
+import Diff from 'diff';
+import { SubmissionState } from '@prisma/client';
+
+export const load = (async ({ params }) => {
+	const submissionId = parseInt(params.submissionId);
+	if (isNaN(submissionId)) {
+		throw error(400, 'Invalid submission');
+	}
+	const submission = await db.submission.findUnique({ where: { id: submissionId } });
+	if (!submission) {
+		throw redirect(302, '/admin/submissions');
+	}
+	const team = await db.team.findUnique({ where: { id: submission.teamId } });
+	if (!team) {
+		throw error(500, 'Invalid team');
+	}
+	const problem = await db.problem.findUnique({ where: { id: submission.problemId } });
+	if (!problem) {
+		throw error(500, 'Invalid problem');
+	}
+	let diff: string | null = null;
+	if (submission.state == SubmissionState.Incorrect) {
+		diff = Diff.createTwoFilesPatch(
+			'expected',
+			'actual',
+			problem.realOutput,
+			submission.actualOutput
+		);
+	}
+
+	return {
+		id: submission.id,
+		state: submission.state,
+		teamName: team.name,
+		problemName: problem.friendlyName,
+		submitTime: submission.createdAt,
+		gradedTime: submission.gradedAt,
+		message: submission.message,
+		diff: diff
+	};
+}) satisfies PageServerLoad;
diff --git a/web/src/routes/admin/submissions/[submissionId]/+page.svelte b/web/src/routes/admin/submissions/[submissionId]/+page.svelte
new file mode 100644
index 0000000..c149cd0
--- /dev/null
+++ b/web/src/routes/admin/submissions/[submissionId]/+page.svelte
@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { SubmissionState } from '@prisma/client';
+	import type { PageData } from './$types';
+	import { onMount } from 'svelte';
+	import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-base';
+	import 'diff2html/bundles/css/diff2html.min.css';
+
+	export let data: PageData;
+
+	onMount(() => {
+		if (data.diff) {
+			const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, data.diff, {
+				drawFileList: false,
+				matching: 'lines',
+				diffStyle: 'char',
+				outputFormat: 'side-by-side',
+				highlight: false,
+				fileContentToggle: false
+			});
+			diff2htmlUi.draw();
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Submission</title>
+</svelte:head>
+
+<h1 style="text-align:center" class="mb-4">Submission</h1>
+
+<a href="/admin/submissions" class="mb-3 btn btn-outline-primary">All Submissions</a>
+
+<table class="table table-bordered table-hover">
+	<thead>
+		<tr>
+			<th>Team</th>
+			<th>Problem</th>
+			<th>Submit Time</th>
+			<th>Graded Time</th>
+			<th>Message</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr
+			class={(data.state == SubmissionState.InReview
+				? 'table-warning'
+				: data.state == SubmissionState.Correct
+				? 'table-success'
+				: data.state == SubmissionState.Incorrect
+				? 'table-danger'
+				: '') + ' submission-row'}
+		>
+			<td>
+				{#if data.teamName}
+					{data.teamName}
+				{/if}
+			</td>
+			<td>
+				{#if data.problemName}
+					{data.problemName}
+				{/if}
+			</td>
+			<td>{data.submitTime.toLocaleDateString() + ' ' + data.submitTime.toLocaleTimeString()}</td>
+			<td>
+				{#if data.gradedTime}
+					{data.gradedTime.toLocaleDateString() + ' ' + data.gradedTime.toLocaleTimeString()}
+				{/if}
+			</td>
+			<td>{data.message ? data.message : ''}</td>
+		</tr>
+	</tbody>
+</table>
+
+{#if data.state == SubmissionState.InReview}
+	<div class="row">
+		<div class="text-center">
+			<a href={'/admin/diff/' + data.id} class="btn btn-warning">Review Submission</a>
+		</div>
+	</div>
+{:else if data.state == SubmissionState.Incorrect}
+	<h2 style="text-align:center">Diff</h2>
+	<div id="diff" />
+{/if}