pages

2026-02-04 18:49:35 -06:00
parent 8ea632a14f
commit 5cd3af719d
9 changed files with 433 additions and 124 deletions
@@ -0,0 +1,117 @@
+<script lang="ts">
+	import * as Dialog from '$lib/components/ui/dialog';
+	import { Button, buttonVariants } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import * as RadioGroup from '$lib/components/ui/radio-group';
+	import { Label } from '$lib/components/ui/label';
+	import * as Field from '$lib/components/ui/field';
+
+	import ImageUpload from '$lib/components/custom/image-upload/image-upload.svelte';
+	import { genDescription } from '$lib/db/items.remote';
+	import { EMAIL_REGEX_STRING } from '$lib/consts';
+
+	let itemLocation: string | undefined = $state('');
+	let foundLocation: string | undefined = $state();
+	let description: string | undefined = $state();
+	let isGenerating = $state(false);
+
+	async function onSelect() {
+		isGenerating = true;
+		description = await genDescription();
+		isGenerating = false;
+	}
+
+	let { open = $bindable() }: { open: boolean } = $props();
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Submit Found Item</Dialog.Title>
+			<Dialog.Description>
+				Your item will need to be approved before becoming public.
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<form method="post" action="?/create" enctype="multipart/form-data">
+			<Field.Group>
+				<ImageUpload onSelect={onSelect} required />
+
+				<Field.Field>
+					<Field.Label for="description">
+						Description <span class="text-error">*</span>
+					</Field.Label>
+					<Input
+						id="description"
+						name="description"
+						bind:value={description}
+						placeholder="A red leather book bag..."
+						maxlength={200}
+						required
+					/>
+				</Field.Field>
+
+				<Field.Field>
+					<Field.Label for="foundLocation">
+						Where did you find it?
+					</Field.Label>
+					<Input
+						id="foundLocation"
+						name="foundLocation"
+						bind:value={foundLocation}
+						placeholder="By the tennis courts."
+						required
+					/>
+				</Field.Field>
+
+				<RadioGroup.Root name="location" bind:value={itemLocation}>
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="finderPossession" id="finderPossession" />
+						<Label for="finderPossession">
+							I still have the item.
+						</Label>
+					</div>
+
+					<div class="flex items-center space-x-2">
+						<RadioGroup.Item value="turnedIn" id="turnedIn" />
+						<Label for="turnedIn">
+							I turned the item in to the school lost and found.
+						</Label>
+					</div>
+				</RadioGroup.Root>
+
+				<Field.Field
+					class={itemLocation !== "finderPossession" ? "hidden pointer-events-none opacity-50" : ""}
+				>
+					<Field.Label for="email">
+						Your Email
+					</Field.Label>
+					<Input
+						id="email"
+						name="email"
+						placeholder="name@domain.com"
+						pattern={EMAIL_REGEX_STRING}
+						required={itemLocation === "finderPossession"}
+					/>
+				</Field.Field>
+			</Field.Group>
+
+			<Dialog.Footer class="mt-4">
+				<Dialog.Close
+					type="button"
+					class={buttonVariants({ variant: "outline" })}
+				>
+					Cancel
+				</Dialog.Close>
+				<Button type="submit">Submit</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>
+
+
+{#if isGenerating}
+	<div class="fixed inset-0 bg-black/75 z-999999 w-screen h-screen justify-center items-center flex">
+		<p class="text-6xl text-primary">Loading...</p>
+	</div>
+{/if}