Add reviews page

This commit is contained in:
orosmatthew 2023-04-26 22:40:53 -04:00
parent e8e75b3484
commit 68ba04380a
8 changed files with 133 additions and 68 deletions

View File

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

74
web/package-lock.json generated
View File

@ -9,25 +9,28 @@
"version": "0.0.1",
"dependencies": {
"@sveltejs/adapter-node": "^1.2.3",
"bootstrap-dark-5": "^1.1.3",
"diff2html": "^3.4.35"
"bootstrap": "^5.2.3",
"diff": "^5.1.0",
"diff2html": "^3.4.35",
"highlight.js": "^11.7.0"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^2.0.0",
"@sveltejs/kit": "^1.5.0",
"@sveltejs/adapter-auto": "^2.0.1",
"@sveltejs/kit": "^1.15.9",
"@types/bootstrap": "^5.2.6",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"eslint": "^8.28.0",
"eslint-config-prettier": "^8.5.0",
"@types/diff": "^5.0.3",
"@typescript-eslint/eslint-plugin": "^5.59.1",
"@typescript-eslint/parser": "^5.59.1",
"eslint": "^8.39.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-svelte3": "^4.0.0",
"prettier": "^2.8.0",
"prettier-plugin-svelte": "^2.8.1",
"svelte": "^3.54.0",
"svelte-check": "^3.0.1",
"tslib": "^2.4.1",
"typescript": "^5.0.0",
"vite": "^4.3.0"
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.0",
"svelte": "^3.58.0",
"svelte-check": "^3.2.0",
"tslib": "^2.5.0",
"typescript": "^5.0.4",
"vite": "^4.3.3"
}
},
"node_modules/@esbuild/android-arm": {
@ -691,12 +694,12 @@
}
},
"node_modules/@sveltejs/kit": {
"version": "1.15.8",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.8.tgz",
"integrity": "sha512-xPIF3UbFEA5BBZWFTGGUtSZ0O3DAtmzIp/yZZVdLIfzZ9+geKG3iGSVFnOUdYstjU7JcvJg12UC5MD5xoED59A==",
"version": "1.15.9",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.9.tgz",
"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",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.6.0.tgz",
"integrity": "sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==",
"optional": true,
"version": "11.7.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
"integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
"engines": {
"node": ">=12.0.0"
}

View File

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

View File

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

View File

@ -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;

View File

@ -1,20 +1,52 @@
<script lang="ts">
import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-slim';
import type { Diff2HtmlUIConfig } from 'diff2html/lib/ui/js/diff2html-ui';
import { Diff2HtmlUI } from 'diff2html/lib/ui/js/diff2html-ui-base';
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
index 0000001..0ddf2ba
--- a/sample.js
+++ b/sample.js
@@ -1 +1 @@
-console.log("Hello World!")
+console.log("Hello from Diff2Html!")`;
export let data: PageData;
onMount(() => {
const diff2htmlUi = new Diff2HtmlUI(document.getElementById('diff')!, diffString);
diff2htmlUi.draw();
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>

View File

@ -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;

View File

@ -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>