Compare commits
4 Commits
0fc496cd5c
...
255f14faae
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
255f14faae | ||
|
|
2278b18f02 | ||
|
|
18038903cb | ||
| 75f88e3e49 |
@@ -4,14 +4,14 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
|
||||
/**
|
||||
* @type any[]
|
||||
*/
|
||||
let list = [];
|
||||
let list: any[] = [];
|
||||
//$: list;
|
||||
|
||||
onMount(async () => {
|
||||
@@ -36,11 +36,13 @@
|
||||
}
|
||||
});
|
||||
|
||||
async function delete_item(ev) {
|
||||
async function delete_item(ev: Event) {
|
||||
let delete_item = window.confirm("Bist du sicher?");
|
||||
|
||||
if (delete_item) {
|
||||
let filename = event.currentTarget.id.split('del__')[1]
|
||||
const target = ev.currentTarget as HTMLElement | null;
|
||||
if (!target) return;
|
||||
let filename = target.id.split('del__')[1]
|
||||
|
||||
// delete request
|
||||
// --------------
|
||||
@@ -56,7 +58,11 @@
|
||||
setTimeout(() => {window.location.reload()}, 500)
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error.message)
|
||||
if (error instanceof Error) {
|
||||
console.log(error.message);
|
||||
} else {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -92,13 +98,14 @@
|
||||
<span class="text-sm font-semibold leading-6 text-gray-900">{item.name}</span>
|
||||
<!-- Delete button -->
|
||||
<button
|
||||
style="padding: 2px"
|
||||
id="del__{item.name}"
|
||||
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>
|
||||
</button>
|
||||
style="padding: 2px"
|
||||
id="del__{item.name}"
|
||||
on:click|preventDefault={delete_item}
|
||||
aria-label="Vorgang {item.name} löschen"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden sm:flex sm:flex-col sm:items-end">
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { onMount, tick } from 'svelte';
|
||||
import shortenFileSize from '$lib/helper/shortenFileSize';
|
||||
import { page } from '$app/stores';
|
||||
@@ -21,10 +21,15 @@
|
||||
/** @type {import('./$types').PageData} */
|
||||
/** export let data; */
|
||||
|
||||
/**
|
||||
* @type any[]
|
||||
*/
|
||||
let list = [];
|
||||
interface ListItem {
|
||||
name: string;
|
||||
size: number;
|
||||
lastModified: string | number | Date;
|
||||
show_button?: boolean;
|
||||
// add other properties as needed
|
||||
}
|
||||
|
||||
let list: ListItem[] = [];
|
||||
$: list;
|
||||
|
||||
let open = false;
|
||||
@@ -69,27 +74,31 @@
|
||||
open = false;
|
||||
}
|
||||
|
||||
function defocus_element(i) {
|
||||
function defocus_element(i: number) {
|
||||
let item = list[i]
|
||||
let text_field_id = `label__${item.name}`
|
||||
|
||||
let text_field = document.getElementById(text_field_id)
|
||||
text_field.setAttribute("contenteditable", false)
|
||||
text_field.textContent = item.name;
|
||||
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, i) {
|
||||
async function handle_input(ev: KeyboardEvent, i: number) {
|
||||
let item = list[i]
|
||||
if (ev.key == "Escape") {
|
||||
let text_field_id = `label__${item.name}`
|
||||
|
||||
let text_field = document.getElementById(text_field_id)
|
||||
text_field.setAttribute("contenteditable", false)
|
||||
text_field.textContent = item.name;
|
||||
if (text_field) {
|
||||
text_field.setAttribute("contenteditable", "false");
|
||||
text_field.textContent = item.name;
|
||||
}
|
||||
|
||||
// reshow button
|
||||
item.show_button = true
|
||||
@@ -97,8 +106,8 @@
|
||||
}
|
||||
if (ev.key == "Enter") {
|
||||
console.log('--- hitted')
|
||||
let name_field = ev.currentTarget
|
||||
let new_name = name_field.textContent || name_field.innerText || '';
|
||||
let name_field = ev.currentTarget as HTMLElement | null;
|
||||
let new_name = name_field ? (name_field.textContent || (name_field as any).innerText || '') : '';
|
||||
|
||||
|
||||
if (new_name == '') {
|
||||
@@ -117,9 +126,9 @@
|
||||
const url = $page.url
|
||||
console.log(url);
|
||||
|
||||
let data_obj = {}
|
||||
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.id.split('__')[1]
|
||||
data_obj["old_name"] = ev.currentTarget && (ev.currentTarget as HTMLElement).id ? (ev.currentTarget as HTMLElement).id.split('__')[1] : ''
|
||||
|
||||
|
||||
open = true;
|
||||
@@ -181,80 +190,93 @@
|
||||
</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>
|
||||
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}
|
||||
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
|
||||
style="padding: 2px"
|
||||
id="edit__{item.name}"
|
||||
on:click|preventDefault={(ev) => {
|
||||
let text_field_id = `label__${item.name}`
|
||||
|
||||
let text_field = document.getElementById(text_field_id)
|
||||
text_field.setAttribute("contenteditable", true)
|
||||
text_field.focus();
|
||||
text_field.textContent = '';
|
||||
|
||||
// hide button
|
||||
item.show_button = false
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m14.996094 3-11.9921878 11.992188h-.0039062v4.007812h1 2 1.0078125v-.0039l11.9921875-11.9921938-.001953-.0019531.001953-.0019531-4-4-.002.00195zm-1.998047 3.4121094 2.589844 2.5898437-7.587891 7.5878909v-1.589844h-1-1v-1-.589844zm-7.998047 7.9980466v1.589844h1 1v1 .589844l-.4101562.410156h-1.5898438l-1-1v-1.589844z" fill="#373737" transform="translate(1 1)"/></svg>
|
||||
</button>
|
||||
style="padding: 2px"
|
||||
id="edit__{item.name}"
|
||||
aria-label="Datei umbenennen"
|
||||
on:click|preventDefault={(ev) => {
|
||||
let text_field_id = `label__${item.name}`
|
||||
|
||||
let text_field = document.getElementById(text_field_id)
|
||||
if (text_field) {
|
||||
text_field.setAttribute("contenteditable", "true");
|
||||
text_field.focus();
|
||||
text_field.textContent = '';
|
||||
}
|
||||
|
||||
// hide button
|
||||
item.show_button = false
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
height="20" width="20" xmlns="http://www.w3.org/2000/svg"><path d="m14.996094 3-11.9921878 11.992188h-.0039062v4.007812h1 2 1.0078125v-.0039l11.9921875-11.9921938-.001953-.0019531.001953-.0019531-4-4-.002.00195zm-1.998047 3.4121094 2.589844 2.5898437-7.587891 7.5878909v-1.589844h-1-1v-1-.589844zm-7.998047 7.9980466v1.589844h1 1v1 .589844l-.4101562.410156h-1.5898438l-1-1v-1.589844z" fill="#373737" transform="translate(1 1)"/></svg>
|
||||
</button>
|
||||
{/if}
|
||||
<!-- Delete button -->
|
||||
<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 = event.currentTarget.id.split('del__')[1]
|
||||
|
||||
|
||||
|
||||
// delete request
|
||||
// --------------
|
||||
|
||||
let url = $page.url
|
||||
url += `/${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) {
|
||||
console.log(error.message)
|
||||
}
|
||||
|
||||
}
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</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"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
<p class="mt-1 truncate text-xs leading-5 text-gray-500">
|
||||
{shortenFileSize(item.size)}
|
||||
</p>
|
||||
|
||||
@@ -1,3 +1,16 @@
|
||||
<style>
|
||||
model-viewer {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.model{
|
||||
height: calc(100%-84px)
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import Panel from '$lib/components/ui/Panel.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
Reference in New Issue
Block a user