Added a RessourceManager for uploading files

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:

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>

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;