update frontend

2025-05-22 17:25:33 +02:00
parent bebd226c80
commit 99a27fc079
3 changed files with 163 additions and 122 deletions
--- a/src/lib/helper/caseNumberOccupied.js
+++ b/src/lib/helper/caseNumberOccupied.js
@@ -3,7 +3,7 @@ import { client } from '$lib/minio';
 /**
 * Check if caseNumber is used
 * @param {string} caseNumber
- * @returns {Promise<boolean}
+ * @returns {Promise<boolean>}
 */
 export default async function caseNumberOccupied(caseNumber) {
 	const prefix = `${caseNumber}/config.json`;
--- a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
+++ b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
@@ -1,9 +1,3 @@
-<style>
-	ul {
-		min-width: 24rem;
-	}
-</style>
-
 <script lang="ts">
 	import { onMount, tick } from 'svelte';
 	import shortenFileSize from '$lib/helper/shortenFileSize';
@@ -21,7 +15,7 @@
 	/** @type {import('./$types').PageData} */
 	export let data;

-	console.log(`--- ${data.user.admin}`)
+	console.log(`--- ${data.user.admin}`);

 	interface ListItem {
 		name: string;
@@ -67,7 +61,7 @@
 			list = list.map((item) => {
 				item.show_button = true;
 				return item;
-			})
+			});
 		}
 	});

@@ -77,12 +71,12 @@
 	}

 	function defocus_element(i: number) {
-		let item = list[i]
-		let text_field_id = `label__${item.name}`
+		let item = list[i];
+		let text_field_id = `label__${item.name}`;

-		let text_field = document.getElementById(text_field_id)
+		let text_field = document.getElementById(text_field_id);
 		if (text_field) {
-			text_field.setAttribute("contenteditable", "false")
+			text_field.setAttribute('contenteditable', 'false');
 			text_field.textContent = item.name;
 		}

@@ -92,25 +86,26 @@
 	}

 	async function handle_input(ev: KeyboardEvent, i: number) {
-		let item = list[i]
-		if (ev.key == "Escape") {
-			let text_field_id = `label__${item.name}`
+		let item = list[i];
+		if (ev.key == 'Escape') {
+			let text_field_id = `label__${item.name}`;

-			let text_field = document.getElementById(text_field_id)
+			let text_field = document.getElementById(text_field_id);
 			if (text_field) {
-				text_field.setAttribute("contenteditable", "false");
+				text_field.setAttribute('contenteditable', 'false');
 				text_field.textContent = item.name;
 			}

 			// reshow button
-			item.show_button = true
+			item.show_button = true;
 			return;
 		}
-		if (ev.key == "Enter") {
-			console.log('--- hitted')
+		if (ev.key == 'Enter') {
+			console.log('--- hitted');
 			let name_field = ev.currentTarget as HTMLElement | null;
-			let new_name = name_field ? (name_field.textContent || (name_field as any).innerText || '') : '';
-
+			let new_name = name_field
+				? name_field.textContent || (name_field as any).innerText || ''
+				: '';

 			if (new_name == '') {
 				alert('Bitte einen gültigen Namen eingeben.');
@@ -125,34 +120,36 @@
 			ev.preventDefault();

 			// construct PUT URL
-			const url = $page.url
+			const url = $page.url;
 			console.log(url);

 			let data_obj: { new_name: string; old_name: string } = { new_name: '', old_name: '' };
-			data_obj["new_name"] = new_name
-			data_obj["old_name"] = ev.currentTarget && (ev.currentTarget as HTMLElement).id ? (ev.currentTarget as HTMLElement).id.split('__')[1] : ''
-
+			data_obj['new_name'] = new_name;
+			data_obj['old_name'] =
+				ev.currentTarget && (ev.currentTarget as HTMLElement).id
+					? (ev.currentTarget as HTMLElement).id.split('__')[1]
+					: '';

 			open = true;
 			inProgress = true;

-			const response = await fetch(url,
-				{method: 'PUT', body: JSON.stringify( data_obj )
-			})
+			const response = await fetch(url, { method: 'PUT', body: JSON.stringify(data_obj) });

 			inProgress = false;

 			if (!response.ok) {
 				err = true;
 				if (response.status == 400) {
-					let json_res = await response.json()
+					let json_res = await response.json();
 					// alert(json_res['msg'])
 					return;
 				}
-				throw new Error(`Fehlgeschlagen: ${response.status}`)
+				throw new Error(`Fehlgeschlagen: ${response.status}`);
 			} else {
 				uploadSuccessful();
-				setTimeout(() => {window.location.reload()}, 500)
+				setTimeout(() => {
+					window.location.reload();
+				}, 500);
 			}

 			// --- upload finished ---
@@ -160,7 +157,6 @@
 			return;
 		}
 	}
-
 </script>

 <div class="-z-10 bg-white">
@@ -191,94 +187,120 @@
 								/>
 							</svg>
 							<div class="min-w-0 flex-auto">
-								<span
-																style="display: inline-block; min-width: 5px;"
-																id="label__{item.name}"
-																class="text-sm font-semibold leading-6 text-gray-900"
-																contenteditable={! item.show_button}
-																role="textbox"
-																tabindex="0"
-																aria-label="Dateiname bearbeiten"
-																on:focusout={() => {
-																	defocus_element(i);
-																}}
-																on:keydown|stopPropagation={
-																	// event needed to identify ID
-																	// TO-DO: check if event is needed or if index is sufficient
-																	async (ev) => {handle_input(ev, i)}
-																}
-								
-																>{item.name}</span>
-								<!-- https://iconduck.com/icons/192863/edit-rename -->
+								{#if data.user.admin}
+									<!-- <span
+										id="label__{item.name}"
+										class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
+										contenteditable={!item.show_button}
+										role="textbox"
+										tabindex="0"
+										aria-label="Dateiname bearbeiten"
+										on:focusout={() => {
+											defocus_element(i);
+										}}
+										on:keydown|stopPropagation={
+										// event needed to identify ID
+										// TO-DO: check if event is needed or if index is sufficient
+										async (ev) => {
+											handle_input(ev, i);
+										}}>{item.name}</span
+									> -->

-								{#if item.show_button}
-								<button
-																style="padding: 2px"
-																id="edit__{item.name}"
-																aria-label="Datei umbenennen"
-																on:click|preventDefault={(ev) => {
-																	let text_field_id = `label__${item.name}`
-								
-																	let text_field = document.getElementById(text_field_id)
-																	if (text_field) {
-																		text_field.setAttribute("contenteditable", "true");
-																		text_field.focus();
-																		text_field.textContent = '';
-																	}
-								
-																	// hide button
-																	item.show_button = false
-																}}
-																>
-																	<svg
-																	height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m14.996094 3-11.9921878 11.992188h-.0039062v4.007812h1 2 1.0078125v-.0039l11.9921875-11.9921938-.001953-.0019531.001953-.0019531-4-4-.002.00195zm-1.998047 3.4121094 2.589844 2.5898437-7.587891 7.5878909v-1.589844h-1-1v-1-.589844zm-7.998047 7.9980466v1.589844h1 1v1 .589844l-.4101562.410156h-1.5898438l-1-1v-1.589844z" fill="#373737" transform="translate(1 1)"/></svg>
-																</button>
+									<input
+										class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
+										type="text"
+										name=""
+										on:keydown|stopPropagation={// event needed to identify ID
+										// TO-DO: check if event is needed or if index is sufficient
+										async (ev) => {
+											handle_input(ev, i);
+										}}
+										disabled={item.show_button}
+										bind:value={item.name}
+										id="label__{item.name}"
+									/>
+									<!-- https://iconduck.com/icons/192863/edit-rename -->
+
+									{#if item.show_button}
+										<button
+											style="padding: 2px"
+											id="edit__{item.name}"
+											aria-label="Datei umbenennen"
+											on:click|preventDefault={(ev) => {
+												let text_field_id = `label__${item.name}`;
+
+												let text_field = document.getElementById(text_field_id);
+												if (text_field) {
+													text_field.setAttribute('contenteditable', 'true');
+													text_field.focus();
+													text_field.textContent = '';
+												}
+
+												// hide button
+												item.show_button = false;
+											}}
+										>
+											<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg"
+												><path
+													d="m14.996094 3-11.9921878 11.992188h-.0039062v4.007812h1 2 1.0078125v-.0039l11.9921875-11.9921938-.001953-.0019531.001953-.0019531-4-4-.002.00195zm-1.998047 3.4121094 2.589844 2.5898437-7.587891 7.5878909v-1.589844h-1-1v-1-.589844zm-7.998047 7.9980466v1.589844h1 1v1 .589844l-.4101562.410156h-1.5898438l-1-1v-1.589844z"
+													fill="#373737"
+													transform="translate(1 1)"
+												/></svg
+											>
+										</button>
+									{/if}
+									<button
+										style="padding: 2px"
+										id="del__{item.name}"
+										on:click|preventDefault={async (ev) => {
+											let delete_item = window.confirm('Bist du sicher?');
+
+											if (delete_item) {
+												// bucket: tatort, name: <vorgang>/item-name
+												let vorgang = $page.params.vorgang;
+												let filename = '';
+												if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
+													filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
+												}
+
+												// delete request
+												// --------------
+
+												let url = new URL($page.url);
+												url.pathname += `/${filename}`;
+
+												console.log(`--- ${vorgang} + ${filename} + ${url}`);
+												try {
+													const response = await fetch(url, { method: 'DELETE' });
+													if (response.status == 204) {
+														setTimeout(() => {
+															window.location.reload();
+														}, 500);
+													}
+												} catch (error) {
+													if (error instanceof Error) {
+														console.log(error.message);
+													} else {
+														console.log(error);
+													}
+												}
+											}
+										}}
+										aria-label="Datei löschen"
+									>
+										<svg height="20" width="20" xmlns="http://www.w3.org/2000/svg"
+											><path
+												d="m8 3v1 1h1v-1h4v1h1v-1-1zm-4 3v1h14v-1zm2 2v11h1 9v-1-10h-1v10h-8v-10z"
+												fill="#373737"
+												transform="translate(1 1)"
+											/></svg
+										>
+									</button>
+								{:else}
+									<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
+										>{item.name}</span
+									>
 								{/if}
-								<button
-																style="padding: 2px"
-																id="del__{item.name}"
-																on:click|preventDefault={async (ev) => {
-																	let delete_item = window.confirm("Bist du sicher?");
-								
-																	if (delete_item) {
-																		// bucket: tatort, name: <vorgang>/item-name
-																		let vorgang = $page.params.vorgang
-																		let filename = '';
-																		if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
-																			filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
-																		}
-								
-								
-								
-																		// delete request
-																		// --------------
-								
-																		let url = new URL($page.url);
-																		url.pathname += `/${filename}`;
-								
-																		console.log(`--- ${vorgang} + ${filename} + ${url}`)
-																		try {
-																			const response = await fetch(url,
-																				{method: 'DELETE'}
-																			)
-																			if (response.status == 204) {
-																				setTimeout(() => {window.location.reload()}, 500)
-																			}
-																		} catch (error) {
-																			if (error instanceof Error) {
-																				console.log(error.message)
-																			} else {
-																				console.log(error)
-																			}
-																		}
-								
-																	}
-																}}
-																aria-label="Datei löschen"
-																>
-																	<svg
-																	height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m8 3v1 1h1v-1h4v1h1v-1-1zm-4 3v1h14v-1zm2 2v11h1 9v-1-10h-1v10h-8v-10z" fill="#373737" transform="translate(1 1)"/></svg>
-																</button>
 								<p class="mt-1 truncate text-xs leading-5 text-gray-500">
 									{shortenFileSize(item.size)}
 								</p>
@@ -298,7 +320,7 @@
 		</ul>
 	</div>

-<Modal {open}
+	<Modal {open}
 		><ModalTitle>Umbenennen</ModalTitle><ModalContent>
 			{#if inProgress}
 				<p class="py-2 mb-1">Vorgang läuft...</p>
@@ -309,5 +331,10 @@
 		</ModalContent>
 		<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
 	</Modal>
-
 </div>
+
+<style>
+	ul {
+		min-width: 24rem;
+	}
+</style>
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -89,7 +89,10 @@
 </script>

 <div class="h-full model w-full bg-neutral-200 p-4 transition-all delay-250">
+	<!-- xr-environment -->
 	<model-viewer
+		ar
+		shadow-intensity="1"
 		src={data.url}
 		bind:this={modelViewer}
 		touch-action="pan-y"
@@ -108,7 +111,18 @@
 			class:opacity-0={!hideProgressScreen}
 			class:hidden={!hideProgressScreen}
 		>
+			<button slot="ar-button" id="ar-button"> 👋 Activate AR </button>
+
+			<div id="ar-prompt">AR-Prompt</div>
+
+			<button id="ar-failure"> AR is not tracking! </button>
 			<div class="flex flex-col bg-white/50">
+				<button
+					on:click={() => {
+						console.log(modelViewer.ar, modelViewer.getAttribute('ar-status'));
+					}}>Test</button
+				>
+
 				<!--3 Buttons-->
 				<div class="p-2">
 					<Button