92 lines
2.2 KiB
Svelte
92 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import FileUpload from 'src/lib/FileUpload.svelte';
|
|
import MessageSimple from 'src/lib/MessageSimple.svelte';
|
|
import { postFormData } from 'src/lib/requests.svelte';
|
|
import { goto } from '$app/navigation';
|
|
|
|
import 'src/styles/forms.css';
|
|
|
|
let submitted = $state(false);
|
|
|
|
let message: MessageSimple;
|
|
|
|
let buttonClicked: Promise<void> = $state(Promise.resolve());
|
|
|
|
let data = $state<{
|
|
name: string;
|
|
file?: File;
|
|
}>({
|
|
name: '',
|
|
file: undefined
|
|
});
|
|
|
|
async function onSubmit() {
|
|
message.display('');
|
|
buttonClicked = new Promise<void>(() => {});
|
|
|
|
if (!data.file || !data.name) return;
|
|
|
|
let formData = new FormData();
|
|
formData.append('name', data.name);
|
|
formData.append('file', data.file, 'base-image.png');
|
|
|
|
try {
|
|
let id = await postFormData('models/add', formData);
|
|
goto(`/models/edit?id=${id}`);
|
|
} catch (e) {
|
|
if (e instanceof Response) {
|
|
message.display(await e.json());
|
|
} else {
|
|
message.display('Was not able to create model');
|
|
}
|
|
}
|
|
|
|
buttonClicked = Promise.resolve();
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Create new Model</title>
|
|
</svelte:head>
|
|
|
|
<main>
|
|
<h1>Create new Model</h1>
|
|
<form class:submitted on:submit|preventDefault={onSubmit}>
|
|
<fieldset>
|
|
<label for="name">Name</label>
|
|
<input id="name" name="name" required bind:value={data.name} />
|
|
<!--{{if .NameFoundError}}
|
|
<span class="form-msg error">
|
|
You already have a model with that name.
|
|
</span>
|
|
{{end}}-->
|
|
</fieldset>
|
|
<fieldset class="file-upload">
|
|
<label for="file">Base image</label>
|
|
<div class="form-msg">
|
|
Please provide a base image.<br />
|
|
This image is a sample of the images that you are going to classfiy.
|
|
</div>
|
|
<FileUpload replace_slot bind:file={data.file}>
|
|
<img src="/imgs/upload-icon.png" alt="" />
|
|
<span> Upload image </span>
|
|
<div slot="replaced-name">
|
|
<span> Image selected </span>
|
|
</div>
|
|
</FileUpload>
|
|
</fieldset>
|
|
<MessageSimple bind:this={message} />
|
|
{#await buttonClicked}
|
|
<div class="text-center">File Uploading</div>
|
|
{:then}
|
|
<button> Create </button>
|
|
{/await}
|
|
</form>
|
|
</main>
|
|
|
|
<style lang="scss">
|
|
main {
|
|
padding: 20px 15vw;
|
|
}
|
|
</style>
|