From efb47d25d182f58743ec06c68c4f6e4d85f18bfd Mon Sep 17 00:00:00 2001
From: orosmatthew <orosmatthew@pm.me>
Date: Tue, 9 May 2023 19:44:25 -0400
Subject: [PATCH] [web] Show output in submissions

---
 web/src/lib/styles/global.css                               | 6 ++++++
 web/src/routes/+layout.svelte                               | 1 +
 web/src/routes/admin/diff/[submissionId]/+page.svelte       | 2 +-
 .../routes/admin/submissions/[submissionId]/+page.server.ts | 3 ++-
 .../routes/admin/submissions/[submissionId]/+page.svelte    | 5 ++++-
 5 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 web/src/lib/styles/global.css

diff --git a/web/src/lib/styles/global.css b/web/src/lib/styles/global.css
new file mode 100644
index 0000000..91408f7
--- /dev/null
+++ b/web/src/lib/styles/global.css
@@ -0,0 +1,6 @@
+.code {
+	font-family: Menlo, Consolas, monospace;
+    white-space: pre;
+    overflow-wrap: normal;
+	overflow-x: scroll;
+}
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 889ad09..c1d879e 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import 'bootstrap/dist/css/bootstrap.min.css';
+	import '$lib/styles/global.css';
 	import { onMount } from 'svelte';
 	onMount(async () => {
 		await import('bootstrap');
diff --git a/web/src/routes/admin/diff/[submissionId]/+page.svelte b/web/src/routes/admin/diff/[submissionId]/+page.svelte
index 83fcd5d..bcf8cf5 100644
--- a/web/src/routes/admin/diff/[submissionId]/+page.svelte
+++ b/web/src/routes/admin/diff/[submissionId]/+page.svelte
@@ -72,7 +72,7 @@
 </div>
 
 <h3>Output</h3>
-<textarea use:stretchTextarea class="mb-3 form-control" disabled>{data.output}</textarea>
+<textarea use:stretchTextarea class="code mb-3 form-control" disabled>{data.output}</textarea>
 
 <h3>Diff</h3>
 <div class="mt-3" id="diff" />
diff --git a/web/src/routes/admin/submissions/[submissionId]/+page.server.ts b/web/src/routes/admin/submissions/[submissionId]/+page.server.ts
index 4a86ec2..44725a3 100644
--- a/web/src/routes/admin/submissions/[submissionId]/+page.server.ts
+++ b/web/src/routes/admin/submissions/[submissionId]/+page.server.ts
@@ -27,7 +27,8 @@ export const load = (async ({ params }) => {
 		submitTime: submission.createdAt,
 		gradedTime: submission.gradedAt,
 		message: submission.message,
-		diff: submission.diff
+		diff: submission.diff,
+		output: submission.actualOutput
 	};
 }) satisfies PageServerLoad;
 
diff --git a/web/src/routes/admin/submissions/[submissionId]/+page.svelte b/web/src/routes/admin/submissions/[submissionId]/+page.svelte
index d009239..825779a 100644
--- a/web/src/routes/admin/submissions/[submissionId]/+page.svelte
+++ b/web/src/routes/admin/submissions/[submissionId]/+page.svelte
@@ -4,6 +4,7 @@
 	import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-base';
 	import 'diff2html/bundles/css/diff2html.min.css';
 	import { enhance } from '$app/forms';
+	import { stretchTextarea } from '$lib/util';
 
 	export let data: PageData;
 	export let form: Actions;
@@ -106,6 +107,8 @@
 		</div>
 	</div>
 {:else if data.state == 'Incorrect'}
-	<h2 style="text-align:center">Diff</h2>
+	<h3 style="text-align:center">Output</h3>
+	<textarea use:stretchTextarea class="code mb-3 form-control" disabled>{data.output}</textarea>
+	<h3 style="text-align:center">Diff</h3>
 	<div id="diff" />
 {/if}