update homepage draft and other pages
This commit is contained in:
18
src/routes/projects/progress/+page.server.ts
Executable file
18
src/routes/projects/progress/+page.server.ts
Executable file
@@ -0,0 +1,18 @@
|
||||
import { db } from '$lib/db';
|
||||
import { tasks } from '$lib/db/schema.js';
|
||||
import { desc } from 'drizzle-orm';
|
||||
|
||||
export const load = async () => {
|
||||
return {
|
||||
tasks: await db.query.tasks.findMany({
|
||||
with: {
|
||||
tasksToTopics: {
|
||||
with: {
|
||||
topic: true
|
||||
}
|
||||
}
|
||||
},
|
||||
orderBy: [desc(tasks.currentPoints)]
|
||||
})
|
||||
};
|
||||
};
|
||||
153
src/routes/projects/progress/+page.svelte
Executable file
153
src/routes/projects/progress/+page.svelte
Executable file
@@ -0,0 +1,153 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
|
||||
let searchTerm = $state('');
|
||||
let filteredTasks = $derived(
|
||||
data.tasks.filter(
|
||||
(task) =>
|
||||
task.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
task.tasksToTopics.some((t) =>
|
||||
t.topic.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
)
|
||||
);
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-center p-4">
|
||||
<div class="w-full max-w-4xl flex flex-col gap-4 items-center mt-4 mb-8">
|
||||
<div class="flex justify-center gap-8">
|
||||
<h1 class="font-bold text-2xl">
|
||||
Tasks ({data.tasks.length})
|
||||
</h1>
|
||||
|
||||
<a href="/progress/topics">
|
||||
<button class="px-4 py-2 bg-gray-800 text-white rounded hover:bg-gray-600 transition">
|
||||
Topics
|
||||
</button>
|
||||
</a>
|
||||
|
||||
{#if data.editable}
|
||||
<a href="/progress/create">
|
||||
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">
|
||||
Create
|
||||
</button>
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- Search Bar -->
|
||||
<div class="w-full max-w-md">
|
||||
<input
|
||||
type="text"
|
||||
bind:value={searchTerm}
|
||||
placeholder="Search tasks or topics..."
|
||||
class="w-full px-4 py-2 rounded bg-gray-800 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
Total progress: {data.tasks.reduce((acc, task) => acc + task.currentPoints, 0)} / {data.tasks.reduce(
|
||||
(acc, task) => acc + task.totalPoints,
|
||||
0
|
||||
)} ({(
|
||||
(data.tasks.reduce((acc, task) => acc + task.currentPoints, 0) /
|
||||
data.tasks.reduce((acc, task) => acc + task.totalPoints, 0)) *
|
||||
100
|
||||
).toFixed(3)}%)
|
||||
</div>
|
||||
|
||||
{#if filteredTasks.length > 0}
|
||||
<div class="overflow-x-auto w-full">
|
||||
<!-- Desktop Table View -->
|
||||
<div class="hidden md:block">
|
||||
<table class="min-w-full">
|
||||
<thead>
|
||||
<tr class="border-b border-white">
|
||||
<th class="px-6 py-3 text-left text-sm font-semibold">Name</th>
|
||||
<th class="px-6 py-3 text-left text-sm font-semibold">Topics</th>
|
||||
<th class="px-6 py-3 text-left text-sm font-semibold min-w-[200px]">Progress</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each filteredTasks as task, index}
|
||||
<tr class="{index % 2 === 0 ? 'bg-black' : 'bg-gray-950'} hover:bg-gray-800">
|
||||
<td class="px-6 py-2 border-b">
|
||||
<a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
|
||||
{data.tasks.indexOf(task) + 1}. {task.name}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-2 border-b">
|
||||
<a href={`/progress/${task.id}`} class="flex gap-2 flex-wrap">
|
||||
{#each task.tasksToTopics as topic}
|
||||
<div
|
||||
class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
|
||||
title="Click for more details about {topic.topic.name}"
|
||||
>
|
||||
{topic.topic.name}
|
||||
</div>
|
||||
{/each}
|
||||
</a>
|
||||
</td>
|
||||
<td class="px-6 py-2 border-b min-w-[200px]">
|
||||
<div class="relative w-full h-6 bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="absolute h-full bg-green-500"
|
||||
style="width: {(task.currentPoints / task.totalPoints) * 100}%"
|
||||
></div>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-sm">
|
||||
{task.currentPoints} / {task.totalPoints} ({(
|
||||
(task.currentPoints / task.totalPoints) *
|
||||
100
|
||||
).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Card View -->
|
||||
<div class="md:hidden space-y-4">
|
||||
{#each filteredTasks as task}
|
||||
<div class="bg-gray-800 rounded-lg p-2 w-full">
|
||||
<a
|
||||
href={`/progress/${task.id}`}
|
||||
class="text-blue-500 hover:underline text-lg font-bold"
|
||||
>
|
||||
{task.name}
|
||||
</a>
|
||||
<div class="mt-1">
|
||||
<div class="mb-1"></div>
|
||||
<span class="font-medium">Topics:</span>
|
||||
<div class="flex flex-wrap gap-1 mt-1">
|
||||
{#each task.tasksToTopics as topic}
|
||||
<div
|
||||
class="bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer"
|
||||
title="Click for more details about {topic.topic.name}"
|
||||
>
|
||||
{topic.topic.name}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-4 bg-gray-700 rounded-full relative overflow-hidden">
|
||||
<div
|
||||
class="absolute h-full bg-green-500"
|
||||
style="width: {(task.currentPoints / task.totalPoints) * 100}%"
|
||||
></div>
|
||||
<span class="absolute inset-0 flex items-center justify-center text-xs">
|
||||
{task.currentPoints} / {task.totalPoints} ({(
|
||||
(task.currentPoints / task.totalPoints) *
|
||||
100
|
||||
).toFixed(1)}%)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-gray-500">
|
||||
No tasks found matching your search. Try a different keyword or clear the search.
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
128
src/routes/projects/progress/[id]/+page.server.ts
Executable file
128
src/routes/projects/progress/[id]/+page.server.ts
Executable file
@@ -0,0 +1,128 @@
|
||||
import { db } from '$lib/db';
|
||||
import { tasks, tasksToTopics, topics } from '$lib/db/schema';
|
||||
import { eq, and } from 'drizzle-orm';
|
||||
|
||||
export const load = async ({ cookies, params }) => {
|
||||
return {
|
||||
task: await db.query.tasks.findFirst({
|
||||
with: {
|
||||
tasksToTopics: {
|
||||
with: {
|
||||
topic: true
|
||||
}
|
||||
}
|
||||
},
|
||||
where: eq(tasks.id, params.id)
|
||||
}),
|
||||
topics: await db.query.topics.findMany(),
|
||||
editable: cookies.get('token')
|
||||
};
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
createTopic: async ({ cookies, request, params }) => {
|
||||
if (!cookies.get('token')) {
|
||||
return { status: 401 };
|
||||
}
|
||||
|
||||
const data = await request.formData();
|
||||
|
||||
const topic = await db
|
||||
.insert(topics)
|
||||
.values({ name: data.get('name') })
|
||||
.returning();
|
||||
|
||||
const existing = await db.query.tasksToTopics.findFirst({
|
||||
where: and(
|
||||
eq(tasksToTopics.taskId, Number(params.id)),
|
||||
eq(tasksToTopics.topicId, topic[0].id)
|
||||
)
|
||||
});
|
||||
|
||||
if (!existing) {
|
||||
await db
|
||||
.insert(tasksToTopics)
|
||||
.values({ taskId: Number(params.id), topicId: topic[0].id })
|
||||
.returning();
|
||||
}
|
||||
},
|
||||
addTopic: async ({ cookies, request, params }) => {
|
||||
if (!cookies.get('token')) {
|
||||
return { status: 401 };
|
||||
}
|
||||
|
||||
const data = await request.formData();
|
||||
|
||||
const topicId = Number(data.get('topic-id'));
|
||||
|
||||
const existing = await db.query.tasksToTopics.findFirst({
|
||||
where: and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
|
||||
});
|
||||
|
||||
console.log(existing);
|
||||
|
||||
if (!existing) {
|
||||
await db
|
||||
.insert(tasksToTopics)
|
||||
.values({ taskId: Number(params.id), topicId })
|
||||
.returning();
|
||||
}
|
||||
},
|
||||
removeTopic: async ({ cookies, request, params }) => {
|
||||
if (!cookies.get('token')) {
|
||||
return { status: 401 };
|
||||
}
|
||||
|
||||
const data = await request.formData();
|
||||
|
||||
const topicId = Number(data.get('topic-id'));
|
||||
|
||||
const existing = await db.query.tasksToTopics.findFirst({
|
||||
where: and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
|
||||
});
|
||||
|
||||
if (existing) {
|
||||
await db
|
||||
.delete(tasksToTopics)
|
||||
.where(
|
||||
and(eq(tasksToTopics.taskId, Number(params.id)), eq(tasksToTopics.topicId, topicId))
|
||||
);
|
||||
}
|
||||
},
|
||||
updateProgress: async ({ cookies, request, params }) => {
|
||||
if (!cookies.get('token')) {
|
||||
return { status: 401 };
|
||||
}
|
||||
|
||||
const data = await request.formData();
|
||||
|
||||
const currentPoints =
|
||||
Number(data.get('currentPoints')) <= Number(data.get('totalPoints'))
|
||||
? Number(data.get('currentPoints'))
|
||||
: Number(data.get('totalPoints'));
|
||||
|
||||
await db
|
||||
.update(tasks)
|
||||
.set({
|
||||
currentPoints,
|
||||
totalPoints: Number(data.get('totalPoints')),
|
||||
updatedAt: new Date()
|
||||
})
|
||||
.where(eq(tasks.id, Number(params.id)));
|
||||
},
|
||||
updateNotes: async ({ cookies, request, params }) => {
|
||||
if (!cookies.get('token')) {
|
||||
return { status: 401 };
|
||||
}
|
||||
|
||||
const data = await request.formData();
|
||||
|
||||
await db
|
||||
.update(tasks)
|
||||
.set({
|
||||
notes: data.get('notes') as string,
|
||||
updatedAt: new Date()
|
||||
})
|
||||
.where(eq(tasks.id, Number(params.id)));
|
||||
}
|
||||
};
|
||||
174
src/routes/projects/progress/[id]/+page.svelte
Executable file
174
src/routes/projects/progress/[id]/+page.svelte
Executable file
@@ -0,0 +1,174 @@
|
||||
<script lang="ts">
|
||||
import Check from 'lucide-svelte/icons/check';
|
||||
import * as Command from '$lib/components/ui/command';
|
||||
import * as Popover from '$lib/components/ui/popover';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { cn } from '$lib/utils.js';
|
||||
import { tick } from 'svelte';
|
||||
|
||||
let { data } = $props();
|
||||
|
||||
let open = $state(false);
|
||||
let value = $state('');
|
||||
let search = $state('');
|
||||
let triggerRef = $state<any>();
|
||||
let addTopicForms = $state<HTMLFormElement[]>([]);
|
||||
|
||||
// We want to refocus the trigger button when the user selects
|
||||
// an item from the list so users can continue navigating the
|
||||
// rest of the form with the keyboard.
|
||||
function closeAndFocusTrigger() {
|
||||
open = false;
|
||||
tick().then(() => {
|
||||
triggerRef.focus();
|
||||
});
|
||||
}
|
||||
|
||||
function getProgress() {
|
||||
return (data.task?.currentPoints / data.task?.totalPoints) * 100;
|
||||
}
|
||||
</script>
|
||||
|
||||
<h1 class="my-4 text-2xl font-bold text-center">{data.task?.name}</h1>
|
||||
|
||||
<div class="my-4">
|
||||
<div class="flex justify-center gap-4 items-center relative">
|
||||
<h2 class="text-xl font-semibold">Topics ({data.task?.tasksToTopics.length})</h2>
|
||||
|
||||
<Popover.Root bind:open>
|
||||
<Popover.Trigger bind:this={triggerRef}>
|
||||
{#if data.editable}
|
||||
<Button variant="outline" class="justify-between" role="combobox" aria-expanded={open}>
|
||||
+
|
||||
</Button>
|
||||
{/if}
|
||||
</Popover.Trigger>
|
||||
<Popover.Content class="w-[200px] p-0">
|
||||
<Command.Root>
|
||||
<Command.Input bind:value={search} placeholder="Search topic..." />
|
||||
<Command.List>
|
||||
<div class="flex flex-col items-center p-2">
|
||||
<Command.Group>
|
||||
{#each data.topics as topic}
|
||||
<form
|
||||
action="?/addTopic"
|
||||
method="post"
|
||||
bind:this={addTopicForms[topic.id]}
|
||||
onsubmit={() => (value = topic.id.toString())}
|
||||
>
|
||||
<input type="hidden" name="topic-id" value={topic.id} />
|
||||
<Command.Item
|
||||
value={topic.name!}
|
||||
onSelect={() => {
|
||||
addTopicForms[topic.id].submit();
|
||||
closeAndFocusTrigger();
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
class={cn(
|
||||
'mr-2 size-4',
|
||||
value !== topic.id.toString() && 'text-transparent'
|
||||
)}
|
||||
/>
|
||||
{topic.name}
|
||||
</Command.Item>
|
||||
</form>
|
||||
{/each}
|
||||
</Command.Group>
|
||||
|
||||
<form method="post" action="?/createTopic">
|
||||
<input type="hidden" name="name" value={search} />
|
||||
<button class="px-4 py-2 rounded bg-secondary">Add Topic</button>
|
||||
</form>
|
||||
</div>
|
||||
</Command.List>
|
||||
</Command.Root>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
</div>
|
||||
<div class="flex justify-center flex-wrap gap-2 my-1 relative">
|
||||
{#if data.task?.tasksToTopics}
|
||||
{#each data.task?.tasksToTopics as topic}
|
||||
<a href="/progress/topics/{topic.topic.id}">
|
||||
<div
|
||||
class="relative bg-blue-500 text-white rounded-full px-2 py-1 shadow font-medium hover:bg-blue-600 transition cursor-pointer group"
|
||||
title="Click for more details about {topic.topic.name}"
|
||||
>
|
||||
{topic.topic.name}
|
||||
<form
|
||||
action="?/removeTopic"
|
||||
method="post"
|
||||
class="absolute -top-1 -right-1 opacity-0 group-hover:opacity-100 transition"
|
||||
>
|
||||
<input type="hidden" name="topic-id" value={topic.topic.id} />
|
||||
<button
|
||||
type="submit"
|
||||
onclick={(e) => {
|
||||
e.preventDefault();
|
||||
e.target.closest('form')?.submit();
|
||||
}}
|
||||
class="bg-white text-red-500 hover:text-red-700 hover:bg-red-50 font-bold rounded-full w-5 h-5 flex items-center justify-center shadow-sm"
|
||||
aria-label="Remove topic"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-8">
|
||||
<h2 class="text-xl font-semibold text-center mb-4">Progress ({getProgress().toFixed(2)}%)</h2>
|
||||
|
||||
<div class="flex items-center gap-4 max-w-xl mx-auto">
|
||||
<form method="POST" action="?/updateProgress" class="flex items-center gap-4 w-full">
|
||||
<input
|
||||
type="number"
|
||||
name="currentPoints"
|
||||
value={data.task?.currentPoints}
|
||||
class="w-20 p-2 border rounded"
|
||||
min="0"
|
||||
readonly={!data.editable}
|
||||
onchange={(e) => e.target.form?.submit()}
|
||||
/>
|
||||
|
||||
<div class="flex-1">
|
||||
<div class="w-full rounded-full h-4">
|
||||
<progress max="100" value={getProgress()}>{getProgress()}%</progress>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
name="totalPoints"
|
||||
value={data.task?.totalPoints}
|
||||
class="w-20 p-2 border rounded"
|
||||
readonly={!data.editable}
|
||||
min="1"
|
||||
onchange={(e) => e.target.form?.submit()}
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="my-8">
|
||||
<h2 class="text-xl font-semibold text-center mb-4">Notes</h2>
|
||||
|
||||
<form method="POST" action="?/updateNotes" class="max-w-xl mx-auto">
|
||||
<textarea
|
||||
name="notes"
|
||||
class="w-full p-3 border rounded min-h-[150px] resize-y"
|
||||
placeholder="Add notes about this task..."
|
||||
readonly={!data.editable}
|
||||
onchange={(e) => data.editable && e.target.form?.submit()}>{data.task?.notes || ''}</textarea
|
||||
>
|
||||
|
||||
{#if data.editable}
|
||||
<div class="flex justify-end mt-2">
|
||||
<Button type="submit" size="sm">Save Notes</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
17
src/routes/projects/progress/create/+page.server.ts
Executable file
17
src/routes/projects/progress/create/+page.server.ts
Executable file
@@ -0,0 +1,17 @@
|
||||
import { db } from "$lib/db"
|
||||
import { tasks } from "$lib/db/schema"
|
||||
import { redirect } from "@sveltejs/kit"
|
||||
|
||||
export const actions = {
|
||||
default: async ({ cookies, request }) => {
|
||||
if (!cookies.get('token')) {
|
||||
return { status: 401 };
|
||||
}
|
||||
|
||||
const data = await request.formData()
|
||||
|
||||
const task = await db.insert(tasks).values({ name: data.get('name') }).returning()
|
||||
|
||||
redirect(303, '/progress/' + task[0].id)
|
||||
}
|
||||
}
|
||||
10
src/routes/projects/progress/create/+page.svelte
Executable file
10
src/routes/projects/progress/create/+page.svelte
Executable file
@@ -0,0 +1,10 @@
|
||||
<form method="post" class="flex flex-col items-center gap-4">
|
||||
<h1 class="font-bold text-xl mt-8 mb-4">Create Task</h1>
|
||||
|
||||
<div class="flex gap-4">
|
||||
<label for="name">Name: </label>
|
||||
<input type="text" name="name" class="border rounded" />
|
||||
</div>
|
||||
|
||||
<button class="px-4 py-2 rounded bg-green-500 m-4">Submit</button>
|
||||
</form>
|
||||
20
src/routes/projects/progress/topics/+page.server.ts
Normal file
20
src/routes/projects/progress/topics/+page.server.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { db } from '$lib/db';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load: PageServerLoad = async () => {
|
||||
const topics = await db.query.topics.findMany({
|
||||
with: {
|
||||
topicsToTasks: {
|
||||
with: {
|
||||
task: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
topics.sort((a, b) => b.topicsToTasks.length - a.topicsToTasks.length);
|
||||
|
||||
return {
|
||||
topics
|
||||
};
|
||||
};
|
||||
29
src/routes/projects/progress/topics/+page.svelte
Normal file
29
src/routes/projects/progress/topics/+page.svelte
Normal file
@@ -0,0 +1,29 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head class="w-[100px]">Name</Table.Head>
|
||||
<Table.Head>Amount of Tasks</Table.Head>
|
||||
<Table.Head class="text-right">Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each data.topics as topic}
|
||||
<Table.Row
|
||||
onclick={() => goto(`/progress/topics/${topic.id}`)}
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
>
|
||||
<Table.Cell class="font-medium">{topic.name}</Table.Cell>
|
||||
<Table.Cell>{topic.topicsToTasks.length}</Table.Cell>
|
||||
|
||||
<Table.Cell class="text-right"></Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
18
src/routes/projects/progress/topics/[id]/+page.server.ts
Normal file
18
src/routes/projects/progress/topics/[id]/+page.server.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import { db } from '$lib/db';
|
||||
import { topics } from '$lib/db/schema';
|
||||
import { eq } from 'drizzle-orm';
|
||||
|
||||
export const load = async ({ params }) => {
|
||||
return {
|
||||
topic: await db.query.topics.findFirst({
|
||||
with: {
|
||||
topicsToTasks: {
|
||||
with: {
|
||||
task: true
|
||||
}
|
||||
}
|
||||
},
|
||||
where: eq(topics.id, params.id)
|
||||
})
|
||||
};
|
||||
};
|
||||
14
src/routes/projects/progress/topics/[id]/+page.svelte
Normal file
14
src/routes/projects/progress/topics/[id]/+page.svelte
Normal file
@@ -0,0 +1,14 @@
|
||||
<script lang="ts">
|
||||
let { data } = $props();
|
||||
</script>
|
||||
|
||||
<h1 class="my-4 text-2xl font-bold text-center">{data.topic.name}</h1>
|
||||
|
||||
<h2 class="text-xl font-bold">Tasks ({data.topic?.topicsToTasks.length})</h2>
|
||||
{#each data.topic?.topicsToTasks as task}
|
||||
<div class="flex gap-4 items-center relative">
|
||||
<a href="/progress/{task.task.id}" class="text-lg font-semibold hover:underline"
|
||||
>{task.task.name}</a
|
||||
>
|
||||
</div>
|
||||
{/each}
|
||||
Reference in New Issue
Block a user