aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/routes/crc32
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--app/src/routes/crc32/+page.svelte55
1 files changed, 55 insertions, 0 deletions
diff --git a/app/src/routes/crc32/+page.svelte b/app/src/routes/crc32/+page.svelte
new file mode 100644
index 0000000..18cc515
--- /dev/null
+++ b/app/src/routes/crc32/+page.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+ import { FileDropzone, ProgressBar } from '@skeletonlabs/skeleton';
+ import { onMount } from 'svelte';
+
+ let disableInput = false;
+ let files: FileList;
+ let form: HTMLFormElement;
+ let worker: Worker;
+
+ function onUpload() {
+ disableInput = true;
+ worker.postMessage(files[0]);
+ form.reset();
+ }
+
+ onMount(async () => {
+ worker = new (await import('$lib/ts/crc32.worker?worker')).default();
+ worker.onmessage = (e: MessageEvent<Number>) => {
+ disableInput = false;
+ console.log(e.data);
+ };
+ });
+</script>
+
+<svelte:head>
+ <title>CRC32</title>
+</svelte:head>
+
+<div class="container h-full mx-auto flex justify-center items-center">
+ <div class="space-y-10 text-center flex flex-col items-center">
+ <form bind:this={form} on:submit|preventDefault={onUpload} method="POST" action="?/TODO">
+ <FileDropzone
+ name="checksumMe"
+ bind:files
+ on:change={() => form.requestSubmit()}
+ required
+ disabled={disableInput}
+ >
+ <svelte:fragment slot="lead">
+ <h2 class="h2">Drop a file here to get its CRC32 checksum.</h2>
+ </svelte:fragment>
+ </FileDropzone>
+ <br />
+ <noscript>
+ <button type="submit" class="btn variant-filled"
+ >After adding a file, click to submit! (Not yet implemented)</button
+ >
+ </noscript>
+ {#if disableInput}
+ <h3 class="h3">Calculating the checksum, this may take time!</h3> <br />
+ <ProgressBar />
+ {/if}
+ </form>
+ </div>
+</div>