HMC/cactoide
2
0
Fork 0
forked from jmug/cactoide
Code Pull Requests Activity

feat: add edit events functionality

Browse Source
This commit is contained in:
Levente Orban
2025-09-02 10:44:37 +02:00
parent bd9796a8d1
commit e20018735e
8 changed files with 510 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/components/Navbar.svelte
View File

@@ -2,14 +2,10 @@
import { page } from '$app/stores';
import { goto } from '$app/navigation';
function navigateTo(path: string) {
goto(path);
}
// Check if current page is active
function isActive(path: string): boolean {
const isActive = (path: string): boolean => {
return $page.url.pathname === path;
}
};
</script>
<nav class="relative z-50 backdrop-blur-md">
@@ -18,7 +14,7 @@
<!-- Logo/Brand -->
<div class="flex items-center">
<button
on:click={() => navigateTo('/')}
on:click={() => goto('/')}
class="cursor-pointer text-2xl font-medium text-violet-400"
>
Cactoide
@@ -28,28 +24,28 @@
<!-- Navigation -->
<div class="md:flex md:items-center md:space-x-8">
<button
on:click={() => navigateTo('/')}
on:click={() => goto('/')}
class={isActive('/') ? 'text-violet-400' : 'cursor-pointer'}
>
Home
</button>
<button
on:click={() => navigateTo('/discover')}
on:click={() => goto('/discover')}
class={isActive('/discover') ? 'text-violet-400' : 'cursor-pointer'}
>
Discover
</button>
<button
on:click={() => navigateTo('/create')}
on:click={() => goto('/create')}
class={isActive('/create') ? 'text-violet-400' : 'cursor-pointer'}
>
Create
</button>
<button
on:click={() => navigateTo('/event')}
on:click={() => goto('/event')}
class={isActive('/event') ? 'text-violet-400' : 'cursor-pointer'}
>
My Events

30
src/routes/create/+page.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts">
import type { CreateEventData, EventType } from '$lib/types';
import { enhance } from '$app/forms';
import { goto } from '$app/navigation';
export let form;
@@ -37,12 +38,16 @@
};
}
function handleTypeChange(type: EventType) {
const handleTypeChange = (type: EventType) => {
eventData.type = type;
if (type === 'unlimited') {
eventData.attendee_limit = undefined;
}
}
};
const handleCancel = () => {
goto(`/discover`);
};
</script>
<svelte:head>
@@ -248,11 +253,19 @@
</p>
</div>
<div class="flex space-x-3">
<button
type="button"
on:click={handleCancel}
class="flex-1 rounded-sm border-2 border-slate-300 bg-slate-200 px-4 py-3 font-semibold text-slate-700 transition-all duration-200 hover:bg-slate-400 hover:text-slate-200"
>
Cancel
</button>
<!-- Submit Button -->
<button
type="submit"
disabled={isSubmitting}
class="hover:bg-violet-400/70' w-full rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
class="hover:bg-violet-400/70'l rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 py-4 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
>
{#if isSubmitting}
<div class="flex items-center justify-center">
@@ -263,18 +276,9 @@
Create Event
{/if}
</button>
</div>
</form>
</div>
<!-- Info Section -->
<div class="mt-8 p-6 text-center">
<p class="text-dark-100 font-medium">
Share the generated link with others to collect RSVPs.
</p>
<p class="mt-2 text-sm text-violet-300">
No registration required • Mobile optimized • Instant sharing
</p>
</div>
</div>
</div>
</div>

4
src/routes/discover/+page.svelte
View File

@@ -295,12 +295,12 @@
</div>
</div>
<div class="flex space-x-3">
<div class="flex">
<button
on:click={() => goto(`/event/${event.id}`)}
class="flex-1 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-2 font-semibold duration-200 hover:bg-violet-400/70"
>
View Event
View
</button>
</div>
</div>

1
src/routes/event/+page.server.ts
View File

@@ -2,6 +2,7 @@ import { database } from '$lib/database/db';
import { events } from '$lib/database/schema';
import { fail } from '@sveltejs/kit';
import { eq, desc } from 'drizzle-orm';
import type { Actions } from './$types';
export const load = async ({ cookies }) => {
const userId = cookies.get('cactoideUserId');

54
src/routes/event/+page.svelte
View File

@@ -149,15 +149,65 @@
<button
on:click={() => goto(`/event/${event.id}`)}
class="flex-1 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-2 font-semibold duration-200 hover:bg-violet-400/70"
aria-label="View event"
>
View
<svg
class="mx-auto h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
></path>
</svg>
</button>
<button
on:click={() => goto(`/event/${event.id}/edit`)}
class="flex-1 rounded-sm border-2 border-blue-400 bg-blue-400/20 px-4 py-2 font-semibold text-white duration-200 hover:bg-blue-400/70"
aria-label="Edit event"
>
<svg
class="mx-auto h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
></path>
</svg>
</button>
<button
on:click={() => openDeleteModal(event)}
class="flex-1 rounded-sm border-2 border-red-400 bg-red-400/20 px-4 py-2 font-semibold text-white duration-200 hover:bg-red-400/70"
aria-label="Delete event"
>
Delete
<svg
class="mx-auto h-4 w-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
></path>
</svg>
</button>
</div>
</div>

10
src/routes/event/[id]/+page.svelte
View File

@@ -35,7 +35,7 @@
const eventId = $page.params.id;
function copyEventLink() {
const copyEventLink = () => {
const url = `${window.location.origin}/event/${eventId}`;
navigator.clipboard.writeText(url).then(() => {
success = 'Event link copied to clipboard!';
@@ -43,12 +43,12 @@
success = '';
}, 3000);
});
}
};
function clearMessages() {
const clearMessages = () => {
error = '';
success = '';
}
};
</script>
<svelte:head>
@@ -300,7 +300,7 @@
</div>
{/if}
</div>
succcess: {success}
<!-- Action Buttons -->
<div class="max-w-2xl">
<button

123
src/routes/event/[id]/edit/+page.server.ts Normal file
View File

@@ -0,0 +1,123 @@
import { database } from '$lib/database/db';
import { events } from '$lib/database/schema';
import { eq, and } from 'drizzle-orm';
import { fail, redirect } from '@sveltejs/kit';
import type { Actions, PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ params, cookies }) => {
const eventId = params.id;
const userId = cookies.get('cactoideUserId');
if (!userId) {
throw redirect(303, '/');
}
// Fetch the event and verify ownership
const event = await database
.select()
.from(events)
.where(and(eq(events.id, eventId), eq(events.userId, userId)))
.limit(1);
if (event.length === 0) {
throw redirect(303, '/event');
}
return {
event: event[0]
};
};
export const actions: Actions = {
default: async ({ request, params, cookies }) => {
const eventId = params.id;
const userId = cookies.get('cactoideUserId');
const formData = await request.formData();
if (!userId) {
return fail(401, { error: 'Unauthorized' });
}
// Verify event ownership before allowing edit
const existingEvent = await database
.select()
.from(events)
.where(and(eq(events.id, eventId), eq(events.userId, userId)))
.limit(1);
if (existingEvent.length === 0) {
return fail(403, { error: 'You can only edit your own events' });
}
const name = formData.get('name') as string;
const date = formData.get('date') as string;
const time = formData.get('time') as string;
const location = formData.get('location') as string;
const type = formData.get('type') as 'limited' | 'unlimited';
const attendeeLimit = formData.get('attendee_limit') as string;
const visibility = formData.get('visibility') as 'public' | 'private';
// Validation
const missingFields: string[] = [];
if (!name?.trim()) missingFields.push('name');
if (!date) missingFields.push('date');
if (!time) missingFields.push('time');
if (!location?.trim()) missingFields.push('location');
if (missingFields.length > 0) {
return fail(400, {
error: `Missing or empty fields: ${missingFields.join(', ')}`,
values: {
name,
date,
time,
location,
type,
attendee_limit: attendeeLimit,
visibility
}
});
}
// Check if date is in the past (but allow editing past events for corrections)
const eventDate = new Date(date);
const today = new Date();
today.setHours(0, 0, 0, 0);
if (eventDate < today) {
return fail(400, {
error: 'Date cannot be in the past.',
values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
});
}
if (type === 'limited' && (!attendeeLimit || parseInt(attendeeLimit) < 2)) {
return fail(400, {
error: 'Limit must be at least 2 for limited events.',
values: { name, date, time, location, type, attendee_limit: attendeeLimit, visibility }
});
}
// Update the event
await database
.update(events)
.set({
name: name.trim(),
date: date,
time: time,
location: location.trim(),
type: type,
attendeeLimit: type === 'limited' ? parseInt(attendeeLimit) : null,
visibility: visibility,
updatedAt: new Date()
})
.where(and(eq(events.id, eventId), eq(events.userId, userId)))
.catch((error) => {
console.error('Unexpected error updating event', error);
throw error;
});
throw redirect(303, `/event/${eventId}`);
}
};

289
src/routes/event/[id]/edit/+page.svelte Normal file
View File

@@ -0,0 +1,289 @@
<script lang="ts">
import type { EventType } from '$lib/types';
import { enhance } from '$app/forms';
import { goto } from '$app/navigation';
export let data;
export let form: any;
let eventData = {
name: data.event.name,
date: data.event.date,
time: data.event.time,
location: data.event.location,
type: data.event.type,
attendee_limit: data.event.attendeeLimit,
visibility: data.event.visibility
};
let errors: Record<string, string> = {};
let isSubmitting = false;
// Get today's date in YYYY-MM-DD format for min attribute
const today = new Date().toISOString().split('T')[0];
// Handle form errors from server
$: if (form?.error) {
errors.server = form.error;
}
// Pre-fill form with values from server on error
$: if (form && 'values' in form && form.values) {
const values = form.values as any;
eventData = {
...eventData,
...values,
attendee_limit: values.attendee_limit ? parseInt(String(values.attendee_limit)) : null
};
}
const handleTypeChange = (type: EventType) => {
eventData.type = type;
if (type === 'unlimited') {
eventData.attendee_limit = null;
}
};
const handleCancel = () => {
goto(`/event/${data.event.id}`);
};
</script>
<svelte:head>
<title>Edit Event - {data.event.name} - Cactoide</title>
</svelte:head>
<div class="flex min-h-screen flex-col">
<!-- Main Content -->
<div class="container mx-auto flex-1 px-4 py-8">
<div class="mx-auto max-w-md">
<!-- Event Edit Form -->
<div class="rounded-sm border p-8">
<div class="mb-8 text-center">
<h2 class="text-3xl font-bold text-violet-400">Edit Event</h2>
<p class="mt-2 text-sm text-slate-400">Update your event details</p>
</div>
<form
method="POST"
use:enhance={() => {
isSubmitting = true;
return async ({ result, update }) => {
isSubmitting = false;
if (result.type === 'failure') {
// Handle validation errors
if (result.data?.error) {
errors.server = String(result.data.error);
}
}
update();
};
}}
class="space-y-6"
>
<input type="hidden" name="type" value={eventData.type} />
<input type="hidden" name="visibility" value={eventData.visibility} />
{#if errors.server}
<div class="mb-6 rounded-sm border border-red-200 bg-red-50 p-4 text-red-700">
{errors.server}
</div>
{/if}
<!-- Event Name -->
<div>
<label for="name" class="text-dark-800 mb-3 block text-sm font-semibold">
Name <span class="text-red-400">*</span>
</label>
<input
id="name"
name="name"
type="text"
bind:value={eventData.name}
class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
placeholder="Enter event name"
maxlength="100"
required
/>
{#if errors.name}
<p class="mt-2 text-sm font-medium text-red-600">{errors.name}</p>
{/if}
</div>
<!-- Date and Time Row -->
<div class="grid grid-cols-2 gap-4">
<div>
<label for="date" class="text-dark-800 mb-3 block text-sm font-semibold">
Date <span class="text-red-400">*</span>
</label>
<input
id="date"
name="date"
type="date"
bind:value={eventData.date}
min={today}
class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
required
/>
{#if errors.date}
<p class="mt-2 text-sm font-medium text-red-600">{errors.date}</p>
{/if}
</div>
<div>
<label for="time" class="text-dark-800 mb-3 block text-sm font-semibold">
Time <span class="text-red-400">*</span>
</label>
<input
id="time"
name="time"
type="time"
bind:value={eventData.time}
class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
required
/>
{#if errors.time}
<p class="mt-2 text-sm font-medium text-red-600">{errors.time}</p>
{/if}
</div>
</div>
<!-- Location -->
<div>
<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
Location <span class="text-red-400">*</span>
</label>
<input
id="location"
name="location"
type="text"
bind:value={eventData.location}
class="border-dark-300 placeholder-dark-500 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm transition-all"
placeholder="Enter location"
maxlength="200"
required
/>
{#if errors.location}
<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
{/if}
</div>
<!-- Event Type -->
<div>
<fieldset>
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
Type <span class="text-red-400">*</span>
</legend>
<div class="grid grid-cols-2 gap-3">
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
'unlimited'
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
: 'border-dark-300 text-dark-700'}"
on:click={() => handleTypeChange('unlimited')}
>
Unlimited
</button>
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.type ===
'limited'
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
on:click={() => handleTypeChange('limited')}
>
Limited
</button>
</div>
</fieldset>
</div>
<!-- Limit (only for limited events) -->
{#if eventData.type === 'limited'}
<div>
<label for="limit" class="text-dark-800 mb-3 block text-sm font-semibold">
Attendee Limit *
</label>
<input
id="attendee_limit"
name="attendee_limit"
type="number"
bind:value={eventData.attendee_limit}
min="1"
max="1000"
class="border-dark-300 w-full rounded-sm border-2 bg-white px-4 py-3 text-slate-900 shadow-sm transition-all duration-200"
placeholder="Enter limit"
required
/>
{#if errors.attendee_limit}
<p class="mt-2 text-sm font-medium text-red-600">{errors.attendee_limit}</p>
{/if}
</div>
{/if}
<!-- Event Visibility -->
<div>
<fieldset>
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
Visibility <span class="text-red-400">*</span>
</legend>
<div class="grid grid-cols-2 gap-3">
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
'public'
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
: 'border-dark-300 text-dark-700'}"
on:click={() => (eventData.visibility = 'public')}
>
🌍 Public
</button>
<button
type="button"
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
'private'
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
on:click={() => (eventData.visibility = 'private')}
>
🔒 Private
</button>
</div>
<p class="mt-2 text-xs text-slate-400">
{eventData.visibility === 'public'
? 'Public events are visible to everyone and can be discovered by others'
: 'Private events are only visible to you and people you share the link with'}
</p>
</fieldset>
</div>
<!-- Action Buttons -->
<div class="flex space-x-3">
<button
type="button"
on:click={handleCancel}
class="flex-1 rounded-sm border-2 border-slate-300 bg-slate-200 px-4 py-3 font-semibold text-slate-700 transition-all duration-200 hover:bg-slate-400 hover:text-slate-200"
>
Cancel
</button>
<button
type="submit"
disabled={isSubmitting}
class="hover:bg-violet-400/70' flex-1 rounded-sm border-2 border-violet-500 bg-violet-400/20 px-4 py-3 font-bold font-medium font-semibold text-white shadow-lg transition-all duration-200 hover:scale-105"
>
{#if isSubmitting}
<div class="flex items-center justify-center">
<div class="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"></div>
Updating...
</div>
{:else}
Update Event
{/if}
</button>
</div>
</form>
</div>
</div>
</div>
</div>