diff options
Diffstat (limited to 'app/src')
| -rw-r--r-- | app/src/lib/svelte/Navigation.svelte | 2 | ||||
| -rw-r--r-- | app/src/lib/ts/download.ts | 5 | ||||
| -rw-r--r-- | app/src/routes/+layout.svelte | 34 | ||||
| -rw-r--r-- | app/src/routes/+page.svelte | 2 | ||||
| -rw-r--r-- | app/src/routes/truncate/+page.svelte | 49 |
5 files changed, 50 insertions, 42 deletions
diff --git a/app/src/lib/svelte/Navigation.svelte b/app/src/lib/svelte/Navigation.svelte index 973924a..f0535ef 100644 --- a/app/src/lib/svelte/Navigation.svelte +++ b/app/src/lib/svelte/Navigation.svelte @@ -1,7 +1,7 @@ <script lang="ts"> + import { page } from '$app/stores'; import Icon from '@iconify/svelte'; import { AppRail, AppRailAnchor, getDrawerStore } from '@skeletonlabs/skeleton'; - import { page } from '$app/stores'; const drawerStore = getDrawerStore(); diff --git a/app/src/lib/ts/download.ts b/app/src/lib/ts/download.ts index 16712fb..c3e98b0 100644 --- a/app/src/lib/ts/download.ts +++ b/app/src/lib/ts/download.ts @@ -19,10 +19,11 @@ export default async function saveFile(blob: ArrayBuffer, suggestedName: string const writable = await handle.createWritable(); await writable.write(blob); await writable.close(); + return; } catch (err: unknown) { // TypeScript if ((err as Error)?.name !== 'AbortError') { - console.error(err); + return Promise.reject(err); } } } else { @@ -30,5 +31,7 @@ export default async function saveFile(blob: ArrayBuffer, suggestedName: string anchor.download = suggestedName ?? 'truncated'; anchor.href = URL.createObjectURL(new Blob([blob])); anchor.click(); + URL.revokeObjectURL(anchor.href); + document.body.removeChild(anchor); } } diff --git a/app/src/routes/+layout.svelte b/app/src/routes/+layout.svelte index 519a11d..1a15251 100644 --- a/app/src/routes/+layout.svelte +++ b/app/src/routes/+layout.svelte @@ -1,20 +1,20 @@ <script lang="ts"> - import { useRegisterSW } from 'virtual:pwa-register/svelte'; - import { pwaInfo } from 'virtual:pwa-info'; - import { onMount } from 'svelte'; + import Navigation from '$lib/svelte/Navigation.svelte'; + import Icon from '@iconify/svelte'; import { - AppShell, - AppBar, - getDrawerStore, - getToastStore, - initializeStores, - Toast, - Drawer + AppBar, + AppShell, + Drawer, + Toast, + getDrawerStore, + getToastStore, + initializeStores } from '@skeletonlabs/skeleton'; - - import Navigation from '$lib/svelte/Navigation.svelte'; - + import { onMount } from 'svelte'; + import { pwaInfo } from 'virtual:pwa-info'; + import { useRegisterSW } from 'virtual:pwa-register/svelte'; import '../app.postcss'; + // Floating UI for Popups // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; // import { storePopup } from '@skeletonlabs/skeleton'; @@ -75,13 +75,7 @@ <svelte:fragment slot="lead"> <div class="flex items-center"> <button class="lg:hidden btn btn-sm mr-4" on:click={drawerOpen}> - <span> - <svg viewBox="0 0 100 80" class="fill-token w-4 h-4"> - <rect width="100" height="20" /> - <rect y="30" width="100" height="20" /> - <rect y="60" width="100" height="20" /> - </svg> - </span> + <Icon icon="carbon:menu" width=25 /> </button> <strong class="text-xl uppercase">A!</strong> </div> diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index 1f0a15d..e34c31e 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -11,5 +11,5 @@ </div> <style lang="postcss"> - + </style> diff --git a/app/src/routes/truncate/+page.svelte b/app/src/routes/truncate/+page.svelte index 1b37f56..6e0cfcd 100644 --- a/app/src/routes/truncate/+page.svelte +++ b/app/src/routes/truncate/+page.svelte @@ -1,6 +1,7 @@ <script lang="ts"> import saveFile from '$lib/ts/download'; import type { TruncateRequest, TruncateResponse } from '$lib/types/truncate-worker'; + import Icon from '@iconify/svelte'; import { FileDropzone, ProgressBar } from '@skeletonlabs/skeleton'; import { onMount } from 'svelte'; @@ -18,15 +19,15 @@ file: files[0], size: truncateTo } as TruncateRequest); - form.reset(); - truncateTo = 1; } onMount(async () => { worker = new Worker(new URL('$lib/ts/truncate.worker.ts', import.meta.url), { type: 'module' }); - worker.onmessage = (e: MessageEvent<TruncateResponse>) => { + worker.onmessage = async (e: MessageEvent<TruncateResponse>) => { + await saveFile(e.data.file, `trunc-${originalName}`).catch((e) => console.error(e)); disableInput = false; - saveFile(e.data.file, `trunc-${originalName}`); + form.reset(); + truncateTo = 1; }; }); </script> @@ -38,19 +39,28 @@ <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"> + <noscript> + <h3 class="h3">You need JavaScript to use this page, for now ;)</h3> + <br /> + </noscript> <label class="label" for="truncateMe"> - <FileDropzone - id="truncateMe" - name="truncateMe" - bind:files - on:change={() => form.requestSubmit()} - required - disabled={disableInput} - > - <svelte:fragment slot="lead"> - <h2 class="h2">Drop a file here to truncate it.</h2> - </svelte:fragment> - </FileDropzone> + <div class="space-y-4 w-full"> + <FileDropzone + id="truncateMe" + name="truncateMe" + bind:files + on:change={() => form.requestSubmit()} + required + disabled={disableInput} + > + <svelte:fragment slot="lead"> + <div class="flex justify-center items-center"> + <Icon icon="carbon:file-storage" width="50" /> + </div> + </svelte:fragment> + <svelte:fragment slot="meta">Drop a file here to truncate it.</svelte:fragment> + </FileDropzone> + </div> </label> <br /> <label class="label"> @@ -66,9 +76,10 @@ </label> <br /> <noscript> - <button type="submit" class="btn variant-filled" - >After adding a file, click to submit! (Not yet implemented)</button - > + <br /> + <button type="submit" class="btn variant-filled" disabled> + After adding a file, click to submit! (Not yet implemented) + </button> </noscript> {#if disableInput} <h3 class="h3">Truncating the file, this may take time!</h3> |