Files
Website/src/components/dashboard/SchematicListTile.svelte
2023-12-14 22:14:41 +01:00

85 lines
2.6 KiB
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 {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 dayjs from "dayjs";
import 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>
{#if schem.type != null}
<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>
{:else}
<th></th>
<th></th>
{/if}
</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>