This commit is contained in:
2025-10-14 14:50:39 +02:00
parent 06eb971af4
commit 772afbc726
9 changed files with 61 additions and 28 deletions

View File

@@ -1,5 +1,5 @@
export default defineAppConfig({ export default defineAppConfig({
ui: { ui: {
colors: { primary: 'pink', secondary: 'blue', success: 'green', info: 'cyan', warning: 'yellow', error: 'red', neutral: 'zinc' }, colors: { primary: 'pink', secondary: 'blue', success: 'green', info: 'cyan', warning: 'yellow', error: 'red', neutral: 'zinc' },
} },
}); });

View File

@@ -30,10 +30,10 @@
<div class="flex text-dimmed gap-2"> <div class="flex text-dimmed gap-2">
<NuxtLink to="https://github.com/C9Glax/tranga" external no-prefetch><Icon name="i-lucide-github" />API</NuxtLink> <NuxtLink to="https://github.com/C9Glax/tranga" external no-prefetch><Icon name="i-lucide-github" />API</NuxtLink>
<NuxtLink to="https://github.com/C9Glax/tranga-website" external no-prefetch <NuxtLink to="https://github.com/C9Glax/tranga-website" external no-prefetch
><Icon name="i-lucide-github" />Website</NuxtLink ><Icon name="i-lucide-github" />Website</NuxtLink
> >
<NuxtLink :to="`${$config.public.openFetch.api.baseURL}swagger`" external no-prefetch <NuxtLink :to="`${$config.public.openFetch.api.baseURL}swagger`" external no-prefetch
><Icon name="i-lucide-book-open" />Swagger</NuxtLink ><Icon name="i-lucide-book-open" />Swagger</NuxtLink
> >
</div> </div>
</template> </template>
@@ -50,5 +50,4 @@
</UMain> </UMain>
</UApp> </UApp>
</template> </template>
<script setup lang="ts"> <script setup lang="ts"></script>
</script>

View File

@@ -11,13 +11,15 @@
<div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between"> <div v-if="manga" class="flex flex-row gap-2 w-full flex-wrap my-2 justify-between">
<div <div
v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) => v-for="mangaconnectorId in manga.mangaConnectorIds.sort((a, b) =>
a.mangaConnectorName < b.mangaConnectorName ? -1 : 1 a.mangaConnectorName < b.mangaConnectorName ? -1 : 1
)" )"
:key="mangaconnectorId.key" :key="mangaconnectorId.key"
class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2"> class="bg-elevated p-1 rounded-lg w-fit flex items-center justify-center gap-2">
<MangaconnectorIcon v-bind="mangaconnectorId" /> <MangaconnectorIcon v-bind="mangaconnectorId" />
<UTooltip <UTooltip
:text="mangaconnectorId.useForDownload ? 'Stop downloading from this website' : 'Download from this website'"> :text="
mangaconnectorId.useForDownload ? 'Stop downloading from this website' : 'Download from this website'
">
<UButton <UButton
:icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'" :icon="mangaconnectorId.useForDownload ? 'i-lucide-cloud-off' : 'i-lucide-cloud-download'"
variant="ghost" variant="ghost"
@@ -31,12 +33,22 @@
<template #header> <template #header>
<h1>Metadata</h1> <h1>Metadata</h1>
</template> </template>
<UTable v-if="metadataFetchers && metadata" :data="metadataFetchers" :columns="[{header: 'Name', id: 'name'}, {header: '', id: 'link'}]"> <UTable
v-if="metadataFetchers && metadata"
:data="metadataFetchers"
:columns="[
{ header: 'Name', id: 'name' },
{ header: '', id: 'link' },
]">
<template #name-cell="{ row }"> <template #name-cell="{ row }">
{{ row.original }} {{ row.original }}
</template> </template>
<template #link-cell="{ row }"> <template #link-cell="{ row }">
<UButton v-if="metadata.find(me => me.metadataFetcherName == row.original)" @click="unlinkMetadataFetcher(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>
@@ -63,12 +75,16 @@ const { data: manga } = await useApi('/v2/Manga/{MangaId}', {
console.error(e); console.error(e);
navigateTo('/'); navigateTo('/');
}, },
lazy: true lazy: true,
}); });
const libraryId = computed(() => manga.value?.fileLibraryId); const libraryId = computed(() => manga.value?.fileLibraryId);
const { data: metadataFetchers } = await useApi('/v2/MetadataFetcher', { key: FetchKeys.Metadata.Fetchers, lazy: true }); 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), lazy: true }); 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 $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', { await $api('/v2/Manga/{MangaId}/DownloadFrom/{MangaConnectorName}/{IsRequested}', {
@@ -79,9 +95,12 @@ const setRequestedFrom = async (MangaConnectorName: string, IsRequested: boolean
}; };
const unlinkMetadataFetcher = async (metadataFetcherName: string) => { const unlinkMetadataFetcher = async (metadataFetcherName: string) => {
await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', { method: 'POST', path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName } }); await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Unlink/{MangaId}', {
await refreshNuxtData(FetchKeys.Metadata.Manga(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>

View File

@@ -3,8 +3,14 @@
<h1 class="text-2xl text-secondary font-semibold">{{ metadataFetcherName }}</h1> <h1 class="text-2xl text-secondary font-semibold">{{ metadataFetcherName }}</h1>
<USkeleton v-if="status === 'pending'" class="w-full h-14" /> <USkeleton v-if="status === 'pending'" class="w-full h-14" />
<UCard v-else class="flex flex-wrap gap-2 basis-0"> <UCard v-else class="flex flex-wrap gap-2 basis-0">
<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"> <div
<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" /> 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">
<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" />
<a :href="data.url ?? undefined"> <a :href="data.url ?? undefined">
<h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2> <h2 class="text-xl font-semibold text-primary">{{ data.name }}</h2>
</a> </a>
@@ -15,7 +21,6 @@
</MangaDetailPage> </MangaDetailPage>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
const route = useRoute(); const route = useRoute();
const mangaId = route.params.mangaId as string; const mangaId = route.params.mangaId as string;
@@ -35,13 +40,17 @@ const { data: searchData, status } = await useApi('/v2/MetadataFetcher/{Metadata
method: 'POST', method: 'POST',
path: { MetadataFetcherName: metadataFetcherName, MangaId: mangaId }, path: { MetadataFetcherName: metadataFetcherName, MangaId: mangaId },
lazy: true, lazy: true,
}) });
const link = async (identifier: string) => { const link = async (identifier: string) => {
await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Link/{MangaId}', { method: 'POST' ,path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName }, body: identifier }); await $api('/v2/MetadataFetcher/{MetadataFetcherName}/Link/{MangaId}', {
await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId) ); method: 'POST',
path: { MangaId: mangaId, MetadataFetcherName: metadataFetcherName },
body: identifier,
});
await refreshNuxtData(FetchKeys.Metadata.Manga(mangaId));
navigateTo(`/manga/${mangaId}`); navigateTo(`/manga/${mangaId}`);
} };
useHead({ title: `Link Metadata ${manga.value?.name} ${metadataFetcherName}` }); useHead({ title: `Link Metadata ${manga.value?.name} ${metadataFetcherName}` });
</script> </script>

View File

@@ -4,7 +4,13 @@
<div class="flex flex-row justify-evenly items-center"> <div class="flex flex-row justify-evenly items-center">
<MangaCard v-if="manga" :manga="manga" :expanded="true" /> <MangaCard v-if="manga" :manga="manga" :expanded="true" />
<USkeleton v-else class="max-w-[600px] w-full h-[350px]" /> <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
<UButton icon="i-lucide-merge" :class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10']" size="xl" variant="ghost" color="neutral" @click="reverse = !reverse" /> <UButton
icon="i-lucide-merge"
:class="[reverse ? 'rotate-270' : 'rotate-90', 'px-20 transition-transform duration-200 p-5 m-10']"
size="xl"
variant="ghost"
color="neutral"
@click="reverse = !reverse" />
<MangaCard v-if="target" :manga="target" :expanded="true" /> <MangaCard v-if="target" :manga="target" :expanded="true" />
<USkeleton v-else class="max-w-[600px] w-full h-[350px]" /> <USkeleton v-else class="max-w-[600px] w-full h-[350px]" />
</div> </div>
@@ -28,7 +34,7 @@ const merge = async () => {
const to = reverse.value == false ? targetId : mangaId; const to = reverse.value == false ? targetId : mangaId;
await $api('/v2/Manga/{MangaIdFrom}/MergeInto/{MangaIdInto}', { method: 'POST', path: { MangaIdFrom: from, MangaIdInto: to } }); await $api('/v2/Manga/{MangaIdFrom}/MergeInto/{MangaIdInto}', { method: 'POST', path: { MangaIdFrom: from, MangaIdInto: to } });
navigateTo(`/manga/${to}`); navigateTo(`/manga/${to}`);
} };
useHead({ title: `Merge ${manga.value?.name} with ${target.value?.name}` }); useHead({ title: `Merge ${manga.value?.name} with ${target.value?.name}` });
</script> </script>

View File

@@ -6,7 +6,7 @@
> >
<UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0"> <UPageBody class="p-4 flex flex-row flex-wrap gap-6 mt-0">
<USkeleton v-if="!mangas" class="w-full h-[350px]" /> <USkeleton v-if="!mangas" class="w-full h-[350px]" />
<NuxtLink v-for="m in mangas.filter(m => m.key != mangaId)" v-else :key="m.key" :to="m.key"> <NuxtLink v-for="m in mangas.filter((m) => m.key != mangaId)" v-else :key="m.key" :to="m.key">
<MangaCard :manga="m" /> <MangaCard :manga="m" />
</NuxtLink> </NuxtLink>
</UPageBody> </UPageBody>

View File

@@ -99,7 +99,7 @@ const performSearch = () => {
const search = async (query: string): Promise<MinimalManga[]> => { const search = async (query: string): Promise<MinimalManga[]> => {
if (isUrl(query)) { if (isUrl(query)) {
const { data } = await useApi('/v2/Search', { query: {url : JSON.stringify(query) } }); const { data } = await useApi('/v2/Search', { query: { url: JSON.stringify(query) } });
if (data.value) { if (data.value) {
connector.value = connectors.value!.find((c) => c.name == data.value!.mangaConnectorIds[0]!.mangaConnectorName)!; connector.value = connectors.value!.find((c) => c.name == data.value!.mangaConnectorIds[0]!.mangaConnectorName)!;
return [data.value]; return [data.value];

View File

@@ -13,4 +13,4 @@ export default defineNuxtConfig({
}, },
vite: { plugins: [tailwindcss()] }, vite: { plugins: [tailwindcss()] },
nitro: { prerender: { failOnError: false } }, nitro: { prerender: { failOnError: false } },
}); });

View File

@@ -8,5 +8,5 @@
{ "path": "./.nuxt/tsconfig.node.json" } { "path": "./.nuxt/tsconfig.node.json" }
], ],
"compileOnSave": true, "compileOnSave": true,
"compilerOptions": { "noUncheckedIndexedAccess": true, "module": "ESNext", "moduleResolution": "Bundler"} "compilerOptions": { "noUncheckedIndexedAccess": true, "module": "ESNext", "moduleResolution": "Bundler" }
} }