It's a todo list.
show final duration preview, add close button
+10
-2
+10
-2
src/lib/TaskItem.svelte
+10
-2
src/lib/TaskItem.svelte
···
29
29
let hourInput = $state(0);
30
30
let minuteInput = $state(0);
31
31
let secondsInput = $state(0);
32
+
let inputDuration = $derived((hourInput * 360) + (minuteInput * 60) + secondsInput);
32
33
33
34
function handleTimeSubmit() {
34
-
const inputDuration = (hourInput * 360) + (minuteInput * 60) + secondsInput;
35
35
if (selectedTab === "set") {
36
36
task.duration = inputDuration;
37
37
}
···
43
43
44
44
<dialog bind:this={timerDialog} id={`timer_${task.id}`} class="fixed inset-0 m-auto w-1/2 p-8 rounded-xl">
45
45
<form method="dialog" class="w-fit" onsubmit={handleTimeSubmit}>
46
+
<button type="button" onclick={() => timerDialog?.close()}>Close</button>
46
47
<div class="flex gap-8 items-center text-lg">
47
48
<button type="button" onclick={() => selectedTab = "set"} class={[selectedTab === "set" && "border border-red-500"]}>
48
49
Set
···
60
61
<input type="number" min="0" max="59" bind:value={secondsInput} class="w-12" />
61
62
</div>
62
63
64
+
<p>
65
+
{formatSecondsToDuration(task.duration)} ➜
66
+
{#if selectedTab === "set"}
67
+
{formatSecondsToDuration(inputDuration)}
68
+
{:else if selectedTab === "add"}
69
+
{formatSecondsToDuration(task.duration + inputDuration)}
70
+
{/if}
71
+
</p>
63
72
<button type="submit">
64
73
Confirm
65
74
</button>
···
84
93
<button
85
94
command="show-modal"
86
95
commandfor={`timer_${task.id}`}
87
-
onclick={handleOpenTimer}
88
96
class="w-fit h-fit tabular-nums text-lg hover:bg-gray-50/20 border rounded-lg p-2"
89
97
>
90
98
{formatSecondsToDuration(task.duration!)}