Ende des Tages 26.05.

e2e/demo.test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('h1')).toBeVisible();
+});

package.json

@@ -13,30 +13,31 @@
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run && npm run test:e2e"
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.9",
+		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
+		"@playwright/test": "^1.49.1",
 		"@sveltejs/adapter-auto": "^4.0.0",
-		"@sveltejs/kit": "^2.21.3",
+		"@sveltejs/kit": "^2.16.0",
-		"@sveltejs/vite-plugin-svelte": "^5.1.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
 		"@testing-library/jest-dom": "^6.6.3",
-		"@testing-library/svelte": "^5.2.8",
+		"@testing-library/svelte": "^5.2.4",
-		"@tsconfig/svelte": "^5.0.4",
+		"eslint": "^9.18.0",
-		"eslint": "^9.28.0",
+		"eslint-config-prettier": "^10.0.1",
-		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.0.0",
-		"eslint-plugin-svelte": "^3.9.2",
+		"globals": "^16.0.0",
-		"globals": "^16.2.0",
+		"jsdom": "^26.0.0",
-		"jsdom": "^26.1.0",
+		"prettier": "^3.4.2",
-		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.3.3",
-		"prettier-plugin-svelte": "^3.4.0",
+		"svelte": "^5.0.0",
-		"svelte": "^5.33.18",
+		"svelte-check": "^4.0.0",
-		"svelte-check": "^4.2.1",
+		"typescript": "^5.0.0",
-		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.20.0",
-		"typescript-eslint": "^8.34.0",
+		"vite": "^6.2.5",
-		"vite": "^6.3.5",
+		"vitest": "^3.0.0"
-		"vitest": "^3.2.3"
 	},
 	"dependencies": {
 		"@google/model-viewer": "^4.1.0",
@@ -45,7 +46,8 @@
 		"autoprefixer": "^10.4.21",
 		"jsonwebtoken": "^9.0.2",
 		"minio": "^8.0.5",
-		"postcss": "^8.5.4",
+		"postcss": "^8.5.3",
+		"svelte-cubed": "^0.2.1",
 		"tailwindcss": "^3.4.17"
 	}
 }

playwright.config.js

@@ -0,0 +1,11 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;

playwright.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'e2e'
+});

src/lib/components/ui/Alert.svelte

@@ -46,7 +46,7 @@
 	}
 </style>
 
-<script lang="ts">
+<script>
 	export let type = 'info';
 	let classNames = '';
 	export { classNames as class };

src/lib/components/ui/Button.svelte

@@ -173,7 +173,7 @@
 	}
 </style>
 
-<script lang="ts">
+<script>
 	export let href = null;
 	export let type = 'button';
 	export let size = 'md';

src/lib/components/ui/DeleteIconButton.svelte

@@ -11,7 +11,7 @@
 	}
 </style>
 
-<script lang="ts">
+<script>
 	import { page } from '$app/stores';
 	import Trash from '$lib/icons/Trash.svelte';
 	import Panel from '$lib/components/ui/Panel.svelte';

src/lib/components/ui/Modal/Modal.svelte

@@ -41,7 +41,7 @@
 	}
 </style>
 
-<script lang="ts">
+<script>
 	import { fade } from 'svelte/transition';
 	export let size = 'xl'; // https://tailwindcss.com/docs/max-width#class-reference
 	export let open = false;

src/lib/components/ui/Modal/ModalContent.svelte

@@ -15,7 +15,7 @@
 	}
 </style>
 
-<script lang="ts">
+<script>
 	export let scroll = true;
 	export let padding = true;
 

src/lib/components/ui/Notification.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	export let title = 'Erfolgreich';
 	export let show = false;
 

src/lib/components/ui/Panel.svelte

@@ -5,7 +5,7 @@
 	}
 </style>
 
-<script lang="ts">
+<script>
 	export let padding = 'p-6';
 	export let shadow = true;
 	let classNames = '';

src/lib/components/ui/Select.svelte

@@ -6,7 +6,7 @@
 	}
 </style>
 
-<script lang="ts">
+<script>
 	import { clickOutside } from '$lib/helpers/clickOutside.js';
 	import Check from '$lib/icons/Check.svelte';
 	import Selector from '$lib/icons/Selector.svelte';

src/routes/(angemeldet)/+layout.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	import Chevron from '$lib/icons/Chevron-right.svelte';
 	import Login from '$lib/icons/Login.svelte';
 

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

@@ -1,7 +1,7 @@
 <style>
 </style>
 
-<script lang="ts">
+<script>
 	import Panel from '$lib/components/ui/Panel.svelte';
 
 	export let data;
@@ -40,7 +40,7 @@
 				</p>
 			</div>
 		{/if}
-		{#if data.user.admin}
+		<!--{#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"
@@ -66,7 +66,7 @@
 				</a>
 				<p class="mt-1 text-gray-600">Stelle einen weiteren Tatort für die Anwendung bereit.</p>
 			</div>
-		{/if}
+		{/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

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

@@ -19,7 +19,7 @@
 	import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
 
 	/** @type {import('./$types').PageData} */
-	/** export let data; */
+	export let data;
 
 	interface ListItem {
 		name: string;

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<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';
@@ -73,8 +73,24 @@
 							<p class="block text-sm leading-6 text-red-900 mt-2">{form.error.description}</p>
 						{/if}
 					</div>
+
+					<label for="code">
+					<span >Zugangscode (optional) </span>
+					</label>
+
+					<div class="mt-2">
+					<div
+					>
+						<input
+							type="text"
+							id="code"
+						/>
+					</div>
+					</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

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

@@ -22,6 +22,7 @@ export const actions = {
 		const vorgang = data.get('vorgang');
 		const name = data.get('name');
 		const type = data.get('type');
+		const code = data.get('zugangscode');
 		const fileName = data.get('fileName');
 
 		let objectName = `${vorgang}/${name}`;
@@ -35,6 +36,8 @@ export const actions = {
 
 		const url = await client.presignedPutObject('tatort', objectName);
 
+		// enter code
+
 		return { url };
 	},
 	validate: async ({ request }) => {
@@ -42,6 +45,7 @@ export const actions = {
 		const data = Object.fromEntries(requestData);
 		const vorgang = data.vorgang;
 		const name = data.name;
+		const zugangscode = data.zugangscode;
 		let success = true;
 		let err = {};
 
@@ -57,6 +61,12 @@ export const actions = {
 			success = false;
 		}
 
+		if (isRequiredFieldValid(zugangscode)) err.zugangscode = null;
+		else {
+			err.zugangscode = 'Das Feld Zugangscode darf nicht leer bleiben.';
+			success = false;
+		}
+
 		if (success) return { success };
 
 		return fail(400, err);
@@ -99,5 +109,8 @@ export const actions = {
 
 		return { etag, error };
 		//await writeFile(filePath, Buffer.from(await data.file.arrayBuffer()));
+	},
+	get_code: async ({ request }) => {
+		console.log('TO-DO');
 	}
 };

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	import { deserialize, enhance } from '$app/forms';
 	import Alert from '$lib/components/ui/Alert.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -14,6 +14,16 @@
 	let open = false;
 	let inProgress = false;
 	let vorgang = '';
+	const code_len = 8;
+	let zugangscode = ''
+	let zugangscode_prev = '';
+
+	$: zugangscode = Math.random().toString(36).slice(2, 2+code_len);
+
+
+	let case_existing = undefined;
+	$: case_existing = false;
+
 	let name = '';
 	/** @type {?string}*/
 	let etag = null;
@@ -29,6 +39,7 @@
 		let data = new FormData();
 		data.append('vorgang', vorgang);
 		data.append('name', name);
+		data.append('zugangscode', zugangscode)
 		const response = await fetch('?/validate', { method: 'POST', body: data });
 		/** @type {import('@sveltejs/kit').ActionResult} */
 		const result = deserialize(await response.text());
@@ -59,6 +70,7 @@
 		let data = new FormData();
 		data.append('vorgang', vorgang);
 		data.append('name', name);
+		data.append('zugangscode', zugangscode)
 		if (files?.length === 1) {
 			data.append('type', files[0].type);
 			data.append('fileName', files[0].name);
@@ -143,6 +155,33 @@
 
 	}
 
+	// return true or false
+	async function case_exists(case_no) {
+		// ping `/(angemeldet)/view` with caseNumber in POST body
+		let url = '/view'
+		let data = new FormData();
+		data.append('caseNumber', case_no);
+		const response = await fetch(url, {
+			method: 'POST',
+			body: data,
+			redirect: 'error'
+			})
+
+		const res_json = await response.json();
+		const status = res_json.status;
+
+		// aktualisiere Zugangscode mit
+		if (status == 303) {
+			// TO-DO: check existing code
+
+			console.log(`+ existiert`)
+			case_existing = true;
+			return;
+		}
+
+		case_existing = false;
+	}
+
 </script>
 
 <div class="mx-auto max-w-2xl">
@@ -177,12 +216,18 @@
 									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"
+									on:input={() => case_exists(vorgang)}
 								/>
 							</div>
 						</div>
 						{#if formErrors?.vorgang}
 							<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.vorgang}</p>
 						{/if}
+						{#if case_existing && (vorgang.length > 0) }
+							<span>Datei wird zum existierenden Vorgang hinzugefügt.</span>
+						{:else if (vorgang.length > 0) }
+							<span>Neuer Vorgang wird angelegt.</span>
+						{/if}
 					</div>
 
 					<div>
@@ -212,6 +257,32 @@
 						{/if}
 					</div>
 
+					<div>
+						<label for="zugangscode" class="block text-sm font-medium leading-6 text-gray-900"
+							><span class="flex"
+								>{#if formErrors?.zugangscode}
+									<span class="inline-block mr-1"><Exclamation /></span>
+								{/if} Zugangscode</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={zugangscode}
+									type="text"
+									name="zugangscode"
+									id="zugangscode"
+									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?.code}
+							<p class="block text-sm leading-6 text-red-900 mt-2">{formErrors.code}</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"

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

@@ -22,6 +22,6 @@ export const actions = {
 				error: { caseNumber: 'Die Vorgangsnummer existiert in dieser Anwendung nicht.' }
 			});
 		}
-		throw redirect(303, `/list/${caseNumber}`);
+		redirect(303, `/list/${caseNumber}`);
 	}
 };

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

@@ -1,4 +1,4 @@
-<script lang="ts">
+<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';

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

@@ -1,5 +1,4 @@
-<script lang="ts">
+<script>
-	import { preloadCode } from '$app/navigation';
 	import Panel from '$lib/components/ui/Panel.svelte';
 	import { onMount } from 'svelte';
 	import Button from '$lib/components/ui/Button.svelte';

src/routes/+layout.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script>
 	import '../app.css';
 </script>
 

src/routes/anmeldung/+page.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<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';

tsconfig.json

@@ -10,9 +10,7 @@
 		"sourceMap": true,
 		"strict": true,
 		"moduleResolution": "bundler"
-	},
+	}
-	"include": ["src/**/*", "src/node_modules"],
-	"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
 	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
 	//