It's a todo list.
init timer dialog logic
+16
-7
+16
-7
src/lib/TaskItem.svelte
+16
-7
src/lib/TaskItem.svelte
···
24
24
interval.resume();
25
25
}
26
26
}
27
+
28
+
let timerDialog: HTMLDialogElement | undefined = $state();
29
+
let hourInput = $state(0);
30
+
let minuteInput = $state(0);
31
+
let secondsInput = $state(0);
27
32
28
33
function handleOpenTimer() {
29
-
34
+
30
35
}
31
36
32
-
let hourInput = $state(0);
33
-
let minuteInput = $state(0);
34
-
let secondsInput = $state(0);
37
+
function handleTimeSubmit() {
38
+
39
+
}
35
40
</script>
36
41
37
-
<dialog id={`timer_${task.id}`} class="fixed inset-0 m-auto w-1/2 p-8">
38
-
<form method="dialog" class="w-fit">
42
+
<dialog bind:this={timerDialog} id={`timer_${task.id}`} class="fixed inset-0 m-auto w-1/2 p-8 rounded-xl">
43
+
<form method="dialog" class="w-fit" onsubmit={handleTimeSubmit}>
39
44
<div class="flex gap-8 items-center text-lg">
40
45
<button type="button" onclick={() => selectedTab = "set"} class={[selectedTab === "set" && "border border-red-500"]}>
41
46
Set
···
52
57
<p class="mr-4">:</p>
53
58
<input type="number" min="0" max="59" bind:value={secondsInput} class="w-12" />
54
59
</div>
60
+
61
+
<button type="submit">
62
+
Confirm
63
+
</button>
55
64
</form>
56
65
</dialog>
57
66
···
73
82
<button
74
83
command="show-modal"
75
84
commandfor={`timer_${task.id}`}
76
-
onclick={handleOpenTimer}
85
+
onclick={handleOpenTimer}
77
86
class="w-fit h-fit tabular-nums text-lg hover:bg-gray-50/20 border rounded-lg p-2"
78
87
>
79
88
{formatSecondsToDuration(task.duration!)}