gitea_work/cog-socket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed create form

Browse Source
This commit is contained in:
Shaheed Azaad
2025-07-14 00:53:24 +02:00
parent cde21e9286
commit e3c27b304f
1 changed files with 58 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/routes/experiment/create/+page.svelte
View File

@@ -1,14 +1,15 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
import * as Form from '$lib/components/ui/form';
import { Input } from '$lib/components/ui/input';
import { Checkbox } from '$lib/components/ui/checkbox';
import * as Select from '$lib/components/ui/select/index.js';
import { superForm } from 'sveltekit-superforms';
import * as Select from '$lib/components/ui/select/index.js'; // the import should stay as index.js
import { superForm, type SuperValidated, type Infer } from 'sveltekit-superforms';
import { zod } from 'sveltekit-superforms/adapters';
import { z } from 'zod';
import { toast } from 'svelte-sonner';
import { Label } from '$lib/components/ui/label';
import { Button } from '$lib/components/ui/button';
const formSchema = z.object({
name: z.string().min(1, 'Name is required'),
@@ -19,35 +20,36 @@
})
});
const form = superForm(
{
name: '',
description: '',
multiplayer: false,
type: 'jsPsych'
},
{
validators: zod(formSchema),
SPA: true,
onUpdate: async ({ form: f }) => {
if (f.valid) {
const res = await fetch('/api/experiment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(f.data)
});
if (res.ok) {
await goto('/');
toast.success('Experiment created successfully');
} else {
const data = await res.json().catch(() => ({}));
toast.error(data?.error || 'Failed to create experiment');
}
const form = superForm({
name: '',
description: '',
multiplayer: false,
type: ''
}, {
validators: zod(formSchema),
SPA: true,
onUpdate: async ({ form: f }) => {
if (f.valid) {
const res = await fetch('/api/experiment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(f.data)
});
if (res.ok) {
await goto('/');
toast.success('Experiment created successfully');
} else {
const data = await res.json().catch(() => ({}));
toast.error(data?.error || 'Failed to create experiment');
}
}
}
});
const { form: formData, enhance, errors } = form;
const triggerContent = $derived(
$formData.type ? $formData.type : 'Select a type'
);
const { form: formData, enhance } = form;
</script>
<div class="flex justify-center items-center min-h-screen bg-background">
@@ -57,45 +59,34 @@
</CardHeader>
<CardContent>
<form method="POST" use:enhance class="space-y-4">
<Form.Field {form} name="name">
<Form.Control let:attrs>
<Form.Label>Name</Form.Label>
<Input {...attrs} bind:value={$formData.name} />
</Form.Control>
<Form.FieldErrors />
</Form.Field>
<Form.Field {form} name="description">
<Form.Control let:attrs>
<Form.Label>Description</Form.Label>
<Input {...attrs} bind:value={$formData.description} />
</Form.Control>
<Form.FieldErrors />
</Form.Field>
<Form.Field {form} name="multiplayer">
<Form.Control let:attrs>
<div class="flex items-center space-x-2">
<Checkbox {...attrs} bind:checked={$formData.multiplayer} />
<Form.Label>Multiplayer</Form.Label>
</div>
</Form.Control>
<Form.FieldErrors />
</Form.Field>
<Form.Field {form} name="type">
<Form.Control let:attrs>
<Form.Label>Type</Form.Label>
<Select.Root {...attrs} bind:value={$formData.type} type="single">
<Select.Trigger>
{$formData.type || 'Select a type'}
</Select.Trigger>
<Select.Content>
<Select.Item value="jsPsych">jsPsych</Select.Item>
<Select.Item value="PsychoJS">PsychoJS</Select.Item>
</Select.Content>
</Select.Root>
</Form.Control>
<Form.FieldErrors />
</Form.Field>
<Form.Button class="w-full">Create</Form.Button>
<div class="space-y-2">
<Label for="name">Name</Label>
<Input name="name" bind:value={$formData.name} />
{#if $errors.name}<span class="text-red-500 text-sm">{$errors.name[0]}</span>{/if}
</div>
<div class="space-y-2">
<Label for="description">Description</Label>
<Input name="description" bind:value={$formData.description} />
{#if $errors.description}<span class="text-red-500 text-sm">{$errors.description[0]}</span>{/if}
</div>
<div class="flex items-center space-x-2">
<Checkbox name="multiplayer" bind:checked={$formData.multiplayer} />
<Label for="multiplayer">Multiplayer</Label>
</div>
<div class="space-y-2">
<Label for="type">Type</Label>
<Select.Root type="single" bind:value={$formData.type} name="type">
<Select.Trigger class="w-full" name="type">
{triggerContent}
</Select.Trigger>
<Select.Content>
<Select.Item value="jsPsych">jsPsych</Select.Item>
<Select.Item value="PsychoJS">PsychoJS</Select.Item>
</Select.Content>
</Select.Root>
{#if $errors.type}<span class="text-red-500 text-sm">{$errors.type[0]}</span>{/if}
</div>
<Button type="submit" class="w-full">Create</Button>
</form>
</CardContent>
</Card>