42 lines
2.3 KiB
Svelte
42 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import DatabaseCategoryNav from '$lib/components/DatabaseCategoryNav.svelte';
|
|
import DatabaseItemCard from '$lib/components/DatabaseItemCard.svelte';
|
|
import DatabaseDiscoveryConsole from '$lib/components/DatabaseDiscoveryConsole.svelte';
|
|
import DatabaseDiscussionDialog from '$lib/components/DatabaseDiscussionDialog.svelte';
|
|
import { page } from '$app/state';
|
|
let { data, form } = $props();
|
|
const discussionCloseHref = () => {
|
|
const target = new URL(page.url);
|
|
target.searchParams.delete('discussion');
|
|
target.hash = data.selectedItem ? `database-item-${data.selectedItem.id}` : '';
|
|
return `${target.pathname}${target.search}${target.hash}`;
|
|
};
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{data.category.label} — The Division Resurgence database — SHD.build</title>
|
|
<meta name="description" content={`${data.category.description} Community-maintained data for The Division Resurgence.`}/>
|
|
</svelte:head>
|
|
|
|
<main class="page database-category-page">
|
|
<header class="database-category-command">
|
|
<div><p class="eyebrow"><span></span> ISAC PUBLIC ARCHIVE / DATABASE REGISTRY</p><h1>{data.category.label}</h1><p>{data.category.description}</p></div>
|
|
<div><strong>{data.pagination.total}</strong><span>ACTIVE RECORDS</span><a href="/database">DATABASE INDEX →</a></div>
|
|
</header>
|
|
<DatabaseCategoryNav active={data.category.slug}/>
|
|
<DatabaseDiscoveryConsole filters={data.filters} pagination={data.pagination} search={data.search} searchPlaceholder={`SEARCH ${data.category.label.toUpperCase()} BY NAME`}/>
|
|
<section class="database-item-grid">
|
|
{#each data.items as item (item.id)}
|
|
<DatabaseItemCard {item}/>
|
|
{:else}
|
|
<div class="database-empty">
|
|
<span>◇</span><strong>{data.search ? 'NO MATCHING RECORDS' : 'NO ACTIVE RECORDS'}</strong>
|
|
<p>{data.search ? `No ${data.category.label.toLocaleLowerCase()} match “${data.search}”.` : `No ${data.category.label.toLocaleLowerCase()} have been added yet.`}</p>
|
|
</div>
|
|
{/each}
|
|
</section>
|
|
{#if data.selectedItem}
|
|
<DatabaseDiscussionDialog item={data.selectedItem} comments={data.discussionComments} viewer={data.viewer} {form} signInHref={`/sign-in?returnTo=${encodeURIComponent(`/database/${data.category.slug}?discussion=${data.selectedItem.id}`)}`} closeHref={discussionCloseHref()}/>
|
|
{/if}
|
|
</main>
|