From 2074c9c732f6d279f5153688b9e33bdc8c9c7674 Mon Sep 17 00:00:00 2001
From: Matt Strapp <matt@mattstrapp.net>
Date: Fri, 15 Sep 2023 13:54:56 -0500
Subject: Here goes nothing!

Signed-off-by: Matt Strapp <matt@mattstrapp.net>
---
 app/src/routes/crc32/+page.svelte | 55 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 app/src/routes/crc32/+page.svelte

(limited to 'app/src/routes/crc32')

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>
-- 
cgit v1.2.3