From 2e14bf7361e7bdc4c95a758771ba5aef12cd98b1 Mon Sep 17 00:00:00 2001 From: mina Date: Mon, 26 May 2025 17:22:51 +0200 Subject: [PATCH 1/3] =?UTF-8?q?Tagesupdate=20=20nicht=20auf=20Richtigkeit?= =?UTF-8?q?=20gepr=C3=BCft?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/(angemeldet)/+page.svelte | 29 ----- .../(angemeldet)/list/[vorgang]/+page.svelte | 106 ++++++++++-------- 2 files changed, 59 insertions(+), 76 deletions(-) diff --git a/src/routes/(angemeldet)/+page.svelte b/src/routes/(angemeldet)/+page.svelte index b9a4519..f0dc309 100644 --- a/src/routes/(angemeldet)/+page.svelte +++ b/src/routes/(angemeldet)/+page.svelte @@ -27,35 +27,6 @@ Verschaffe Dir einen Überblick über alle gespeicherten Tatorte.

- {/if} - - {#if data.user.admin}
import { onMount, tick } from 'svelte'; import shortenFileSize from '$lib/helper/shortenFileSize'; - import { page } from '$app/stores'; - + import { getContext } from 'svelte'; import timeElapsed from '$lib/helper/timeElapsed'; import Alert from '$lib/components/ui/Alert.svelte'; @@ -15,6 +14,8 @@ import Edit from '$lib/icons/Edit.svelte'; import Trash from '$lib/icons/Trash.svelte'; + const page = getContext('page'); + /** @type {import('./$types').PageData} */ export let data; @@ -42,7 +43,7 @@ $: rename_input; onMount(async () => { - const response = await fetch('/api/list/' + $page.params.vorgang); + const response = await fetch('/api/list/' + page.params.vorgang); const stream = response.body; if (!stream) return; @@ -160,6 +161,58 @@ return; } } + + /** + * @param {any} item + */ + function clickEdit(item: any) { + 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) { + let delete_item = window.confirm('Bist du sicher?'); + + if (delete_item) { + // bucket: tatort, name: /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); + } + } + } + }
@@ -207,7 +260,7 @@ handle_input(ev, i); }} bind:value={item.name} - id="label__{item.name}" + id="label-i__{item.name}" /> @@ -218,17 +271,7 @@ 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; + clickEdit(item); }} > @@ -238,38 +281,7 @@ 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: /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); - } - } - } + clickDelete(item, ev); }} aria-label="Datei löschen" > From 470c203d3828daa96af355ddb1a4240e9443c052 Mon Sep 17 00:00:00 2001 From: mina Date: Mon, 2 Jun 2025 17:18:25 +0200 Subject: [PATCH 2/3] commit mina Feierabend --- src/lib/components/ListItem.svelte | 396 +++++++++++++ src/lib/components/ui/Alert.svelte | 18 +- src/lib/components/ui/Button.svelte | 68 ++- src/lib/icons/Cube.svelte | 7 +- src/lib/icons/File-rect.svelte | 4 +- src/lib/store.js | 4 + src/routes/(angemeldet)/+page.svelte | 5 +- .../(angemeldet)/list/[vorgang]/+page.svelte | 524 +++++++++++------- 8 files changed, 769 insertions(+), 257 deletions(-) create mode 100644 src/lib/components/ListItem.svelte create mode 100644 src/lib/store.js diff --git a/src/lib/components/ListItem.svelte b/src/lib/components/ListItem.svelte new file mode 100644 index 0000000..bc097fe --- /dev/null +++ b/src/lib/components/ListItem.svelte @@ -0,0 +1,396 @@ + + + +
+ +
+
+ {#if data.user.admin} + (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} + + {/if} + + {:else} + {item.name} + {/if} +
+

+ {shortenFileSize(item.size)} +

+
+
+ + + + + + + diff --git a/src/lib/components/ui/Alert.svelte b/src/lib/components/ui/Alert.svelte index d461847..6c03fdd 100644 --- a/src/lib/components/ui/Alert.svelte +++ b/src/lib/components/ui/Alert.svelte @@ -1,3 +1,11 @@ + + +
+ {@render children()} +
+ - - - -
- -
diff --git a/src/lib/components/ui/Button.svelte b/src/lib/components/ui/Button.svelte index dd05a7b..aa75a93 100644 --- a/src/lib/components/ui/Button.svelte +++ b/src/lib/components/ui/Button.svelte @@ -1,3 +1,43 @@ + + +{#if href} + + {@render children()} + +{:else} + +{/if} + - - - -{#if href} - - -{:else} - -{/if} diff --git a/src/lib/icons/Cube.svelte b/src/lib/icons/Cube.svelte index 4992960..ff56e24 100644 --- a/src/lib/icons/Cube.svelte +++ b/src/lib/icons/Cube.svelte @@ -1,10 +1,15 @@ + + - export let outline = false; - let classNames = ''; - export { classNames as class }; + let { outline = false, class: classNames = '' } = $props(); // Standardwert setzen {#if outline} diff --git a/src/lib/store.js b/src/lib/store.js new file mode 100644 index 0000000..589cff4 --- /dev/null +++ b/src/lib/store.js @@ -0,0 +1,4 @@ +// store.js +import { writable } from 'svelte/store'; + +export const wert = writable("Hallo Welt"); diff --git a/src/routes/(angemeldet)/+page.svelte b/src/routes/(angemeldet)/+page.svelte index f0dc309..888e901 100644 --- a/src/routes/(angemeldet)/+page.svelte +++ b/src/routes/(angemeldet)/+page.svelte @@ -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();
- +
Ansicht diff --git a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte index cb1130c..24bfb03 100644 --- a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte +++ b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte @@ -1,65 +1,94 @@ @@ -219,92 +253,156 @@

Vorgang {$page.params.vorgang}

+
    {#each list as item, i}
  • -
    - - - -
    - {#if data.user.admin} - { - 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} + - + // TO-DO: check if event is needed or if index is sufficient - {#if item.show_button} - - {/if} - + {/if} + (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); + }} + /> + + {:else} + {item.name} + {/if} +
    +

    + {shortenFileSize(item.size)} +

    +
    +
+ + -
- + --> + + {/each} @@ -315,10 +413,12 @@ {#if inProgress}

Vorgang läuft...

{/if} + {#if err} Fehler beim Umbenennen {/if} +
From 6a1dcf47b9a3eb3d9f6fd74e56ae7c575d181137 Mon Sep 17 00:00:00 2001 From: mina Date: Tue, 3 Jun 2025 16:27:22 +0200 Subject: [PATCH 3/3] mina feierabend bug reload vorgangsluste geht nicht --- src/lib/components/ListItem.svelte | 458 ++++++------------ src/routes/(angemeldet)/+layout.server.js | 1 - src/routes/(angemeldet)/list/+page.svelte | 6 +- .../(angemeldet)/list/[vorgang]/+page.svelte | 339 +------------ .../list/[vorgang]/[tatort]/+server.js | 1 - src/routes/(angemeldet)/upload/+page.svelte | 7 +- src/routes/(angemeldet)/view/+page.server.js | 3 +- 7 files changed, 170 insertions(+), 645 deletions(-) diff --git a/src/lib/components/ListItem.svelte b/src/lib/components/ListItem.svelte index bc097fe..c89ace2 100644 --- a/src/lib/components/ListItem.svelte +++ b/src/lib/components/ListItem.svelte @@ -1,4 +1,4 @@ - -
+
-
+
{#if data.user.admin} - (item.show_button = true)} - on:focusin={() => (item.show_button = false)} - on:keydown|stopPropagation={(ev) => { - handle_input(ev); - }} - on:click={(ev) => { - handleClick(ev); - }} - /> +
+ (item.show_button = true)} + onfocusin={() => (item.show_button = false)} + onkeydown={(ev) => { + ev.stopPropagation(); + handle_input(ev); + }} + onclick={(ev) => { + handleClick(ev); + }} + /> +
{#if item.show_button} {/if}
@@ -249,148 +225,16 @@

+Umbenennen + {#if inProgress} +

Vorgang läuft...

+ {/if} - - - + + diff --git a/src/routes/(angemeldet)/+layout.server.js b/src/routes/(angemeldet)/+layout.server.js index c54cfba..b509af2 100644 --- a/src/routes/(angemeldet)/+layout.server.js +++ b/src/routes/(angemeldet)/+layout.server.js @@ -1,6 +1,5 @@ import { redirect } from '@sveltejs/kit'; -/** @type {import('./$types').PageServerLoad} */ export function load(event) { if (!event.locals.user && event.url.pathname !== '/anmeldung') throw redirect(303, '/anmeldung'); return { diff --git a/src/routes/(angemeldet)/list/+page.svelte b/src/routes/(angemeldet)/list/+page.svelte index a6dec78..b7978f5 100644 --- a/src/routes/(angemeldet)/list/+page.svelte +++ b/src/routes/(angemeldet)/list/+page.svelte @@ -39,7 +39,9 @@ const target = ev.currentTarget as HTMLElement | null; if (!target) return; let filename = target.id.split('del__')[1]; - + console.log('Debug Mina', filename); + ev.preventDefault(); + ev.stopPropagation; // delete request // -------------- @@ -51,7 +53,7 @@ if (response.status == 204) { setTimeout(() => { window.location.reload(); - }, 500); + }, 5000); } } catch (error) { if (error instanceof Error) { diff --git a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte index 24bfb03..fea8dd4 100644 --- a/src/routes/(angemeldet)/list/[vorgang]/+page.svelte +++ b/src/routes/(angemeldet)/list/[vorgang]/+page.svelte @@ -3,18 +3,6 @@ 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 ListItem from '$lib/components/ListItem.svelte'; let { data } = $props(); @@ -30,11 +18,10 @@ let list: ListItem[] = $state([]); let admin = data.user.admin; - let wert = $state('Hallo'); - $effect: console.log('TEst', wert); + let wert = $state(''); $effect: { - console.log('Liste aktualisiert:', $inspect(list), $inspect(admin), $inspect(wert)); + $inspect(list), $inspect(admin), $inspect(wert); } let open = $state(false); @@ -49,18 +36,10 @@ $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)); + $effect: $inspect(oldName); onMount(async () => { const response = await fetch('/api/list/' + vorgang); @@ -87,7 +66,7 @@ .map((i) => JSON.parse(i)); console.log(objs); - wert = 'Ich kann nicht mehr!'; + wert = 'wert'; list = list.concat(objs); @@ -98,154 +77,10 @@ } }); - 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, itemObj: any) { - let item = list[i]; - console.log('Mina item', item, itemObj, 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 - 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; - // } - - 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; - // } - } - - 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); - } - - function toggleButton(item: ListItem, show: boolean) { - // item.show_button = !item.show_button; - - item.show_button = show; - console.log('show toggle', item, show, item.show_button); - } - - function handleUpdate(ev: CustomEvent) { - console.log('Update erfolgreich', ev.detail.newName); + async function handleUpdate(ev: CustomEvent) { + open = ev.detail.open; + inProgress = ev.detail.inProgress; + err = ev.detail.err; } @@ -258,169 +93,11 @@
    {#each list as item, i}
  • - -
    • {/each}
- - Umbenennen - {#if inProgress} -

Vorgang läuft...

- {/if} - - {#if err} - Fehler beim Umbenennen - {/if} - - - -