Updates and more

src/components/dashboard/SchematicList.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    import {t} from "astro-i18n";
+    import {ChevronDoubleRightOutline, FolderOutline, HomeOutline, InfoCircleOutline} from "flowbite-svelte-icons";
+    import SchematicListTile from "./SchematicListTile.svelte";
+    import {Breadcrumb, BreadcrumbItem, Tooltip} from "flowbite-svelte";
+    import {createEventDispatcher} from "svelte";
+    import type {SchematicList} from "../types/schem.ts";
+    import SchematicInfo from "./SchematicInfo.svelte";
+    import UploadModal from "./UploadModal.svelte";
+
+    const dispatch = createEventDispatcher();
+
+    export let schematics: SchematicList;
+
+    let uploadOpen = false;
+    let infoModalId: number | null = null;
+
+    function schemListClick(isDir: boolean, id: number) {
+        if (isDir) {
+            return () => dispatch("to", {id})
+        } else {
+            return () => infoModalId = id
+        }
+    }
+</script>
+
+<div class="flex justify-between">
+    <Breadcrumb navClass="py-4">
+        <BreadcrumbItem home>
+            <svelte:fragment slot="icon">
+                <HomeOutline  class="w-6 h-6 mx-2 dark:text-white" />
+            </svelte:fragment>
+            <span on:click={() => dispatch("reset")} class="hover:underline hover:cursor-pointer text-2xl">{t("dashboard.schematic.home")}</span>
+        </BreadcrumbItem>
+        {#each schematics.breadcrumbs as bread}
+            <BreadcrumbItem>
+                <svelte:fragment slot="icon">
+                    <ChevronDoubleRightOutline class="w-4 h-4 mx-2 dark:text-white" />
+                </svelte:fragment>
+                <span on:click={() => dispatch("to", {id: bread.id})} class="hover:underline hover:cursor-pointer text-2xl">{bread.name}</span>
+            </BreadcrumbItem>
+        {/each}
+    </Breadcrumb>
+    <div class="flex flex-col justify-center">
+        <button class="btn" on:click={() => uploadOpen = true}>
+            {t("dashboard.schematic.upload")}
+        </button>
+    </div>
+</div>
+<table>
+    <tbody>
+    <tr class="!cursor-auto">
+        <th>{t("dashboard.schematic.head.type")}</th>
+        <th>{t("dashboard.schematic.head.name")}</th>
+        <th class="hidden sm:table-cell">{t("dashboard.schematic.head.owner")}</th>
+        <th class="hidden sm:table-cell"></th>
+        <th class="hidden md:table-cell">{t("dashboard.schematic.head.updated")}</th>
+        <th>
+            <InfoCircleOutline />
+            <Tooltip>
+                <span>{t("dashboard.schematic.head.replaceColor")}</span>
+            </Tooltip>
+        </th>
+        <th>
+            <InfoCircleOutline />
+            <Tooltip>
+                <span>{t("dashboard.schematic.head.allowReplay")}</span>
+            </Tooltip>
+        </th>
+    </tr>
+    {#if schematics.breadcrumbs.length !== 0}
+        <tr on:click|preventDefault={() => {
+                            if (schematics.breadcrumbs.length === 1) {
+                                dispatch("reset")
+                            } else {
+                                dispatch("to", {id: schematics.breadcrumbs[schematics.breadcrumbs.length - 2].id})
+                            }
+                        }}>
+            <th>
+                <FolderOutline />
+            </th>
+            <th>../</th>
+            <th class="hidden sm:table-cell"></th>
+            <th class="hidden sm:table-cell">{t("dashboard.schematic.dir")}</th>
+            <th class="hidden md:table-cell"></th>
+            <th></th>
+            <th></th>
+        </tr>
+    {/if}
+    {#each schematics.schematics as schem}
+        <SchematicListTile schem={schem} players={schematics.players} on:click={schemListClick(schem.type == null, schem.id)} />
+    {/each}
+    </tbody>
+</table>
+
+<UploadModal bind:open={uploadOpen} on:refresh />
+
+{#if infoModalId !== null}
+    <SchematicInfo schematicId={infoModalId} on:reset={() => infoModalId = null} />
+{/if}
+
+<style lang="scss">
+  table {
+    @apply w-full;
+  }
+
+  tr {
+    @apply transition-colors cursor-pointer border-b
+    dark:hover:bg-gray-800 hover:bg-gray-300;
+  }
+
+  th {
+    @apply text-left py-4 md:px-2;
+  }
+</style>