From 2278b18f02d7ebd1453d3ad1b0ac41577a305ddc Mon Sep 17 00:00:00 2001
From: titver968 <vermesan@hotmail.com>
Date: Wed, 14 May 2025 13:59:06 +0200
Subject: [PATCH] Fehlerkorrekturen

---
 .../(angemeldet)/list/[vorgang]/+page.svelte  | 188 ++++++++++--------
 .../view/[vorgang]/[tatort]/+page.svelte      |   5 -
 2 files changed, 105 insertions(+), 88 deletions(-)

diff --git a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
index aa1e20f..13551c8 100644
--- a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
+++ b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte
@@ -4,7 +4,7 @@
 	}
 </style>
 
-<script>
+<script lang="ts">
 	import { onMount, tick } from 'svelte';
 	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import { page } from '$app/stores';
@@ -21,10 +21,15 @@
 	/** @type {import('./$types').PageData} */
 	/** export let data; */
 
-	/**
-	 * @type any[]
-	 */
-	let list = [];
+	interface ListItem {
+		name: string;
+		size: number;
+		lastModified: string | number | Date;
+		show_button?: boolean;
+		// add other properties as needed
+	}
+
+	let list: ListItem[] = [];
 	$: list;
 
 	let open = false;
@@ -69,27 +74,31 @@
 		open = false;
 	}
 
-	function defocus_element(i) {
+	function defocus_element(i: number) {
 		let item = list[i]
 		let text_field_id = `label__${item.name}`
 
 		let text_field = document.getElementById(text_field_id)
-		text_field.setAttribute("contenteditable", false)
-		text_field.textContent = item.name;
+		if (text_field) {
+			text_field.setAttribute("contenteditable", "false")
+			text_field.textContent = item.name;
+		}
 
 		// reshow button
 		list[i].show_button = true;
 		return;
 	}
 
-	async function handle_input(ev, i) {
+	async function handle_input(ev: KeyboardEvent, i: number) {
 		let item = list[i]
 		if (ev.key == "Escape") {
 			let text_field_id = `label__${item.name}`
 
 			let text_field = document.getElementById(text_field_id)
-			text_field.setAttribute("contenteditable", false)
-			text_field.textContent = item.name;
+			if (text_field) {
+				text_field.setAttribute("contenteditable", "false");
+				text_field.textContent = item.name;
+			}
 
 			// reshow button
 			item.show_button = true
@@ -97,8 +106,8 @@
 		}
 		if (ev.key == "Enter") {
 			console.log('--- hitted')
-			let name_field = ev.currentTarget
-			let new_name = name_field.textContent || name_field.innerText || '';
+			let name_field = ev.currentTarget as HTMLElement | null;
+			let new_name = name_field ? (name_field.textContent || (name_field as any).innerText || '') : '';
 
 
 			if (new_name == '') {
@@ -117,9 +126,9 @@
 			const url = $page.url
 			console.log(url);
 
-			let data_obj = {}
+			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.id.split('__')[1]
+			data_obj["old_name"] = ev.currentTarget && (ev.currentTarget as HTMLElement).id ? (ev.currentTarget as HTMLElement).id.split('__')[1] : ''
 
 
 			open = true;
@@ -181,80 +190,93 @@
 							</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}
-								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>
+																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 item.show_button}
 								<button
-								style="padding: 2px"
-								id="edit__{item.name}"
-								on:click|preventDefault={(ev) => {
-									let text_field_id = `label__${item.name}`
-
-									let text_field = document.getElementById(text_field_id)
-									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>
+																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}
-								<!-- Delete button -->
 								<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 = event.currentTarget.id.split('del__')[1]
-
-
-
-										// delete request
-										// --------------
-
-										let url = $page.url
-										url += `/${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) {
-											console.log(error.message)
-										}
-
-									}
-								}}
-								>
-									<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>
+																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>
diff --git a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
index 9cb348c..37b0678 100644
--- a/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
+++ b/src/routes/(angemeldet)/view/[vorgang]/[tatort]/+page.svelte
@@ -4,11 +4,6 @@
 		width: 100%;
 	}
 
-	.vertical-slider {
-    writing-mode: bt-lr; /* Schreibt von unten nach oben (Vertikale Darstellung) */
-    transform: rotate(270deg); /* Slider um 270° drehen */
-    height: 200px;
-  }
 
   .model{
 		height: calc(100%-84px)