Jeopardy/src/routes/editor/+page.svelte

<script lang="ts">
    import { goto } from "$app/navigation";
    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;
                    games.sort((a, b) => a.name.localeCompare(b.name));
                } 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>
    {#if games.length > 0}
        <div class="flex flex-col space-y-4 overflow-y-auto">
            {#each games as game}
                <!-- svelte-ignore a11y_click_events_have_key_events -->
                <!-- svelte-ignore a11y_no_static_element_interactions -->
                <div
                    class="ms-4 me-4 flex items-center justify-between rounded-xl border-2 p-2 hover:cursor-pointer hover:bg-emerald-200"
                    onclick={() => {
                        goto(`/editor/${game._id}`);
                    }}
                >
                    <div>
                        {game.name}
                    </div>
                    <!-- 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>
    {: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 Spiele vorhanden</div>
        </div>
    {/if}
</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>