From 4b6f25656b19a665281967419c07c1b0d17a6141 Mon Sep 17 00:00:00 2001
From: Valentin Brandl <mail@vbrandl.net>
Date: Tue, 30 Jul 2024 17:34:56 +0200
Subject: [PATCH] Use autocompletion input for names

---
 src/routes/+page.svelte | 34 ++++++++++++++++++++++------------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7e39ba2..a270820 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
 	import type { ActionData } from './$types';
+	import AutoComplete from 'simple-svelte-autocomplete';
 
 	export let form: ActionData;
+	
+	let selectedName: String;
+	let toCreate = '';
 
 	let files: FileList;
 	let sending = false;
@@ -21,6 +25,12 @@
 				.map(([k, v]) => `${(size / k).toFixed(1)} ${v}B`)[0] ?? `${size} bytes`
 		);
 	};
+	
+	async function loadNames(keyword: String) {
+		const url = "./names";
+		const response = await fetch(url);
+		return await response.json();
+	}
 </script>
 
 <form
@@ -44,14 +54,14 @@
 	<div class="field">
 		<label for="name" class="label">Name</label>
 		<div class="control">
-			<input
-				id="name"
-				class="input"
-				type="text"
-				name="name"
-				placeholder="Name"
-				value={form?.name ?? ''}
-				required
+		<AutoComplete
+			id="name"
+			name="name"
+			create={true}
+			bind:selectedItem={selectedName}
+			bind:text={selectedName}
+			createText=""
+			searchFunction={loadNames}
 			/>
 		</div>
 		{#if form?.field === 'name'}
@@ -69,10 +79,10 @@
 			<span class="file-cta">
 				<span class="file-label">Fotos auswählen...</span>
 			</span>
-			{#if files}
-				<span class="file-name"
-					>{files.length} Bild{#if files.length > 1}er{/if} ausgewählt ({fileSize(files)})</span
-				>
+			{#if files && files?.length !== 0}
+				<span class="file-name">
+					{files.length} Bild{#if files.length > 1}er{/if} ausgewählt ({fileSize(files)})
+				</span>
 			{:else}
 				<span class="file-name">Keine Bilder ausgewählt</span>
 			{/if}