commit mina Feierabend
This commit is contained in:
396
src/lib/components/ListItem.svelte
Normal file
396
src/lib/components/ListItem.svelte
Normal file
@@ -0,0 +1,396 @@
|
|||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import Cube from '$lib/icons/Cube.svelte';
|
||||||
|
import shortenFileSize from '$lib/helper/shortenFileSize';
|
||||||
|
import timeElapsed from '$lib/helper/timeElapsed';
|
||||||
|
import Trash from '$lib/icons/Trash.svelte';
|
||||||
|
import Edit from '$lib/icons/Edit.svelte';
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
|
||||||
|
let { data, list, i } = $props(); // Holt `data` aus den Props
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
let item = list[i];
|
||||||
|
|
||||||
|
$inspect(item.show_button);
|
||||||
|
let oldName = $state(item.name);
|
||||||
|
console.log('alter Ego', oldName);
|
||||||
|
let test = true;
|
||||||
|
|
||||||
|
function deleteItem() {
|
||||||
|
console.log('delete');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClick(ev) {
|
||||||
|
ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||||
|
ev.preventDefault(); // Stoppt die Standardaktion
|
||||||
|
console.log('show click', item.show_button);
|
||||||
|
oldName = item.name;
|
||||||
|
console.log('Button wurde geklickt!', oldName);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handle_input(ev) {
|
||||||
|
// // let item = list[i];
|
||||||
|
console.log('Mina item', item.name, oldName);
|
||||||
|
console.log('input', ev.key);
|
||||||
|
|
||||||
|
if (ev.key == 'Escape') {
|
||||||
|
// ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||||
|
ev.preventDefault(); // Stoppt die Standardaktion
|
||||||
|
item.name = oldName;
|
||||||
|
console.log('Escape', ev.key, 'abbgebrochen: ', item.name, oldName);
|
||||||
|
ev.target.blur(); //Entfernt den Fokus vom Input-Feld
|
||||||
|
}
|
||||||
|
if (ev.key == 'Enter') {
|
||||||
|
//ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||||
|
ev.preventDefault(); // Stoppt die Standardaktion
|
||||||
|
console.log('Enter', ev.key, 'erforlgreich: ', item.name, oldName);
|
||||||
|
ev.target.blur(); //Entfernt den Fokus vom Input-Feld
|
||||||
|
let wert = {
|
||||||
|
index: i,
|
||||||
|
oldName: oldName,
|
||||||
|
newName: item.name,
|
||||||
|
open: true
|
||||||
|
};
|
||||||
|
|
||||||
|
dispatch('update', wert);
|
||||||
|
}
|
||||||
|
|
||||||
|
// // if (ev.key == 'Escape') {
|
||||||
|
// // item.name = oldName;
|
||||||
|
// // // reshow button
|
||||||
|
|
||||||
|
// // item.show_button = true;
|
||||||
|
|
||||||
|
// // return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (ev.key == 'Enter') {
|
||||||
|
// console.log('Enter', ev.key);
|
||||||
|
// ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||||
|
// ev.preventDefault(); // Stoppt die Standardaktion
|
||||||
|
// }
|
||||||
|
// // 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 || ''
|
||||||
|
// // : '';
|
||||||
|
|
||||||
|
// // if (new_name == '') {
|
||||||
|
// // alert('Bitte einen gültigen Namen eingeben.');
|
||||||
|
|
||||||
|
// // ev.preventDefault();
|
||||||
|
|
||||||
|
// // return;
|
||||||
|
// // }
|
||||||
|
|
||||||
|
// // // actual upload
|
||||||
|
|
||||||
|
// // // -------------
|
||||||
|
|
||||||
|
// // // to prevent from item being selected
|
||||||
|
|
||||||
|
// // ev.preventDefault();
|
||||||
|
|
||||||
|
// // // construct PUT 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]
|
||||||
|
// // : '';
|
||||||
|
|
||||||
|
// // open = true;
|
||||||
|
|
||||||
|
// // inProgress = true;
|
||||||
|
|
||||||
|
// // 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();
|
||||||
|
|
||||||
|
// // // alert(json_res['msg'])
|
||||||
|
|
||||||
|
// // return;
|
||||||
|
// // }
|
||||||
|
|
||||||
|
// // throw new Error(`Fehlgeschlagen: ${response.status}`);
|
||||||
|
// // } else {
|
||||||
|
// // uploadSuccessful();
|
||||||
|
|
||||||
|
// // setTimeout(() => {
|
||||||
|
// // window.location.reload();
|
||||||
|
// // }, 500);
|
||||||
|
// // }
|
||||||
|
|
||||||
|
// // // --- upload finished ---
|
||||||
|
|
||||||
|
// // return;
|
||||||
|
// // }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a href="/view/{$page.params.vorgang}/{item.name}" class=" flex justify-between gap-x-6 py-5">
|
||||||
|
<div class=" flex gap-x-4">
|
||||||
|
<Cube class="h-auto " />
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="min-w-0 flex flex-auto">
|
||||||
|
{#if data.user.admin}
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
|
||||||
|
class:bg-red-500={!item.show_button}
|
||||||
|
bind:value={item.name}
|
||||||
|
on:focusout={() => (item.show_button = true)}
|
||||||
|
on:focusin={() => (item.show_button = false)}
|
||||||
|
on:keydown|stopPropagation={(ev) => {
|
||||||
|
handle_input(ev);
|
||||||
|
}}
|
||||||
|
on:click={(ev) => {
|
||||||
|
handleClick(ev);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{#if item.show_button}
|
||||||
|
<button>
|
||||||
|
<Edit />
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
<button
|
||||||
|
style="padding: 2px"
|
||||||
|
id="del__{item.name}"
|
||||||
|
on:click|preventDefault={deleteItem}
|
||||||
|
aria-label="Datei löschen"
|
||||||
|
>
|
||||||
|
<Trash />
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<span class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
|
||||||
|
>{item.name}</span
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
|
||||||
|
{shortenFileSize(item.size)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- <a
|
||||||
|
href="/view/{$page.params.vorgang}/{item.name}"
|
||||||
|
class=" flex justify-between gap-x-6 py-5"
|
||||||
|
>
|
||||||
|
<div class=" flex gap-x-4">
|
||||||
|
<Cube class="h-auto " />
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<div class="min-w-0 flex-auto">
|
||||||
|
{#if admin}
|
||||||
|
|
||||||
|
<span
|
||||||
|
id="label__{item.name}"
|
||||||
|
class="inline-block min-w-[5px] 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
|
||||||
|
class="p-1"
|
||||||
|
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}
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
|
||||||
|
class:bg-red-500={!item.show_button}
|
||||||
|
bind:value={item.name}
|
||||||
|
on:focusout={() => (item.show_button = true)}
|
||||||
|
on:focusin={() => (item.show_button = false)}
|
||||||
|
on:keydown|stopPropagation={async (event) => handle_input(event, i, item)}
|
||||||
|
on:click={(ev) => {
|
||||||
|
handleClick(ev, item);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<Trash />
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<span
|
||||||
|
class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
|
||||||
|
>{item.name}</span
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
|
||||||
|
{shortenFileSize(item.size)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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> -->
|
||||||
@@ -1,3 +1,11 @@
|
|||||||
|
<script>
|
||||||
|
let { children, type = `info`, class: classNames = `` } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="alert {type} {classNames}">
|
||||||
|
{@render children()}
|
||||||
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
/* Common */
|
/* Common */
|
||||||
.alert {
|
.alert {
|
||||||
@@ -45,13 +53,3 @@
|
|||||||
@apply bg-red-50;
|
@apply bg-red-50;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
|
||||||
export let type = 'info';
|
|
||||||
let classNames = '';
|
|
||||||
export { classNames as class };
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="alert {type} {classNames}">
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -1,3 +1,43 @@
|
|||||||
|
<script>
|
||||||
|
// export let href = null;
|
||||||
|
// export let type = 'button';
|
||||||
|
// export let size = 'md';
|
||||||
|
// export let variant = 'primary';
|
||||||
|
// export let fullWidth = false;
|
||||||
|
// export let align = 'center';
|
||||||
|
// export let disabled = false;
|
||||||
|
// let classNames = '';
|
||||||
|
// export { classNames as class };
|
||||||
|
|
||||||
|
let {
|
||||||
|
children,
|
||||||
|
href = null,
|
||||||
|
type = 'button',
|
||||||
|
size = 'md',
|
||||||
|
variant = 'primary',
|
||||||
|
fullWidth = false,
|
||||||
|
align = 'center',
|
||||||
|
disabled = false,
|
||||||
|
class: classNames = '' // `classNames` korrekt umbenannt
|
||||||
|
} = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if href}
|
||||||
|
<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}">
|
||||||
|
{@render children()}
|
||||||
|
</a>
|
||||||
|
{:else}
|
||||||
|
<button
|
||||||
|
on:click
|
||||||
|
{type}
|
||||||
|
{disabled}
|
||||||
|
class:w-full={fullWidth}
|
||||||
|
class="button {variant} {size} {classNames} {align}"
|
||||||
|
>
|
||||||
|
{@render children()}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.button {
|
.button {
|
||||||
@apply inline-flex;
|
@apply inline-flex;
|
||||||
@@ -172,31 +212,3 @@
|
|||||||
@apply justify-end;
|
@apply justify-end;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
|
||||||
export let href = null;
|
|
||||||
export let type = 'button';
|
|
||||||
export let size = 'md';
|
|
||||||
export let variant = 'primary';
|
|
||||||
export let fullWidth = false;
|
|
||||||
export let align = 'center';
|
|
||||||
export let disabled = false;
|
|
||||||
let classNames = '';
|
|
||||||
export { classNames as class };
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if href}
|
|
||||||
<a on:click {href} class:w-full={fullWidth} class="button {variant} {size} {classNames} {align}"
|
|
||||||
><slot />
|
|
||||||
</a>
|
|
||||||
{:else}
|
|
||||||
<button
|
|
||||||
on:click
|
|
||||||
{type}
|
|
||||||
{disabled}
|
|
||||||
class:w-full={fullWidth}
|
|
||||||
class="button {variant} {size} {classNames} {align}"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</button>
|
|
||||||
{/if}
|
|
||||||
|
|||||||
@@ -1,10 +1,15 @@
|
|||||||
|
<script>
|
||||||
|
let classNames = '';
|
||||||
|
export { classNames as class };
|
||||||
|
</script>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
fill="none"
|
fill="none"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
stroke-width="1.5"
|
stroke-width="1.5"
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
class=" w-6 h-6"
|
class=" w-6 h-6 {classNames}"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
stroke-linecap="round"
|
stroke-linecap="round"
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 483 B After Width: | Height: | Size: 571 B |
@@ -1,7 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
export let outline = false;
|
let { outline = false, class: classNames = '' } = $props(); // Standardwert setzen
|
||||||
let classNames = '';
|
|
||||||
export { classNames as class };
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if outline}
|
{#if outline}
|
||||||
|
|||||||
4
src/lib/store.js
Normal file
4
src/lib/store.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
// store.js
|
||||||
|
import { writable } from 'svelte/store';
|
||||||
|
|
||||||
|
export const wert = writable("Hallo Welt");
|
||||||
@@ -4,8 +4,7 @@
|
|||||||
import FileRect from '$lib/icons/File-rect.svelte';
|
import FileRect from '$lib/icons/File-rect.svelte';
|
||||||
import ListIcon from '$lib/icons/List-icon.svelte';
|
import ListIcon from '$lib/icons/List-icon.svelte';
|
||||||
|
|
||||||
export let data;
|
let { data } = $props();
|
||||||
export let outline = true;
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@@ -44,7 +43,7 @@
|
|||||||
<div
|
<div
|
||||||
class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
|
class="flex h-11 w-11 items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white"
|
||||||
>
|
>
|
||||||
<FileRect class=" group-hover:text-indigo-600" {outline} />
|
<FileRect class=" group-hover:text-indigo-600" outline={true} />
|
||||||
</div>
|
</div>
|
||||||
<a href="/view" class="mt-6 block font-semibold text-gray-900">
|
<a href="/view" class="mt-6 block font-semibold text-gray-900">
|
||||||
Ansicht
|
Ansicht
|
||||||
|
|||||||
@@ -1,65 +1,94 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { onMount, tick } from 'svelte';
|
import { onMount, tick, type MountOptions } from 'svelte';
|
||||||
import shortenFileSize from '$lib/helper/shortenFileSize';
|
|
||||||
import { getContext } from 'svelte';
|
import { page } from '$app/stores';
|
||||||
import timeElapsed from '$lib/helper/timeElapsed';
|
|
||||||
|
|
||||||
import Alert from '$lib/components/ui/Alert.svelte';
|
import Alert from '$lib/components/ui/Alert.svelte';
|
||||||
|
|
||||||
import Button from '$lib/components/ui/Button.svelte';
|
import Button from '$lib/components/ui/Button.svelte';
|
||||||
|
|
||||||
import Modal from '$lib/components/ui/Modal/Modal.svelte';
|
import Modal from '$lib/components/ui/Modal/Modal.svelte';
|
||||||
|
|
||||||
import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
|
import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
|
||||||
|
|
||||||
import ModalContent from '$lib/components/ui/Modal/ModalContent.svelte';
|
import ModalContent from '$lib/components/ui/Modal/ModalContent.svelte';
|
||||||
|
|
||||||
import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
|
import ModalFooter from '$lib/components/ui/Modal/ModalFooter.svelte';
|
||||||
import Cube from '$lib/icons/Cube.svelte';
|
|
||||||
import Edit from '$lib/icons/Edit.svelte';
|
|
||||||
import Trash from '$lib/icons/Trash.svelte';
|
|
||||||
|
|
||||||
const page = getContext('page');
|
import ListItem from '$lib/components/ListItem.svelte';
|
||||||
|
|
||||||
/** @type {import('./$types').PageData} */
|
let { data } = $props();
|
||||||
export let data;
|
let vorgang = $page.params.vorgang;
|
||||||
|
|
||||||
console.log(`--- ${data.user.admin}`);
|
|
||||||
|
|
||||||
interface ListItem {
|
interface ListItem {
|
||||||
name: string;
|
name: string;
|
||||||
size: number;
|
size: number;
|
||||||
lastModified: string | number | Date;
|
lastModified: string | number | Date;
|
||||||
show_button?: boolean;
|
show_button?: boolean;
|
||||||
// add other properties as needed
|
// // add other properties as needed
|
||||||
}
|
}
|
||||||
|
|
||||||
let list: ListItem[] = [];
|
let list: ListItem[] = $state([]);
|
||||||
$: list;
|
let admin = data.user.admin;
|
||||||
|
let wert = $state('Hallo');
|
||||||
|
$effect: console.log('TEst', wert);
|
||||||
|
|
||||||
|
$effect: {
|
||||||
|
console.log('Liste aktualisiert:', $inspect(list), $inspect(admin), $inspect(wert));
|
||||||
|
}
|
||||||
|
|
||||||
|
let open = $state(false);
|
||||||
|
|
||||||
|
$inspect(open);
|
||||||
|
|
||||||
let open = false;
|
|
||||||
$: open;
|
|
||||||
let inProgress = false;
|
let inProgress = false;
|
||||||
$: inProgress;
|
|
||||||
let err = false;
|
|
||||||
$: err;
|
|
||||||
|
|
||||||
let rename_input;
|
$inspect(inProgress);
|
||||||
$: rename_input;
|
|
||||||
|
let err = false;
|
||||||
|
|
||||||
|
$inspect(err);
|
||||||
|
|
||||||
|
// let rename_input;
|
||||||
|
|
||||||
|
// $effect: rename_input;
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
console.log('Update-Ereignis erkannt:', wert);
|
||||||
|
});
|
||||||
|
|
||||||
|
let oldName = $state('');
|
||||||
|
let nameArray = list.map((obj) => obj.name);
|
||||||
|
|
||||||
|
$effect: console.log('Mina Testing oben:', $inspect(nameArray), $inspect(oldName));
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const response = await fetch('/api/list/' + page.params.vorgang);
|
const response = await fetch('/api/list/' + vorgang);
|
||||||
|
|
||||||
const stream = response.body;
|
const stream = response.body;
|
||||||
|
|
||||||
if (!stream) return;
|
if (!stream) return;
|
||||||
|
|
||||||
const reader = stream.getReader();
|
const reader = stream.getReader();
|
||||||
|
|
||||||
while (true) {
|
while (true) {
|
||||||
const { done, value } = await reader.read();
|
const { done, value } = await reader.read();
|
||||||
|
|
||||||
if (done) return;
|
if (done) return;
|
||||||
|
|
||||||
const objs = new TextDecoder()
|
const objs = new TextDecoder()
|
||||||
|
|
||||||
.decode(value)
|
.decode(value)
|
||||||
|
|
||||||
.split('\n')
|
.split('\n')
|
||||||
|
|
||||||
.filter((i) => i.length > 0)
|
.filter((i) => i.length > 0)
|
||||||
|
|
||||||
.map((i) => JSON.parse(i));
|
.map((i) => JSON.parse(i));
|
||||||
|
|
||||||
console.log(objs);
|
console.log(objs);
|
||||||
|
wert = 'Ich kann nicht mehr!';
|
||||||
|
|
||||||
list = list.concat(objs);
|
list = list.concat(objs);
|
||||||
|
|
||||||
list = list.map((item) => {
|
list = list.map((item) => {
|
||||||
@@ -69,149 +98,154 @@
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log('Mina List', list);
|
||||||
|
|
||||||
function uploadSuccessful() {
|
function uploadSuccessful() {
|
||||||
console.log('reset');
|
console.log('reset');
|
||||||
|
|
||||||
open = false;
|
open = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function defocus_element(i: number) {
|
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);
|
||||||
|
|
||||||
if (text_field) {
|
if (text_field) {
|
||||||
text_field.setAttribute('contenteditable', 'false');
|
text_field.setAttribute('contenteditable', 'false');
|
||||||
|
|
||||||
text_field.textContent = item.name;
|
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: KeyboardEvent, i: number) {
|
async function handle_input(ev: KeyboardEvent, i: number, itemObj: any) {
|
||||||
let item = list[i];
|
let item = list[i];
|
||||||
|
console.log('Mina item', item, itemObj, oldName);
|
||||||
|
console.log('input', ev.key);
|
||||||
if (ev.key == 'Escape') {
|
if (ev.key == 'Escape') {
|
||||||
let text_field_id = `label__${item.name}`;
|
// ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||||
|
// ev.preventDefault(); // Stoppt die Standardaktion
|
||||||
let text_field = document.getElementById(text_field_id);
|
console.log('Escape', ev.key);
|
||||||
if (text_field) {
|
itemObj.name = oldName;
|
||||||
text_field.setAttribute('contenteditable', 'false');
|
itemObj.show_button = true;
|
||||||
text_field.textContent = item.name;
|
|
||||||
}
|
|
||||||
|
|
||||||
// reshow button
|
|
||||||
item.show_button = true;
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
// if (ev.key == 'Escape') {
|
||||||
|
// item.name = oldName;
|
||||||
|
// // reshow button
|
||||||
|
|
||||||
|
// item.show_button = true;
|
||||||
|
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
if (ev.key == 'Enter') {
|
if (ev.key == 'Enter') {
|
||||||
console.log('--- hitted');
|
console.log('Enter', ev.key);
|
||||||
let name_field = ev.currentTarget as HTMLElement | null;
|
ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||||
let new_name = name_field
|
ev.preventDefault(); // Stoppt die Standardaktion
|
||||||
? name_field.textContent || (name_field as any).innerText || ''
|
|
||||||
: '';
|
|
||||||
|
|
||||||
if (new_name == '') {
|
|
||||||
alert('Bitte einen gültigen Namen eingeben.');
|
|
||||||
ev.preventDefault();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// actual upload
|
|
||||||
// -------------
|
|
||||||
|
|
||||||
// to prevent from item being selected
|
|
||||||
ev.preventDefault();
|
|
||||||
|
|
||||||
// construct PUT 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]
|
|
||||||
: '';
|
|
||||||
|
|
||||||
open = true;
|
|
||||||
inProgress = true;
|
|
||||||
|
|
||||||
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();
|
|
||||||
// alert(json_res['msg'])
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
throw new Error(`Fehlgeschlagen: ${response.status}`);
|
|
||||||
} else {
|
|
||||||
uploadSuccessful();
|
|
||||||
setTimeout(() => {
|
|
||||||
window.location.reload();
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- upload finished ---
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
// 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 || ''
|
||||||
|
// : '';
|
||||||
|
|
||||||
|
// if (new_name == '') {
|
||||||
|
// alert('Bitte einen gültigen Namen eingeben.');
|
||||||
|
|
||||||
|
// ev.preventDefault();
|
||||||
|
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // actual upload
|
||||||
|
|
||||||
|
// // -------------
|
||||||
|
|
||||||
|
// // to prevent from item being selected
|
||||||
|
|
||||||
|
// ev.preventDefault();
|
||||||
|
|
||||||
|
// // construct PUT 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]
|
||||||
|
// : '';
|
||||||
|
|
||||||
|
// open = true;
|
||||||
|
|
||||||
|
// inProgress = true;
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
|
||||||
|
// // alert(json_res['msg'])
|
||||||
|
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// throw new Error(`Fehlgeschlagen: ${response.status}`);
|
||||||
|
// } else {
|
||||||
|
// uploadSuccessful();
|
||||||
|
|
||||||
|
// setTimeout(() => {
|
||||||
|
// window.location.reload();
|
||||||
|
// }, 500);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // --- upload finished ---
|
||||||
|
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
function handleClick(event: MouseEvent, obj: ListItem) {
|
||||||
* @param {any} item
|
event.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||||
*/
|
event.preventDefault(); // Stoppt die Standardaktion
|
||||||
function clickEdit(item: any) {
|
console.log('show click', obj.show_button);
|
||||||
let text_field_id = `label__${item.name}`;
|
oldName = obj.name;
|
||||||
|
console.log('Button wurde geklickt!', oldName);
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function clickDelete(item: any, ev: Event) {
|
function toggleButton(item: ListItem, show: boolean) {
|
||||||
let delete_item = window.confirm('Bist du sicher?');
|
// item.show_button = !item.show_button;
|
||||||
|
|
||||||
if (delete_item) {
|
item.show_button = show;
|
||||||
// bucket: tatort, name: <vorgang>/item-name
|
console.log('show toggle', item, show, item.show_button);
|
||||||
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
|
function handleUpdate(ev: CustomEvent) {
|
||||||
// --------------
|
console.log('Update erfolgreich', ev.detail.newName);
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
@@ -219,92 +253,156 @@
|
|||||||
<div class="flex flex-col items-center justify-center w-full">
|
<div class="flex flex-col items-center justify-center w-full">
|
||||||
<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
|
<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="mx-auto flex justify-center max-w-7xl h-full">
|
<div class="mx-auto flex justify-center max-w-7xl h-full">
|
||||||
<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>
|
||||||
<div class=" flex gap-x-4">
|
<!-- <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"
|
<div class=" flex gap-x-4">
|
||||||
>
|
<Cube class="h-auto " />
|
||||||
<Cube />
|
<div class="flex flex-col">
|
||||||
</a>
|
<div class="min-w-0 flex-auto">
|
||||||
<div class="min-w-0 flex-auto">
|
{#if admin}
|
||||||
{#if data.user.admin}
|
<span
|
||||||
<span
|
id="label__{item.name}"
|
||||||
id="label__{item.name}"
|
class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
|
||||||
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
|
|
||||||
async (ev) => {
|
|
||||||
handle_input(ev, i);
|
|
||||||
}}>{item.name}</span
|
|
||||||
>
|
|
||||||
|
|
||||||
<input
|
// TO-DO: check if event is needed or if index is sufficient
|
||||||
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);
|
|
||||||
}}
|
|
||||||
bind:value={item.name}
|
|
||||||
id="label-i__{item.name}"
|
|
||||||
/>
|
|
||||||
<!-- disabled={item.show_button} -->
|
|
||||||
<!-- https://iconduck.com/icons/192863/edit-rename -->
|
|
||||||
|
|
||||||
{#if item.show_button}
|
async (ev) => {
|
||||||
<button
|
handle_input(ev, i);
|
||||||
style="padding: 2px"
|
}}>{item.name}</span
|
||||||
id="edit__{item.name}"
|
>
|
||||||
aria-label="Datei umbenennen"
|
|
||||||
on:click|preventDefault={(ev) => {
|
https://iconduck.com/icons/192863/edit-rename
|
||||||
clickEdit(item);
|
|
||||||
}}
|
{#if item.show_button}
|
||||||
>
|
<button
|
||||||
<Edit />
|
class="p-1"
|
||||||
</button>
|
id="edit__{item.name}"
|
||||||
{/if}
|
aria-label="Datei umbenennen"
|
||||||
<button
|
on:click|preventDefault={(ev) => {
|
||||||
style="padding: 2px"
|
let text_field_id = `label__${item.name}`;
|
||||||
id="del__{item.name}"
|
|
||||||
on:click|preventDefault={async (ev) => {
|
let text_field = document.getElementById(text_field_id);
|
||||||
clickDelete(item, ev);
|
|
||||||
}}
|
if (text_field) {
|
||||||
aria-label="Datei löschen"
|
text_field.setAttribute('contenteditable', 'true');
|
||||||
|
|
||||||
|
text_field.focus();
|
||||||
|
|
||||||
|
text_field.textContent = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
// hide button
|
||||||
|
|
||||||
|
item.show_button = false;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Edit />
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="text-sm font-semibold leading-6 text-gray-900 border rounded p-1"
|
||||||
|
class:bg-red-500={!item.show_button}
|
||||||
|
bind:value={item.name}
|
||||||
|
on:focusout={() => (item.show_button = true)}
|
||||||
|
on:focusin={() => (item.show_button = false)}
|
||||||
|
on:keydown|stopPropagation={async (event) => handle_input(event, i, item)}
|
||||||
|
on:click={(ev) => {
|
||||||
|
handleClick(ev, item);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
<Trash />
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<span
|
||||||
|
class="inline-block min-w-[5px] text-sm font-semibold leading-6 text-gray-900"
|
||||||
|
>{item.name}</span
|
||||||
|
>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
|
||||||
|
{shortenFileSize(item.size)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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
|
||||||
>
|
>
|
||||||
<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>
|
<ListItem {data} {list} {i} on:update={handleUpdate} />
|
||||||
<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>
|
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
@@ -315,10 +413,12 @@
|
|||||||
{#if inProgress}
|
{#if inProgress}
|
||||||
<p class="py-2 mb-1">Vorgang läuft...</p>
|
<p class="py-2 mb-1">Vorgang läuft...</p>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if err}
|
{#if err}
|
||||||
<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
|
<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
|
||||||
{/if}
|
{/if}
|
||||||
</ModalContent>
|
</ModalContent>
|
||||||
|
|
||||||
<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
|
<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user