glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-16 18:30:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Settings move API Url to top, hide settings when not connected

Browse Source
This commit is contained in:
glax
2025-10-16 00:16:02 +02:00
parent 35ca5b9550
commit 20c9824ce1
3 changed files with 17 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
website/app/components/FileLibraries.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<UPageList class="gap-2"> <div class="flex flex-row flex-wrap">
<UPageCard <UPageCard
v-for="l in fileLibraries" v-for="l in fileLibraries"
:key="l.key" :key="l.key"
@@ -8,9 +8,9 @@
:title="l.libraryName" :title="l.libraryName"
:description="l.basePath" :description="l.basePath"
orientation="horizontal"> orientation="horizontal">
<UButton color="warning" :loading="busy" @click="deleteLibrary(l)">Delete</UButton> <UButton color="warning" :loading="busy" class="w-fit justify-self-end" @click="deleteLibrary(l)">Delete</UButton>
</UPageCard> </UPageCard>
</UPageList> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

1
website/app/composables/FetchKeys.ts
View File

@@ -5,4 +5,5 @@ export const FetchKeys = {
MangaConnector: { Id: (id: string) => `MangaConnector/${id}`, All: 'MangaConnector' }, MangaConnector: { Id: (id: string) => `MangaConnector/${id}`, All: 'MangaConnector' },
Metadata: { Fetchers: 'Metadata', Links: 'Metadata/Links', Manga: (mangaId: string) => `Metadata/Links/${mangaId}` }, Metadata: { Fetchers: 'Metadata', Links: 'Metadata/Links', Manga: (mangaId: string) => `Metadata/Links/${mangaId}` },
Libraries: { All: 'Libraries', Id: (id: string) => `Libraries/${id}` }, Libraries: { All: 'Libraries', Id: (id: string) => `Libraries/${id}` },
Settings: { All: 'Settings' },
}; };

20
website/app/pages/settings.vue
View File

@@ -1,13 +1,21 @@
<template> <template>
<UPageBody> <UPageBody>
<UPageSection title="Settings"> <UPageSection title="Settings">
<UCard> <template #description>
<div>
<p>API Url</p>
<UInput v-model="apiUrl" class="max-w-full w-xs" placeholder="http://<ip:port>/" />
<UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
<p v-if="settingsStatus === 'error'" class="text-warning">Unable to connect to api.</p>
</div>
</template>
<UCard v-if="settingsStatus === 'success'">
<template #header> <template #header>
<h1>Libraries</h1> <h1>Libraries</h1>
</template> </template>
<template #footer> <template #footer>
<div class="flex flex-row gap-2"> <div class="flex flex-row gap-2">
<UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add</UButton> <UButton icon="i-lucide-plus" class="w-fit" @click="addLibraryModal.open()">Add FileLibrary</UButton>
<UTooltip :text="komgaConnected ? 'Disconnect Komga' : 'Connect Komga'"> <UTooltip :text="komgaConnected ? 'Disconnect Komga' : 'Connect Komga'">
<UButton <UButton
:icon="komgaConnected ? 'i-lucide-unlink' : 'i-lucide-link'" :icon="komgaConnected ? 'i-lucide-unlink' : 'i-lucide-link'"
@@ -26,17 +34,13 @@
</template> </template>
<FileLibraries /> <FileLibraries />
</UCard> </UCard>
<UCard> <UCard v-if="settingsStatus === 'success'">
<template #header> <template #header>
<h1>Maintenance</h1> <h1>Maintenance</h1>
</template> </template>
<UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit mb-2" @click="cleanUpDatabase" <UButton icon="i-lucide-database" :loading="cleanUpDatabaseBusy" class="w-fit mb-2" @click="cleanUpDatabase"
>Clean database</UButton >Clean database</UButton
> >
<UFormField label="API Url" name="apiUrl">
<UInput v-model="apiUrl" class="max-w-full w-xs" placeholder="http://<ip:port>/" />
<UButton :loading="reloading" class="mx-1" @click="setUrl">Set</UButton>
</UFormField>
</UCard> </UCard>
</UPageSection> </UPageSection>
</UPageBody> </UPageBody>
@@ -91,5 +95,7 @@ const onKavitaClick = async () => {
} }
}; };
const { data: settings, status: settingsStatus } = useApi('/v2/Settings', { key: FetchKeys.Settings.All });
useHead({ title: 'Settings' }); useHead({ title: 'Settings' });
</script> </script>