245 lines
7.8 KiB
Svelte
245 lines
7.8 KiB
Svelte
<script>
|
|
import { deserialize, enhance } from '$app/forms';
|
|
import Alert from '$lib/components/ui/Alert.svelte';
|
|
import Button from '$lib/components/ui/Button.svelte';
|
|
import Modal from '$lib/components/ui/Modal/Modal.svelte';
|
|
import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
|
|
import ModalContent from '$lib/components/ui/Modal/ModalContent.svelte';
|
|
import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
|
|
import shortenFileSize from '$lib/helper/shortenFileSize.js';
|
|
import Exclamation from '$lib/icons/Exclamation.svelte';
|
|
|
|
export let form;
|
|
|
|
let open = false;
|
|
let inProgress = false;
|
|
let vorgang = '';
|
|
let name = '';
|
|
/** @type {?string}*/
|
|
let etag = null;
|
|
/** @type {?FileList} */
|
|
let files = null;
|
|
|
|
$: inProgress = form === null;
|
|
|
|
/** @type {?Record<string,any>}*/
|
|
let formErrors;
|
|
|
|
async function validateForm() {
|
|
let data = new FormData();
|
|
data.append('vorgang', vorgang);
|
|
data.append('name', name);
|
|
const response = await fetch('?/validate', { method: 'POST', body: data });
|
|
/** @type {import('@sveltejs/kit').ActionResult} */
|
|
const result = deserialize(await response.text());
|
|
|
|
let success = true;
|
|
if (result.type === 'success') {
|
|
formErrors = null;
|
|
} else {
|
|
if (result.type === 'failure' && result.data) formErrors = result.data;
|
|
success = false;
|
|
}
|
|
|
|
console.log('File', files);
|
|
if (!files?.length) {
|
|
formErrors = { file: 'Sie haben keine Datei ausgewählt.', ...formErrors };
|
|
success = false;
|
|
}
|
|
|
|
return success;
|
|
}
|
|
|
|
async function getUrl() {
|
|
let data = new FormData();
|
|
data.append('vorgang', vorgang);
|
|
data.append('name', name);
|
|
if (files?.length === 1) {
|
|
data.append('type', files[0].type);
|
|
data.append('fileName', files[0].name);
|
|
}
|
|
const response = await fetch('?/url', { method: 'POST', body: data });
|
|
/** @type {import('@sveltejs/kit').ActionResult} */
|
|
const result = deserialize(await response.text());
|
|
if (result.type === 'success') return result.data?.url;
|
|
|
|
return null;
|
|
}
|
|
|
|
/** @param {MouseEvent} event*/
|
|
async function buttonClick(event) {
|
|
if (!(await validateForm())) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
const url = await getUrl();
|
|
console.log('URL', url);
|
|
open = true;
|
|
inProgress = true;
|
|
|
|
fetch(url, { method: 'PUT', body: files[0] })
|
|
.then((response) => {
|
|
inProgress = false;
|
|
etag = '123';
|
|
console.log('SUCCESS', response);
|
|
})
|
|
.catch((err) => {
|
|
inProgress = false;
|
|
etag = null;
|
|
console.log('ERROR', err);
|
|
});
|
|
}
|
|
|
|
function uploadSuccessful() {
|
|
console.log('reset');
|
|
open = false;
|
|
vorgang = '';
|
|
name = '';
|
|
files = null;
|
|
}
|
|
</script>
|
|
|
|
<div class="mx-auto max-w-2xl">
|
|
<div class="flex flex-col items-center justify-center w-full">
|
|
<h1 class="text-xl">Datei zu Vorgang hinzufügen</h1>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="space-y-12">
|
|
<div class="border-b border-gray-900/10 pb-12">
|
|
<p class="mt-8 text-sm leading-6 text-gray-600">
|
|
This information will be displayed publicly so be careful what you share.
|
|
</p>
|
|
|
|
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8">
|
|
<div>
|
|
<label for="vorgang" class="block text-sm font-medium leading-6 text-gray-900"
|
|
><span class="flex"
|
|
>{#if formErrors?.vorgang}
|
|
<span class="inline-block mr-1"><Exclamation /></span>
|
|
{/if} Vorgang</span
|
|
></label
|
|
>
|
|
<div class="mt-2">
|
|
<div
|
|
class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
|
|
>
|
|
<input
|
|
bind:value={vorgang}
|
|
type="text"
|
|
name="vorgang"
|
|
id="vorgang"
|
|
autocomplete="vorgang"
|
|
class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{#if formErrors?.vorgang}
|
|
<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.vorgang}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div>
|
|
<label for="name" class="block text-sm font-medium leading-6 text-gray-900"
|
|
><span class="flex"
|
|
>{#if formErrors?.name}
|
|
<span class="inline-block mr-1"><Exclamation /></span>
|
|
{/if} Name</span
|
|
></label
|
|
>
|
|
<div class="mt-2">
|
|
<div
|
|
class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
|
|
>
|
|
<input
|
|
bind:value={name}
|
|
type="text"
|
|
name="name"
|
|
id="name"
|
|
autocomplete="name"
|
|
class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{#if formErrors?.name}
|
|
<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.name}</p>
|
|
{/if}
|
|
</div>
|
|
|
|
<div class="col-span-full">
|
|
<label for="file" class="block text-sm font-medium leading-6 text-gray-900"
|
|
><span class="flex"
|
|
>{#if formErrors?.file}
|
|
<span class="inline-block mr-1"><Exclamation /></span>
|
|
{/if} Datei</span
|
|
></label
|
|
>
|
|
<div
|
|
class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
|
|
>
|
|
<div class="text-center">
|
|
<svg
|
|
class="mx-auto h-12 w-12 text-gray-300"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<div class="mt-4 flex text-sm leading-6 text-gray-600">
|
|
<label
|
|
for="file"
|
|
class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
|
|
>
|
|
<span>Wähle eine Datei aus</span>
|
|
<input id="file" bind:files name="file" type="file" class="sr-only" />
|
|
</label>
|
|
<p class="pl-1">oder ziehe sie ins Feld</p>
|
|
</div>
|
|
<p class="text-xs leading-5 text-gray-600">GLB Dateien bis zu 1GB</p>
|
|
{#if files?.length}
|
|
<div class="flex justify-center text-xs">
|
|
<p class="mx-2">Datei: <span class="font-bold">{files[0].name}</span></p>
|
|
<p class="mx-2">
|
|
Größe: <span class="font-bold">{shortenFileSize(files[0].size)}</span>
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{#if formErrors?.file}
|
|
<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.file}</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex items-center justify-end gap-x-6">
|
|
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
|
|
<Button
|
|
on:click={buttonClick}
|
|
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
|
>Save</Button
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Modal {open}
|
|
><ModalTitle>Upload</ModalTitle><ModalContent>
|
|
{#if inProgress}
|
|
<p class="py-2 mb-1">Upload läuft...</p>
|
|
{:else if etag}
|
|
<Alert class="w-full">Upload erfolgreich</Alert>
|
|
{:else}
|
|
<Alert class="w-full" type="error">Fehler beim Upload</Alert>
|
|
{/if}
|
|
</ModalContent>
|
|
<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
|
|
</Modal>
|
|
</div>
|