feat: task page

packages/web/src/routes/progress/+page.svelte

@@ -21,10 +21,25 @@
 	<tbody>
 		{#each data.tasks as task}
 			<tr>
-				<td>{task.id}</td>
-				<td>{task.name}</td>
-				<td>{task.progress}</td>
-				<td><button>Delete</button></td>
+				<td>
+					<a href={'/progress/' + task.id}>
+						{task.id}
+					</a>
+				</td><td>
+					<a href={'/progress/' + task.id}>
+						{task.name}
+					</a>
+				</td>
+				<td>
+					<a href={'/progress/' + task.id}>
+						{task.progress}
+					</a>
+				</td>
+				<td>
+					<a href={'/progress/' + task.id}>
+						<button>Delete</button>
+					</a>
+				</td>
 			</tr>
 		{/each}</tbody
 	>

packages/web/src/routes/progress/[id]/+page.server.ts

@@ -0,0 +1,8 @@
+import { db, tasks } from "$lib/db/schema"
+import { eq } from "drizzle-orm"
+
+export const load = async ({ params }) => {
+	return {
+		task: (await db.select().from(tasks).where(eq(tasks.id, params.id)))[0]
+	}
+}

packages/web/src/routes/progress/[id]/+page.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	let { data } = $props();
+</script>
+
+<h1 class="my-4 text-2xl font-bold text-center">{data.task.name}</h1>

packages/web/src/routes/progress/create/+page.server.ts

@@ -5,8 +5,8 @@ export const actions = {
 	default: async ({ request }) => {
 		const data = await request.formData()
 
-		await db.insert(tasks).values({ name: data.get('name') })
+		const task = await db.insert(tasks).values({ name: data.get('name') }).returning()
 
-		redirect(303, '/progress')
+		redirect(303, '/progress/' + task[0].id)
 	}
 }

packages/web/src/routes/progress/create/+page.svelte

@@ -3,7 +3,7 @@
 
 	<div class="flex gap-4">
 		<label for="name">Name: </label>
-		<input type="text" id="name" class="border rounded" />
+		<input type="text" name="name" class="border rounded" />
 	</div>
 
 	<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>