From 7349624da99b29e44967c27f1d28ddb4a2be101d Mon Sep 17 00:00:00 2001
From: Jonas Kappa <jkappa@gmx.de>
Date: Mon, 22 Dec 2025 13:03:32 +0100
Subject: [PATCH] Added a RessourceManager for uploading files

---
 docker-compose.yml              |  3 ++
 src/lib/RessourceManager.svelte | 68 +++++++++++++++++++++++++++++++++
 src/routes/+page.svelte         | 13 +++++--
 3 files changed, 80 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/RessourceManager.svelte

diff --git a/docker-compose.yml b/docker-compose.yml
index 3748a17..0775851 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -18,6 +18,8 @@ services:
       JEOPARDY_URL: http://localhost:11000
     ports:
       - "11001:12345"
+    volumes:
+      - jeopardyserver_data_volume:/data
   mongo:
     image: mongo:8.0.14
     restart: always
@@ -41,3 +43,4 @@ services:
 
 volumes:
   mongodb_data_volume:
+  jeopardyserver_data_volume:
diff --git a/src/lib/RessourceManager.svelte b/src/lib/RessourceManager.svelte
new file mode 100644
index 0000000..4b01675
--- /dev/null
+++ b/src/lib/RessourceManager.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { env } from "$env/dynamic/public";
+    import axios from "axios";
+    import Modal from "./Modal.svelte";
+
+    interface Props {
+        show: boolean;
+    }
+
+    let { show = $bindable(false) }: Props = $props();
+
+    let file: File | null = null;
+    let path: string = "/";
+
+    function handleFileChange(event: Event) {
+        const target = event.target as HTMLInputElement | null;
+        if (target?.files?.[0]) {
+            file = target.files[0];
+        }
+    }
+
+    function uploadData(event: SubmitEvent) {
+        event.preventDefault();
+        if (file === null) return;
+
+        const formData = new FormData();
+        formData.append("path", path);
+        formData.append("file", file);
+
+        axios.post(
+            `${env.PUBLIC_JEOPARDY_SERVER_PROTOCOL}://${env.PUBLIC_JEOPARDY_SERVER}/upload`,
+            formData,
+            {
+                withCredentials: true,
+                headers: {
+                    "Content-Type": "multipart/form-data"
+                },
+                onUploadProgress: (event) => {
+                    console.log(event);
+                }
+            }
+        );
+    }
+</script>
+
+<Modal
+    bind:showModal={show}
+    okFn={async () => {
+        console.log("ok");
+        return true;
+    }}
+>
+    {#snippet header()}
+        <h2 class="text-3xl">Ressourcenmanager</h2>
+    {/snippet}
+    <div>Ressourcenmanager</div>
+    {#snippet actionButtons()}
+        <form
+            action={`${env.PUBLIC_JEOPARDY_SERVER_PROTOCOL}://${env.PUBLIC_JEOPARDY_SERVER}/upload`}
+            enctype="multipart/form-data"
+            method="post"
+            onsubmit={uploadData}
+        >
+            <input class="btn" type="file" name="file" onchange={handleFileChange} />
+            <input type="submit" value="Hochladen" class="btn" />
+        </form>
+    {/snippet}
+</Modal>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b452faf..c2129e0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import { env } from "$env/dynamic/public";
+    import RessourceManager from "$lib/RessourceManager.svelte";
     import UserSvelte from "$lib/User.svelte";
     import websocket, { SocketConnectionType } from "$lib/websocket.svelte";
     import axios from "axios";
 
+    let showRessourceManager = $state(false);
+
     $effect(() => {
         if (websocket.connectionType === SocketConnectionType.HOST) {
             console.log(`Type: ${websocket.connectionType}. Redirecting to /connected/games`);
@@ -53,11 +56,11 @@
         {#if UserSvelte.role === "admin"}
             <button type="button" class="btn" onclick={() => goto("/admin")}>Administration</button>
         {/if}
-        <button type="button" class="btn" onclick={() => goto("/settings")}>Einstellungen</button>
-        <button type="button" class="btn" onclick={logout}>Logout</button>
-        <button type="button" class="btn" onclick={logoutFromAllDevices}
-            >Logout von allen Geräten</button
+        <button type="button" class="btn" onclick={() => (showRessourceManager = true)}
+            >Ressourcen</button
         >
+        <button type="button" class="btn" onclick={() => goto("/settings")}>Einstellungen</button>
+        <button type="button" class="btn" onclick={logoutFromAllDevices}>Logout</button>
         <div class="btn profile ps-2 pe-2">
             <i class="fa-regular fa-user"></i>
             {UserSvelte.username}
@@ -74,6 +77,8 @@
     </div>
 </div>
 
+<RessourceManager bind:show={showRessourceManager}></RessourceManager>
+
 <style>
     .profile {
         border-color: gray;