Add reviews page

web/.prettierrc

@@ -1,4 +1,5 @@
 {
+	"tabWidth": 2,
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",

web/package-lock.json

@@ -9,25 +9,28 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"@sveltejs/adapter-node": "^1.2.3",
-				"bootstrap-dark-5": "^1.1.3",
+				"bootstrap": "^5.2.3",
-				"diff2html": "^3.4.35"
+				"diff": "^5.1.0",
+				"diff2html": "^3.4.35",
+				"highlight.js": "^11.7.0"
 			},
 			"devDependencies": {
-				"@sveltejs/adapter-auto": "^2.0.0",
+				"@sveltejs/adapter-auto": "^2.0.1",
-				"@sveltejs/kit": "^1.5.0",
+				"@sveltejs/kit": "^1.15.9",
 				"@types/bootstrap": "^5.2.6",
-				"@typescript-eslint/eslint-plugin": "^5.45.0",
+				"@types/diff": "^5.0.3",
-				"@typescript-eslint/parser": "^5.45.0",
+				"@typescript-eslint/eslint-plugin": "^5.59.1",
-				"eslint": "^8.28.0",
+				"@typescript-eslint/parser": "^5.59.1",
-				"eslint-config-prettier": "^8.5.0",
+				"eslint": "^8.39.0",
+				"eslint-config-prettier": "^8.8.0",
 				"eslint-plugin-svelte3": "^4.0.0",
-				"prettier": "^2.8.0",
+				"prettier": "^2.8.8",
-				"prettier-plugin-svelte": "^2.8.1",
+				"prettier-plugin-svelte": "^2.10.0",
-				"svelte": "^3.54.0",
+				"svelte": "^3.58.0",
-				"svelte-check": "^3.0.1",
+				"svelte-check": "^3.2.0",
-				"tslib": "^2.4.1",
+				"tslib": "^2.5.0",
-				"typescript": "^5.0.0",
+				"typescript": "^5.0.4",
-				"vite": "^4.3.0"
+				"vite": "^4.3.3"
 			}
 		},
 		"node_modules/@esbuild/android-arm": {
@@ -691,12 +694,12 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "1.15.8",
+			"version": "1.15.9",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.8.tgz",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.9.tgz",
-			"integrity": "sha512-xPIF3UbFEA5BBZWFTGGUtSZ0O3DAtmzIp/yZZVdLIfzZ9+geKG3iGSVFnOUdYstjU7JcvJg12UC5MD5xoED59A==",
+			"integrity": "sha512-Og+4WlguPVPS0PmAHefp4KxvTVZfyDN09aORVXIdKSzqzodSJiLs7Fhi/Q0z0YjmcoNLWF24tI0a6mTusL6Yfg==",
 			"hasInstallScript": true,
 			"dependencies": {
-				"@sveltejs/vite-plugin-svelte": "^2.1.0",
+				"@sveltejs/vite-plugin-svelte": "^2.1.1",
 				"@types/cookie": "^0.5.1",
 				"cookie": "^0.5.0",
 				"devalue": "^4.3.0",
@@ -755,6 +758,12 @@
 			"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.5.1.tgz",
 			"integrity": "sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g=="
 		},
+		"node_modules/@types/diff": {
+			"version": "5.0.3",
+			"resolved": "https://registry.npmjs.org/@types/diff/-/diff-5.0.3.tgz",
+			"integrity": "sha512-amrLbRqTU9bXMCc6uX0sWpxsQzRIo9z6MJPkH1pkez/qOxuqSZVuryJAWoBRq94CeG8JxY+VK4Le9HtjQR5T9A==",
+			"dev": true
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
@@ -1097,17 +1106,6 @@
 				"@popperjs/core": "^2.11.6"
 			}
 		},
-		"node_modules/bootstrap-dark-5": {
-			"version": "1.1.3",
-			"resolved": "https://registry.npmjs.org/bootstrap-dark-5/-/bootstrap-dark-5-1.1.3.tgz",
-			"integrity": "sha512-3Paopsp8wyOM1oeaLWLFuUZThhRc3tBYKUnoF+uwrU/xN4G47MCLZlALBJNqYqAecg7dSln9vgaYK1CwPnTeBw==",
-			"dependencies": {
-				"bootstrap": "^5.1.3"
-			},
-			"peerDependencies": {
-				"@popperjs/core": "^2.10.2"
-			}
-		},
 		"node_modules/brace-expansion": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1343,6 +1341,15 @@
 				"highlight.js": "11.6.0"
 			}
 		},
+		"node_modules/diff2html/node_modules/highlight.js": {
+			"version": "11.6.0",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+			"integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+			"optional": true,
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/dir-glob": {
 			"version": "3.0.1",
 			"resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -1884,10 +1891,9 @@
 			}
 		},
 		"node_modules/highlight.js": {
-			"version": "11.6.0",
+			"version": "11.7.0",
-			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
+			"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
-			"integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
+			"integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
-			"optional": true,
 			"engines": {
 				"node": ">=12.0.0"
 			}

web/package.json

@@ -12,26 +12,29 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-auto": "^2.0.1",
-		"@sveltejs/kit": "^1.5.0",
+		"@sveltejs/kit": "^1.15.9",
 		"@types/bootstrap": "^5.2.6",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@types/diff": "^5.0.3",
-		"@typescript-eslint/parser": "^5.45.0",
+		"@typescript-eslint/eslint-plugin": "^5.59.1",
-		"eslint": "^8.28.0",
+		"@typescript-eslint/parser": "^5.59.1",
-		"eslint-config-prettier": "^8.5.0",
+		"eslint": "^8.39.0",
+		"eslint-config-prettier": "^8.8.0",
 		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.0",
+		"prettier": "^2.8.8",
-		"prettier-plugin-svelte": "^2.8.1",
+		"prettier-plugin-svelte": "^2.10.0",
-		"svelte": "^3.54.0",
+		"svelte": "^3.58.0",
-		"svelte-check": "^3.0.1",
+		"svelte-check": "^3.2.0",
-		"tslib": "^2.4.1",
+		"tslib": "^2.5.0",
-		"typescript": "^5.0.0",
+		"typescript": "^5.0.4",
-		"vite": "^4.3.0"
+		"vite": "^4.3.3"
 	},
 	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.2.3",
-		"bootstrap-dark-5": "^1.1.3",
+		"bootstrap": "^5.2.3",
-		"diff2html": "^3.4.35"
+		"diff": "^5.1.0",
+		"diff2html": "^3.4.35",
+		"highlight.js": "^11.7.0"
 	}
 }

web/src/routes/+layout.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	import 'bootstrap-dark-5/dist/css/bootstrap-night.min.css';
+	import 'bootstrap/dist/css/bootstrap.min.css';
-	import { onMount } from 'svelte';
-
-	onMount(async () => {
-		await import('bootstrap');
-	});
 </script>
 
-<slot />
+<body class="container">
+	<slot />
+</body>

web/src/routes/diff-test/+page.server.ts

@@ -0,0 +1,7 @@
+import type { PageServerLoad } from './$types';
+import * as Diff from 'diff';
+
+export const load = (async () => {
+	let diff = Diff.createTwoFilesPatch('data', 'data', 'abc', 'abd');
+	return { diff: diff };
+}) satisfies PageServerLoad;

web/src/routes/diff-test/+page.svelte

@@ -1,20 +1,52 @@
 <script lang="ts">
-	import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-slim';
+	import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-base';
-	import type { Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui';
+	import 'diff2html/bundles/css/diff2html.min.css';
 	import { onMount } from 'svelte';
+	import type { PageData } from './$types';
 
-	const diffString = `diff --git a/sample.js b/sample.js
+	export let data: PageData;
-        index 0000001..0ddf2ba
-        --- a/sample.js
-        +++ b/sample.js
-        @@ -1 +1 @@
-        -console.log("Hello World!")
-        +console.log("Hello from Diff2Html!")`;
 
 	onMount(() => {
-		const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, diffString);
+		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();
+
+		let incorrectBtn = document.getElementById('btn_incorrect')! as HTMLInputElement;
+		let correctBtn = document.getElementById('btn_correct')! as HTMLInputElement;
+		let submitBtn = document.getElementById('submit_btn')! as HTMLButtonElement;
+
+		incorrectBtn?.addEventListener('change', () => {
+			submitBtn.disabled = false;
+		});
+		correctBtn?.addEventListener('change', () => {
+			submitBtn.disabled = false;
+		});
 	});
 </script>
 
-<div id="diff" />
+<svelte:head>
+	<title>Diff Test</title>
+</svelte:head>
+
+<h1 class="mb-4">Diff Test</h1>
+
+<a href="/reviews" class="btn btn-outline-primary">Back</a>
+<div class="mt-3" id="diff" />
+
+<div class="row justify-content-end">
+	<div class="text-end">
+		<div class="btn-group" role="group">
+			<input type="radio" class="btn-check" name="btnradio" id="btn_incorrect" autocomplete="off" />
+			<label class="btn btn-outline-danger" for="btn_incorrect">Incorrect</label>
+			<input type="radio" class="btn-check" name="btnradio" id="btn_correct" autocomplete="off" />
+			<label class="btn btn-outline-success" for="btn_correct">Correct</label>
+		</div>
+		<button id="submit_btn" type="button" class="btn btn-primary" disabled>Submit</button>
+	</div>
+</div>

web/src/routes/reviews/+page.server.ts

@@ -0,0 +1,6 @@
+import type { PageServerLoad } from './$types';
+
+export const load = (async () => {
+	let reviewList = ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'];
+	return { reviewList: reviewList };
+}) satisfies PageServerLoad;

web/src/routes/reviews/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<h1 class="mb-4">Reviews</h1>
+
+<ul class="list-group">
+	{#each data.reviewList as review}
+		<a href="/diff-test" class="list-group-item list-group-item-action">{review}</a>
+	{/each}
+</ul>