glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-15 09:50:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Metadata linking page

Browse Source
This commit is contained in:
glax
2025-10-14 13:40:41 +02:00
parent cdcc953ea2
commit d527f23990
3 changed files with 34 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/app/components/MangaCover.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div <div
class="relative max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) rounded-lg overflow-clip"> class="relative object-contain max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) rounded-lg overflow-clip">
<div <div
v-if="blur" v-if="blur"
class="absolute l-0 t-0 w-full h-full rounded-lg overflow-clip" class="absolute l-0 t-0 w-full h-full rounded-lg overflow-clip"

12
website/app/pages/manga/[mangaId]/index.vue
View File

@@ -35,7 +35,7 @@
{{ row.original }} {{ row.original }}
</template> </template>
<template #link-cell="{ row }"> <template #link-cell="{ row }">
<UButton v-if="metadata.find(me => me.metadataFetcherName == row.original)">Unlink</UButton> <UButton v-if="metadata.find(me => me.metadataFetcherName == row.original)" @click="unlinkMetadataFetcher(row.original)">Unlink</UButton>
<UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`">Link</UButton> <UButton v-else :to="`/manga/${mangaId}/linkMetadata/${row.original}`">Link</UButton>
</template> </template>
</UTable> </UTable>
@@ -62,11 +62,12 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
console.error(e); console.error(e);
navigateTo('/'); navigateTo('/');
}, },
lazy: true
}); });
const libraryId = ref(manga.value?.fileLibraryId); const libraryId = ref(manga.value?.fileLibraryId);
const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers }); const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers, lazy: true });
const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Metadata.Manga(mangaId) }); const { data: metadata } = await useApi('/v2/MetadataFetcher/Links/{MangaId}', { path: { MangaId: mangaId }, key: FetchKeys.Metadata.Manga(mangaId), lazy: true });
const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean) => { const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean) => {
await useApi('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', { await useApi('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
@@ -76,5 +77,10 @@ const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean
await refreshNuxtData(FetchKeys.Manga.Id(mangaId)); await refreshNuxtData(FetchKeys.Manga.Id(mangaId));
}; };
const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', { method: 'POST', path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName } });
await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) );
}
useHead({ title: `Manga ${manga.value?.name}` }); useHead({ title: `Manga ${manga.value?.name}` });
</script> </script>

32
website/app/pages/manga/[mangaId]/linkMetadata/[metadataFetcherName].vue
View File

@@ -1,12 +1,16 @@
<template> <template>
<MangaDetailPage :manga="manga"> <MangaDetailPage :manga="manga" :back-path="`/manga/${mangaId}`">
<UCard> <h1 class="text-2xl text-secondary font-semibold">{{ metadataFetcherName }}</h1>
<template #header> <USkeleton v-if="status === 'pending'" class="w-full h-14" />
<h1>{{ metadataFetcherName }}</h1> <UCard v-else class="flex flex-wrap gap-2 basis-0">
</template> <div v-for="data in searchData" :key="data.identifier" class="grid grid-cols-[var(--mangacover-width)_auto_auto] auto-rows-fr grid-flow-col gap-4">
<template #default> <NuxtImg :src="data.coverUrl ?? '/blahaj.png'" alt="cover" class="row-span-3 object-contain max-sm:w-[calc(var(--mangacover-width)/2)] max-sm:h-[calc(var(--mangacover-height)/2)] w-(--mangacover-width) h-(--mangacover-height) rounded-lg overflow-clip" />
<p>tbd</p> <a :href="data.url ?? undefined">
</template> <h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2>
</a>
<p>{{ data.description }}</p>
<UButton class="w-min h-min px-4 place-self-end" @click="link(data.identifier)">Link</UButton>
</div>
</UCard> </UCard>
</MangaDetailPage> </MangaDetailPage>
</template> </template>
@@ -27,5 +31,17 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
}, },
}); });
const { data: searchData, status } = await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/SearchManga/{MangaId}', {
method: 'POST',
path: { MetadataFetcherName: metadataFetcherName, MangaId: mangaId },
lazy: true,
})
const link = async (identifier: string) => {
await useApi('/v2/MetadataFetcher/{MetadataFetcherName}/Link/{MangaId}', { method: 'POST' ,path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName }, body: identifier });
await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) );
navigateTo(`/manga/${mangaId}`);
}
useHead({ title: `Link Metadata ${manga.value?.name} ${metadataFetcherName}` }); useHead({ title: `Link Metadata ${manga.value?.name} ${metadataFetcherName}` });
</script> </script>