Merge pull request 'development' (#1) from development into main

Reviewed-on: #1

src/routes/(angemeldet)/list/+page.svelte

@@ -6,6 +6,7 @@
 
 <script>
 	import { onMount } from 'svelte';
+	import { page } from '$app/stores';
 
 	/**
 	 * @type any[]
@@ -34,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">
@@ -61,7 +89,16 @@
 								/>
 							</svg>
 							<div class="min-w-0 flex-auto">
-								<p class="text-sm font-semibold leading-6 text-gray-900">{item.name}</p>
+								<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>
 							</div>
 						</div>
 						<div class="hidden sm:flex sm:flex-col sm:items-end">

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

@@ -5,11 +5,19 @@
 </style>
 
 <script>
-	import { onMount } from 'svelte';
+	import { onMount, tick } from 'svelte';
 	import shortenFileSize from '$lib/helper/shortenFileSize';
 	import { page } from '$app/stores';
+
 	import timeElapsed from '$lib/helper/timeElapsed';
 
+	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';
+
 	/** @type {import('./$types').PageData} */
 	/** export let data; */
 
@@ -19,6 +27,16 @@
 	let list = [];
 	$: list;
 
+	let open = false;
+	$: open;
+	let inProgress = false;
+	$: inProgress;
+	let err = false;
+	$: err;
+
+	let rename_input;
+	$: rename_input;
+
 	onMount(async () => {
 		const response = await fetch('/api/list/' + $page.params.vorgang);
 		const stream = response.body;
@@ -38,8 +56,100 @@
 
 			console.log(objs);
 			list = list.concat(objs);
+
+			list = list.map((item) => {
+				item.show_button = true;
+				return item;
+			})
 		}
 	});
+
+	function uploadSuccessful() {
+		console.log('reset');
+		open = false;
+	}
+
+	function defocus_element(i) {
+		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;
+
+		// reshow button
+		list[i].show_button = true;
+		return;
+	}
+
+	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)
+			text_field.setAttribute("contenteditable", false)
+			text_field.textContent = item.name;
+
+			// reshow button
+			item.show_button = true
+			return;
+		}
+		if (ev.key == "Enter") {
+			console.log('--- hitted')
+			let name_field = ev.currentTarget
+			let new_name = name_field.textContent || name_field.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 = {}
+			data_obj["new_name"] = new_name
+			data_obj["old_name"] = ev.currentTarget.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;
+		}
+	}
+
 </script>
 
 <div class="-z-10 bg-white">
@@ -48,7 +158,7 @@
 	</div>
 	<div class="mx-auto flex justify-center max-w-7xl h-full">
 		<ul class="divide-y divide-gray-100">
-			{#each list as item}
+			{#each list as item, i}
 				<li>
 					<a
 						href="/view/{$page.params.vorgang}/{item.name}"
@@ -70,7 +180,81 @@
 								/>
 							</svg>
 							<div class="min-w-0 flex-auto">
-								<p class="text-sm font-semibold leading-6 text-gray-900">{item.name}</p>
+								<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 -->
+
+								{#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>
+								{/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>
 								<p class="mt-1 truncate text-xs leading-5 text-gray-500">
 									{shortenFileSize(item.size)}
 								</p>
@@ -89,4 +273,17 @@
 			{/each}
 		</ul>
 	</div>
+
+<Modal {open}
+		><ModalTitle>Umbenennen</ModalTitle><ModalContent>
+			{#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>

src/routes/(angemeldet)/list/[vorgang]/+server.js

@@ -0,0 +1,36 @@
+import { client } from '$lib/minio';
+import { json } from '@sveltejs/kit';
+
+
+// rename operation
+export async function PUT({ request }) {
+    const data = await request.json();
+
+    console.log(`--- ${request.url.split('/').at(-1)} +++ ${JSON.stringify(data)}`);
+
+    // Vorgang
+    let vorgang = request.url.split('/').at(-1)
+
+    // prepare copy, incl. check if new name exists already
+    let old_name = data["old_name"]
+    let src_full_path = `/tatort/${vorgang}/${old_name}`
+    let new_name = `${vorgang}/${data["new_name"]}`
+
+    try {
+        let file_stats = await client.statObject('tatort', new_name)
+        return json({ msg: 'Die Datei existiert bereits.' }, { status: 400 })
+    } catch (error) {
+        // continue operation
+        console.log('continue operation')
+    }
+
+    // actual copy operation
+    await client.copyObject('tatort', new_name, src_full_path)
+
+    // delete
+    await client.removeObject('tatort', `${vorgang}/${old_name}`)
+
+    // return success or failure
+
+    return json({ success: 'success' }, { status: 200 });
+};

src/routes/(angemeldet)/list/[vorgang]/[tatort]/+server.js

@@ -0,0 +1,13 @@
+import { client } from '$lib/minio';
+import { json } from '@sveltejs/kit';
+
+export async function DELETE({ request }) {
+
+    let url_fragments = request.url.split('/')
+    let item = url_fragments.at(-1);
+    let vorgang = url_fragments.at(-2);
+
+    await client.removeObject('tatort', `${vorgang}/${item}`)
+
+    return new Response(null, { status: 204 });
+};

src/routes/(angemeldet)/upload/+page.svelte

@@ -47,6 +47,11 @@
 			success = false;
 		}
 
+		if (!(await check_valid_glb_file())) {
+			formErrors = { file: 'Keine gültige .GLD-Datei', ...formErrors };
+			success = false;
+		}
+
 		return success;
 	}
 
@@ -97,6 +102,47 @@
 		name = '';
 		files = null;
 	}
+
+	// `val` is hex string
+	function swap_endian(val) {
+		// from https://www.geeksforgeeks.org/bit-manipulation-swap-endianness-of-a-number/
+
+		let leftmost_byte = (val & eval(0x000000FF)) >> 0;
+		let left_middle_byte = (val & eval(0x0000FF00)) >> 8;
+		let right_middle_byte = (val & eval(0x00FF0000)) >> 16;
+		let rightmost_byte = (val & eval(0xFF000000)) >> 24;
+
+		leftmost_byte <<= 24;
+		left_middle_byte <<= 16;
+		right_middle_byte <<= 8;
+		rightmost_byte <<= 0;
+
+		let res = (leftmost_byte | left_middle_byte | right_middle_byte | rightmost_byte)
+
+		return res
+	}
+
+
+	async function check_valid_glb_file() {
+		// GLD Header, magic value 0x46546C67, identifies data as binary glTF, 4 bytes
+		// little endian!
+		const GLD_MAGIC = 0x46546C67;
+
+		// big endian!
+		let file = files[0];
+		let file_header = file.slice(0, 4)
+		let header_bytes = await file_header.bytes()
+		let file_header_hex = '0x' + header_bytes.toHex().toString();
+
+
+		if (GLD_MAGIC == swap_endian(file_header_hex)) {
+			return true;
+		} else {
+			return false;
+		}
+
+	}
+
 </script>
 
 <div class="mx-auto max-w-2xl">

src/routes/api/list/[[vorgang]]/+server.js

@@ -33,3 +33,31 @@ export async function GET({ params }) {
 		}
 	});
 }
+
+
+export async function DELETE({ params }) {
+	const vorgang = params.vorgang
+
+	const object_list = await new Promise((resolve, reject) => {
+
+		const res = []
+		const items_str = client.listObjects('tatort', vorgang, true)
+
+		items_str.on('data', (obj) => {
+			res.push(obj.name)
+		})
+
+		items_str.on('error', reject)
+
+		items_str.on('end', async () => {
+			resolve(res)
+		})
+
+		console.log(`+++ ${vorgang}`)
+
+	})
+
+	await client.removeObjects('tatort', object_list)
+
+    return new Response(null, { status: 204 });
+};