Compare commits
No commits in common. "98afc28773806e05a846742a434fd5d0cbadede9" and "e225b6dcadadfa3ef249ecdacbc178566214281e" have entirely different histories.
98afc28773
...
e225b6dcad
Binary file not shown.
@ -1,188 +0,0 @@
|
||||
/* Reset and base styles */
|
||||
:root {
|
||||
--primary-color: #4a90e2;
|
||||
--secondary-color: #f5f5f5;
|
||||
--border-color: #ddd;
|
||||
--text-color: #333;
|
||||
--error-color: #e74c3c;
|
||||
--success-color: #2ecc71;
|
||||
--shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
|
||||
sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-color);
|
||||
background-color: #fff;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin: 1.5rem 0 1rem;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #357abd;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0.75rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
form {
|
||||
max-width: 800px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='number'],
|
||||
input[type='date'],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background-color: #357abd;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
background-color: var(--secondary-color);
|
||||
color: var(--text-color);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
button.secondary:hover:not(:disabled) {
|
||||
background-color: #e8e8e8;
|
||||
}
|
||||
|
||||
button + button {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
/* Field management */
|
||||
.field-container {
|
||||
background-color: var(--secondary-color);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Submissions */
|
||||
.submissions-list {
|
||||
background-color: var(--secondary-color);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.submission-item {
|
||||
background-color: white;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* Utility classes */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error {
|
||||
color: var(--error-color);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.success {
|
||||
color: var(--success-color);
|
||||
margin: 1rem 0;
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
<nav>
|
||||
<h1>Formies</h1>
|
||||
<button>logout</button>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Navbar from '$lib/components/Navbar.svelte';
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<Navbar></Navbar>
|
||||
{@render children()}
|
||||
@ -6,10 +6,12 @@
|
||||
let fields: FormField[] = [];
|
||||
|
||||
function addField() {
|
||||
// Use a new array assignment to trigger reactivity
|
||||
fields = [...fields, { label: '', name: '', field_type: 'text' }];
|
||||
}
|
||||
|
||||
function removeField(index: number) {
|
||||
// Reassign to trigger reactivity
|
||||
fields = fields.filter((_, i) => i !== index);
|
||||
}
|
||||
|
||||
@ -25,38 +27,36 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h1>Create Form</h1>
|
||||
<form on:submit|preventDefault={saveForm}>
|
||||
<div class="form-group">
|
||||
<label>Form Name:</label>
|
||||
<input type="text" bind:value={name} placeholder="Enter form name" />
|
||||
</div>
|
||||
<h1>Create Form</h1>
|
||||
|
||||
<h2>Fields</h2>
|
||||
{#each fields as field, i}
|
||||
<div class="field-container">
|
||||
<div class="form-group">
|
||||
<label>Label:</label>
|
||||
<label>
|
||||
Form Name:
|
||||
<input type="text" bind:value={name} placeholder="Enter form name" />
|
||||
</label>
|
||||
|
||||
<h2>Fields</h2>
|
||||
{#each fields as field, i}
|
||||
<div>
|
||||
<label>
|
||||
Label:
|
||||
<input type="text" bind:value={field.label} placeholder="Enter field label" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Name:</label>
|
||||
</label>
|
||||
<label>
|
||||
Name:
|
||||
<input type="text" bind:value={field.name} placeholder="Enter field name" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Type:</label>
|
||||
</label>
|
||||
<label>
|
||||
Type:
|
||||
<select bind:value={field.field_type}>
|
||||
<option value="text">Text</option>
|
||||
<option value="number">Number</option>
|
||||
<option value="date">Date</option>
|
||||
<option value="textarea">Textarea</option>
|
||||
</select>
|
||||
</label>
|
||||
<button on:click={() => removeField(i)}>Remove</button>
|
||||
</div>
|
||||
<button class="secondary" on:click={() => removeField(i)}>Remove</button>
|
||||
</div>
|
||||
{/each}
|
||||
<button class="secondary" on:click={addField}>Add Field</button>
|
||||
<button type="submit" disabled={!name || fields.length === 0}>Save Form</button>
|
||||
</form>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<button on:click={addField}>Add Field</button>
|
||||
<button on:click={saveForm} disabled={!name || fields.length === 0}> Save Form </button>
|
||||
|
||||
@ -5,12 +5,13 @@
|
||||
import { page } from '$app/stores';
|
||||
|
||||
export let params: { id: string };
|
||||
console.log('params.id:', params);
|
||||
let form: any | null = null;
|
||||
let submissions: any[] = [];
|
||||
let responseData: Record<string, any> = {};
|
||||
|
||||
onMount(async () => {
|
||||
const { id } = $page.params;
|
||||
const { id } = $page.params; // Use $page.params to access route parameters
|
||||
if (id) {
|
||||
form = await getForms().then((forms) => forms.find((f: any) => f.id === id) || null);
|
||||
submissions = await getSubmissions(id);
|
||||
@ -20,19 +21,20 @@
|
||||
});
|
||||
|
||||
async function submitResponse() {
|
||||
const { id } = $page.params;
|
||||
const { id } = $page.params; // Use $page.params to access route parameters
|
||||
await submitForm(id, responseData);
|
||||
alert('Response submitted successfully!');
|
||||
submissions = await getSubmissions(params.id);
|
||||
submissions = await getSubmissions(params.id); // Refresh submissions
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<h1>{form?.name}</h1>
|
||||
{#if form}
|
||||
<h1>{form?.name}</h1>
|
||||
|
||||
{#if form}
|
||||
<form on:submit|preventDefault={submitResponse}>
|
||||
{#each form.fields as field}
|
||||
<div class="form-group">
|
||||
<div>
|
||||
<!-- svelte-ignore a11y_label_has_associated_control -->
|
||||
<label>{field.label}</label>
|
||||
{#if field.field_type === 'text'}
|
||||
<input type="text" bind:value={responseData[field.name]} />
|
||||
@ -47,15 +49,13 @@
|
||||
{/each}
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
|
||||
<h2>Submissions</h2>
|
||||
<div class="submissions-list">
|
||||
<ul>
|
||||
{#each submissions as submission}
|
||||
<div class="submission-item">
|
||||
{JSON.stringify(submission.data)}
|
||||
</div>
|
||||
<li>{JSON.stringify(submission.data)}</li>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="loading">Loading...</p>
|
||||
{/if}
|
||||
</div>
|
||||
</ul>
|
||||
{:else}
|
||||
<p>Loading...</p>
|
||||
{/if}
|
||||
|
||||
@ -10,13 +10,14 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<a href="/create" class="button">Create a New Form</a>
|
||||
<ul class="forms-list">
|
||||
<h1>Form Management Tool</h1>
|
||||
|
||||
<a href="/create">Create a New Form</a>
|
||||
|
||||
<ul>
|
||||
{#each forms as form}
|
||||
<li>
|
||||
<a href={`/form/${form.id}`}>{form.name}</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user