feat: changes

frontend/app.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="min-h-screen overflow-hidden bg-cool pb-40" data-theme="resticity">
+	<div class="min-h-screen overflow-hidden pb-40" :class="colorClass" data-theme="resticity">
 		<div v-if="loading"><Logo class="h-8 w-auto fill-orange-500 stroke-orange-500" /></div>
 		<NuxtLayout v-else>
 			<NuxtPage />
@@ -10,6 +10,10 @@
 
 <script setup lang="ts">
 	const loading = ref(true)
+	const colorClass = computed(() => {
+		return useColorMode().value === 'dark' ? 'bg-cool' : 'bg-white'
+	})
+
 	onMounted(async () => {
 		await useSettings().init()
 		await useSocket().init()

frontend/components/Backup/List.vue

@@ -3,22 +3,24 @@
 	<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
 		<div
 			v-if="props.showNew"
-			class="opacity-40 border cursor-pointer border-dashed border-sky-500 border-opacity-40 hover:opacity-100 shadow-lg bg-base-300 rounded-lg no-underline hover:bg-sky-500 transition-all hover:bg-opacity-10"
+			class="opacity-40 border cursor-pointer border-dashed border-sky-500 border-opacity-40 hover:opacity-100 shadow-lg rounded-lg no-underline hover:bg-sky-500 transition-all hover:bg-opacity-10"
+			:class="colorClass"
 			@click="isOpen = true"
 		>
 			<div class="p-5">
 				<h3 class="m-0 text-sky-500 font-medium"><FaIcon icon="fa-plus-circle" class="mr-2" />Add Backup</h3>
-				<p class="text-sm opacity-40">Add a new Backup</p>
+				<p class="text-sm" :class="textColorClass">Add a new Backup</p>
 			</div>
 		</div>
 		<NuxtLink
 			:to="`/backups/${backup.id}`"
 			v-for="backup in useSettings().settings?.backups"
-			class="shadow-lg bg-base-300 rounded-lg no-underline hover:bg-sky-500 transition-all hover:bg-opacity-10"
+			class="shadow-lg rounded-lg no-underline hover:bg-sky-500 transition-all hover:bg-opacity-10"
+			:class="colorClass"
 		>
 			<div class="p-5 pb-0">
 				<h3 class="m-0 text-sky-500 font-medium"><FaIcon icon="folder-open" class="mr-2" />{{ backup.name }}</h3>
-				<p class="text-xs opacity-50 break-words">{{ backup.path }}</p>
+				<p class="text-xs break-words" :class="textColorClass">{{ backup.path }}</p>
 				<div :class="useJobs().backupIsRunning(backup.id) ? 'opacity-100' : 'opacity-0'">
 					<span class="loading loading-infinity loading-sm text-orange-500"></span>
 				</div>
@@ -67,4 +69,12 @@
 		await useSettings().save()
 		isOpen.value = false
 	}
+
+	const colorClass = computed(() => {
+		return useColorMode().value === 'dark' ? 'bg-base-300' : 'bg-base-300 bg-opacity-10'
+	})
+
+	const textColorClass = computed(() => {
+		return useColorMode().value === 'dark' ? 'opacity-50' : 'text-black'
+	})
 </script>

frontend/components/HeaderNavBar.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="bg-gray-950 py-3">
+	<div class="py-3" :class="colorClass">
 		<div class="md:container md:mx-auto flex justify-between">
 			<div class=""><Logo class="h-10 w-10" /></div>
 			<div class="">
@@ -17,7 +17,10 @@
 						<UButton to="/schedules" variant="ghost" :color="useRoute().path.includes('schedules') ? 'yellow' : 'gray'" icon="i-heroicons-clock"> Schedules </UButton>
 					</li>
 					<li>
-						<UButton to="/logs" variant="ghost" :color="useRoute().path.includes('logs') ? 'blue' : 'gray'" icon="i-heroicons-clock">Logs</UButton>
+						<UButton to="/logs" variant="ghost" :color="useRoute().path.includes('logs') ? 'blue' : 'gray'" icon="i-heroicons-document-text">Logs</UButton>
+					</li>
+					<li>
+						<UButton to="/settings" variant="ghost" :color="useRoute().path.includes('settings') ? 'green' : 'gray'" icon="i-heroicons-cog-6-tooth">Settings</UButton>
 					</li>
 				</ul>
 			</div>
@@ -26,4 +29,8 @@
 	</div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+	const colorClass = computed(() => {
+		return useColorMode().value === 'dark' ? 'bg-gray-950' : 'bg-gray-950 bg-opacity-10'
+	})
+</script>

frontend/components/Repository/List.vue

@@ -3,22 +3,24 @@
 	<div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-5">
 		<div
 			v-if="showNew"
-			class="cursor-pointer opacity-40 border border-dashed border-purple-500 border-opacity-40 hover:opacity-100 shadow-lg bg-base-300 rounded-lg no-underline hover:bg-purple-500 transition-all hover:bg-opacity-10"
+			class="cursor-pointer opacity-40 border border-dashed border-purple-500 border-opacity-40 hover:opacity-100 shadow-lg rounded-lg no-underline hover:bg-purple-500 transition-all hover:bg-opacity-10"
+			:class="colorClass"
 			@click="isOpen = true"
 		>
 			<div class="p-5">
 				<h3 class="m-0 text-purple-500 p-0"><FaIcon icon="fa-plus-circle" class="mr-2" />Add Repository</h3>
-				<p class="text-sm opacity-40">Initialize a new or connect an existing repository</p>
+				<p class="text-sm" :class="textColorClass">Initialize a new or connect an existing repository</p>
 			</div>
 		</div>
 		<NuxtLink
 			:to="`/repositories/${repo.id}`"
 			v-for="repo in useSettings().settings?.repositories"
-			class="shadow-lg bg-base-300 rounded-lg no-underline hover:bg-purple-500 transition-all hover:bg-opacity-10"
+			class="shadow-lg rounded-lg no-underline hover:bg-purple-500 transition-all hover:bg-opacity-10"
+			:class="colorClass"
 		>
 			<div class="p-5 pb-0">
 				<h3 class="m-0 font-medium text-purple-500 p-0"><UIcon :name="getRepoIcon(repo)" class="mr-2" />{{ repo.name }}</h3>
-				<p class="text-xs break-words opacity-50 p-0 m-0">{{ repo.path }}</p>
+				<p class="text-xs break-words p-0 m-0" :class="textColorClass">{{ repo.path }}</p>
 				<div :class="useJobs().repoIsSynching(repo.id) || useJobs().repoIsRunning(repo.id) ? 'opacity-100' : 'opacity-0'">
 					<span class="loading loading-infinity loading-sm text-orange-500"></span>
 				</div>
@@ -42,4 +44,11 @@
 	import { getRepoIcon } from '~/utils'
 
 	const isOpen = ref(false)
+
+	const colorClass = computed(() => {
+		return useColorMode().value === 'dark' ? 'bg-base-300' : 'bg-base-300 bg-opacity-10'
+	})
+	const textColorClass = computed(() => {
+		return useColorMode().value === 'dark' ? 'opacity-50' : 'text-black'
+	})
 </script>

frontend/components/Schedule/List.vue

@@ -2,7 +2,7 @@
 	<div>
 		<h1 class="text-yellow-500 font-bold mb-3"><UIcon name="i-heroicons-clock" class="mr-2" />Schedules</h1>
 
-		<UTable :rows="useSettings().settings?.schedules" :columns="columns" class="bg-gray-950 rounded-xl bg-opacity-50 shadow-lg" @select="">
+		<UTable :rows="useSettings().settings?.schedules" :columns="columns" class="rounded-xl bg-opacity-50 shadow-lg" :class="colorClass" @select="">
 			<template #id-data="{ row }">
 				<div class="inline-flex items-center gap-1">
 					<UTooltip :text="row.id"
@@ -154,4 +154,8 @@
 	onUnmounted(() => {
 		useSettings().refresh()
 	})
+
+	const colorClass = computed(() => {
+		return useColorMode().value === 'dark' ? 'bg-gray-950' : 'bg-white'
+	})
 </script>

frontend/components/Schedule/New.vue

@@ -1,7 +1,7 @@
 <template>
-	<div class="bg-gray-950 p-5 rounded-lg mt-10 bg-opacity-50 shadow-lg">
+	<div class="p-5 rounded-lg mt-10 bg-opacity-50 shadow-lg" :class="colorClass">
 		<h1 class="text-yellow-700 font-bold">Add a new task to schedule</h1>
-		<p class="opacity-40 mb-3">Create a new schedule to either run manually or in the background at a specific time.</p>
+		<p class="mb-3">Create a new schedule to either run manually or in the background at a specific time.</p>
 		<UButtonGroup class="">
 			<USelectMenu v-model="selectedAction" :options="actionOptions" class="w-44">
 				<template #label>
@@ -103,4 +103,8 @@
 		selectedAction.value = actionOptions[0]
 		useSettings().save()
 	}
+
+	const colorClass = computed(() => {
+		return useColorMode().value === 'dark' ? 'bg-gray-950' : 'bg-white'
+	})
 </script>

frontend/composables/useApi.ts

@@ -27,6 +27,7 @@ export const useApi = defineStore('useApi', () => {
 	const checkRepository = async (repo: any) => (await useHttp.post(`/check`, repo, {}, { title: 'Check Repository', text: 'Repository can be used' })) ?? {}
 	const initRepository = async (repo: any) => (await useHttp.post(`/init`, repo, {}, { title: 'Init Repository', text: 'Repository initialized' })) ?? {}
 	const autoCompletePath = async (path: string) => (await useHttp.get(`/path/autocomplete`, { path })) ?? []
+	const getLogs = async () => (await useHttp.get(`/logs`)) ?? ({ logs: [], errors: [] } as { logs: string[]; errors: string[] })
 
 	return {
 		browseSnapshot,
@@ -42,5 +43,6 @@ export const useApi = defineStore('useApi', () => {
 		initRepository,
 		statRepository,
 		autoCompletePath,
+		getLogs,
 	}
 })

frontend/composables/useJobs.ts

@@ -3,7 +3,6 @@ export const useJobs = defineStore('useJobs', () => {
 	const progress = ref([])
 
 	function scheduleIsRunning(id: string) {
-		console.log('running.value', running.value)
 		const j = running.value?.find((job: any) => job.id === id)
 
 		if (j) {

frontend/composables/useLogs.ts

@@ -10,13 +10,17 @@ export const useLogs = defineStore('useLogs', () => {
 		if (out.value[id] === undefined) {
 			out.value[id] = []
 		}
-		out.value[id].push(data)
+		if (data !== '') {
+			out.value[id].push(data)
+		}
 	}
 	function setErr(id: string, data: string) {
 		if (err.value[id] === undefined) {
 			err.value[id] = []
 		}
-		err.value[id].push(data)
+		if (data !== '') {
+			err.value[id].push(data)
+		}
 	}
 
 	return {

frontend/nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 	ssr: false,
-	modules: ['@pinia/nuxt', '@nuxt/ui'],
+	modules: ['@pinia/nuxt', '@nuxt/ui', '@nuxtjs/color-mode'],
 	devtools: { enabled: true },
 	nitro: { static: true },
 

frontend/package.json

@@ -28,6 +28,7 @@
     "@iconify-json/fa6-regular": "^1.1.18",
     "@iconify-json/logos": "^1.1.42",
     "@nuxt/ui": "^2.11.1",
+    "@nuxtjs/color-mode": "^3.3.2",
     "@pinia/nuxt": "^0.5.1",
     "@tailwindcss/typography": "^0.5.10",
     "cron-parser": "^4.9.0",

frontend/package.json.md5

@@ -1 +1 @@
-26cd6873ccfce3528f1fc5af528fdeee
+789dd825e4c8758cff508b1ffad9e31f

frontend/pages/backups/[id].vue

@@ -28,7 +28,6 @@
 	const openDelete = ref(false)
 	const backup = ref<Backup>()
 	const excludes = ref<[]>([])
-	const init = ref(true)
 	const idx = ref(-1)
 
 	const deleteBackup = async () => {
@@ -40,25 +39,20 @@
 	}
 
 	const update = _.debounce(() => {
-		if (init.value) {
-			init.value = false
-			return
-		}
 		backup.value.backup_params = excludes.value
 		useSettings().settings!.backups[idx.value] = backup.value
 		useSettings().save()
 	}, 300)
 
-	watch(
-		() => [JSON.stringify(excludes.value)],
-		() => {
-			update()
-		}
-	)
-
 	onMounted(async () => {
 		backup.value = useSettings().settings!.backups.find((b: Backup) => b.id === useRoute().params.id)
 		idx.value = useSettings().settings!.backups.findIndex((b: Backup) => b.id === backup.value.id)
 		excludes.value = backup.value.backup_params
+		watch(
+			() => [JSON.stringify(excludes.value)],
+			() => {
+				update()
+			}
+		)
 	})
 </script>

frontend/pages/logs.vue

@@ -1,17 +1,25 @@
 <template>
 	<div>
 		<UTabs :items="items">
-			<template #logs>
-				<UAccordion :items="logItems"> </UAccordion>
+			<template #schedulelogs>
+				<UAccordion :items="scheduleLogs"> </UAccordion>
 			</template>
-			<template #errors>
-				<UAccordion :items="errorItems"> </UAccordion>
+			<template #scheduleerrors>
+				<UAccordion :items="scheduleErrors"> </UAccordion>
+			</template>
+			<template #archivelogs>
+				<UAccordion :items="fileLogs"> </UAccordion>
+			</template>
+			<template #archiveerrors>
+				<UAccordion :items="fileErrors"> </UAccordion>
 			</template>
 		</UTabs>
 	</div>
 </template>
 
 <script lang="ts" setup>
+	const fileLogs = ref([])
+	const fileErrors = ref([])
 	const getLabelByScheduleId = (id: string) => {
 		let label = ''
 		const schedule = useSettings().settings.schedules.find((s: Schedule) => s.id === id)
@@ -32,14 +40,26 @@
 	}
 
 	const items = [
-		{ slot: 'logs', label: 'Logs' },
-		{ slot: 'errors', label: 'Errors' },
+		{ slot: 'schedulelogs', label: 'Schedule: Logs' },
+		{ slot: 'scheduleerrors', label: 'Schedule: Errors' },
+		{ slot: 'archivelogs', label: 'Archive: Logs' },
+		{ slot: 'archiveerrors', label: 'Archive: Errors' },
 	]
 
-	const logItems = Object.keys(useLogs().out).map((l) => {
-		return { label: getLabelByScheduleId(l), content: useLogs().out[l], color: 'green' }
+	const scheduleLogs = Object.keys(useLogs().out).map((l) => {
+		return { label: `Schedule: ${getLabelByScheduleId(l)}`, content: useLogs().out[l], color: 'blue' }
 	})
-	const errorItems = Object.keys(useLogs().out).map((l) => {
-		return { label: getLabelByScheduleId(l), content: useLogs().err[l], color: 'red' }
+	const scheduleErrors = Object.keys(useLogs().out).map((l) => {
+		return { label: `Schedule: ${getLabelByScheduleId(l)}`, content: useLogs().err[l], color: 'red' }
+	})
+
+	onMounted(async () => {
+		const { logs, errors } = await useApi().getLogs()
+		fileLogs.value = logs.map((l: string) => {
+			return { slot: 'content', file: l, label: `File: ${l}`, color: 'blue' }
+		})
+		fileErrors.value = errors.map((l: string) => {
+			return { slot: 'content', file: l, label: `File: ${l}`, color: 'red' }
+		})
 	})
 </script>

frontend/pages/repositories/[id]/index.vue

@@ -47,7 +47,6 @@
 	const mountPath = ref('')
 	const shouldMountPath = ref('')
 	const prunes = ref<[]>([])
-	const init = ref(true)
 	const idx = ref(-1)
 	const deleteRepo = async () => {
 		useSettings().settings!.repositories = useSettings().settings!.repositories.filter((item: Repository) => item.id !== repo.value.id)
@@ -77,28 +76,23 @@
 	}
 
 	const update = _.debounce(() => {
-		if (init.value) {
-			init.value = false
-			return
-		}
 		repo.value.prune_params = prunes.value
 		useSettings().settings!.repositories[idx.value] = repo.value
 		useSettings().save()
 	}, 300)
 
-	watch(
-		() => [JSON.stringify(prunes.value)],
-		() => {
-			update()
-		}
-	)
-
 	const repo = ref()
 
 	onMounted(async () => {
 		repo.value = useSettings().settings?.repositories.find((r: Repository) => r.id === useRoute().params.id)
 		prunes.value = repo.value.prune_params
 		idx.value = useSettings().settings!.repositories.findIndex((r: Repository) => r.id === repo.value.id)
 		mountPath.value = useSettings().settings.mounts.find((m: Mount) => m.id === useRoute().params.id)?.path ?? ''
+		watch(
+			() => [JSON.stringify(prunes.value)],
+			() => {
+				update()
+			}
+		)
 	})
 </script>