svelte 5 mit npm

2025-04-11 11:31:10 +02:00
parent 104e86136b
commit 38f8b7c1a9
82 changed files with 10708 additions and 0 deletions
--- a/src/app.css
+++ b/src/app.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -0,0 +1,14 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		interface Locals {
+			user: any
+		}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export { };
--- a/src/app.html
+++ b/src/app.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Tatort</title>
+
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/hooks.server.js
+++ b/src/hooks.server.js
@@ -0,0 +1,16 @@
+import { decryptToken } from '$lib/auth';
+
+/** @type {import('@sveltejs/kit').Handle} */
+export async function handle({ event, resolve }) {
+	const jwt = event.cookies.get('session');
+	try {
+		if (jwt) {
+			event.locals.user = decryptToken(jwt);
+			return resolve(event);
+		}
+	} catch (err) {
+		await event.cookies.delete('session');
+		event.locals.user = null;
+	}
+	return resolve(event);
+}
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});
--- a/src/lib/auth.js
+++ b/src/lib/auth.js
@@ -0,0 +1,29 @@
+import jwt from 'jsonwebtoken';
+
+import config from '$lib/config';
+
+const SECRET = config.jwt.secret;
+const EXPIRES_IN = config.jwt.expiresIn;
+
+const AUTH = config.auth;
+
+export function createToken(userData) {
+	return jwt.sign(userData, SECRET, { expiresIn: EXPIRES_IN });
+}
+
+export function decryptToken(token) {
+	return jwt.verify(token, SECRET);
+}
+
+export function authenticate(user, pass) {
+	let userData = null;
+
+	if (AUTH[user]) {
+		const { password, ...data } = AUTH[user];
+		if (password && password === pass) userData = data;
+	}
+
+	if (userData == null) return null;
+
+	return createToken({ id: user, ...userData });
+}
--- a/src/lib/components/ui/Alert.svelte
+++ b/src/lib/components/ui/Alert.svelte
@@ -0,0 +1,57 @@
+<style>
+	/* Common */
+	.alert {
+		@apply mb-1;
+		@apply border-l-4;
+		@apply text-gray-600;
+		@apply text-sm;
+		@apply px-4;
+		@apply py-2;
+	}
+
+	.icon {
+		@apply h-5;
+		@apply w-5;
+	}
+
+	.content {
+		@apply text-sm;
+		@apply w-full;
+	}
+
+	.link {
+		@apply whitespace-nowrap;
+		@apply font-bold;
+	}
+
+	.text {
+		@apply border-none;
+	}
+	/* Info */
+	.info {
+		@apply border-blue-400;
+		@apply bg-blue-50;
+	}
+
+	/* Warning */
+	.warning {
+		@apply border-yellow-300;
+		@apply bg-yellow-50;
+	}
+
+	/* Error */
+	.error {
+		@apply border-red-400;
+		@apply bg-red-50;
+	}
+</style>
+
+<script>
+	export let type = 'info';
+	let classNames = '';
+	export { classNames as class };
+</script>
+
+<div class="alert {type} {classNames}">
+	<slot />
+</div>
--- a/src/lib/components/ui/Button.svelte
+++ b/src/lib/components/ui/Button.svelte
@@ -0,0 +1,202 @@
+<style>
+	.button {
+		@apply inline-flex;
+		@apply items-center;
+		@apply border;
+		@apply font-bold;
+		@apply transition-all;
+	}
+
+	.button:focus {
+		@apply outline-none;
+		@apply ring-2;
+		@apply ring-offset-2;
+		@apply ring-blue-500;
+	}
+
+	.button:disabled {
+		@apply opacity-50;
+		@apply cursor-default;
+
+		filter: grayscale(100%);
+	}
+
+	.primary {
+		@apply border-transparent;
+		@apply shadow-sm;
+		@apply text-white;
+		@apply bg-blue-500;
+	}
+
+	.primary:hover:not(.disabled) {
+		@apply bg-blue-400;
+	}
+
+	.primary:active {
+		@apply bg-blue-800;
+	}
+
+	.secondary {
+		@apply border-transparent;
+		@apply text-blue-500;
+		@apply bg-blue-100;
+	}
+
+	.secondary:hover:not(.disabled) {
+		@apply bg-blue-300;
+	}
+
+	.secondary:active {
+		@apply bg-blue-300;
+	}
+
+	.danger {
+		@apply border-transparent;
+		@apply shadow-sm;
+		@apply text-white;
+		@apply bg-red-600;
+	}
+
+	.danger:hover:not(.disabled) {
+		@apply bg-red-700;
+	}
+
+	.danger:active {
+		@apply bg-red-800;
+	}
+
+	.success {
+		@apply border-transparent;
+		@apply shadow-sm;
+		@apply text-white;
+		@apply bg-green-600;
+	}
+
+	.success:hover:not(.disabled) {
+		@apply bg-green-700;
+	}
+
+	.success:active {
+		@apply bg-green-800;
+	}
+
+	.white {
+		@apply border-gray-300;
+		@apply shadow-sm;
+		@apply text-gray-700;
+		@apply bg-white;
+	}
+
+	.white:hover:not(.disabled) {
+		@apply bg-gray-100;
+	}
+
+	.white:active {
+		@apply bg-gray-200;
+	}
+
+	.black {
+		@apply shadow-sm;
+		@apply border-none;
+		@apply text-gray-300;
+		@apply bg-black;
+	}
+
+	.black:hover:not(.disabled) {
+		@apply bg-gray-900;
+	}
+
+	.black:active {
+		@apply bg-gray-700;
+	}
+
+	.transparent {
+		@apply border-transparent;
+		@apply text-blue-500;
+		@apply bg-transparent;
+	}
+
+	.transparent:hover:not(.disabled) {
+		@apply bg-blue-300;
+	}
+
+	.transparent:active {
+		@apply bg-blue-300;
+	}
+
+	.xs {
+		@apply px-2.5;
+		@apply py-1.5;
+		@apply text-xs;
+		@apply rounded;
+	}
+
+	.sm {
+		@apply px-3;
+		@apply py-2;
+		@apply text-sm;
+		@apply leading-4;
+		@apply rounded-md;
+	}
+
+	.md {
+		@apply px-4;
+		@apply py-2;
+		@apply text-sm;
+		@apply rounded-md;
+	}
+
+	.lg {
+		@apply px-4;
+		@apply py-2;
+		@apply text-base;
+		@apply rounded-md;
+	}
+
+	.xl {
+		@apply px-6;
+		@apply py-3;
+		@apply text-base;
+		@apply rounded-md;
+	}
+
+	.center {
+		@apply justify-center;
+	}
+
+	.left {
+		@apply justify-start;
+	}
+
+	.right {
+		@apply justify-end;
+	}
+</style>
+
+<script>
+	export let href = null;
+	export let type = 'button';
+	export let size = 'md';
+	export let variant = 'primary';
+	export let fullWidth = false;
+	export let align = 'center';
+	export let disabled = false;
+	let classNames = '';
+	export { classNames as class };
+</script>
+
+{#if href}
+	<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
+		><slot />
+	</a>
+{:else}
+	<button
+		on:click
+		{type}
+		{disabled}
+		class:w-full={fullWidth}
+		class="button {variant} {size} {classNames} {align}"
+	>
+		<slot />
+	</button>
+{/if}
--- a/src/lib/components/ui/DeleteIconButton.svelte
+++ b/src/lib/components/ui/DeleteIconButton.svelte
@@ -0,0 +1,70 @@
+<style>
+	.icon {
+		@apply text-gray-400;
+		@apply text-right;
+		@apply cursor-pointer;
+	}
+
+	.icon.active,
+	.icon:hover {
+		@apply text-red-500;
+	}
+</style>
+
+<script>
+	import { page } from '$app/stores';
+	import Trash from '$lib/icons/Trash.svelte';
+	import Panel from '$lib/components/ui/Panel.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import { clickOutside } from '$lib/helpers/clickOutside.js';
+	const { adminMode, prediction, predictionRemove } = $page.data;
+
+	let active = false;
+	export let item;
+
+	function remove() {
+		predictionRemove(item);
+		if (adminMode) {
+			const section = $prediction.sections.find((s) => s.id === item.section);
+			section.items = section.items.filter((i) => i !== item);
+			prediction.set($prediction);
+		}
+	}
+	function onClick(e) {
+		e.stopPropagation();
+		e.preventDefault();
+		if (!item.variables.some((v) => v.value?.length > 0)) {
+			remove();
+			return;
+		}
+		active = true;
+	}
+
+	function onConfirm(e) {
+		e.stopPropagation();
+		active = false;
+		remove();
+	}
+
+	function cancel() {
+		active = false;
+	}
+</script>
+
+<div
+	class="relative flex h-8 w-8 items-center justify-center"
+	on:click={onClick}
+	use:clickOutside
+	on:click_outside={cancel}
+>
+	<span class:active class="icon">
+		<Trash />
+	</span>
+	{#if active}
+		<Panel padding="p-1" class="absolute right-0 top-8 w-64 border border-gray-100 bg-white">
+			<Button variant="danger" size="sm" fullWidth={true} on:click={onConfirm}
+				>Löschen bestätigen</Button
+			>
+		</Panel>
+	{/if}
+</div>
--- a/src/lib/components/ui/Modal/Modal.svelte
+++ b/src/lib/components/ui/Modal/Modal.svelte
@@ -0,0 +1,103 @@
+<style>
+	.dialog {
+		@apply inline-block;
+		@apply bg-white;
+		@apply rounded-lg;
+		@apply text-left;
+		@apply overflow-hidden;
+		@apply shadow-xl;
+		@apply transform;
+		@apply transition-all;
+		@apply my-8;
+
+		width: 95%;
+	}
+	.my-max-w-xl {
+		@apply max-w-xl;
+	}
+	.my-max-w-2xl {
+		@apply max-w-2xl;
+	}
+	.my-max-w-3xl {
+		@apply max-w-3xl;
+	}
+	.my-max-w-4xl {
+		@apply max-w-4xl;
+	}
+	.my-max-w-5xl {
+		@apply max-w-5xl;
+	}
+	.my-max-w-6xl {
+		@apply max-w-6xl;
+	}
+	.my-max-w-7xl {
+		@apply max-w-7xl;
+	}
+	.my-align-middle {
+		@apply align-middle;
+	}
+	.h90 {
+		max-height: 90vh;
+	}
+</style>
+
+<script>
+	import { fade } from 'svelte/transition';
+	export let size = 'xl'; // https://tailwindcss.com/docs/max-width#class-reference
+	export let open = false;
+	export let scrollable = true;
+	export let verticalAlign = 'middle';
+</script>
+
+<!-- This example requires Tailwind CSS v2.0+ -->
+<div
+	class:hidden={!open}
+	class:overflow-y-auto={scrollable}
+	class="fixed inset-0 z-50"
+	in:fade={{ delay: 100 }}
+	out:fade={{ delay: 100 }}
+>
+	<div
+		class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+	>
+		<!--
+          Background overlay, show/hide based on modal state.
+  
+          Entering: "ease-out duration-300"
+              From: "opacity-0"
+              To: "opacity-100"
+          Leaving: "ease-in duration-200"
+              From: "opacity-100"
+              To: "opacity-0"
+          -->
+		<div class="fixed inset-0 transition-opacity" aria-hidden="true">
+			<div class="absolute inset-0 bg-gray-500 opacity-75" ></div>
+		</div>
+
+		<!-- This element is to trick the browser into centering the modal contents. -->
+		<span class="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true"
+			>&#8203;</span
+		>
+		<!--
+          Modal panel, show/hide based on modal state.
+  
+          Entering: "ease-out duration-300"
+              From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              To: "opacity-100 translate-y-0 sm:scale-100"
+          Leaving: "ease-in duration-200"
+              From: "opacity-100 translate-y-0 sm:scale-100"
+              To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          -->
+
+		<div
+			class="dialog my-max-w-{size} my-align-{verticalAlign}"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="modal-headline"
+		>
+			<div class="h90 flex flex-col">
+				<slot />
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/lib/components/ui/Modal/ModalContent.svelte
+++ b/src/lib/components/ui/Modal/ModalContent.svelte
@@ -0,0 +1,28 @@
+<style>
+	.content {
+		@apply flex;
+		flex: 1;
+
+		max-height: 100vh;
+	}
+
+	.scroll {
+		@apply overflow-y-auto;
+	}
+
+	.padding {
+		@apply p-6;
+	}
+</style>
+
+<script>
+	export let scroll = true;
+	export let padding = true;
+
+	let classNames = '';
+	export { classNames as class };
+</script>
+
+<div class="{classNames} content flex-1 text-left" class:scroll class:padding>
+	<slot />
+</div>
--- a/src/lib/components/ui/Modal/ModalFooter.svelte
+++ b/src/lib/components/ui/Modal/ModalFooter.svelte
@@ -0,0 +1,3 @@
+<div class="flex flex-row justify-end border-t border-gray-100 px-6 py-3">
+	<slot />
+</div>
--- a/src/lib/components/ui/Modal/ModalTitle.svelte
+++ b/src/lib/components/ui/Modal/ModalTitle.svelte
@@ -0,0 +1,5 @@
+<div class="border-b border-gray-100 p-6 text-left">
+	<h3 class="text-lg font-bold leading-6 text-gray-900" id="modal-headline">
+		<slot />
+	</h3>
+</div>
--- a/src/lib/components/ui/Notification.svelte
+++ b/src/lib/components/ui/Notification.svelte
@@ -0,0 +1,87 @@
+<script>
+	export let title = 'Erfolgreich';
+	export let show = false;
+
+	let visible = false;
+
+	$: show && startShow();
+
+	function startShow() {
+		if (!show) {
+			return;
+		}
+		visible = true;
+		setTimeout(() => {
+			visible = false;
+		}, 4000);
+	}
+</script>
+
+<div
+	class:hidden={!visible}
+	class="pointer-events-none fixed inset-0 z-50 flex items-end justify-center px-4 py-6 sm:items-start sm:justify-end sm:p-6"
+>
+	<!--
+    Notification panel, show/hide based on alert state.
+
+    Entering: "transform ease-out duration-300 transition"
+      From: "translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+      To: "translate-y-0 opacity-100 sm:translate-x-0"
+    Leaving: "transition ease-in duration-100"
+      From: "opacity-100"
+      To: "opacity-0"
+  -->
+	<div
+		class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5"
+	>
+		<div class="p-4">
+			<div class="flex items-start">
+				<div class="flex-shrink-0">
+					<!-- Heroicon name: outline/check-circle -->
+					<svg
+						class="h-6 w-6 text-green-400"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+						/>
+					</svg>
+				</div>
+				<div class="ml-3 w-0 flex-1 pt-0.5">
+					<p class="text-sm font-bold text-gray-900">{title}</p>
+					<p class="mt-1 text-sm text-gray-500">
+						<slot />
+					</p>
+				</div>
+				<div class="ml-4 flex flex-shrink-0">
+					<button
+						class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+					>
+						<span class="sr-only">Close</span>
+						<!-- Heroicon name: solid/x -->
+						<svg
+							class="h-5 w-5"
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							aria-hidden="true"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
--- a/src/lib/components/ui/Panel.svelte
+++ b/src/lib/components/ui/Panel.svelte
@@ -0,0 +1,17 @@
+<style>
+	.panel {
+		@apply overflow-hidden;
+		@apply rounded-lg;
+	}
+</style>
+
+<script>
+	export let padding = 'p-6';
+	export let shadow = true;
+	let classNames = '';
+	export { classNames as class };
+</script>
+
+<div class:shadow class="{classNames} panel {padding}">
+	<slot />
+</div>
--- a/src/lib/components/ui/Select.svelte
+++ b/src/lib/components/ui/Select.svelte
@@ -0,0 +1,126 @@
+<style>
+	img {
+		width: 'auto';
+		height: 90%;
+		flex-shrink: 0;
+	}
+</style>
+
+<script>
+	import { clickOutside } from '$lib/helpers/clickOutside.js';
+	import Check from '$lib/icons/Check.svelte';
+	import Selector from '$lib/icons/Selector.svelte';
+	import Button from './Button.svelte';
+
+	export let title = 'Bitte wählen';
+	export let options = [];
+
+	export let onChange = null;
+	export let selected = -1;
+	export let disabled = false;
+
+	let classNames = '';
+	export { classNames as class };
+
+	let showOptions = false;
+
+	const selectOnChange = (index) => {
+		setTimeout(() => {
+			hideShowOptions();
+		}, 0);
+		if (typeof onChange == 'function') onChange(index);
+	};
+
+	const toggleShowOptions = () => {
+		showOptions = !showOptions;
+	};
+
+	const hideShowOptions = () => {
+		showOptions = false;
+	};
+
+	$: selected = selected ?? -1;
+	$: selectedItem =
+		selected >= 0
+			? options[selected]
+			: {
+					title,
+					img: null
+			  };
+</script>
+
+<div class={classNames}>
+	<div use:clickOutside on:click_outside={hideShowOptions} class="relative mt-1">
+		<Button
+			on:click={toggleShowOptions}
+			{disabled}
+			type="button"
+			variant="white"
+			fullWidth
+			align="left"
+			class="relative cursor-default justify-start py-2 pl-3 pr-10 text-left"
+		>
+			<span class="flex h-6 items-center">
+				{#if selectedItem.img}
+					<img src={selectedItem.img} alt={selectedItem.alt} />
+				{/if}
+				<span class="ml-3 block truncate">
+					{selectedItem.title}
+				</span>
+			</span>
+			<span class="pointer-events-none absolute inset-y-0 right-0 ml-3 flex items-center pr-2">
+				<Selector />
+			</span>
+		</Button>
+
+		<div
+			class:hidden={!showOptions}
+			class="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg"
+		>
+			<ul
+				tabindex="-1"
+				role="listbox"
+				aria-labelledby="listbox-label"
+				class="max-h-48 overflow-auto rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+			>
+				<!--
+              Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
+    
+              Highlighted: "text-white bg-indigo-600", Not Highlighted: "text-gray-900"
+            -->
+				{#each options as option, index}
+					<li
+						on:click={() => {
+							selectOnChange(index);
+						}}
+						id="listbox-item-0"
+						role="option"
+						class="group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-blue-500 hover:text-white"
+					>
+						<div class="flex h-6 items-center">
+							{#if option.img}
+								<img src={option.img} alt={option.alt} />
+							{/if}
+							<!-- Selected: "font-bold", Not Selected: "font-normal" -->
+							<span
+								class:font-bold={selected === index}
+								class:font-normal={!selected === index}
+								class:ml-3={option.img}
+								class="block truncate"
+							>
+								{option.title}
+							</span>
+						</div>
+						{#if selected === index}
+							<span
+								class="absolute inset-y-0 right-0 flex items-center pr-4 text-blue-500 group-hover:text-white"
+							>
+								<Check />
+							</span>
+						{/if}
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+</div>
--- a/src/lib/config.js
+++ b/src/lib/config.js
@@ -0,0 +1,3 @@
+import { readFileSync } from 'fs';
+
+export default JSON.parse(readFileSync('./config.json'));
--- a/src/lib/helper/caseNumberOccupied.js
+++ b/src/lib/helper/caseNumberOccupied.js
@@ -0,0 +1,22 @@
+import { client } from '$lib/minio';
+
+/**
+ * Check if caseNumber is used
+ * @param {string} caseNumber
+ * @returns {Promise<boolean}
+ */
+export default async function caseNumberOccupied(caseNumber) {
+	const prefix = `${caseNumber}/config.json`;
+	const promise = new Promise((resolve) => {
+		let stream = client.listObjectsV2('tatort', prefix, false, '');
+		stream.on('data', () => {
+			stream.destroy();
+			resolve(true);
+		});
+		stream.on('end', () => {
+			resolve(false);
+		});
+	});
+
+	return promise;
+}
--- a/src/lib/helper/shortenFileSize.js
+++ b/src/lib/helper/shortenFileSize.js
@@ -0,0 +1,22 @@
+const KILO = 1024;
+const MEGA = KILO * KILO;
+const GIGA = MEGA * KILO;
+
+/**
+ * Shortens the size in bytes
+ * @param {number} size
+ * @returns{string}
+ */
+export default function shortenFileSize(size) {
+	const giga = Math.floor(size / GIGA);
+	let remainder = size % GIGA;
+	const mega = Math.floor(remainder / MEGA);
+	remainder %= MEGA;
+	const kilo = Math.floor(remainder / KILO);
+	remainder %= KILO;
+
+	if (giga > 0) return `${giga} GB`;
+	if (mega > 0) return `${mega} MB`;
+	if (kilo > 0) return `${kilo} kB`;
+	return `${remainder} B`;
+}
--- a/src/lib/helper/timeElapsed.js
+++ b/src/lib/helper/timeElapsed.js
@@ -0,0 +1,33 @@
+const MINUTE = 60;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+const YEAR = 365 * DAY;
+const MONTH = YEAR / 12;
+
+/**
+ * get readable string of time elapsed since date
+ * @param {Date} date
+ * @returns string
+ */
+export default function timeElapsed(date) {
+	const now = new Date();
+	const age = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+	const years = Math.floor(age / YEAR);
+	let remainder = age % YEAR;
+	const months = Math.floor(remainder / MONTH);
+	remainder %= MONTH;
+	const days = Math.floor(remainder / DAY);
+	remainder %= DAY;
+	const hours = Math.floor(remainder / HOUR);
+	remainder %= HOUR;
+	const minutes = Math.floor(remainder / MINUTE);
+	const seconds = remainder % MINUTE;
+	if (years > 0) return years === 1 ? 'vor 1 Jahr' : `vor ${years} Jahren`;
+	if (months > 0) return months === 1 ? 'vor 1 Monat' : `vor ${months} Monaten`;
+	if (days > 0) return days === 1 ? 'vor 1 Tag' : `vor ${days} Tagen`;
+	if (hours > 0) return hours === 1 ? 'vor 1 Stunde' : `vor ${hours} Stunden`;
+	if (minutes > 0) return minutes === 1 ? 'vor 1 Minute' : `vor ${minutes} Minuten`;
+
+	return seconds === 1 ? 'vor 1 Sekunde' : `vor ${seconds} Sekunden`;
+}
--- a/src/lib/icons/Arrow-left.svelte
+++ b/src/lib/icons/Arrow-left.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M10 19l-7-7m0 0l7-7m-7 7h18"
+	/></svg
+>
--- a/src/lib/icons/Arrow-right.svelte
+++ b/src/lib/icons/Arrow-right.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M14 5l7 7m0 0l-7 7m7-7H3"
+	/></svg
+>
--- a/src/lib/icons/Bell.svelte
+++ b/src/lib/icons/Bell.svelte
@@ -0,0 +1,14 @@
+<svg
+	class="mr-2 h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+	/>
+</svg>
--- a/src/lib/icons/Book.svelte
+++ b/src/lib/icons/Book.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+	/></svg
+>
--- a/src/lib/icons/Check.svelte
+++ b/src/lib/icons/Check.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-5 w-5"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 20 20"
+	fill="currentColor"
+	aria-hidden="true"
+>
+	<path
+		fill-rule="evenodd"
+		d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+		clip-rule="evenodd"
+	/>
+</svg>
--- a/src/lib/icons/Chevron-left.svelte
+++ b/src/lib/icons/Chevron-left.svelte
@@ -0,0 +1,8 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg
+>
--- a/src/lib/icons/Chevron-right.svelte
+++ b/src/lib/icons/Chevron-right.svelte
@@ -0,0 +1,8 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg
+>
--- a/src/lib/icons/Chevron.svelte
+++ b/src/lib/icons/Chevron.svelte
@@ -0,0 +1,10 @@
+<svg
+	class="h-full w-6 flex-shrink-0 text-gray-400"
+	viewBox="0 0 24 44"
+	preserveAspectRatio="none"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+>
+	<path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
+</svg>
--- a/src/lib/icons/Drag.svelte
+++ b/src/lib/icons/Drag.svelte
@@ -0,0 +1,16 @@
+<svg
+	class="h-6 w-6"
+	fill="currentColor"
+	stroke="none"
+	viewBox="0 0 32 32"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		d="M 16 5 L 12 9 L 20 9 Z M 3 11 L 3 13 L 29 13 L 29 11 Z M 3 15 L 3 17 L 29 17 L 29 15 Z M 3 19 L 3 21 L 29 21 L 29 19 Z M 12 23 L 16 27 L 20 23 Z"
+	/></svg
+><!--
+<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16"></path></svg>
+
+<svg class="flex-shrink-0 w-6 h-6 text-gray-400" viewBox="0 0 50 50" preserveAspectRatio="none" fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M25.037 8.416c-.579-.555-1.494-.555-2.073 0l-11.5 11c-.443.424-.583 1.074-.355 1.643S11.887 22 12.5 22h23c.612 0 1.164-.373 1.393-.941.228-.568.087-1.219-.355-1.643L25.037 8.416zM35.5 26h-23c-.613 0-1.164.373-1.392.941s-.087 1.219.355 1.643l11.5 11C23.253 39.861 23.626 40 24 40s.747-.139 1.037-.416l11.5-11c.442-.424.583-1.074.355-1.643C36.664 26.373 36.112 26 35.5 26z"></path>
+</svg>
+-->
--- a/src/lib/icons/Exclamation-circle.svelte
+++ b/src/lib/icons/Exclamation-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+	/></svg
+>
--- a/src/lib/icons/Exclamation.svelte
+++ b/src/lib/icons/Exclamation.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+	/></svg
+>
--- a/src/lib/icons/Info.svelte
+++ b/src/lib/icons/Info.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+	/></svg
+>
--- a/src/lib/icons/Login.svelte
+++ b/src/lib/icons/Login.svelte
@@ -0,0 +1,14 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width="1.5"
+	stroke="currentColor"
+	class="w-6 h-6"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75"
+	/></svg
+>
--- a/src/lib/icons/Play.svelte
+++ b/src/lib/icons/Play.svelte
@@ -0,0 +1,18 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+	/><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+	/></svg
+>
--- a/src/lib/icons/Plus.svelte
+++ b/src/lib/icons/Plus.svelte
@@ -0,0 +1,15 @@
+<svg
+	class="-ml-1 mr-2 h-5 w-5"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	aria-hidden="true"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M12 6v6m0 0v6m0-6h6m-6 0H6"
+	/>
+</svg>
--- a/src/lib/icons/Question-mark-circle.svelte
+++ b/src/lib/icons/Question-mark-circle.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+	/></svg
+>
--- a/src/lib/icons/Selector.svelte
+++ b/src/lib/icons/Selector.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-5 w-5 text-gray-400"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 20 20"
+	fill="currentColor"
+	aria-hidden="true"
+>
+	<path
+		fill-rule="evenodd"
+		d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
+		clip-rule="evenodd"
+	/>
+</svg>
--- a/src/lib/icons/Trash.svelte
+++ b/src/lib/icons/Trash.svelte
@@ -0,0 +1,14 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+	/>
+</svg>
--- a/src/lib/icons/X.svelte
+++ b/src/lib/icons/X.svelte
@@ -0,0 +1,13 @@
+<svg
+	class="h-6 w-6"
+	fill="none"
+	stroke="currentColor"
+	viewBox="0 0 24 24"
+	xmlns="http://www.w3.org/2000/svg"
+	><path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		stroke-width="2"
+		d="M6 18L18 6M6 6l12 12"
+	/></svg
+>
--- a/src/lib/minio.js
+++ b/src/lib/minio.js
@@ -0,0 +1,8 @@
+/** import Minio from 'minio'; */
+import { Client } from 'minio';
+import config from '$lib/config';
+
+/** process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0'; */
+
+/** export const client = new Minio.Client(config.minio); */
+export const client = new Client(config.minio);
--- a/src/routes/(angemeldet)/+layout.server.js
+++ b/src/routes/(angemeldet)/+layout.server.js
@@ -0,0 +1,9 @@
+import { redirect } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageServerLoad} */
+export function load(event) {
+	if (!event.locals.user && event.url.pathname !== '/anmeldung') throw redirect(303, '/anmeldung');
+	return {
+		user: event.locals.user
+	};
+}
--- a/src/routes/(angemeldet)/+layout.svelte
+++ b/src/routes/(angemeldet)/+layout.svelte
@@ -0,0 +1,84 @@
+<script>
+	import Chevron from '$lib/icons/Chevron-right.svelte';
+	import Login from '$lib/icons/Login.svelte';
+
+	export let data;
+</script>
+
+<div class="h-screen v-screen flex flex-col">
+	<div class="flex flex-col h-full">
+		<header class="flex-none relative isolate z-10 bg-white px-8">
+			<nav
+				class="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+				aria-label="Global"
+			>
+				<div class="flex w-48">
+					<a href="/" class="-m-1.5 p-1.5 w-10">
+						<span class="sr-only">Tatort Niedersachen</span>
+						<img class="h-8 w-auto" src="/Landeswappen_NI.svg" alt="Landeswappen Niedersachsen" />
+					</a>
+				</div>
+				<h1 class="text-3xl text-slate-400 font-bold">Tatort</h1>
+				<div class="lg:flex lg:justify-end w-48">
+					{#if data.user}
+						<form method="POST" action="/anmeldung?/logout">
+							<input type="hidden" />
+							<button type="submit" class="text-sm font-semibold leading-6 text-gray-900"
+								><span
+									><span class="align-middle inline-block">Abmelden</span><span
+										class="align-middle inline-block"><Chevron /></span
+									></span
+								></button
+							>
+						</form>
+					{/if}
+				</div>
+			</nav>
+		</header>
+		<div class="h-full grow overflow-scroll">
+			<slot />
+		</div>
+		<div class="flex-none">
+			<footer class="justify-end">
+				<div class="bg-gray-100">
+					<div class="mx-auto max-w-7xl px-6 lg:px-8">
+						<div class="flex justify-between divide-x divide-gray-900/5 border-x border-gray-900/5">
+							<a
+								href="/list"
+								class="px-4 py-1 -ml-4 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
+							>
+								&copy; 2023 Innovation Hub Niedersachen
+							</a>
+							<a
+								href="/"
+								class="px-4 py-1 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
+							>
+								back
+							</a>
+							<a
+								href="/"
+								class="px-4 py-1 -mr-4 flex items-center justify-center gap-x-2.5 text-sm font-semibold leading-6 text-gray-500 hover:bg-gray-200 hover:text-gray-700"
+							>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+									stroke-width="1.5"
+									stroke="currentColor"
+									class="w-6 h-6"
+								>
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+									/>
+								</svg>
+								{data.user.id}
+							</a>
+						</div>
+					</div>
+				</div>
+			</footer>
+		</div>
+	</div>
+</div>
--- a/src/routes/(angemeldet)/+page.svelte
+++ b/src/routes/(angemeldet)/+page.svelte
@@ -0,0 +1,123 @@
+<style>
+</style>
+
+<script>
+	import Panel from '$lib/components/ui/Panel.svelte';
+
+	export let data;
+</script>
+
+<div
+	class=" inset-x-0 top-0 -z-10 h-full flex items-center justify-center bg-white shadow-lg ring-1 ring-gray-900/5"
+>
+	<div class="mx-auto flex justify-center max-w-7xl py-10 px-8 w-full">
+		{#if data.user.admin}
+			<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
+				<div
+					class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="w-6 h-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+						/>
+					</svg>
+				</div>
+				<a href="/list" class="mt-6 block font-semibold text-gray-900">
+					Liste
+					<span class="absolute inset-0"></span>
+				</a>
+				<p class="mt-1 text-gray-600">
+					Verschaffe Dir einen Überblick über alle gespeicherten Tatorte.
+				</p>
+			</div>
+		{/if}
+		{#if data.user.admin}
+			<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
+				<div
+					class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
+				>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						class="w-6 h-6"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"
+						/>
+					</svg>
+				</div>
+				<a href="/tatorte" class="mt-6 block font-semibold text-gray-900">
+					Neueer Vorgang
+					<span class="absolute inset-0"></span>
+				</a>
+				<p class="mt-1 text-gray-600">Stelle einen weiteren Tatort für die Anwendung bereit.</p>
+			</div>
+		{/if}
+		{#if data.user.admin}
+			<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
+				<div
+					class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
+				>
+					<svg
+						class="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						aria-hidden="true"
+					>
+						<path
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							d="M13.5 16.875h3.375m0 0h3.375m-3.375 0V13.5m0 3.375v3.375M6 10.5h2.25a2.25 2.25 0 002.25-2.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v2.25A2.25 2.25 0 006 10.5zm0 9.75h2.25A2.25 2.25 0 0010.5 18v-2.25a2.25 2.25 0 00-2.25-2.25H6a2.25 2.25 0 00-2.25 2.25V18A2.25 2.25 0 006 20.25zm9.75-9.75H18a2.25 2.25 0 002.25-2.25V6A2.25 2.25 0 0018 3.75h-2.25A2.25 2.25 0 0013.5 6v2.25a2.25 2.25 0 002.25 2.25z"
+						/>
+					</svg>
+				</div>
+				<a href="/upload" class="mt-6 block font-semibold text-gray-900">
+					Hinzufügen
+					<span class="absolute inset-0"></span>
+				</a>
+				<p class="mt-1 text-gray-600">Fügen Sie einem Tatort Bilder hinzu.</p>
+			</div>
+		{/if}
+		<div class="group relative rounded-lg p-6 text-sm leading-6 hover:bg-gray-50 w-1/4">
+			<div
+				class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke-width="1.5"
+					stroke="currentColor"
+					class="w-6 h-6"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+					/>
+				</svg>
+			</div>
+			<a href="/view" class="mt-6 block font-semibold text-gray-900">
+				Ansicht
+				<span class="absolute inset-0"></span>
+			</a>
+			<p class="mt-1 text-gray-600">Schau Dir einen Tatort in der 3D Ansicht an.</p>
+		</div>
+	</div>
+</div>
--- a/src/routes/(angemeldet)/list/+page.svelte
+++ b/src/routes/(angemeldet)/list/+page.svelte
@@ -0,0 +1,75 @@
+<style>
+	ul {
+		min-width: 24rem;
+	}
+</style>
+
+<script>
+	import { onMount } from 'svelte';
+
+	/**
+	 * @type any[]
+	 */
+	let list = [];
+	//$: list;
+
+	onMount(async () => {
+		const response = await fetch('/api/list');
+		const stream = await response.body;
+		if (!stream) return;
+
+		const reader = stream.getReader();
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) return;
+
+			const objs = new TextDecoder()
+				.decode(value)
+				.split('\n')
+				.filter((i) => i.length > 0)
+				.map((i) => JSON.parse(i));
+
+			console.log(objs);
+			list = list.concat(objs);
+		}
+	});
+</script>
+
+<div class="-z-10 bg-white">
+	<div class="flex flex-col items-center justify-center w-full">
+		<h1 class="text-xl">Liste der Vorgänge</h1>
+	</div>
+	<div class="mx-auto flex justify-center max-w-7xl h-full">
+		<ul role="list" class="divide-y divide-gray-100">
+			{#each list as item}
+				<li>
+					<a href="/list/{item.name}" class="flex justify-between gap-x-6 py-5">
+						<div class="flex gap-x-4">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="w-6 h-6"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"
+								/>
+							</svg>
+							<div class="min-w-0 flex-auto">
+								<p class="text-sm font-semibold leading-6 text-gray-900">{item.name}</p>
+							</div>
+						</div>
+						<div class="hidden sm:flex sm:flex-col sm:items-end">
+							<p class="text-sm leading-6 text-gray-900">Vorgang</p>
+						</div>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>
--- a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
+++ b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
@@ -0,0 +1,92 @@
+<style>
+	ul {
+		min-width: 24rem;
+	}
+</style>
+
+<script>
+	import { onMount } from 'svelte';
+	import shortenFileSize from '$lib/helper/shortenFileSize';
+	import { page } from '$app/stores';
+	import timeElapsed from '$lib/helper/timeElapsed';
+
+	/** @type {import('./$types').PageData} */
+	/** export let data; */
+
+	/**
+	 * @type any[]
+	 */
+	let list = [];
+	$: list;
+
+	onMount(async () => {
+		const response = await fetch('/api/list/' + $page.params.vorgang);
+		const stream = response.body;
+		if (!stream) return;
+
+		const reader = stream.getReader();
+
+		while (true) {
+			const { done, value } = await reader.read();
+			if (done) return;
+
+			const objs = new TextDecoder()
+				.decode(value)
+				.split('\n')
+				.filter((i) => i.length > 0)
+				.map((i) => JSON.parse(i));
+
+			console.log(objs);
+			list = list.concat(objs);
+		}
+	});
+</script>
+
+<div class="-z-10 bg-white">
+	<div class="flex flex-col items-center justify-center w-full">
+		<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
+	</div>
+	<div class="mx-auto flex justify-center max-w-7xl h-full">
+		<ul class="divide-y divide-gray-100">
+			{#each list as item}
+				<li>
+					<a
+						href="/view/{$page.params.vorgang}/{item.name}"
+						class="flex justify-between gap-x-6 py-5"
+					>
+						<div class="flex gap-x-4">
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="1.5"
+								stroke="currentColor"
+								class="w-6 h-6"
+							>
+								<path
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
+								/>
+							</svg>
+							<div class="min-w-0 flex-auto">
+								<p class="text-sm font-semibold leading-6 text-gray-900">{item.name}</p>
+								<p class="mt-1 truncate text-xs leading-5 text-gray-500">
+									{shortenFileSize(item.size)}
+								</p>
+							</div>
+						</div>
+						<div class="hidden sm:flex sm:flex-col sm:items-end">
+							<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
+							<p class="mt-1 text-xs leading-5 text-gray-500">
+								Zuletzt geändert <time datetime="2023-01-23T13:23Z"
+									>{timeElapsed(new Date(item.lastModified))}</time
+								>
+							</p>
+						</div>
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>
--- a/src/routes/(angemeldet)/tatorte/+page.server.js
+++ b/src/routes/(angemeldet)/tatorte/+page.server.js
@@ -0,0 +1,37 @@
+import { client } from '$lib/minio';
+import { fail } from '@sveltejs/kit';
+
+import caseNumberOccupied from '$lib/helper/caseNumberOccupied';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+	default: async ({ request }) => {
+		const data = await request.formData();
+		const caseNumber = data.get('caseNumber');
+		const description = data.get('description');
+
+		if (!caseNumber) {
+			return fail(400, {
+				caseNumber,
+				description,
+				error: { caseNumber: 'Es muss eine Vorgangsnummer vorhanden sein.' }
+			});
+		}
+
+		if (await caseNumberOccupied(`${caseNumber}`)) {
+			return fail(400, {
+				caseNumber,
+				description,
+				error: { caseNumber: 'Die Vorgangsnummer wurde im System bereits angelegt.' }
+			});
+		}
+
+		const config = `${JSON.stringify({ caseNumber, description, version: 1 })}\n`;
+
+		await client.putObject('tatort', `${caseNumber}/config.json`, config, {
+			'Content-Type': 'application/json'
+		});
+
+		return { success: true };
+	}
+};
--- a/src/routes/(angemeldet)/tatorte/+page.svelte
+++ b/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"
+							></textarea>
+						</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>
--- a/src/routes/(angemeldet)/upload/+page.server.js
+++ b/src/routes/(angemeldet)/upload/+page.server.js
@@ -0,0 +1,103 @@
+import path from 'path';
+import { writeFile } from 'fs/promises';
+import { createReadStream } from 'fs';
+/** import Minio from 'minio'; */
+import { Readable } from 'stream';
+/** const MINIO_ACCESS_KEY = 'tMhLrfog47lMm0HZ'; */
+/** import { client } from '$lib/minio'; */
+import { fail } from '@sveltejs/kit';
+
+function isRequiredFieldValid(value) {
+	if (value == null) return false;
+
+	if (typeof value === 'string' || value instanceof String) return value.trim() !== '';
+
+	return true;
+}
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+	url: async ({ request }) => {
+		const data = await request.formData();
+		const vorgang = data.get('vorgang');
+		const name = data.get('name');
+		const type = data.get('type');
+		const fileName = data.get('fileName');
+
+		let objectName = `${vorgang}/${name}`;
+		switch (type) {
+			case 'image/png':
+				if (!objectName.endsWith('.png')) objectName += '.png';
+				break;
+			case '':
+				if (fileName.endsWith('.glb') && !objectName.endsWith('.glb')) objectName += '.glb';
+		}
+
+		const url = await client.presignedPutObject('tatort', objectName);
+
+		return { url };
+	},
+	validate: async ({ request }) => {
+		const requestData = await request.formData();
+		const data = Object.fromEntries(requestData);
+		const vorgang = data.vorgang;
+		const name = data.name;
+		let success = true;
+		let err = {};
+
+		if (isRequiredFieldValid(vorgang)) err.vorgang = null;
+		else {
+			err.vorgang = 'Das Feld Vorgang darf nicht leer bleiben.';
+			success = false;
+		}
+
+		if (isRequiredFieldValid(name)) err.name = null;
+		else {
+			err.name = 'Das Feld Name darf nicht leer bleiben.';
+			success = false;
+		}
+
+		if (success) return { success };
+
+		return fail(400, err);
+	},
+
+	upload: async ({ request }) => {
+		const requestData = await request.formData();
+		const data = Object.fromEntries(requestData);
+		const vorgang = data.vorgang;
+		const name = data.name;
+		console.log('I:', vorgang, name);
+
+		const url = await client.presignedPutObject('tatort', `${vorgang}/${name}`, 60);
+
+		console.log('O:', url);
+		return { url };
+	},
+	upload3: async ({ request }) => {
+		const requestData = await request.formData();
+		const data = Object.fromEntries(requestData);
+		const name = data.name;
+		const stream = data.file.stream();
+		console.log('Data:', stream);
+		const metaData = { 'Content-Type': 'model-gtlf-binary', 'X-VorgangsNr': '4711' };
+		const result = new Promise((resolve, reject) => {
+			client.putObject('tatort', name, Readable.from(stream), metaData, function (err, etag) {
+				if (err) return reject(err);
+				resolve(etag);
+			});
+		});
+		let etag = null;
+		let error = null;
+		try {
+			etag = await result;
+			console.log(etag);
+		} catch (err) {
+			error = err;
+			console.log('Error:', err);
+		}
+
+		return { etag, error };
+		//await writeFile(filePath, Buffer.from(await data.file.arrayBuffer()));
+	}
+};
--- a/src/routes/(angemeldet)/upload/+page.svelte
+++ b/src/routes/(angemeldet)/upload/+page.svelte
@@ -0,0 +1,244 @@
+<script>
+	import { deserialize, enhance } from '$app/forms';
+	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 shortenFileSize from '$lib/helper/shortenFileSize.js';
+	import Exclamation from '$lib/icons/Exclamation.svelte';
+
+	export let form;
+
+	let open = false;
+	let inProgress = false;
+	let vorgang = '';
+	let name = '';
+	/** @type {?string}*/
+	let etag = null;
+	/** @type {?FileList} */
+	let files = null;
+
+	$: inProgress = form === null;
+
+	/** @type {?Record<string,any>}*/
+	let formErrors;
+
+	async function validateForm() {
+		let data = new FormData();
+		data.append('vorgang', vorgang);
+		data.append('name', name);
+		const response = await fetch('?/validate', { method: 'POST', body: data });
+		/** @type {import('@sveltejs/kit').ActionResult} */
+		const result = deserialize(await response.text());
+
+		let success = true;
+		if (result.type === 'success') {
+			formErrors = null;
+		} else {
+			if (result.type === 'failure' && result.data) formErrors = result.data;
+			success = false;
+		}
+
+		console.log('File', files);
+		if (!files?.length) {
+			formErrors = { file: 'Sie haben keine Datei ausgewählt.', ...formErrors };
+			success = false;
+		}
+
+		return success;
+	}
+
+	async function getUrl() {
+		let data = new FormData();
+		data.append('vorgang', vorgang);
+		data.append('name', name);
+		if (files?.length === 1) {
+			data.append('type', files[0].type);
+			data.append('fileName', files[0].name);
+		}
+		const response = await fetch('?/url', { method: 'POST', body: data });
+		/** @type {import('@sveltejs/kit').ActionResult} */
+		const result = deserialize(await response.text());
+		if (result.type === 'success') return result.data?.url;
+
+		return null;
+	}
+
+	/** @param {MouseEvent} event*/
+	async function buttonClick(event) {
+		if (!(await validateForm())) {
+			event.preventDefault();
+			return;
+		}
+		const url = await getUrl();
+		console.log('URL', url);
+		open = true;
+		inProgress = true;
+
+		fetch(url, { method: 'PUT', body: files[0] })
+			.then((response) => {
+				inProgress = false;
+				etag = '123';
+				console.log('SUCCESS', response);
+			})
+			.catch((err) => {
+				inProgress = false;
+				etag = null;
+				console.log('ERROR', err);
+			});
+	}
+
+	function uploadSuccessful() {
+		console.log('reset');
+		open = false;
+		vorgang = '';
+		name = '';
+		files = null;
+	}
+</script>
+
+<div class="mx-auto max-w-2xl">
+	<div class="flex flex-col items-center justify-center w-full">
+		<h1 class="text-xl">Datei zu Vorgang hinzufügen</h1>
+	</div>
+
+	<div>
+		<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="vorgang" class="block text-sm font-medium leading-6 text-gray-900"
+							><span class="flex"
+								>{#if formErrors?.vorgang}
+									<span class="inline-block mr-1"><Exclamation /></span>
+								{/if} Vorgang</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
+									bind:value={vorgang}
+									type="text"
+									name="vorgang"
+									id="vorgang"
+									autocomplete={vorgang}
+									class="block 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 formErrors?.vorgang}
+							<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.vorgang}</p>
+						{/if}
+					</div>
+
+					<div>
+						<label for="name" class="block text-sm font-medium leading-6 text-gray-900"
+							><span class="flex"
+								>{#if formErrors?.name}
+									<span class="inline-block mr-1"><Exclamation /></span>
+								{/if} Name</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
+									bind:value={name}
+									type="text"
+									name="name"
+									id="name"
+									autocomplete={name}
+									class="block 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 formErrors?.name}
+							<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.name}</p>
+						{/if}
+					</div>
+
+					<div class="col-span-full">
+						<label for="file" class="block text-sm font-medium leading-6 text-gray-900"
+							><span class="flex"
+								>{#if formErrors?.file}
+									<span class="inline-block mr-1"><Exclamation /></span>
+								{/if} Datei</span
+							></label
+						>
+						<div
+							class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
+						>
+							<div class="text-center">
+								<svg
+									class="mx-auto h-12 w-12 text-gray-300"
+									viewBox="0 0 24 24"
+									fill="currentColor"
+									aria-hidden="true"
+								>
+									<path
+										fill-rule="evenodd"
+										d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z"
+										clip-rule="evenodd"
+									/>
+								</svg>
+								<div class="mt-4 flex text-sm leading-6 text-gray-600">
+									<label
+										for="file"
+										class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500"
+									>
+										<span>Wähle eine Datei aus</span>
+										<input id="file" bind:files name="file" type="file" class="sr-only" />
+									</label>
+									<p class="pl-1">oder ziehe sie ins Feld</p>
+								</div>
+								<p class="text-xs leading-5 text-gray-600">GLB Dateien bis zu 1GB</p>
+								{#if files?.length}
+									<div class="flex justify-center text-xs">
+										<p class="mx-2">Datei: <span class="font-bold">{files[0].name}</span></p>
+										<p class="mx-2">
+											Größe: <span class="font-bold">{shortenFileSize(files[0].size)}</span>
+										</p>
+									</div>
+								{/if}
+							</div>
+						</div>
+						{#if formErrors?.file}
+							<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.file}</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
+					on:click={buttonClick}
+					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>
+	</div>
+
+	<Modal {open}
+		><ModalTitle>Upload</ModalTitle><ModalContent>
+			{#if inProgress}
+				<p class="py-2 mb-1">Upload läuft...</p>
+			{:else if etag}
+				<Alert class="w-full">Upload erfolgreich</Alert>
+			{:else}
+				<Alert class="w-full" type="error">Fehler beim Upload</Alert>
+			{/if}
+		</ModalContent>
+		<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
+	</Modal>
+</div>
--- a/src/routes/(angemeldet)/view/+page.server.js
+++ b/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}`);
+	}
+};
--- a/src/routes/(angemeldet)/view/+page.svelte
+++ b/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>
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.server.js
+++ b/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 };
+}
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/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>
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />
--- a/src/routes/anmeldung/+layout.svelte
+++ b/src/routes/anmeldung/+layout.svelte
@@ -0,0 +1 @@
+<div class="h-screen bg-white"><slot /></div>
--- a/src/routes/anmeldung/+page.server.js
+++ b/src/routes/anmeldung/+page.server.js
@@ -0,0 +1,31 @@
+import { dev } from '$app/environment';
+import { fail, redirect } from '@sveltejs/kit';
+import { authenticate } from '$lib/auth';
+
+const COOKIE_NAME = 'session';
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+	login: async ({ request, cookies }) => {
+		const data = await request.formData();
+		const user = data.get('user');
+		const password = data.get('password');
+
+		const token = authenticate(user, password);
+
+		if (!token) return fail(400, { user, incorrect: true });
+
+		cookies.set(COOKIE_NAME, token, {
+			path: '/',
+			httpOnly: true,
+			sameSite: 'strict',
+			secure: !dev
+		});
+		throw redirect(303, '/');
+	},
+	logout: async (event) => {
+		event.cookies.delete(COOKIE_NAME, {path: '/'});
+		event.locals.user = null;
+		return { success: true };
+	}
+};
--- a/src/routes/anmeldung/+page.svelte
+++ b/src/routes/anmeldung/+page.svelte
@@ -0,0 +1,75 @@
+<script>
+	import Panel from '$lib/components/ui/Panel.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
+	import Alert from '$lib/components/ui/Alert.svelte';
+	import Login from '$lib/icons/Login.svelte';
+
+	/** @type {import('./$types').ActionData} */
+	export let form;
+
+	let user = form?.user ?? '';
+
+	function buttonClick() {}
+</script>
+
+<!--
+  This example requires updating your template:
+
+  ```
+  <html class="h-full bg-white">
+  <body class="h-full">
+  ```
+-->
+<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+	<div class="sm:mx-auto sm:w-full sm:max-w-sm">
+		<img class="mx-auto h-10 w-auto" src="/Landeswappen_NI.svg" alt="Landeswappen Niedersachsen" />
+
+		<h2 class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">
+			Anmeldung zum 3D Tatort
+		</h2>
+	</div>
+
+	<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+		<form class="space-y-6" action="?/login" method="POST">
+			<div>
+				<label for="user" class="block text-sm font-medium leading-6 text-gray-900">Kennung</label>
+				<div class="mt-2">
+					<input
+						id="user"
+						name="user"
+						type="text"
+						autocomplete="email"
+						required
+						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>
+			</div>
+
+			<div>
+				<div class="flex items-center justify-between">
+					<label for="password" class="block text-sm font-medium leading-6 text-gray-900"
+						>Passwort</label
+					>
+				</div>
+				<div class="mt-2">
+					<input
+						id="password"
+						name="password"
+						type="password"
+						autocomplete="current-password"
+						required
+						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>
+			</div>
+
+			<div>
+				<button
+					type="submit"
+					class="mt-10 flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 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"
+					>Anmelden</button
+				>
+			</div>
+		</form>
+	</div>
+</div>
--- a/src/routes/api/list/[[vorgang]]/+server.js
+++ b/src/routes/api/list/[[vorgang]]/+server.js
@@ -0,0 +1,35 @@
+import { client } from '$lib/minio';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET({ params }) {
+	const prefix = params.vorgang ? `${params.vorgang}/` : '';
+	let stream = client.listObjectsV2('tatort', prefix, false, '');
+	const result = new ReadableStream({
+		start(controller) {
+			stream.on('data', (data) => {
+				if (prefix === '') {
+					if (data.prefix)
+						controller.enqueue(`${JSON.stringify({ ...data, name: data.prefix.slice(0, -1) })}\n`);
+					return;
+				}
+
+				const name = data.name.slice(prefix.length);
+				if (name === 'config.json') return;
+
+				controller.enqueue(`${JSON.stringify({ ...data, name, prefix })}\n`);
+			});
+			stream.on('end', () => {
+				controller.close();
+			});
+		},
+		cancel() {
+			stream.destroy();
+		}
+	});
+
+	return new Response(result, {
+		headers: {
+			'content-type': 'text/event-stream'
+		}
+	});
+}
--- a/src/routes/api/tatort/+server.js
+++ b/src/routes/api/tatort/+server.js
@@ -0,0 +1,26 @@
+import { client } from '$lib/minio';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET() {
+	var stream = client.listObjectsV2('tatort', '', true);
+	const result = new ReadableStream({
+		start(controller) {
+			stream.on('data', (data) => {
+				//console.log(data);
+				controller.enqueue(`${JSON.stringify(data)}\n`);
+			});
+			stream.on('end', () => {
+				controller.close();
+			});
+		},
+		cancel() {
+			stream.destroy();
+		}
+	});
+
+	return new Response(result, {
+		headers: {
+			'content-type': 'text/event-stream'
+		}
+	});
+}
--- a/src/routes/api/upload/+server.js
+++ b/src/routes/api/upload/+server.js
@@ -0,0 +1,6 @@
+import { client } from '$lib/minio';
+
+/** @type {import('./$types').RequestHandler} */
+export async function GET(params) {
+	console.log('GET', params);
+}
				`@@ -0,0 +1 @@`
				`<div class="h-screen bg-white"><slot /></div>`