Editor: added game creation and deletion

src/routes/+page.svelte

@@ -59,6 +59,7 @@
         <button type="button" class="btn" onclick={() => (showRessourceManager = true)}
             >Ressourcen</button
         >
+        <button type="button" class="btn" onclick={() => goto("/editor")}>Editor</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">

src/routes/editor/+page.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+    import Modal from "$lib/Modal.svelte";
+    import type { Game } from "$lib/Types";
+    import { url } from "$lib/util";
+    import axios from "axios";
+    import { onMount } from "svelte";
+
+    let games: Game[] = $state([]);
+
+    let error = $state("");
+
+    let showNewGame = $state(false);
+    let newGameName = $state("");
+
+    let showDeleteGame = $state(false);
+    let gameToDelete: Game | undefined = $state();
+
+    async function addNewGame() {
+        if (!newGameName) return false;
+        return axios
+            .post(url("game"), { name: newGameName }, { withCredentials: true })
+            .then((response) => {
+                if (response.status === 200) {
+                    fetchGames();
+                    newGameName = "";
+                    return true;
+                } else return false;
+            });
+    }
+
+    function addNewGameCancel() {
+        newGameName = "";
+    }
+
+    async function deleteGame() {
+        if (gameToDelete === undefined) return false;
+        return axios
+            .delete(url("/game/" + gameToDelete._id), { withCredentials: true })
+            .then((response) => {
+                if (response.status === 200) {
+                    fetchGames();
+                    gameToDelete = undefined;
+                    return true;
+                } else {
+                    console.error("Failed to delete Game: " + response.status);
+                    return false;
+                }
+            })
+            .catch((err) => {
+                console.error(err);
+                return false;
+            });
+    }
+
+    function deleteGameCancel() {
+        gameToDelete = undefined;
+    }
+
+    function fetchGames() {
+        axios
+            .get(url("games"), { withCredentials: true })
+            .then((response) => {
+                if (response.status === 200) {
+                    games = response.data;
+                } else {
+                    console.error("Could not fetch games: " + response.status);
+                }
+            })
+            .catch((err) => {
+                console.error(err);
+            });
+    }
+
+    onMount(() => {
+        fetchGames();
+    });
+</script>
+
+<div class="flex h-full flex-col">
+    <div class="flex items-center gap-4">
+        <h1 class="m-4 mb-8 text-7xl font-bold">Editor</h1>
+        <button class="btn" type="button" onclick={() => (showNewGame = true)}
+            ><i class="fa-solid fa-plus"></i> Neues Spiel</button
+        >
+    </div>
+    <div class="flex flex-col space-y-4 overflow-y-auto">
+        {#each games as game}
+            <div
+                class="ms-4 me-4 flex items-center justify-between rounded-xl border-2 p-2 hover:cursor-pointer hover:bg-emerald-200"
+            >
+                <a class="" href={`${game._id}`}>{game.name}</a>
+                <!-- svelte-ignore a11y_consider_explicit_label -->
+                <button
+                    type="button"
+                    class="btn border-red-600 text-red-600"
+                    onclick={(event) => {
+                        event.stopPropagation();
+                        gameToDelete = game;
+                        showDeleteGame = true;
+                    }}><i class="fa-solid fa-trash"></i></button
+                >
+            </div>
+        {/each}
+    </div>
+</div>
+
+<Modal bind:showModal={showNewGame} okFn={addNewGame} cancelFn={addNewGameCancel}>
+    {#snippet header()}
+        <h2 class="text-3xl">Neues Spiel</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={newGameName}
+            />
+        </div>
+        {#if error.length > 0}
+            <div class="text-red-700">{error}</div>
+        {/if}
+    </div>
+</Modal>
+
+<Modal bind:showModal={showDeleteGame} okFn={deleteGame} cancelFn={deleteGameCancel}>
+    {#snippet header()}
+        <h2 class="text-3xl">Spiel löschen</h2>
+    {/snippet}
+
+    <div>Soll das Spiel {gameToDelete?.name} wirklich gelöscht werden?</div>
+    {#if error.length > 0}
+        <div class="text-red-700">{error}</div>
+    {/if}
+</Modal>
+
+<style>
+    .borders {
+        border: 1px solid black;
+        border-radius: 5px;
+        display: flex;
+        padding: 2px;
+    }
+</style>