mirror of
https://github.com/polaroi8d/cactoide.git
synced 2026-03-22 06:05:28 +00:00
466 lines
16 KiB
Svelte
466 lines
16 KiB
Svelte
<script lang="ts">
|
|
import type { CreateEventData, EventType, LocationType } from '$lib/types';
|
|
import { enhance } from '$app/forms';
|
|
import { goto } from '$app/navigation';
|
|
import { t } from '$lib/i18n/i18n.js';
|
|
|
|
export let data;
|
|
export let form;
|
|
|
|
let eventData: CreateEventData = {
|
|
name: data.event.name,
|
|
date: data.event.date,
|
|
time: data.event.time,
|
|
location: data.event.location,
|
|
location_type: data.event.locationType || 'none',
|
|
location_url: data.event.locationUrl || '',
|
|
type: data.event.type,
|
|
attendee_limit: data.event.attendeeLimit || undefined,
|
|
visibility: data.event.visibility
|
|
};
|
|
|
|
let errors: Record<string, string> = {};
|
|
let isSubmitting = false;
|
|
let inviteToken = data.inviteToken;
|
|
|
|
let showInviteLinkToast = false;
|
|
let toastHideTimer: number | null = null;
|
|
|
|
// 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;
|
|
eventData = {
|
|
...eventData,
|
|
...values,
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
attendee_limit: (values as any).attendee_limit
|
|
? // eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
parseInt(String((values as any).attendee_limit))
|
|
: undefined
|
|
};
|
|
}
|
|
|
|
const handleTypeChange = (type: EventType) => {
|
|
eventData.type = type;
|
|
if (type === 'unlimited') {
|
|
eventData.attendee_limit = undefined;
|
|
}
|
|
};
|
|
|
|
const handleLocationTypeChange = (locationType: LocationType) => {
|
|
eventData.location_type = locationType;
|
|
if (locationType === 'none') {
|
|
eventData.location = '';
|
|
eventData.location_url = '';
|
|
} else if (locationType === 'text') {
|
|
eventData.location_url = '';
|
|
eventData.location = '';
|
|
} else {
|
|
eventData.location = 'Google Maps';
|
|
}
|
|
};
|
|
|
|
const handleCancel = () => {
|
|
goto(`/event/${data.event.id}`);
|
|
};
|
|
|
|
const copyInviteLink = async () => {
|
|
if (inviteToken) {
|
|
const inviteUrl = `${window.location.origin}/event/${data.event.id}/invite/${inviteToken.token}`;
|
|
try {
|
|
await navigator.clipboard.writeText(inviteUrl);
|
|
showInviteLinkToast = true;
|
|
|
|
// Auto-hide toast after 3 seconds
|
|
if (toastHideTimer) clearTimeout(toastHideTimer);
|
|
toastHideTimer = window.setTimeout(() => {
|
|
showInviteLinkToast = false;
|
|
}, 3000);
|
|
} catch (err) {
|
|
console.error('Failed to copy invite link:', err);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{t('event.editTitle', { eventName: data.event.name })}</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-2xl">
|
|
<!-- 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">{t('event.editEventTitle')}</h2>
|
|
<p class="mt-2 text-sm text-slate-400">{t('event.editEventDescription')}</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"
|
|
>
|
|
{#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">
|
|
{t('common.name')} <span class="text-red-400">{t('common.required')}</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={t('common.enterEventName')}
|
|
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">
|
|
{t('common.date')} <span class="text-red-400">{t('common.required')}</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"
|
|
on:keydown={(e) => {
|
|
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
|
|
e.preventDefault();
|
|
}
|
|
}}
|
|
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">
|
|
{t('common.time')} <span class="text-red-400">{t('common.required')}</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 Type -->
|
|
<div>
|
|
<!-- Hidden input to submit locationType value -->
|
|
<input type="hidden" name="locationType" bind:value={eventData.location_type} />
|
|
|
|
<fieldset>
|
|
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
|
|
{t('create.locationTypeLabel')}
|
|
<span class="text-red-400">{t('common.required')}</span>
|
|
</legend>
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<button
|
|
type="button"
|
|
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
|
|
'none'
|
|
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
|
|
: 'border-dark-300 text-dark-700'}"
|
|
on:click={() => handleLocationTypeChange('none')}
|
|
>
|
|
{t('create.locationNoneOption')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
|
|
'text'
|
|
? ' border-violet-500 bg-violet-400/20 font-semibold hover:bg-violet-400/70'
|
|
: 'border-dark-300 text-dark-700'}"
|
|
on:click={() => handleLocationTypeChange('text')}
|
|
>
|
|
{t('create.locationTextOption')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.location_type ===
|
|
'maps'
|
|
? ' 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={() => handleLocationTypeChange('maps')}
|
|
>
|
|
{t('create.locationMapsOption')}
|
|
</button>
|
|
</div>
|
|
<p class="mt-2 text-xs text-slate-400">
|
|
{eventData.location_type === 'none'
|
|
? t('create.locationNoneDescription')
|
|
: eventData.location_type === 'text'
|
|
? t('create.locationTextDescription')
|
|
: t('create.locationMapsDescription')}
|
|
</p>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Location Input (only show when not 'none') -->
|
|
{#if eventData.location_type !== 'none'}
|
|
<div>
|
|
<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
|
|
{eventData.location_type === 'text'
|
|
? t('create.locationLabel')
|
|
: t('create.googleMapsUrlLabel')}
|
|
<span class="text-red-400">{t('common.required')}</span>
|
|
</label>
|
|
{#if eventData.location_type === 'text'}
|
|
<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={t('create.locationPlaceholder')}
|
|
maxlength="200"
|
|
required
|
|
/>
|
|
{:else}
|
|
<input
|
|
id="location_url"
|
|
name="location_url"
|
|
type="url"
|
|
bind:value={eventData.location_url}
|
|
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={t('create.googleMapsUrlPlaceholder')}
|
|
maxlength="500"
|
|
required
|
|
/>
|
|
{/if}
|
|
{#if errors.location}
|
|
<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
|
|
{/if}
|
|
{#if errors.location_url}
|
|
<p class="mt-2 text-sm font-medium text-red-600">{errors.location_url}</p>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Event Type -->
|
|
<div>
|
|
<!-- Hidden input to submit type value -->
|
|
<input type="hidden" name="type" bind:value={eventData.type} />
|
|
|
|
<fieldset>
|
|
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
|
|
{t('common.type')} <span class="text-red-400">{t('common.required')}</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')}
|
|
>
|
|
{t('common.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')}
|
|
>
|
|
{t('common.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">
|
|
{t('common.attendeeLimit')} <span class="text-red-400">{t('common.required')}</span>
|
|
</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={t('common.enterLimit')}
|
|
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>
|
|
<!-- Hidden input to submit visibility value -->
|
|
<input type="hidden" name="visibility" bind:value={eventData.visibility} />
|
|
|
|
<fieldset>
|
|
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
|
|
{t('common.visibility')} <span class="text-red-400">{t('common.required')}</span>
|
|
</legend>
|
|
<div class="grid grid-cols-3 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')}
|
|
>
|
|
{t('create.publicOption')}
|
|
</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')}
|
|
>
|
|
{t('create.privateOption')}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="rounded-sm border-2 px-4 py-3 font-medium transition-all duration-200 {eventData.visibility ===
|
|
'invite-only'
|
|
? ' border-amber-500 bg-amber-400/20 font-semibold hover:bg-amber-400/70'
|
|
: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
|
|
on:click={() => (eventData.visibility = 'invite-only')}
|
|
>
|
|
{t('create.inviteOnlyOption')}
|
|
</button>
|
|
</div>
|
|
<p class="mt-2 text-xs text-slate-400">
|
|
{eventData.visibility === 'public'
|
|
? t('create.publicDescription')
|
|
: eventData.visibility === 'private'
|
|
? t('create.privateDescription')
|
|
: t('create.inviteOnlyDescription')}
|
|
</p>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<!-- Invite Link Section (only for invite-only events and event creator) -->
|
|
{#if eventData.visibility === 'invite-only' && inviteToken && data.event.userId === data.userId}
|
|
<div class="rounded-sm border border-amber-500/30 bg-amber-900/20 p-4">
|
|
<div class="mb-3 flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-amber-400">Invite Link</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<div class="flex items-center space-x-2">
|
|
<input
|
|
type="text"
|
|
value={`${window.location.origin}/event/${data.event.id}/invite/${inviteToken.token}`}
|
|
readonly
|
|
class="flex-1 rounded-sm border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-900"
|
|
/>
|
|
<button
|
|
type="button"
|
|
on:click={copyInviteLink}
|
|
class="rounded-sm border border-amber-300 bg-amber-200 px-3 py-2 text-sm font-medium text-amber-900 hover:bg-amber-300"
|
|
>
|
|
{t('event.copyInviteLinkButton')}
|
|
</button>
|
|
</div>
|
|
<p class="text-xs text-amber-300">
|
|
{t('event.inviteLinkExpiresAt', {
|
|
time: new Date(inviteToken.expires_at).toLocaleString()
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- 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"
|
|
>
|
|
{t('common.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>
|
|
{t('event.updatingEvent')}
|
|
</div>
|
|
{:else}
|
|
{t('event.updateEventButton')}
|
|
{/if}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Invite Link Toast -->
|
|
{#if showInviteLinkToast}
|
|
<div
|
|
class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900 p-4 text-yellow-400"
|
|
>
|
|
{t('event.inviteLinkCopied')}
|
|
</div>
|
|
{/if}
|