feat(web): pause and resume jobs (#2125)

* feat(web): pause and resume jobs

* add bg color to status instead of using badge

* styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/routes/admin/jobs-status/+page.server.ts

@@ -1,18 +1,25 @@
+import { AppRoute } from '$lib/constants';
 import { redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
-export const load: PageServerLoad = async ({ parent }) => {
-	const { user } = await parent();
-
+export const load = (async ({ locals: { user, api } }) => {
 	if (!user) {
-		throw redirect(302, '/auth/login');
+		throw redirect(302, AppRoute.AUTH_LOGIN);
 	} else if (!user.isAdmin) {
-		throw redirect(302, '/photos');
+		throw redirect(302, AppRoute.PHOTOS);
 	}
 
-	return {
-		meta: {
-			title: 'Job Status'
-		}
-	};
-};
+	try {
+		const { data: jobs } = await api.jobApi.getAllJobsStatus();
+
+		return {
+			jobs,
+			meta: {
+				title: 'Job Status'
+			}
+		};
+	} catch (err) {
+		console.error('[jobs] > getAllJobsStatus', err);
+		throw err;
+	}
+}) satisfies PageServerLoad;

web/src/routes/admin/jobs-status/+page.svelte

@@ -1,7 +1,26 @@
-<script>
+<script lang="ts">
 	import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
+	import { api } from '@api';
+	import { onDestroy, onMount } from 'svelte';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+	let jobs = data.jobs;
+	let timer: NodeJS.Timer;
+
+	const load = async () => {
+		const { data } = await api.jobApi.getAllJobsStatus();
+		jobs = data;
+	};
+
+	onMount(async () => {
+		await load();
+		timer = setInterval(load, 5_000);
+	});
+
+	onDestroy(() => {
+		clearInterval(timer);
+	});
 </script>
 
-<section>
-	<JobsPanel />
-</section>
+<JobsPanel {jobs} />