fyp/webpage/src/routes/models/add/+page.svelte

<script lang="ts">
	import FileUpload from 'src/lib/FileUpload.svelte';
	import { postFormData, showMessage } from 'src/lib/requests.svelte';
	import { goto } from '$app/navigation';
	import { notificationStore } from 'src/lib/NotificationsStore.svelte';

	import 'src/styles/forms.css';

	let submitted = $state(false);

	let buttonClicked: Promise<void> = $state(Promise.resolve());

	let data = $state<{
		name: string;
		file?: File;
	}>({
		name: '',
		file: undefined
	});

	async function onSubmit() {
		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) {
			showMessage(e, notificationStore, '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>
		{#await buttonClicked}
			<div class="text-center">File Uploading</div>
		{:then}
			<button> Create </button>
		{/await}
	</form>
</main>

<style lang="scss">
	main {
		padding: 20px 15vw;
	}
</style>