formatting

This commit is contained in:
2025-06-11 09:55:00 +02:00
parent 5ce5c78698
commit fd8298906a

View File

@@ -168,35 +168,34 @@
<ul class="divide-y divide-gray-100"> <ul class="divide-y divide-gray-100">
{#each list as item, i} {#each list as item, i}
<li> <li>
<a <a
href="/view/{$page.params.vorgang}/{item.name}" href="/view/{$page.params.vorgang}/{item.name}"
class=" flex justify-between gap-x-6 py-5" class=" flex justify-between gap-x-6 py-5"
aria-label="zum 3D-modell" aria-label="zum 3D-modell"
> >
<div class=" flex gap-x-4"> <div class=" flex gap-x-4">
<Cube /> <Cube />
<div class="min-w-0 flex-auto"> <div class="min-w-0 flex-auto">
{#if data.user.admin} {#if data.user.admin}
<span <span
id="label__{item.name}" id="label__{item.name}"
class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1" class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
contenteditable={!item.show_button} contenteditable={!item.show_button}
role="textbox" role="textbox"
tabindex="0" tabindex="0"
aria-label="Dateiname bearbeiten" aria-label="Dateiname bearbeiten"
on:focusout={() => { on:focusout={() => {
defocus_element(i); defocus_element(i);
}} }}
on:keydown|stopPropagation={// event needed to identify ID on:keydown|stopPropagation={// event needed to identify ID
// TO-DO: check if event is needed or if index is sufficient // TO-DO: check if event is needed or if index is sufficient
async (ev) => { async (ev) => {
handle_input(ev, i); handle_input(ev, i);
}}>{item.name}</span }}>{item.name}</span
> >
<!--<input <!--<input
class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1" class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
type="text" type="text"
name="" name=""
@@ -208,91 +207,91 @@
bind:value={item.name} bind:value={item.name}
id="label__{item.name}" id="label__{item.name}"
/>--> />-->
<!-- disabled={item.show_button} --> <!-- disabled={item.show_button} -->
<!-- https://iconduck.com/icons/192863/edit-rename --> <!-- https://iconduck.com/icons/192863/edit-rename -->
{#if item.show_button} {#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;
}}
>
<Edit />
</button>
{/if}
<button <button
style="padding: 2px" style="padding: 2px"
id="edit__{item.name}" id="del__{item.name}"
aria-label="Datei umbenennen" on:click|preventDefault={async (ev) => {
on:click|preventDefault={(ev) => { let delete_item = window.confirm('Bist du sicher?');
let text_field_id = `label__${item.name}`;
let text_field = document.getElementById(text_field_id); if (delete_item) {
if (text_field) { // bucket: tatort, name: <vorgang>/item-name
text_field.setAttribute('contenteditable', 'true'); let vorgang = $page.params.vorgang;
text_field.focus(); let filename = '';
text_field.textContent = ''; 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);
}
}
} }
// hide button
item.show_button = false;
}} }}
aria-label="Datei löschen"
> >
<Edit /> <Trash />
</button> </button>
{:else}
<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
>{item.name}</span
>
{/if} {/if}
<button <p class="mt-1 truncate text-xs leading-5 text-gray-500">
style="padding: 2px" {shortenFileSize(item.size)}
id="del__{item.name}" </p>
on:click|preventDefault={async (ev) => { </div>
let delete_item = window.confirm('Bist du sicher?'); </div>
<div class="hidden sm:flex sm:flex-col sm:items-end">
if (delete_item) { <p class="text-sm leading-6 text-gray-900">3D Tatort</p>
// bucket: tatort, name: <vorgang>/item-name <p class="mt-1 text-xs leading-5 text-gray-500">
let vorgang = $page.params.vorgang; Zuletzt geändert <time datetime="2023-01-23T13:23Z"
let filename = ''; >{timeElapsed(new Date(item.lastModified))}</time
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"
> >
<Trash />
</button>
{:else}
<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
>{item.name}</span
>
{/if}
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
{shortenFileSize(item.size)}
</p> </p>
</div> </div>
</div> </a>
<div class="hidden sm:flex sm:flex-col sm:items-end">
<p class="text-sm leading-6 text-gray-900">3D Tatort</p>
<p class="mt-1 text-xs leading-5 text-gray-500">
Zuletzt geändert <time datetime="2023-01-23T13:23Z"
>{timeElapsed(new Date(item.lastModified))}</time
>
</p>
</div>
</a>
</li> </li>
{/each} {/each}
</ul> </ul>