jmug/cactoide
1
0
Fork 1
mirror of https://github.com/polaroi8d/cactoide.git synced 2026-03-22 06:05:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add translation support

Browse Source
This commit is contained in:
Levente Orban
2025-09-16 11:05:59 +02:00
parent 8d01000ed4
commit f66fd03d70
12 changed files with 517 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
import type { Event } from '$lib/types';
import { goto } from '$app/navigation';
import { formatTime, formatDate } from '$lib/dateHelpers';
import { t } from '$lib/i18n/i18n.js';
export let data: { events: Event[] };
@@ -60,7 +61,7 @@
</script>
<svelte:head>
<title>My Events - Cactoide</title>
<title>{t('event.myEventsTitle')}</title>
</svelte:head>
<div class="flex min-h-screen flex-col">
@@ -69,22 +70,24 @@
{#if userEvents.length === 0}
<div class="mx-auto max-w-2xl text-center">
<div class="mb-4 animate-pulse text-6xl">🎉</div>
<h2 class="mb-4 text-2xl font-bold">No Events Yet</h2>
<h2 class="mb-4 text-2xl font-bold">{t('event.noEventsYetTitle')}</h2>
<p class="text-white-600 mb-8">
You haven't created any events yet. Start by creating your first event!
{t('event.noEventsYetDescription')}
</p>
<button
on:click={() => goto('/create')}
class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
>
Create Your First Event
{t('event.createYourFirstEventButton')}
</button>
</div>
{:else}
<div class="mx-auto max-w-4xl">
<div class="mb-6">
<h2 class="text-2xl font-bold text-slate-400">My Events ({userEvents.length})</h2>
<p class="text-slate-500">Manage your created events</p>
<h2 class="text-2xl font-bold text-slate-400">
{t('event.myEventsTitle')} ({userEvents.length})
</h2>
<p class="text-slate-500">{t('event.myEventsDescription')}</p>
</div>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
@@ -104,7 +107,9 @@
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
></path>
</svg>
<span>{formatDate(event.date)} at {formatTime(event.time)}</span>
<span
>{formatDate(event.date)} {t('common.atTime')} {formatTime(event.time)}</span
>
</div>
<div class="flex items-center space-x-2">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -130,7 +135,7 @@
? 'border-amber-600 text-amber-600'
: 'border-teal-500 text-teal-500'}"
>
{event.type === 'limited' ? 'Limited' : 'Unlimited'}
{event.type === 'limited' ? t('common.limited') : t('common.unlimited')}
</span>
<span
class="rounded-sm border px-2 py-1 text-xs font-medium {event.visibility ===
@@ -138,7 +143,7 @@
? 'border-green-300 text-green-400'
: 'border-orange-300 text-orange-400'}"
>
{event.visibility === 'public' ? 'Public' : 'Private'}
{event.visibility === 'public' ? t('common.public') : t('common.private')}
</span>
</div>
<div class="flex items-center space-x-2"></div>
@@ -149,7 +154,7 @@
<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"
aria-label={t('event.viewEventAriaLabel')}
>
<svg
class="mx-auto h-4 w-4"
@@ -174,7 +179,7 @@
<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"
aria-label={t('event.editEventAriaLabel')}
>
<svg
class="mx-auto h-4 w-4"
@@ -193,7 +198,7 @@
<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"
aria-label={t('event.deleteEventAriaLabel')}
>
<svg
class="mx-auto h-4 w-4"
@@ -228,10 +233,9 @@
>
<span class="text-2xl text-red-600">🗑️</span>
</div>
<h3 class="mb-2 text-xl font-bold text-white">Delete Event</h3>
<h3 class="mb-2 text-xl font-bold text-white">{t('event.deleteEventTitle')}</h3>
<p class="text-slate-400">
Are you sure you want to delete "<span class="font-semibold">{eventToDelete.name}</span>"?
This action cannot be undone and will remove all RSVPs.
{t('event.deleteEventDescription', { eventName: eventToDelete.name })}
</p>
</div>
@@ -240,13 +244,13 @@
on:click={closeDeleteModal}
class="flex-1 rounded-sm border-2 border-slate-300 bg-slate-200 px-4 py-2 font-semibold text-slate-700 transition-all duration-200 hover:bg-slate-300"
>
Cancel
{t('common.cancel')}
</button>
<button
on:click={confirmDelete}
class="flex-1 rounded-sm border-2 border-red-500 bg-red-500 px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-red-600"
>
Delete
{t('common.delete')}
</button>
</div>
</div>

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

@@ -6,6 +6,7 @@
import { formatTime, formatDate } from '$lib/dateHelpers.js';
import CalendarModal from '$lib/components/CalendarModal.svelte';
import type { CalendarEvent } from '$lib/calendarHelpers.js';
import { t } from '$lib/i18n/i18n.js';
export let data: { event: Event; rsvps: RSVP[]; userId: string };
export let form;
@@ -80,7 +81,7 @@
</script>
<svelte:head>
<title>{event?.name || 'Event'} - Cactoide</title>
<title>{event?.name || t('event.eventTitle')}</title>
</svelte:head>
<div class="flex min-h-screen flex-col">
@@ -91,13 +92,13 @@
<div class="mx-auto max-w-md text-center">
<div class="rounded-sm border border-red-500/30 bg-red-900/20 p-8">
<div class="mb-4 text-6xl text-red-400">⚠️</div>
<h2 class="mb-4 text-2xl font-bold text-red-400">Event Not Found</h2>
<p class="my-8">The event you're looking for doesn't exist or has been removed.</p>
<h2 class="mb-4 text-2xl font-bold text-red-400">{t('event.eventNotFoundTitle')}</h2>
<p class="my-8">{t('event.eventNotFoundDescription')}</p>
<button
on:click={() => goto('/create')}
class="border-white-500 bg-white-400/20 mt-2 rounded-sm border px-6 py-3 font-semibold text-white duration-400 hover:scale-110 hover:bg-white/10"
>
Create New Event
{t('common.createNewEvent')}
</button>
</div>
</div>
@@ -163,7 +164,7 @@
? 'border-amber-600 text-amber-600'
: 'border-teal-500 text-teal-500'}"
>
{event.type === 'limited' ? 'Limited' : 'Unlimited'}
{event.type === 'limited' ? t('common.limited') : t('common.unlimited')}
</span>
<span
class="rounded-sm border px-2 py-1 text-xs font-medium {event.visibility ===
@@ -171,13 +172,13 @@
? 'border-green-300 text-green-400'
: 'border-orange-300 text-orange-400'}"
>
{event.visibility === 'public' ? 'Public' : 'Private'}
{event.visibility === 'public' ? t('common.public') : t('common.private')}
</span>
</div>
{#if event.type === 'limited' && event.attendee_limit}
<div class="text-right">
<p class="text-sm">Capacity</p>
<p class="text-sm">{t('common.capacity')}</p>
<p class=" text-lg font-bold">
{rsvps.length}/{event.attendee_limit}
</p>
@@ -189,13 +190,13 @@
<!-- RSVP Form -->
<div class=" rounded-sm border p-6 shadow-2xl backdrop-blur-sm">
<h3 class=" mb-4 text-xl font-bold">Join This Event</h3>
<h3 class=" mb-4 text-xl font-bold">{t('event.joinThisEvent')}</h3>
{#if event.type === 'limited' && event.attendee_limit && rsvps.length >= event.attendee_limit}
<div class="py-6 text-center">
<div class="mb-3 text-4xl text-red-400">🚫</div>
<p class="font-semibold text-red-400">Event is Full!</p>
<p class="mt-1 text-sm">Maximum capacity reached</p>
<p class="font-semibold text-red-400">{t('event.eventIsFull')}</p>
<p class="mt-1 text-sm">{t('event.maximumCapacityReached')}</p>
</div>
{:else}
<form
@@ -217,7 +218,8 @@
<input type="hidden" name="userId" value={currentUserId} />
<div>
<label for="attendeeName" class=" mb-2 block text-sm font-semibold">
Your Name <span class="text-red-400">*</span>
{t('event.yourNameLabel')}
<span class="text-red-400">{t('common.required')}</span>
</label>
<input
id="attendeeName"
@@ -225,7 +227,7 @@
type="text"
bind:value={newAttendeeName}
class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
placeholder="Enter your name"
placeholder={t('event.yourNamePlaceholder')}
maxlength="50"
required
/>
@@ -240,7 +242,7 @@
class="h-4 w-4 rounded border-gray-300 text-violet-600 focus:ring-violet-500"
/>
<label for="addGuests" class="text-sm font-medium text-white">
Add guest users
{t('event.addGuestsLabel')}
</label>
</div>
@@ -248,7 +250,8 @@
{#if addGuests}
<div>
<label for="numberOfGuests" class="mb-2 block text-sm font-semibold">
Number of Guests <span class="text-red-400">*</span>
{t('event.numberOfGuestsLabel')}
<span class="text-red-400">{t('common.required')}</span>
</label>
<input
id="numberOfGuests"
@@ -258,12 +261,13 @@
min="1"
max="10"
class="border-dark-300 w-full rounded-sm border-2 px-4 py-3 text-slate-900 shadow-sm"
placeholder="Enter number of guests"
placeholder={t('event.numberOfGuestsPlaceholder')}
required
/>
<p class="mt-1 text-xs text-slate-400">
Guests will be added as "{newAttendeeName || 'Your Name'}'s Guest #1", "{newAttendeeName ||
'Your Name'}'s Guest #2", etc.
{t('event.guestsWillBeAddedAs', {
name: newAttendeeName || t('common.yourNamePlaceholder')
})}
</p>
</div>
{/if}
@@ -280,12 +284,15 @@
<div
class="mr-2 h-5 w-5 animate-spin rounded-full border-b-2 border-white"
></div>
Adding...
{t('event.adding')}
</div>
{:else if addGuests && numberOfGuests > 0}
Join Event + {numberOfGuests} Guest{numberOfGuests > 1 ? 's' : ''}
{t('event.joinEventWithGuests', {
count: numberOfGuests,
plural: numberOfGuests > 1 ? 's' : ''
})}
{:else}
Join Event
{t('event.joinEventButton')}
{/if}
</button>
</form>
@@ -295,14 +302,14 @@
<!-- Attendees List -->
<div class="rounded-sm border p-6 shadow-2xl backdrop-blur-sm">
<div class="mb-4 flex items-center justify-between">
<h3 class=" text-xl font-bold">Attendees</h3>
<h3 class=" text-xl font-bold">{t('event.attendeesTitle')}</h3>
<span class="text-2xl font-bold">{rsvps.length}</span>
</div>
{#if rsvps.length === 0}
<div class="text-dark-400 py-8 text-center">
<p>No attendees yet</p>
<p class="mt-1 text-sm">Be the first to join!</p>
<p>{t('event.noAttendeesYet')}</p>
<p class="mt-1 text-sm">{t('event.beFirstToJoin')}</p>
</div>
{:else}
<div class="space-y-3">
@@ -361,7 +368,7 @@
<button
type="submit"
class="text-dark-400 p-1 transition-colors duration-200 hover:text-red-400"
aria-label="Remove RSVP"
aria-label={t('event.removeRsvpAriaLabel')}
>
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
@@ -386,13 +393,13 @@
on:click={copyEventLink}
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"
>
Copy Link
{t('event.copyLinkButton')}
</button>
<button
on:click={openCalendarModal}
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"
>
Add to Calendar
{t('event.addToCalendarButton')}
</button>
</div>
</div>
@@ -423,7 +430,7 @@
<div
class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-yellow-500/30 bg-yellow-900/20 p-4 text-yellow-400"
>
Removed RSVP successfully.
{t('event.removedRsvpSuccessfully')}
</div>
{/if}
{/if}

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

@@ -2,6 +2,7 @@
import type { EventType } 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;
@@ -33,7 +34,9 @@
eventData = {
...eventData,
...values,
attendee_limit: values.attendee_limit ? parseInt(String(values.attendee_limit)) : null
attendee_limit: (values as any).attendee_limit
? parseInt(String((values as any).attendee_limit))
: null
};
}
@@ -50,7 +53,7 @@
</script>
<svelte:head>
<title>Edit Event - {data.event.name} - Cactoide</title>
<title>{t('event.editTitle', { eventName: data.event.name })}</title>
</svelte:head>
<div class="flex min-h-screen flex-col">
@@ -60,8 +63,8 @@
<!-- 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>
<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
@@ -93,7 +96,7 @@
<!-- Event Name -->
<div>
<label for="name" class="text-dark-800 mb-3 block text-sm font-semibold">
Name <span class="text-red-400">*</span>
{t('common.name')} <span class="text-red-400">{t('common.required')}</span>
</label>
<input
id="name"
@@ -101,7 +104,7 @@
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"
placeholder={t('common.enterEventName')}
maxlength="100"
required
/>
@@ -114,7 +117,7 @@
<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>
{t('common.date')} <span class="text-red-400">{t('common.required')}</span>
</label>
<input
id="date"
@@ -132,7 +135,7 @@
<div>
<label for="time" class="text-dark-800 mb-3 block text-sm font-semibold">
Time <span class="text-red-400">*</span>
{t('common.time')} <span class="text-red-400">{t('common.required')}</span>
</label>
<input
id="time"
@@ -151,7 +154,7 @@
<!-- Location -->
<div>
<label for="location" class="text-dark-800 mb-3 block text-sm font-semibold">
Location <span class="text-red-400">*</span>
{t('common.location')} <span class="text-red-400">{t('common.required')}</span>
</label>
<input
id="location"
@@ -159,7 +162,7 @@
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"
placeholder={t('common.enterLocation')}
maxlength="200"
required
/>
@@ -172,7 +175,7 @@
<div>
<fieldset>
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
Type <span class="text-red-400">*</span>
{t('common.type')} <span class="text-red-400">{t('common.required')}</span>
</legend>
<div class="grid grid-cols-2 gap-3">
<button
@@ -183,7 +186,7 @@
: 'border-dark-300 text-dark-700'}"
on:click={() => handleTypeChange('unlimited')}
>
Unlimited
{t('common.unlimited')}
</button>
<button
type="button"
@@ -193,7 +196,7 @@
: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
on:click={() => handleTypeChange('limited')}
>
Limited
{t('common.limited')}
</button>
</div>
</fieldset>
@@ -203,7 +206,7 @@
{#if eventData.type === 'limited'}
<div>
<label for="limit" class="text-dark-800 mb-3 block text-sm font-semibold">
Attendee Limit *
{t('common.attendeeLimit')} <span class="text-red-400">{t('common.required')}</span>
</label>
<input
id="attendee_limit"
@@ -213,7 +216,7 @@
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"
placeholder={t('common.enterLimit')}
required
/>
{#if errors.attendee_limit}
@@ -226,7 +229,7 @@
<div>
<fieldset>
<legend class="text-dark-800 mb-3 block text-sm font-semibold">
Visibility <span class="text-red-400">*</span>
{t('common.visibility')} <span class="text-red-400">{t('common.required')}</span>
</legend>
<div class="grid grid-cols-2 gap-3">
<button
@@ -237,7 +240,7 @@
: 'border-dark-300 text-dark-700'}"
on:click={() => (eventData.visibility = 'public')}
>
🌍 Public
{t('create.publicOption')}
</button>
<button
type="button"
@@ -247,13 +250,13 @@
: 'border-dark-300 text-dark-700 bg-gray-600/20 hover:bg-gray-600/70'}"
on:click={() => (eventData.visibility = 'private')}
>
🔒 Private
{t('create.privateOption')}
</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'}
? t('create.publicDescription')
: t('create.privateDescription')}
</p>
</fieldset>
</div>
@@ -265,7 +268,7 @@
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
{t('common.cancel')}
</button>
<button
type="submit"
@@ -275,10 +278,10 @@
{#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...
{t('event.updatingEvent')}
</div>
{:else}
Update Event
{t('event.updateEventButton')}
{/if}
</button>
</div>