verschoben von innohub/k3s repo

src/routes/(angemeldet)/tatorte/+page.svelte

@@ -0,0 +1,99 @@
+<script>
+	import Alert from '$lib/components/ui/Alert.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import Modal from '$lib/components/ui/Modal/Modal.svelte';
+	import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
+	import ModalContent from '$lib/components/ui/Modal/ModalContent.svelte';
+	import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
+	import Exclamation from '$lib/icons/Exclamation.svelte';
+
+	export let form;
+
+	let open = false;
+	$: open = form?.success ?? false;
+</script>
+
+<div class="mx-auto max-w-2xl">
+	<div class="flex flex-col items-center justify-center w-full">
+		<h1 class="text-xl">Neuer Vorgang</h1>
+	</div>
+
+	<form method="POST">
+		<div class="space-y-12">
+			<div class="border-b border-gray-900/10 pb-12">
+				<p class="mt-8 text-sm leading-6 text-gray-600">
+					This information will be displayed publicly so be careful what you share.
+				</p>
+
+				<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8">
+					<div>
+						<label for="caseNumber" class="block text-sm font-medium leading-6 text-gray-900"
+							><span class="flex"
+								>{#if form?.error?.caseNumber}
+									<span class="inline-block mr-1"><Exclamation /></span>
+								{/if} Vorgangs-Nr.</span
+							></label
+						>
+						<div class="mt-2">
+							<div
+								class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600"
+							>
+								<input
+									value={form?.caseNumber ?? ''}
+									type="text"
+									name="caseNumber"
+									id="caseNumber"
+									class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 text-sm leading-6"
+								/>
+							</div>
+						</div>
+						{#if form?.error?.caseNumber}
+							<p class="block text-sm leading-6 text-red-900 mt-2">{form.error.caseNumber}</p>
+						{/if}
+					</div>
+
+					<div>
+						<label for="description" class="block text-sm font-medium leading-6 text-gray-900"
+							><span class="flex"
+								>{#if form?.error?.description}
+									<span class="inline-block mr-1"><Exclamation /></span>
+								{/if} Beschreibung</span
+							></label
+						>
+						<div class="mt-2">
+							<textarea
+								value={form?.description ?? ''}
+								id="description"
+								name="description"
+								rows="3"
+								class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+							/>
+						</div>
+						{#if form?.error?.description}
+							<p class="block text-sm leading-6 text-red-900 mt-2">{form.error.description}</p>
+						{/if}
+					</div>
+				</div>
+			</div>
+			<div class="mt-6 flex items-center justify-end gap-x-6">
+				<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
+				<Button
+					type="submit"
+					class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+					>Save</Button
+				>
+			</div>
+		</div>
+	</form>
+
+	<Modal {open}
+		><ModalTitle>vorgang anlegen</ModalTitle><ModalContent>
+			{#if form?.success}
+				<Alert class="w-full">Vorgang erfolgreich angelegt</Alert>
+			{:else}
+				<Alert class="w-full" type="error">Fehler beim Upload</Alert>
+			{/if}
+		</ModalContent>
+		<ModalFooter><Button on:click={() => (open = false)}>Ok</Button></ModalFooter>
+	</Modal>
+</div>