Files
Website/src/components/dashboard/SchematicListTile.svelte

61 lines
1.7 KiB
Svelte

<script lang="ts">
import {astroI18n, t} from "astro-i18n";
import {CheckSolid, FileOutline, FolderOutline, XCircleOutline} from "flowbite-svelte-icons";
import type {Schematic} from "../types/schem.ts";
import type {Player} from "../types/data.ts";
import * as dayjs from "dayjs";
import * as utc from "dayjs/plugin/utc";
dayjs.extend(utc);
export let schem: Schematic;
export let players: Record<number, Player>;
</script>
<tr on:click|preventDefault>
<th>
{#if schem.type == null}
<FolderOutline />
{:else}
<FileOutline />
{/if}
</th>
<th>
{schem.name}{#if schem.type == null}/{/if}
</th>
<th class="hidden sm:table-cell">{players[schem.owner].name}</th>
<th class="hidden sm:table-cell">{schem.type ?? t("dashboard.schematic.dir")}</th>
<th class="hidden md:table-cell">{new Intl.DateTimeFormat(astroI18n.locale, {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
day: "2-digit",
month: "2-digit",
year: "numeric"
}).format(dayjs(schem.lastUpdate).utc(false).toDate())}</th>
<th>
{#if schem.replaceColor}
<CheckSolid class="text-green-500" />
{:else}
<XCircleOutline class="text-red-500" />
{/if}
</th>
<th>
{#if schem.allowReplay}
<CheckSolid class="text-green-500" />
{:else}
<XCircleOutline class="text-red-500" />
{/if}
</th>
</tr>
<style lang="scss">
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>