svelte 5 mit npm

src/routes/(angemeldet)/view/+page.server.js

@@ -0,0 +1,27 @@
+import caseNumberOccupied from '$lib/helper/caseNumberOccupied';
+import { fail, redirect } from '@sveltejs/kit';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+	default: async ({ request }) => {
+		const data = await request.formData();
+		const caseNumber = data.get('caseNumber');
+
+		if (!caseNumber) {
+			return fail(400, {
+				success: false,
+				caseNumber,
+				error: { caseNumber: 'Die Vorgangsnummer darf nicht leer sein.' }
+			});
+		}
+
+		if (!(await caseNumberOccupied(caseNumber))) {
+			return fail(400, {
+				success: false,
+				caseNumber,
+				error: { caseNumber: 'Die Vorgangsnummer existiert in dieser Anwendung nicht.' }
+			});
+		}
+		throw redirect(303, `/list/${caseNumber}`);
+	}
+};

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

@@ -0,0 +1,64 @@
+<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;
+</script>
+
+<div class="mx-auto max-w-2xl">
+	<div class="flex flex-col items-center justify-center w-full">
+		<h1 class="text-xl">Vorgang ansehen</h1>
+	</div>
+
+	<form method="POST">
+		<div class="space-y-12">
+			<div class="border-b border-gray-900/10 pb-12">
+				<!-- <h2 class="text-base font-semibold leading-7 text-gray-900">Profile</h2> -->
+				<p class="mt-8 text-sm leading-6 text-gray-600">
+					Anhand der Vorgangsnummer werden Sie zu den Dateien des Vorgangs weitergeleitet und können
+					sich den Vorgang dann ansehen.
+				</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 w-full">
+							<div
+								class="flex w-full 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 w-full flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm 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>
+			</div>
+			<div class="mt-6 flex items-center justify-end gap-x-6">
+				<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"
+					>Weiter</Button
+				>
+			</div>
+		</div>
+	</form>
+</div>

src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.server.js

@@ -0,0 +1,8 @@
+import { client } from '$lib/minio';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+	const { vorgang, tatort } = params;
+	const url = await client.presignedUrl('GET', 'tatort', `${vorgang}/${tatort}`);
+	return { url };
+}

src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte

@@ -0,0 +1,55 @@
+<style>
+	model-viewer {
+		height: 100%;
+		width: 100%;
+	}
+</style>
+
+<script>
+	import { preloadCode } from '$app/navigation';
+	import Panel from '$lib/components/ui/Panel.svelte';
+	import { onMount } from 'svelte';
+	export let data;
+
+	onMount(() => {
+		import('@google/model-viewer');
+	});
+
+	let progress = 0;
+	let hideProgressScreen = false;
+	$: style = `width: ${progress}%`;
+
+	function onProgress({ detail }) {
+		progress = Math.ceil(detail.totalProgress * 100.0);
+		if (progress == 100) {
+			setTimeout(() => {
+				hideProgressScreen = true;
+			}, 250);
+		} else hideProgressScreen = false;
+	}
+</script>
+
+<div class="h-full w-full bg-neutral-100 p-4">
+	<model-viewer
+		src={data.url}
+		camera-controls
+		field-of-view="auto"
+		max-field-of-view="10deg"
+		min-field-of-view="0.1deg"
+		on:progress={onProgress}
+	>
+		<div
+			slot="progress-bar"
+			class="flex items-center justify-center h-full w-full transition-all delay-250"
+			class:opacity-0={hideProgressScreen}
+			class:hidden={hideProgressScreen}
+		>
+			<Panel class="w-72 bg-gray-50 flex items-center flex-col"
+				><p class="mb-5">Loading {progress}%</p>
+				<div class="h-1 w-full bg-neutral-200 dark:bg-neutral-600">
+					<div class="h-1 bg-blue-500" {style} ></div>
+				</div></Panel
+			>
+		</div>
+	</model-viewer>
+</div>