WIP: Staged all changes
This commit is contained in:
56
frontend/src/components/DynamicForm.svelte
Normal file
56
frontend/src/components/DynamicForm.svelte
Normal file
@@ -0,0 +1,56 @@
|
||||
<script>
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let schema;
|
||||
let formData = {};
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function handleSubmit() {
|
||||
dispatch('submit', formData);
|
||||
}
|
||||
|
||||
// Initialize form data with default values from the schema
|
||||
if (schema && schema.properties) {
|
||||
for (const key in schema.properties) {
|
||||
formData[key] = schema.properties[key].default || '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit} class="space-y-4">
|
||||
{#if schema && schema.properties}
|
||||
{#each Object.entries(schema.properties) as [key, prop]}
|
||||
<div class="flex flex-col">
|
||||
<label for={key} class="mb-1 font-semibold text-gray-700">{prop.title || key}</label>
|
||||
{#if prop.type === 'string'}
|
||||
<input
|
||||
type="text"
|
||||
id={key}
|
||||
bind:value={formData[key]}
|
||||
placeholder={prop.description || ''}
|
||||
class="p-2 border rounded-md"
|
||||
/>
|
||||
{:else if prop.type === 'number' || prop.type === 'integer'}
|
||||
<input
|
||||
type="number"
|
||||
id={key}
|
||||
bind:value={formData[key]}
|
||||
placeholder={prop.description || ''}
|
||||
class="p-2 border rounded-md"
|
||||
/>
|
||||
{:else if prop.type === 'boolean'}
|
||||
<input
|
||||
type="checkbox"
|
||||
id={key}
|
||||
bind:checked={formData[key]}
|
||||
class="h-5 w-5"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
<button type="submit" class="w-full bg-green-500 text-white p-2 rounded-md hover:bg-green-600">
|
||||
Run Task
|
||||
</button>
|
||||
{/if}
|
||||
</form>
|
||||
Reference in New Issue
Block a user