It's a todo list.
init duration dialog
+41
-3
+39
-1
src/lib/TaskItem.svelte
+39
-1
src/lib/TaskItem.svelte
···
1
+
<script module>
2
+
let selectedTab = $state("set");
3
+
</script>
4
+
1
5
<script lang="ts">
2
6
import { useInterval } from "runed";
3
7
import type { Task } from "./stores.svelte";
···
20
24
interval.resume();
21
25
}
22
26
}
27
+
28
+
function handleOpenTimer() {
29
+
30
+
}
31
+
32
+
let hourInput = $state(0);
33
+
let minuteInput = $state(0);
34
+
let secondsInput = $state(0);
23
35
</script>
24
36
37
+
<dialog id={`timer_${task.id}`} class="fixed inset-0 m-auto w-1/2 p-8">
38
+
<form method="dialog" class="w-fit">
39
+
<div class="flex gap-8 items-center text-lg">
40
+
<button type="button" onclick={() => selectedTab = "set"} class={[selectedTab === "set" && "border border-red-500"]}>
41
+
Set
42
+
</button>
43
+
<button type="button" onclick={() => selectedTab = "add"} class={[selectedTab === "add" && "border border-red-500"]}>
44
+
Add
45
+
</button>
46
+
</div>
47
+
48
+
<div class="flex w-fit items-center justify-center">
49
+
<label>
50
+
hr
51
+
<input type="number" min="0" bind:value={hourInput} class="w-12" />
52
+
</label>
53
+
<p class="mr-4">:</p>
54
+
<input type="number" min="0" max="59" bind:value={minuteInput} class="w-12" />
55
+
<p class="mr-4">:</p>
56
+
<input type="number" min="0" max="59" bind:value={secondsInput} class="w-12" />
57
+
</div>
58
+
</form>
59
+
</dialog>
60
+
25
61
<li class="group flex justify-between items-center gap-4">
26
62
<div class="flex w-full gap-4 items-center pr-4 py-2">
27
63
<input
···
38
74
39
75
<div class="flex gap-4 w-fit items-center">
40
76
<button
41
-
onclick={toggleInterval}
77
+
command="show-modal"
78
+
commandfor={`timer_${task.id}`}
79
+
onclick={handleOpenTimer}
42
80
class="w-fit h-fit tabular-nums text-lg"
43
81
>
44
82
{formatSecondsToDuration(task.duration!)}
+2
-2
src/routes/+layout.svelte
+2
-2
src/routes/+layout.svelte
···
32
32
});
33
33
</script>
34
34
35
-
<div class={`${theme_style} font-apfel flex flex-col w-full h-full min-w-screen min-h-screen p-8 overflow-auto`}>
36
-
<section class="p-4 w-full h-full">
35
+
<div class={`${theme_style} font-apfel flex flex-col items-center justify-center w-full h-full min-w-screen min-h-screen p-8 overflow-auto`}>
36
+
<section class="relative w-full h-full">
37
37
{@render children()}
38
38
</section>
39
39