Website/src/components/dashboard/SchematicInfo.svelte

<script lang="ts">
    import {createEventDispatcher} from "svelte";
    import {schemRepo} from "../repo/repo";
    import {Modal, Spinner} from "flowbite-svelte";
    import SchematicInfoModal from "./SchematicInfoModal.svelte";
    import type {Player} from "../types/data.ts";

    const dispatch = createEventDispatcher();

    export let schematicId: number;
    export let user: Player;

    let schemInfo = getSchematicInfo(schematicId);

    function getSchematicInfo(id: number) {
        return $schemRepo.getSchematicInfo(id);
    }
</script>

{#await schemInfo}
    <Modal title="Loading" open on:close={() => dispatch("reset")}>
        <Spinner />
    </Modal>
{:then info}
    <SchematicInfoModal {user} {info} on:reset />
{:catch e}
    <Modal title="Error" open on:close={() => dispatch("reset")}>
        <p>{e.message}</p>
        <button class="btn !ml-auto" slot="footer" on:click={() => dispatch("reset")}>Close</button>
    </Modal>
{/await}