innohub/tatort
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor event handlers

Browse Source
This commit is contained in:
Chi Cong Tran
2025-05-12 13:20:53 +02:00
parent 2809df9fd4
commit 657fd422bc
2 changed files with 119 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/routes/(angemeldet)/list/+page.svelte
View File

@@ -35,6 +35,33 @@
list = list.concat(objs);
}
});
async function delete_item(ev) {
let delete_item = window.confirm("Bist du sicher?");
if (delete_item) {
let filename = event.currentTarget.id.split('del__')[1]
// delete request
// --------------
let url = `/api/list/${filename}`
console.log(`--- ${filename} + ${url}`)
try {
const response = await fetch(url,
{method: 'DELETE'}
)
if (response.status == 204) {
setTimeout(() => {window.location.reload()}, 500)
}
} catch (error) {
console.log(error.message)
}
}
}
</script>
<div class="-z-10 bg-white">
@@ -67,32 +94,7 @@
<button
style="padding: 2px"
id="del__{item.name}"
on:click|preventDefault={async (ev) => {
let delete_item = window.confirm("Bist du sicher?");
if (delete_item) {
let filename = event.currentTarget.id.split('del__')[1]
// delete request
// --------------
let url = `/api/list/${filename}`
console.log(`--- ${filename} + ${url}`)
try {
const response = await fetch(url,
{method: 'DELETE'}
)
if (response.status == 204) {
setTimeout(() => {window.location.reload()}, 500)
}
} catch (error) {
console.log(error.message)
}
}
}}
on:click|preventDefault={delete_item}
>
<svg
height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m8 3v1 1h1v-1h4v1h1v-1-1zm-4 3v1h14v-1zm2 2v11h1 9v-1-10h-1v10h-8v-10z" fill="#373737" transform="translate(1 1)"/></svg>

101
src/routes/(angemeldet)/list/[vorgang]/+page.svelte
View File

@@ -68,42 +68,9 @@
console.log('reset');
open = false;
}
</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}
<li>
<a
href="/view/{$page.params.vorgang}/{item.name}"
class="flex justify-between gap-x-6 py-5"
>
<div class="flex gap-x-4">
<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"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
/>
</svg>
<div class="min-w-0 flex-auto">
<span
style="display: inline-block; min-width: 5px;"
id="label__{item.name}"
class="text-sm font-semibold leading-6 text-gray-900"
contenteditable={! item.button}
on:focusout={(event) => {
function defocus_element(i) {
let item = list[i]
let text_field_id = `label__${item.name}`
let text_field = document.getElementById(text_field_id)
@@ -111,11 +78,13 @@
text_field.textContent = item.name;
// reshow button
item.show_button = true
list[i].show_button = true;
return;
}}
on:keydown|stopPropagation={async (event) => {
if (event.key == "Escape") {
}
async function handle_input(ev, i) {
let item = list[i]
if (ev.key == "Escape") {
let text_field_id = `label__${item.name}`
let text_field = document.getElementById(text_field_id)
@@ -126,15 +95,15 @@
item.show_button = true
return;
}
if (event.key == "Enter") {
if (ev.key == "Enter") {
console.log('--- hitted')
let name_field = event.currentTarget
let name_field = ev.currentTarget
let new_name = name_field.textContent || name_field.innerText || '';
if (new_name == '') {
alert('Bitte einen gültigen Namen eingeben.');
event.preventDefault();
ev.preventDefault();
return;
}
@@ -142,7 +111,7 @@
// -------------
// to prevent from item being selected
event.preventDefault();
ev.preventDefault();
// construct PUT URL
const url = $page.url
@@ -150,7 +119,7 @@
let data_obj = {}
data_obj["new_name"] = new_name
data_obj["old_name"] = event.currentTarget.id.split('__')[1]
data_obj["old_name"] = ev.currentTarget.id.split('__')[1]
open = true;
@@ -179,7 +148,51 @@
return;
}
}
</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">
<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"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25"
/>
</svg>
<div class="min-w-0 flex-auto">
<span
style="display: inline-block; min-width: 5px;"
id="label__{item.name}"
class="text-sm font-semibold leading-6 text-gray-900"
contenteditable={! item.show_button}
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 -->