formatting
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user