stan/personal-website
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tasks table

Browse Source
This commit is contained in:
Stan Runge
2025-01-11 18:31:52 +01:00
parent 45be47ff32
commit c617a75291
1 changed files with 60 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
packages/web/src/routes/progress/+page.svelte
View File

@@ -2,45 +2,64 @@
let { data } = $props(); let { data } = $props();
</script> </script>
<div class="flex justify-center items-center"> <div class="flex flex-col items-center p-4">
<h1 class="font-bold text-xl text-center m-4">Tasks ({data.tasks.length})</h1> <div class="w-full max-w-4xl flex justify-center gap-8 items-center mt-4 mb-8">
<a href={'/progress/create'}> <h1 class="font-bold text-2xl">
<button class="px-4 py-2 rounded bg-green-500">Create</button> Tasks ({data.tasks.length})
</a> </h1>
</div> <a href="/progress/create">
<button class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition">
Create
</button>
</a>
</div>
<table> {#if data.tasks.length > 0}
<thead> <div class="overflow-x-auto w-full">
<tr> <table class="min-w-full bg-white border border-gray-200">
<th>ID</th> <thead>
<th>Name</th> <tr class="bg-gray-100">
<th>Progress</th> <th class="px-6 py-3 border-b text-left text-sm font-semibold text-gray-700">Name</th>
<th>Actions</th> <th class="px-6 py-3 border-b text-left text-sm font-semibold text-gray-700">Type</th>
</tr> <th class="px-6 py-3 border-b text-left text-sm font-semibold text-gray-700"
</thead> >Progress</th
<tbody> >
{#each data.tasks as task} <th class="px-6 py-3 border-b text-left text-sm font-semibold text-gray-700">Actions</th
<tr> >
<td> </tr>
<a href={'/progress/' + task.id}> </thead>
{task.id} <tbody>
</a> {#each data.tasks as task, index}
</td><td> <tr class="{index % 2 === 0 ? 'bg-white' : 'bg-gray-50'} hover:bg-gray-200">
<a href={'/progress/' + task.id}> <td class="px-6 py-2 border-b">
{task.name} <a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
</a> {task.name}
</td> </a>
<td> </td>
<a href={'/progress/' + task.id}> <td class="px-6 py-2 border-b">
{task.progress} <a href={`/progress/${task.id}`} class="text-blue-500 hover:underline">
</a> {task.type}
</td> </a>
<td> </td>
<a href={'/progress/' + task.id}>
<button>Delete</button> <td class="px-6 py-2 border-b">
</a> {task.progress}%
</td> </td>
</tr> <td class="px-6 py-2 border-b">
{/each}</tbody <button
> onclick={() => {}}
</table> class="px-3 py-1 bg-red-500 text-white rounded hover:bg-red-600 transition"
aria-label={`Delete task ${task.name}`}
>
Delete
</button>
</td>
</tr>
{/each}
</tbody>
</table>
</div>
{:else}
<p class="text-gray-500">No tasks available. Click "Create" to add a new task.</p>
{/if}
</div>