Website/src/components/dashboard/SchematicList.svelte

<!--
  -   This file is a part of the SteamWar software.
  -
  -   Copyright (C) 2023 SteamWar.de-Serverteam
  -
  -   This program is free software: you can redistribute it and/or modify
  -   it under the terms of the GNU Affero General Public License as published by
  -   the Free Software Foundation, either version 3 of the License, or
  -   (at your option) any later version.
  -
  -   This program is distributed in the hope that it will be useful,
  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  -   GNU Affero General Public License for more details.
  -
  -   You should have received a copy of the GNU Affero General Public License
  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  -->

<script lang="ts">
    import {t} from "astro-i18n";
    import {
        ChevronDoubleLeftOutline,
        ChevronDoubleRightOutline,
        ChevronLeftOutline, ChevronRightOutline,
        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 "@type/schem.ts";
    import SchematicInfo from "./SchematicInfo.svelte";
    import UploadModal from "./UploadModal.svelte";
    import type {Player} from "@type/data.ts";
    import SWButton from "../styled/SWButton.svelte";

    const dispatch = createEventDispatcher();

    export let schematics: SchematicList;
    export let user: Player;

    let uploadOpen = false;
    let infoModalId: number | null = null;

    function schemListClick(isDir: boolean, id: number) {
        if (isDir) {
            return () => dispatch("to", {id})
        } else {
            return () => infoModalId = id
        }
    }

    let page = 0;
    $: maxPage = Math.ceil(schematics.schematics.length / 10);
    $: pagedSchematics = schematics.schematics.slice(page * 10, (page + 1) * 10);

    $: pages = new Array(maxPage).fill(0)
        .map((_, i) => i + 1)
        .slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
        .map(i => ({
            name: i.toString(),
            active: i === page + 1,
            i: i - 1
        }));

    const previous = () => {
        page = Math.max(page - 1, 0);
    };
    const next = () => {
        page = Math.min(page + 1, maxPage - 1);
    };
</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 (bread.id)}
            <BreadcrumbItem>
                <svelte:fragment slot="icon">
                    <ChevronDoubleRightOutline class="w-4 h-4 mx-2 dark:text-white" />
                </svelte:fragment>
                <span on:click={() => {
                    page = 0;
                    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">
        <SWButton on:click={() => uploadOpen = true}>
            {t("dashboard.schematic.upload")}
        </SWButton>
    </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) {
                                page = 0;
                                dispatch("reset")
                            } else {
                                page = 0;
                                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 pagedSchematics as schem (schem.id)}
        <SchematicListTile schem={schem} players={schematics.players} on:click={schemListClick(schem.type == null, schem.id)} />
    {/each}
    </tbody>
</table>

<div class="w-full flex justify-center mt-4">
    <ul class="inline-flex">
        <li>
            <button on:click={() => page = 0} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
                <span class="sr-only">Next</span>
                <ChevronDoubleLeftOutline class="w-3 h-3" />
            </button>
        </li>
        <li>
            <button on:click={previous} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
                <span class="sr-only">Previous</span>
                <ChevronLeftOutline class="w-3 h-3" />
            </button>
        </li>
        {#each pages as p}
            <li>
                <button on:click={() => page = p.i} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
                    <span>{p.name}</span>
                </button>
            </li>
        {/each}
        <li>
            <button on:click={next} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
                <span class="sr-only">Next</span>
                <ChevronRightOutline class="w-3 h-3" />
            </button>
        </li>
        <li>
            <button on:click={() => page = maxPage - 1} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
                <span class="sr-only">Next</span>
                <ChevronDoubleRightOutline class="w-3 h-3" />
            </button>
        </li>
    </ul>
</div>

<UploadModal bind:open={uploadOpen} on:refresh />

{#if infoModalId !== null}
    <SchematicInfo schematicId={infoModalId} {user} on:reset={() => infoModalId = null} />
{/if}

<style lang="postcss">
  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>