Actually use input value

This commit is contained in:
2025-03-09 17:48:31 +01:00
parent 6e7dd7a560
commit 46feef3a48
2 changed files with 17 additions and 10 deletions

View File

@@ -3,32 +3,34 @@
import { Button } from "$lib/components/ui/button/index.js";
import TrackerSetting from "./TrackerSetting.svelte";
const addTracker = async () => {
const addTracker = async (arg: number) => {
const response = await fetch("/tracker", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: 4,
id: arg,
}),
});
console.log(response);
};
const deleteTracker = async () => {
const deleteTracker = async (arg: number) => {
const response = await fetch("/tracker", {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
id: 4,
id: arg,
}),
});
console.log(response);
};
let id = $state(0);
</script>
<Drawer.Root>
@@ -41,8 +43,12 @@
<Drawer.Description>This action cannot be undone.</Drawer.Description>
</Drawer.Header>
<div class="flex items-center justify-evenly">
<TrackerSetting action={addTracker} text="Add Tracker" />
<TrackerSetting action={deleteTracker} text="Delete Tracker" />
<TrackerSetting bind:value={id} action={addTracker} text="Add Tracker" />
<TrackerSetting
bind:value={id}
action={deleteTracker}
text="Delete Tracker"
/>
</div>
</Drawer.Content>
</Drawer.Root>

View File

@@ -4,14 +4,15 @@
type Props = {
text: string;
action: () => void;
action: (arg: number) => void;
value: number;
};
let { action, text }: Props = $props();
let { action, text, value = $bindable() }: Props = $props();
</script>
<div>
<h2>{text}</h2>
<Input placeholder={"1"} type="tel" />
<Button onclick={action}>Submit</Button>
<Input placeholder={"1"} type="tel" bind:value />
<Button onclick={() => action(value)}>Submit</Button>
</div>