innohub/tatort
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fehlerkorrekturen

Browse Source
This commit is contained in:
titver968
2025-05-14 13:59:06 +02:00
parent 18038903cb
commit 2278b18f02
2 changed files with 105 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@
} }
</style> </style>
<script> <script lang="ts">
import { onMount, tick } from 'svelte'; import { onMount, tick } from 'svelte';
import shortenFileSize from '$lib/helper/shortenFileSize'; import shortenFileSize from '$lib/helper/shortenFileSize';
import { page } from '$app/stores'; import { page } from '$app/stores';
@@ -21,10 +21,15 @@
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
/** export let data; */ /** export let data; */
/** interface ListItem {
* @type any[] name: string;
*/ size: number;
let list = []; lastModified: string | number | Date;
show_button?: boolean;
// add other properties as needed
}
let list: ListItem[] = [];
$: list; $: list;
let open = false; let open = false;
@@ -69,27 +74,31 @@
open = false; open = false;
} }
function defocus_element(i) { function defocus_element(i: number) {
let item = list[i] let item = list[i]
let text_field_id = `label__${item.name}` let text_field_id = `label__${item.name}`
let text_field = document.getElementById(text_field_id) let text_field = document.getElementById(text_field_id)
text_field.setAttribute("contenteditable", false) if (text_field) {
text_field.textContent = item.name; text_field.setAttribute("contenteditable", "false")
text_field.textContent = item.name;
}
// reshow button // reshow button
list[i].show_button = true; list[i].show_button = true;
return; return;
} }
async function handle_input(ev, i) { async function handle_input(ev: KeyboardEvent, i: number) {
let item = list[i] let item = list[i]
if (ev.key == "Escape") { if (ev.key == "Escape") {
let text_field_id = `label__${item.name}` let text_field_id = `label__${item.name}`
let text_field = document.getElementById(text_field_id) let text_field = document.getElementById(text_field_id)
text_field.setAttribute("contenteditable", false) if (text_field) {
text_field.textContent = item.name; text_field.setAttribute("contenteditable", "false");
text_field.textContent = item.name;
}
// reshow button // reshow button
item.show_button = true item.show_button = true
@@ -97,8 +106,8 @@
} }
if (ev.key == "Enter") { if (ev.key == "Enter") {
console.log('--- hitted') console.log('--- hitted')
let name_field = ev.currentTarget let name_field = ev.currentTarget as HTMLElement | null;
let new_name = name_field.textContent || name_field.innerText || ''; let new_name = name_field ? (name_field.textContent || (name_field as any).innerText || '') : '';
if (new_name == '') { if (new_name == '') {
@@ -117,9 +126,9 @@
const url = $page.url const url = $page.url
console.log(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["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; open = true;
@@ -181,80 +190,93 @@
</svg> </svg>
<div class="min-w-0 flex-auto"> <div class="min-w-0 flex-auto">
<span <span
style="display: inline-block; min-width: 5px;" style="display: inline-block; min-width: 5px;"
id="label__{item.name}" id="label__{item.name}"
class="text-sm font-semibold leading-6 text-gray-900" class="text-sm font-semibold leading-6 text-gray-900"
contenteditable={! item.show_button} contenteditable={! item.show_button}
on:focusout={() => { role="textbox"
defocus_element(i); tabindex="0"
}} aria-label="Dateiname bearbeiten"
on:keydown|stopPropagation={ on:focusout={() => {
// event needed to identify ID defocus_element(i);
// TO-DO: check if event is needed or if index is sufficient }}
async (ev) => {handle_input(ev, i)} on:keydown|stopPropagation={
} // event needed to identify ID
// TO-DO: check if event is needed or if index is sufficient
>{item.name}</span> async (ev) => {handle_input(ev, i)}
}
>{item.name}</span>
<!-- https://iconduck.com/icons/192863/edit-rename --> <!-- https://iconduck.com/icons/192863/edit-rename -->
{#if item.show_button} {#if item.show_button}
<button <button
style="padding: 2px" style="padding: 2px"
id="edit__{item.name}" id="edit__{item.name}"
on:click|preventDefault={(ev) => { aria-label="Datei umbenennen"
let text_field_id = `label__${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) let text_field = document.getElementById(text_field_id)
text_field.focus(); if (text_field) {
text_field.textContent = ''; text_field.setAttribute("contenteditable", "true");
text_field.focus();
// hide button text_field.textContent = '';
item.show_button = false }
}}
> // hide button
<svg item.show_button = false
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> >
<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} {/if}
<!-- Delete button -->
<button <button
style="padding: 2px" style="padding: 2px"
id="del__{item.name}" id="del__{item.name}"
on:click|preventDefault={async (ev) => { on:click|preventDefault={async (ev) => {
let delete_item = window.confirm("Bist du sicher?"); let delete_item = window.confirm("Bist du sicher?");
if (delete_item) { if (delete_item) {
// bucket: tatort, name: <vorgang>/item-name // bucket: tatort, name: <vorgang>/item-name
let vorgang = $page.params.vorgang let vorgang = $page.params.vorgang
let filename = event.currentTarget.id.split('del__')[1] let filename = '';
if (ev && ev.currentTarget && (ev.currentTarget as HTMLElement).id) {
filename = (ev.currentTarget as HTMLElement).id.split('del__')[1];
}
// delete request
// --------------
let url = $page.url // delete request
url += `/${filename}` // --------------
console.log(`--- ${vorgang} + ${filename} + ${url}`) let url = new URL($page.url);
try { url.pathname += `/${filename}`;
const response = await fetch(url,
{method: 'DELETE'} console.log(`--- ${vorgang} + ${filename} + ${url}`)
) try {
if (response.status == 204) { const response = await fetch(url,
setTimeout(() => {window.location.reload()}, 500) {method: 'DELETE'}
} )
} catch (error) { if (response.status == 204) {
console.log(error.message) setTimeout(() => {window.location.reload()}, 500)
} }
} catch (error) {
} if (error instanceof Error) {
}} console.log(error.message)
> } else {
<svg console.log(error)
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> }
}
}}
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"> <p class="mt-1 truncate text-xs leading-5 text-gray-500">
{shortenFileSize(item.size)} {shortenFileSize(item.size)}
</p> </p>

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

@@ -4,11 +4,6 @@
width: 100%; 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{ .model{
height: calc(100%-84px) height: calc(100%-84px)