Use spaces, run prettier on project
This commit is contained in:
ZXY101
@@ -1,152 +1,152 @@
|
||||
<script lang="ts">
|
||||
import { Button, Dropzone, Modal, Spinner } from 'flowbite-svelte';
|
||||
import FileUpload from './FileUpload.svelte';
|
||||
import { processFiles } from '$lib/upload';
|
||||
import { onMount } from 'svelte';
|
||||
import { scanFiles } from '$lib/upload';
|
||||
import { formatBytes } from '$lib/util/upload';
|
||||
import { catalog } from '$lib/catalog';
|
||||
import { Button, Dropzone, Modal, Spinner } from 'flowbite-svelte';
|
||||
import FileUpload from './FileUpload.svelte';
|
||||
import { processFiles } from '$lib/upload';
|
||||
import { onMount } from 'svelte';
|
||||
import { scanFiles } from '$lib/upload';
|
||||
import { formatBytes } from '$lib/util/upload';
|
||||
import { catalog } from '$lib/catalog';
|
||||
|
||||
export let open = false;
|
||||
export let open = false;
|
||||
|
||||
let promise: Promise<void>;
|
||||
let files: FileList | undefined = undefined;
|
||||
let promise: Promise<void>;
|
||||
let files: FileList | undefined = undefined;
|
||||
|
||||
async function onUpload() {
|
||||
if (files) {
|
||||
promise = processFiles([...files]).then(() => {
|
||||
open = false;
|
||||
});
|
||||
} else if (draggedFiles) {
|
||||
promise = processFiles(draggedFiles).then(() => {
|
||||
open = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
async function onUpload() {
|
||||
if (files) {
|
||||
promise = processFiles([...files]).then(() => {
|
||||
open = false;
|
||||
});
|
||||
} else if (draggedFiles) {
|
||||
promise = processFiles(draggedFiles).then(() => {
|
||||
open = false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
files = undefined;
|
||||
draggedFiles = undefined;
|
||||
}
|
||||
function reset() {
|
||||
files = undefined;
|
||||
draggedFiles = undefined;
|
||||
}
|
||||
|
||||
let storageSpace = 'Loading...';
|
||||
let storageSpace = 'Loading...';
|
||||
|
||||
onMount(() => {
|
||||
navigator.storage.estimate().then(({ usage, quota }) => {
|
||||
if (usage && quota) {
|
||||
storageSpace = `Storage: ${formatBytes(usage)} / ${formatBytes(quota)}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
onMount(() => {
|
||||
navigator.storage.estimate().then(({ usage, quota }) => {
|
||||
if (usage && quota) {
|
||||
storageSpace = `Storage: ${formatBytes(usage)} / ${formatBytes(quota)}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
let filePromises: Promise<File>[];
|
||||
let draggedFiles: File[] | undefined;
|
||||
let loading = false;
|
||||
$: disabled = loading || (!draggedFiles && !files);
|
||||
let filePromises: Promise<File>[];
|
||||
let draggedFiles: File[] | undefined;
|
||||
let loading = false;
|
||||
$: disabled = loading || (!draggedFiles && !files);
|
||||
|
||||
const dropHandle = async (event: DragEvent) => {
|
||||
loading = true;
|
||||
draggedFiles = [];
|
||||
filePromises = [];
|
||||
event.preventDefault();
|
||||
activeStyle = defaultStyle;
|
||||
const dropHandle = async (event: DragEvent) => {
|
||||
loading = true;
|
||||
draggedFiles = [];
|
||||
filePromises = [];
|
||||
event.preventDefault();
|
||||
activeStyle = defaultStyle;
|
||||
|
||||
if (event?.dataTransfer?.items) {
|
||||
for (const item of [...event.dataTransfer.items]) {
|
||||
const entry = item.webkitGetAsEntry();
|
||||
if (item.kind === 'file' && entry) {
|
||||
if (entry.isDirectory) {
|
||||
await scanFiles(entry, filePromises);
|
||||
} else {
|
||||
const file = item.getAsFile();
|
||||
if (file) {
|
||||
draggedFiles.push(file);
|
||||
draggedFiles = draggedFiles;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (event?.dataTransfer?.items) {
|
||||
for (const item of [...event.dataTransfer.items]) {
|
||||
const entry = item.webkitGetAsEntry();
|
||||
if (item.kind === 'file' && entry) {
|
||||
if (entry.isDirectory) {
|
||||
await scanFiles(entry, filePromises);
|
||||
} else {
|
||||
const file = item.getAsFile();
|
||||
if (file) {
|
||||
draggedFiles.push(file);
|
||||
draggedFiles = draggedFiles;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (filePromises && filePromises.length > 0) {
|
||||
const files = await Promise.all(filePromises);
|
||||
if (files) {
|
||||
draggedFiles = [...draggedFiles, ...files];
|
||||
}
|
||||
}
|
||||
}
|
||||
if (filePromises && filePromises.length > 0) {
|
||||
const files = await Promise.all(filePromises);
|
||||
if (files) {
|
||||
draggedFiles = [...draggedFiles, ...files];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
loading = false;
|
||||
};
|
||||
loading = false;
|
||||
};
|
||||
|
||||
let defaultStyle =
|
||||
'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
|
||||
let highlightStyle =
|
||||
'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:bg-bray-800 dark:bg-gray-700 bg-gray-100 dark:border-gray-600 dark:border-gray-500 dark:bg-gray-600';
|
||||
let defaultStyle =
|
||||
'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
|
||||
let highlightStyle =
|
||||
'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:bg-bray-800 dark:bg-gray-700 bg-gray-100 dark:border-gray-600 dark:border-gray-500 dark:bg-gray-600';
|
||||
|
||||
let activeStyle = defaultStyle;
|
||||
let activeStyle = defaultStyle;
|
||||
</script>
|
||||
|
||||
<Modal title="Upload" bind:open outsideclose on:close={reset}>
|
||||
{#await promise}
|
||||
<h2 class="justify-center flex">Loading...</h2>
|
||||
<div class="text-center"><Spinner /></div>
|
||||
{:then}
|
||||
<Dropzone
|
||||
id="dropzone"
|
||||
on:drop={dropHandle}
|
||||
on:dragover={(event) => {
|
||||
event.preventDefault();
|
||||
activeStyle = highlightStyle;
|
||||
}}
|
||||
on:dragleave={(event) => {
|
||||
event.preventDefault();
|
||||
activeStyle = defaultStyle;
|
||||
}}
|
||||
on:click={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
defaultClass={activeStyle}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="mb-3 w-10 h-10 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
/></svg
|
||||
>
|
||||
{#if files}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Upload {files.length}
|
||||
{files.length > 1 ? 'files' : 'file'}?
|
||||
</p>
|
||||
{:else if draggedFiles && draggedFiles.length > 0}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Upload {draggedFiles.length} hih
|
||||
{draggedFiles.length > 1 ? 'files' : 'file'}?
|
||||
</p>
|
||||
{:else if loading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Drag and drop / <FileUpload bind:files accept=".mokuro,.zip,.cbz" multiple
|
||||
>choose files</FileUpload
|
||||
> /
|
||||
<FileUpload bind:files webkitdirectory>choose directory</FileUpload>
|
||||
</p>
|
||||
{/if}
|
||||
</Dropzone>
|
||||
{#await promise}
|
||||
<h2 class="justify-center flex">Loading...</h2>
|
||||
<div class="text-center"><Spinner /></div>
|
||||
{:then}
|
||||
<Dropzone
|
||||
id="dropzone"
|
||||
on:drop={dropHandle}
|
||||
on:dragover={(event) => {
|
||||
event.preventDefault();
|
||||
activeStyle = highlightStyle;
|
||||
}}
|
||||
on:dragleave={(event) => {
|
||||
event.preventDefault();
|
||||
activeStyle = defaultStyle;
|
||||
}}
|
||||
on:click={(event) => {
|
||||
event.preventDefault();
|
||||
}}
|
||||
defaultClass={activeStyle}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="mb-3 w-10 h-10 text-gray-400"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
/></svg
|
||||
>
|
||||
{#if files}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Upload {files.length}
|
||||
{files.length > 1 ? 'files' : 'file'}?
|
||||
</p>
|
||||
{:else if draggedFiles && draggedFiles.length > 0}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Upload {draggedFiles.length} hih
|
||||
{draggedFiles.length > 1 ? 'files' : 'file'}?
|
||||
</p>
|
||||
{:else if loading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
Drag and drop / <FileUpload bind:files accept=".mokuro,.zip,.cbz" multiple
|
||||
>choose files</FileUpload
|
||||
> /
|
||||
<FileUpload bind:files webkitdirectory>choose directory</FileUpload>
|
||||
</p>
|
||||
{/if}
|
||||
</Dropzone>
|
||||
|
||||
<p class=" text-sm text-gray-500 dark:text-gray-400 text-center">{storageSpace}</p>
|
||||
<div class="flex flex-1 flex-col gap-2">
|
||||
<Button outline on:click={reset} {disabled} color="dark">Reset</Button>
|
||||
<Button outline on:click={onUpload} {disabled}>Upload</Button>
|
||||
</div>
|
||||
{/await}
|
||||
<p class=" text-sm text-gray-500 dark:text-gray-400 text-center">{storageSpace}</p>
|
||||
<div class="flex flex-1 flex-col gap-2">
|
||||
<Button outline on:click={reset} {disabled} color="dark">Reset</Button>
|
||||
<Button outline on:click={onUpload} {disabled}>Upload</Button>
|
||||
</div>
|
||||
{/await}
|
||||
</Modal>
|
||||
|
||||
Reference in New Issue
Block a user