erman/scan-wave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move data processing to the browser for better responsivness and privacy

Browse Source
This commit is contained in:
Roman Krček
2025-06-27 23:29:08 +02:00
parent 9aa5b66b54
commit 9fb76cbc8b
7 changed files with 243 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
src/routes/private/events/creator/steps/StepCreateEvent.svelte
View File

@@ -1,71 +1,88 @@
<script lang="ts">
import { enhance } from '$app/forms';
let { event = $bindable() } = $props();
let { event } = $props();
let loading = $state(false);
let showForm = $derived(!event.name || !event.date);
function handleEnhance() {
function handleSubmit(e: Event) {
e.preventDefault();
loading = true;
return async ({ update }) => {
await update();
loading = false;
const form = e.target as HTMLFormElement;
const formData = new FormData(form);
event = {
name: formData.get('name'),
date: formData.get('date')
};
showForm = false;
loading = false;
}
function showEditForm() {
showForm = true;
}
</script>
{#if showForm}
<form
on:submit={handleSubmit}
autocomplete="off"
class="flex w-full flex-col space-y-4 rounded border border-gray-300 bg-white p-8 shadow-none"
>
<h2 class="mb-4 text-center text-2xl font-semibold">Create Event</h2>
<label class="mt-2 flex flex-col text-gray-700">
Name
<input
type="text"
name="name"
class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
required
value={event.name ?? ''}
/>
</label>
<label class="mt-2 flex flex-col text-gray-700">
Date
<input
type="date"
name="date"
class="mt-1 rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-200 focus:outline-none"
required
value={event.date ?? ''}
/>
</label>
<button
type="submit"
class="mt-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
>
Save
</button>
</form>
{/if}
<form method="POST" action="?/create" use:enhance={handleEnhance} class="flex flex-col space-y-4 bg-white p-8 rounded border border-gray-300 w-full shadow-none">
<h2 class="text-2xl font-semibold text-center mb-4">Create Event</h2>
<label class="flex flex-col text-gray-700">
Name
<input
type="text"
name="name"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<label class="flex flex-col text-gray-700">
Date
<input
type="date"
name="date"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200"
required
/>
</label>
<label class="flex flex-col text-gray-700">
Description
<textarea
name="description"
class="mt-1 px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-200 resize-none"
rows="3"
required
></textarea>
</label>
<button
type="submit"
class="w-full py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition"
>
Submit
</button>
</form>
{#if !showForm}
<button
class="mb-4 w-full rounded bg-blue-600 py-2 text-white transition hover:bg-blue-700"
on:click={showEditForm}
aria-label="Edit event"
>
Edit the event
</button>
{/if}
{#if Object.keys(event).length === 0}
<div class="mt-4 rounded border-l-4 border-gray-500 bg-gray-100 p-4 text-gray-700">
{#if loading}
<strong>Loading...</strong>
{:else}
<strong>No event created yet...</strong>
{/if}
</div>
{:else}
<div class="rounded border-l-4 border-green-500 bg-green-100 p-4 text-green-700 mt-4">
<ol>
<li><strong>{event.name}</strong></li>
<li>{event.date}</li>
<li>{event.description}</li>
</ol>
</div>
{/if}
{#if !showForm}
<div
class="rounded border-l-4 border-green-500 p-4 text-green-700"
class:bg-gray-100={loading}
class:bg-green-100={!loading}
>
{#if loading}
<strong class="text-gray-700">Loading...</strong>
{:else if Object.keys(event).length > 0}
<ol>
<li><strong>{event.name}</strong></li>
<li>{event.date}</li>
</ol>
{:else}
<strong class="text-gray-700">No event created yet...</strong>
{/if}
</div>
{/if}