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

@@ -11,6 +11,13 @@
 
 	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; */
 
@@ -20,6 +27,13 @@
 	let list = [];
 	$: list;
 
+	let open = false;
+	$: open;
+	let inProgress = false;
+	$: inProgress;
+	let err = false;
+	$: err;
+
 	let rename_input;
 	$: rename_input;
 
@@ -49,6 +63,11 @@
 			})
 		}
 	});
+
+	function uploadSuccessful() {
+		console.log('reset');
+		open = false;
+	}
 </script>
 
 <div class="-z-10 bg-white">
@@ -133,19 +152,26 @@
 										data_obj["new_name"] = new_name
 										data_obj["old_name"] = event.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'])
+												// alert(json_res['msg'])
 												return;
 											}
 											throw new Error(`Fehlgeschlagen: ${response.status}`)
 										} else {
+											uploadSuccessful();
 											setTimeout(() => {window.location.reload()}, 500)
 										}
 
@@ -234,4 +260,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>