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>
|
||||
/* Common */
|
||||
.alert {
|
||||
@@ -45,13 +53,3 @@
|
||||
@apply bg-red-50;
|
||||
}
|
||||
</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>
|
||||
.button {
|
||||
@apply inline-flex;
|
||||
@@ -172,31 +212,3 @@
|
||||
@apply justify-end;
|
||||
}
|
||||
</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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class=" w-6 h-6"
|
||||
class=" w-6 h-6 {classNames}"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
|
||||
|
Before Width: | Height: | Size: 483 B After Width: | Height: | Size: 571 B |
@@ -1,7 +1,5 @@
|
||||
<script>
|
||||
export let outline = false;
|
||||
let classNames = '';
|
||||
export { classNames as class };
|
||||
let { outline = false, class: classNames = '' } = $props(); // Standardwert setzen
|
||||
</script>
|
||||
|
||||
{#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 ListIcon from '$lib/icons/List-icon.svelte';
|
||||
|
||||
export let data;
|
||||
export let outline = true;
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<div
|
||||
@@ -44,7 +43,7 @@
|
||||
<div
|
||||
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>
|
||||
<a href="/view" class="mt-6 block font-semibold text-gray-900">
|
||||
Ansicht
|
||||
|
||||
@@ -1,65 +1,94 @@
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from 'svelte';
|
||||
import shortenFileSize from '$lib/helper/shortenFileSize';
|
||||
import { getContext } from 'svelte';
|
||||
import timeElapsed from '$lib/helper/timeElapsed';
|
||||
import { onMount, tick, type MountOptions } from 'svelte';
|
||||
|
||||
import { page } from '$app/stores';
|
||||
|
||||
import Alert from '$lib/components/ui/Alert.svelte';
|
||||
|
||||
import Button from '$lib/components/ui/Button.svelte';
|
||||
|
||||
import Modal from '$lib/components/ui/Modal/Modal.svelte';
|
||||
|
||||
import ModalTitle from '$lib/components/ui/Modal/ModalTitle.svelte';
|
||||
|
||||
import ModalContent from '$lib/components/ui/Modal/ModalContent.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} */
|
||||
export let data;
|
||||
|
||||
console.log(`--- ${data.user.admin}`);
|
||||
let { data } = $props();
|
||||
let vorgang = $page.params.vorgang;
|
||||
|
||||
interface ListItem {
|
||||
name: string;
|
||||
size: number;
|
||||
lastModified: string | number | Date;
|
||||
show_button?: boolean;
|
||||
// add other properties as needed
|
||||
// // add other properties as needed
|
||||
}
|
||||
|
||||
let list: ListItem[] = [];
|
||||
$: list;
|
||||
let list: ListItem[] = $state([]);
|
||||
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;
|
||||
$: inProgress;
|
||||
let err = false;
|
||||
$: err;
|
||||
|
||||
let rename_input;
|
||||
$: rename_input;
|
||||
$inspect(inProgress);
|
||||
|
||||
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 () => {
|
||||
const response = await fetch('/api/list/' + page.params.vorgang);
|
||||
const response = await fetch('/api/list/' + vorgang);
|
||||
|
||||
const stream = response.body;
|
||||
|
||||
if (!stream) return;
|
||||
|
||||
const reader = stream.getReader();
|
||||
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
|
||||
if (done) return;
|
||||
|
||||
const objs = new TextDecoder()
|
||||
|
||||
.decode(value)
|
||||
|
||||
.split('\n')
|
||||
|
||||
.filter((i) => i.length > 0)
|
||||
|
||||
.map((i) => JSON.parse(i));
|
||||
|
||||
console.log(objs);
|
||||
wert = 'Ich kann nicht mehr!';
|
||||
|
||||
list = list.concat(objs);
|
||||
|
||||
list = list.map((item) => {
|
||||
@@ -69,136 +98,268 @@
|
||||
}
|
||||
});
|
||||
|
||||
console.log('Mina List', list);
|
||||
|
||||
function uploadSuccessful() {
|
||||
console.log('reset');
|
||||
|
||||
open = false;
|
||||
}
|
||||
|
||||
function defocus_element(i: number) {
|
||||
let item = list[i];
|
||||
|
||||
let text_field_id = `label__${item.name}`;
|
||||
|
||||
let text_field = document.getElementById(text_field_id);
|
||||
|
||||
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: KeyboardEvent, i: number) {
|
||||
async function handle_input(ev: KeyboardEvent, i: number, itemObj: any) {
|
||||
let item = list[i];
|
||||
console.log('Mina item', item, itemObj, oldName);
|
||||
console.log('input', ev.key);
|
||||
if (ev.key == 'Escape') {
|
||||
let text_field_id = `label__${item.name}`;
|
||||
|
||||
let text_field = document.getElementById(text_field_id);
|
||||
if (text_field) {
|
||||
text_field.setAttribute('contenteditable', 'false');
|
||||
text_field.textContent = item.name;
|
||||
// ev.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
// ev.preventDefault(); // Stoppt die Standardaktion
|
||||
console.log('Escape', ev.key);
|
||||
itemObj.name = oldName;
|
||||
itemObj.show_button = true;
|
||||
}
|
||||
// if (ev.key == 'Escape') {
|
||||
// item.name = oldName;
|
||||
// // reshow button
|
||||
|
||||
// item.show_button = true;
|
||||
|
||||
// return;
|
||||
// }
|
||||
|
||||
// reshow button
|
||||
item.show_button = true;
|
||||
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 || ''
|
||||
: '';
|
||||
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');
|
||||
|
||||
if (new_name == '') {
|
||||
alert('Bitte einen gültigen Namen eingeben.');
|
||||
ev.preventDefault();
|
||||
return;
|
||||
// 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;
|
||||
// }
|
||||
}
|
||||
|
||||
// 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);
|
||||
function handleClick(event: MouseEvent, obj: ListItem) {
|
||||
event.stopPropagation(); // Verhindert, dass der Klick weiter nach oben propagiert
|
||||
event.preventDefault(); // Stoppt die Standardaktion
|
||||
console.log('show click', obj.show_button);
|
||||
oldName = obj.name;
|
||||
console.log('Button wurde geklickt!', oldName);
|
||||
}
|
||||
|
||||
// --- upload finished ---
|
||||
function toggleButton(item: ListItem, show: boolean) {
|
||||
// item.show_button = !item.show_button;
|
||||
|
||||
return;
|
||||
}
|
||||
item.show_button = show;
|
||||
console.log('show toggle', item, show, item.show_button);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} item
|
||||
*/
|
||||
function clickEdit(item: any) {
|
||||
function handleUpdate(ev: CustomEvent) {
|
||||
console.log('Update erfolgreich', ev.detail.newName);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="-z-10 bg-white">
|
||||
<div class="flex flex-col items-center justify-center w-full">
|
||||
<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto flex justify-center max-w-7xl h-full">
|
||||
<ul class="divide-y divide-gray-100">
|
||||
{#each list as item, i}
|
||||
<li>
|
||||
<!-- <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;
|
||||
}
|
||||
|
||||
async function clickDelete(item: any, ev: Event) {
|
||||
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' });
|
||||
const response = await fetch(
|
||||
url,
|
||||
|
||||
{ method: 'DELETE' }
|
||||
);
|
||||
|
||||
if (response.status == 204) {
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
@@ -212,99 +373,36 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="-z-10 bg-white">
|
||||
<div class="flex flex-col items-center justify-center w-full">
|
||||
<h1 class="text-xl">Vorgang {$page.params.vorgang}</h1>
|
||||
</div>
|
||||
<div class="mx-auto flex justify-center max-w-7xl h-full">
|
||||
<ul class="divide-y divide-gray-100">
|
||||
{#each list as item, i}
|
||||
<li>
|
||||
<div class=" flex gap-x-4">
|
||||
<a
|
||||
href="/view/{$page.params.vorgang}/{item.name}"
|
||||
class=" flex justify-between gap-x-6 py-5"
|
||||
aria-label="zum 3D-modell"
|
||||
>
|
||||
<Cube />
|
||||
</a>
|
||||
<div class="min-w-0 flex-auto">
|
||||
{#if data.user.admin}
|
||||
<span
|
||||
id="label__{item.name}"
|
||||
class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
|
||||
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
|
||||
>
|
||||
|
||||
<input
|
||||
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}
|
||||
<button
|
||||
style="padding: 2px"
|
||||
id="edit__{item.name}"
|
||||
aria-label="Datei umbenennen"
|
||||
on:click|preventDefault={(ev) => {
|
||||
clickEdit(item);
|
||||
}}
|
||||
>
|
||||
<Edit />
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
style="padding: 2px"
|
||||
id="del__{item.name}"
|
||||
on:click|preventDefault={async (ev) => {
|
||||
clickDelete(item, ev);
|
||||
}}
|
||||
aria-label="Datei löschen"
|
||||
>
|
||||
<Trash />
|
||||
</button>
|
||||
{:else}
|
||||
<span class="text-sm font-semibold leading-6 text-gray-900 inline-block min-w-1"
|
||||
<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> -->
|
||||
|
||||
<ListItem {data} {list} {i} on:update={handleUpdate} />
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
@@ -315,10 +413,12 @@
|
||||
{#if inProgress}
|
||||
<p class="py-2 mb-1">Vorgang läuft...</p>
|
||||
{/if}
|
||||
|
||||
{#if err}
|
||||
<Alert class="w-full" type="error">Fehler beim Umbenennen</Alert>
|
||||
{/if}
|
||||
</ModalContent>
|
||||
|
||||
<ModalFooter><Button disabled={inProgress} on:click={uploadSuccessful}>Ok</Button></ModalFooter>
|
||||
</Modal>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user