54 lines
1.6 KiB
Svelte
54 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { catalog } from '$lib/catalog';
|
|
import { goto } from '$app/navigation';
|
|
import VolumeItem from '$lib/components/VolumeItem.svelte';
|
|
import { Button, Listgroup } from 'flowbite-svelte';
|
|
import { db } from '$lib/catalog/db';
|
|
import { promptConfirmation } from '$lib/util';
|
|
import { page } from '$app/stores';
|
|
import type { Volume } from '$lib/types';
|
|
import { onMount } from 'svelte';
|
|
|
|
function sortManga(a: Volume, b: Volume) {
|
|
if (a.volumeName < b.volumeName) {
|
|
return -1;
|
|
}
|
|
if (a.volumeName > b.volumeName) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
$: manga = $catalog?.find((item) => item.id === $page.params.manga)?.manga.sort(sortManga);
|
|
|
|
async function confirmDelete() {
|
|
const title = manga?.[0].mokuroData.title_uuid;
|
|
await db.catalog.delete(title);
|
|
goto('/');
|
|
}
|
|
|
|
function onDelete() {
|
|
promptConfirmation('Are you sure you want to delete this manga?', confirmDelete);
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{manga?.[0].mokuroData.title || 'Manga'}</title>
|
|
</svelte:head>
|
|
{#if manga}
|
|
<div class="p-5 flex flex-col gap-5">
|
|
<div class="flex flex-row justify-between">
|
|
<div class="flex flex-col">
|
|
<h3 class="font-bold">{manga[0].mokuroData.title}</h3>
|
|
<p>Volumes: {manga.length}</p>
|
|
</div>
|
|
<div><Button color="alternative" on:click={onDelete}>Remove manga</Button></div>
|
|
</div>
|
|
<Listgroup items={manga} let:item active class="flex-1 h-full w-full">
|
|
<VolumeItem {item} />
|
|
</Listgroup>
|
|
</div>
|
|
{:else}
|
|
<div class="flex justify-center p-16">Manga not found</div>
|
|
{/if}
|