Added deletion and renaming of files and deletion of directories

src/lib/Modal.svelte

@@ -51,10 +51,10 @@
 >
     <div class="flex h-full flex-col gap-4 p-4">
         {@render header?.()}
-        <div class="overflow-y-auto">
+        <div class="grow overflow-y-auto">
             {@render children?.()}
         </div>
-        <div class="grow"></div>
+        <!-- <div class="grow"></div> -->
         <!-- svelte-ignore a11y_autofocus -->
         <div class="flex justify-end gap-4">
             {@render actionButtons?.()}

src/lib/RessourceManager.svelte

@@ -24,6 +24,12 @@
 
     let showNewDir = $state(false);
     let newDirName = $state("");
+    let showDeleteDir = $state(false);
+    let dirToDelete: Directory | undefined = $state();
+
+    let showRenameFile = $state(false);
+    let fileToRename: Ressource | undefined = $state();
+    let newFileName = $state("");
 
     function handleFileChange(event: Event) {
         const target = event.target as HTMLInputElement | null;
@@ -67,6 +73,54 @@
             });
     }
 
+    function deleteRessource(res: Ressource | Directory) {
+        if (isRessource(res)) {
+            axios
+                .delete(url("/cdn/" + res.user + "/" + res.filename), {
+                    withCredentials: true
+                })
+                .then((response) => {
+                    if (response.status === 200) {
+                        fetchDirectory();
+                    } else {
+                        alert("Something went wrong: " + response.status);
+                    }
+                });
+        } else if (isDir(res)) {
+            showDeleteDir = true;
+            dirToDelete = res;
+        }
+    }
+
+    async function deleteDir() {
+        return axios
+            .delete(url("/directory"), {
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                data: { path: path + (path === "/" ? "" : "/") + dirToDelete?.name },
+                withCredentials: true
+            })
+            .then((response) => {
+                if (response.status === 200) {
+                    fetchDirectory();
+                    dirToDelete = undefined;
+                    return true;
+                } else {
+                    alert("Failed to delete directory: " + response.status);
+                }
+                return false;
+            })
+            .catch((err) => {
+                console.error(err);
+                return false;
+            });
+    }
+
+    function deleteDirCancel() {
+        dirToDelete = undefined;
+    }
+
     async function fetchDirectory() {
         fetchingRessources = true;
         return axios
@@ -148,6 +202,44 @@
         }
     }
 
+    function renameRessource(res: Ressource) {
+        fileToRename = res;
+        newFileName = res.name;
+        showRenameFile = true;
+    }
+
+    async function renameFile() {
+        if (fileToRename === undefined) return false;
+        return axios
+            .put(
+                url("/cdn/" + fileToRename.user + "/" + fileToRename.filename),
+                {
+                    name: newFileName
+                },
+                { withCredentials: true }
+            )
+            .then((response) => {
+                if (response.status === 200) {
+                    fetchDirectory();
+                    fileToRename = undefined;
+                    newFileName = "";
+                    return true;
+                } else {
+                    alert("Failed to rename File: " + response.status);
+                }
+                return false;
+            })
+            .catch((err) => {
+                console.error(err);
+                return false;
+            });
+    }
+
+    function renameFileCancel() {
+        fileToRename = undefined;
+        newFileName = "";
+    }
+
     function cancel() {
         selectedRessource = undefined;
     }
@@ -173,10 +265,10 @@
     {#snippet header()}
         <h2 class="text-3xl">Ressourcenmanager - {path}</h2>
     {/snippet}
-    <div>
+    <div class="h-full">
         {#if fetchingRessources}
             Loading...
-        {:else}
+        {:else if ressources.length > 0}
             <div class="flex flex-col gap-2">
                 {#each ressources as ressource}
                     <!-- svelte-ignore a11y_click_events_have_key_events -->
@@ -202,18 +294,40 @@
                                 {ressource.name}
                             {/if}
                         </div>
-                        <!-- svelte-ignore a11y_consider_explicit_label -->
+                        {#if !(isDir(ressource) && ressource.name === "..")}
-                        <button
+                            <div class="flex gap-4">
-                            type="button"
+                                {#if isRessource(ressource)}
-                            class="btn border-red-600 text-red-600"
+                                    <!-- svelte-ignore a11y_consider_explicit_label -->
-                            onclick={(event) => {
+                                    <button
-                                event.stopPropagation();
+                                        type="button"
-                                console.log("delete", ressource.name);
+                                        class="btn border-black"
-                            }}><i class="fa-solid fa-trash"></i></button
+                                        onclick={(event) => {
-                        >
+                                            event.stopPropagation();
+                                            renameRessource(ressource);
+                                        }}><i class="fa-solid fa-pencil"></i></button
+                                    >
+                                {/if}
+                                <!-- svelte-ignore a11y_consider_explicit_label -->
+                                <button
+                                    type="button"
+                                    class="btn border-red-600 text-red-600"
+                                    onclick={(event) => {
+                                        event.stopPropagation();
+                                        deleteRessource(ressource);
+                                    }}><i class="fa-solid fa-trash"></i></button
+                                >
+                            </div>
+                        {/if}
                     </div>
                 {/each}
             </div>
+        {:else}
+            <div class="flex h-full w-full grow-2 flex-col items-center justify-center">
+                <div class="text-[128px] text-gray-300"><i class="fa-solid fa-database"></i></div>
+                <div class="text-[24px] text-gray-500 select-none">
+                    Noch keine Ressourcen vorhanden
+                </div>
+            </div>
         {/if}
     </div>
     {#snippet actionButtons()}
@@ -251,6 +365,41 @@
     </div>
 </Modal>
 
+<Modal bind:showModal={showDeleteDir} okFn={deleteDir} cancelFn={deleteDirCancel}>
+    {#snippet header()}
+        <h2 class="text-3xl">Ordner löschen</h2>
+    {/snippet}
+
+    <div>
+        Soll der Ordner {dirToDelete?.name} wirklich gelöscht werden? Alle darin enthaltenen Daten gehen
+        verloren.
+    </div>
+    {#if error.length > 0}
+        <div class="text-red-700">{error}</div>
+    {/if}
+</Modal>
+
+<Modal bind:showModal={showRenameFile} okFn={renameFile} cancelFn={renameFileCancel}>
+    {#snippet header()}
+        <h2 class="text-3xl">Datei umbenennen</h2>
+    {/snippet}
+    <div>
+        <label for="directory" class="">Name</label>
+        <div>
+            <input
+                type="text"
+                name="directory"
+                id="directory"
+                class="borders mt-2 mb-2 w-full"
+                bind:value={newFileName}
+            />
+        </div>
+        {#if error.length > 0}
+            <div class="text-red-700">{error}</div>
+        {/if}
+    </div>
+</Modal>
+
 <style>
     .borders {
         border: 1px solid black;