aboutsummaryrefslogtreecommitdiff
path: root/src/lib/Tools/InputTemplate.svelte
blob: cfccdc754bdef75d350eee05d0b5fe19eb8a6706 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<script lang="ts">
	import { clearAllParameters } from '$lib/Utility/parameters';
	import { onMount } from 'svelte';
	import SettingHint from '$lib/Settings/SettingHint.svelte';

	export let field: string;
	export let submission: string;
	export let event: string | undefined = undefined;
	export let submitText: string;
	export let saveParameters: string[] = [];
	export let onSubmit = () => {
		return;
	};
	export let prompt = `Enter a ${field.toLowerCase()} to search for to continue.`;
	export let hint: string | undefined = undefined;

	let input = '';

	onMount(() => clearAllParameters(saveParameters));
</script>

<div class="card">
	<p>
		<!-- svelte-ignore missing-declaration -->
		<input
			type="text"
			placeholder={field}
			bind:value={input}
			on:keypress={(e) => {
				if (e.key === 'Enter') {
					submission = input;

					onSubmit();

					// eslint-disable-next-line no-undef
					if (event) umami.track(event);
				}
			}}
		/>
		<button
			class="button-lined"
			on:click={() => {
				submission = input;

				onSubmit();
			}}
			title="Or click your Enter key"
			data-umami-event={event}
		>
			{submitText}
		</button>

		{#if hint !== undefined}
			<br />
			<div style="margin-top: .25rem;">
				<SettingHint>{hint}</SettingHint>
			</div>
		{/if}
	</p>

	{#if submission !== ''}
		<slot />
	{:else}
		<p />

		{prompt}
	{/if}
</div>