update homepage draft and other pages
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user