Updates and more

src/components/dashboard/SchematicInfoModal.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+    import {astroI18n, t} from "astro-i18n";
+    import moment from "moment";
+    import {CheckSolid, XCircleOutline} from "flowbite-svelte-icons";
+    import {Modal} from "flowbite-svelte";
+    import type {SchematicInfo} from "../types/schem.ts";
+    import {createEventDispatcher} from "svelte";
+    import {schemRepo} from "../repo/repo.ts";
+
+    const dispatch = createEventDispatcher();
+
+    export let info: SchematicInfo;
+
+    async function download() {
+        const code = await $schemRepo.createDownload(info.schem.id);
+        window.open(import.meta.env.PUBLIC_API_SERVER + "/download/" + code.code, "_blank")
+        dispatch("reset")
+    }
+</script>
+
+<Modal title={info.schem.name} autoclose open on:close={() => dispatch("reset")}>
+    <p>{t("dashboard.schematic.info.path", {path: info.path})}</p>
+    <p class="flex !mt-0">
+        {t("dashboard.schematic.info.replaceColor")}
+        {#if info.schem.replaceColor}
+            <CheckSolid class="text-green-500 ml-2" />
+        {:else}
+            <XCircleOutline class="text-red-500 ml-2" />
+        {/if}
+    </p>
+    <p class="flex !mt-0">
+        {t("dashboard.schematic.info.allowReplay")}
+        {#if info.schem.allowReplay}
+            <CheckSolid class="text-green-500 ml-2" />
+        {:else}
+            <XCircleOutline class="text-red-500 ml-2" />
+        {/if}
+    </p>
+    <p class="!mt-0">{t("dashboard.schematic.info.type", {type: info.schem.type ?? t("dashboard.schematic.dir")})}</p>
+    <p class="!mt-0">{t("dashboard.schematic.info.updated", {updated: new Intl.DateTimeFormat(astroI18n.locale, {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit",
+            day: "2-digit",
+            month: "2-digit",
+            year: "numeric"
+        }).format(moment(info.schem.lastUpdate).utc(false).toDate())})}</p>
+    <p class="!mt-0">{t("dashboard.schematic.info.item", {item: info.schem.item ?? (info.schem.type == null ? "CHEST" : "CAULDRON_ITEM")})}</p>
+    {#if info.members.length !== 0}
+        <p class="!mt-0">{t("dashboard.schematic.info.members", {members: info.members.join(", ")})}</p>
+    {/if}
+    <svelte:fragment slot="footer">
+        <button class="btn !ml-auto" on:click={download}>{t("dashboard.schematic.info.btn.download")}</button>
+        <button class="btn" on:click={() => dispatch("reset")}>{t("dashboard.schematic.info.btn.close")}</button>
+    </svelte:fragment>
+</Modal>