Initial commit

2025-02-26 07:39:00 +01:00
parent 7334a14f7b
commit de06cdc0bb
85 changed files with 3920 additions and 0 deletions
--- a/tatort/src/lib/auth.js
+++ b/tatort/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/tatort/src/lib/components/ui/Alert.svelte
+++ b/tatort/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/tatort/src/lib/components/ui/Button.svelte
+++ b/tatort/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/tatort/src/lib/components/ui/DeleteIconButton.svelte
+++ b/tatort/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/tatort/src/lib/components/ui/Modal/Modal.svelte
+++ b/tatort/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>
+
+		<!-- 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/tatort/src/lib/components/ui/Modal/ModalContent.svelte
+++ b/tatort/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/tatort/src/lib/components/ui/Modal/ModalFooter.svelte
+++ b/tatort/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/tatort/src/lib/components/ui/Modal/ModalTitle.svelte
+++ b/tatort/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/tatort/src/lib/components/ui/Notification.svelte
+++ b/tatort/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/tatort/src/lib/components/ui/Panel.svelte
+++ b/tatort/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/tatort/src/lib/components/ui/Select.svelte
+++ b/tatort/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/tatort/src/lib/config.js
+++ b/tatort/src/lib/config.js
@@ -0,0 +1,3 @@
+import { readFileSync } from 'fs';
+
+export default JSON.parse(readFileSync('./config.json'));
--- a/tatort/src/lib/helper/caseNumberOccupied.js
+++ b/tatort/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/tatort/src/lib/helper/shortenFileSize.js
+++ b/tatort/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/tatort/src/lib/helper/timeElapsed.js
+++ b/tatort/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/tatort/src/lib/icons/Arrow-left.svelte
+++ b/tatort/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/tatort/src/lib/icons/Arrow-right.svelte
+++ b/tatort/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/tatort/src/lib/icons/Bell.svelte
+++ b/tatort/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/tatort/src/lib/icons/Book.svelte
+++ b/tatort/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/tatort/src/lib/icons/Check.svelte
+++ b/tatort/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/tatort/src/lib/icons/Chevron-left.svelte
+++ b/tatort/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/tatort/src/lib/icons/Chevron-right.svelte
+++ b/tatort/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/tatort/src/lib/icons/Chevron.svelte
+++ b/tatort/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/tatort/src/lib/icons/Drag.svelte
+++ b/tatort/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/tatort/src/lib/icons/Exclamation-circle.svelte
+++ b/tatort/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/tatort/src/lib/icons/Exclamation.svelte
+++ b/tatort/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/tatort/src/lib/icons/Info.svelte
+++ b/tatort/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/tatort/src/lib/icons/Login.svelte
+++ b/tatort/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/tatort/src/lib/icons/Play.svelte
+++ b/tatort/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/tatort/src/lib/icons/Plus.svelte
+++ b/tatort/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/tatort/src/lib/icons/Question-mark-circle.svelte
+++ b/tatort/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/tatort/src/lib/icons/Selector.svelte
+++ b/tatort/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/tatort/src/lib/icons/Trash.svelte
+++ b/tatort/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/tatort/src/lib/icons/X.svelte
+++ b/tatort/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/tatort/src/lib/minio.js
+++ b/tatort/src/lib/minio.js
@@ -0,0 +1,6 @@
+import Minio from 'minio';
+import config from '$lib/config';
+
+process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';
+
+export const client = new Minio.Client(config.minio);