forked from jmug/cactoide
feat: Add translation support
This commit is contained in:
Levente Orban
@@ -3,6 +3,7 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import type { PageData } from '../$types';
|
||||
import { formatTime, formatDate, isEventInTimeRange } from '$lib/dateHelpers';
|
||||
import { t } from '$lib/i18n/i18n.js';
|
||||
import Fuse from 'fuse.js';
|
||||
|
||||
let publicEvents: Event[] = [];
|
||||
@@ -17,7 +18,7 @@
|
||||
|
||||
export let data: PageData;
|
||||
// Use the server-side data
|
||||
$: publicEvents = data.events;
|
||||
$: publicEvents = data?.events || [];
|
||||
|
||||
// Initialize Fuse.js with search options
|
||||
$: fuse = new Fuse(publicEvents, {
|
||||
@@ -81,7 +82,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Discover Events - Cactoide</title>
|
||||
<title>{t('discover.title')}</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex min-h-screen flex-col">
|
||||
@@ -90,34 +91,36 @@
|
||||
{#if error}
|
||||
<div class="mx-auto max-w-2xl text-center">
|
||||
<div class="mb-4 text-4xl">⚠️</div>
|
||||
<p class="py-4">Something went wrong. Please try again.</p>
|
||||
<p class="py-4">{t('common.somethingWentWrong')}</p>
|
||||
<p class="text-red-600">{error}</p>
|
||||
<button
|
||||
on:click={() => goto('/')}
|
||||
class="rounded-sm border-2 border-violet-500 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-violet-500/10"
|
||||
>
|
||||
Home
|
||||
{t('common.home')}
|
||||
</button>
|
||||
</div>
|
||||
{:else if publicEvents.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 Public Events Yet</h2>
|
||||
<h2 class="mb-4 text-2xl font-bold">{t('discover.noPublicEventsTitle')}</h2>
|
||||
<p class="text-white-600 mb-8">
|
||||
There are no public events available at the moment. Be the first to create one!
|
||||
{t('discover.noPublicEventsDescription')}
|
||||
</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
|
||||
{t('discover.createButton')}
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="mx-auto max-w-4xl">
|
||||
<div class="mb-6">
|
||||
<h2 class="text-2xl font-bold text-slate-300">Public Events ({filteredEvents.length})</h2>
|
||||
<p class="text-slate-500">Discover events created by the community</p>
|
||||
<h2 class="text-2xl font-bold text-slate-300">
|
||||
{t('discover.publicEventsTitle', { count: filteredEvents.length })}
|
||||
</h2>
|
||||
<p class="text-slate-500">{t('discover.publicEventsDescription')}</p>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter Section -->
|
||||
@@ -143,14 +146,14 @@
|
||||
<input
|
||||
type="text"
|
||||
bind:value={searchQuery}
|
||||
placeholder="Search events by name, location..."
|
||||
placeholder={t('discover.searchPlaceholder')}
|
||||
class="w-full rounded-sm border border-slate-600 bg-slate-800 pl-10 text-white placeholder-slate-400 focus:border-violet-500 focus:ring-violet-500/20"
|
||||
/>
|
||||
{#if searchQuery}
|
||||
<button
|
||||
on:click={() => (searchQuery = '')}
|
||||
class="absolute inset-y-0 right-0 flex items-center pr-3 text-slate-400 hover:text-slate-300"
|
||||
aria-label="Search input"
|
||||
aria-label={t('discover.searchInputAriaLabel')}
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
@@ -170,7 +173,7 @@
|
||||
class="flex items-center rounded-sm border p-3 font-semibold {showFilters
|
||||
? 'border-violet-500 bg-violet-400/20'
|
||||
: 'border-slate-600 bg-slate-800'}"
|
||||
aria-label="Toggle filters"
|
||||
aria-label={t('discover.toggleFiltersAriaLabel')}
|
||||
>
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
@@ -191,57 +194,61 @@
|
||||
<!-- Event Type Filter -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="event-type-filter" class="text-sm font-medium text-slate-400"
|
||||
>Type:</label
|
||||
>{t('discover.typeFilterLabel')}</label
|
||||
>
|
||||
<select
|
||||
id="event-type-filter"
|
||||
bind:value={selectedEventType}
|
||||
class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
|
||||
>
|
||||
<option value="all">All</option>
|
||||
<option value="limited">Limited</option>
|
||||
<option value="unlimited">Unlimited</option>
|
||||
<option value="all">{t('discover.typeFilterAll')}</option>
|
||||
<option value="limited">{t('discover.typeFilterLimited')}</option>
|
||||
<option value="unlimited">{t('discover.typeFilterUnlimited')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Temporal Status Filter -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="temporal-status-filter" class="text-sm font-medium text-slate-400"
|
||||
>Status:</label
|
||||
>{t('discover.statusFilterLabel')}</label
|
||||
>
|
||||
<select
|
||||
id="temporal-status-filter"
|
||||
bind:value={selectedTemporalStatus}
|
||||
class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
|
||||
>
|
||||
<option value="all">All events</option>
|
||||
<option value="upcoming">Upcoming events</option>
|
||||
<option value="past">Past events</option>
|
||||
<option value="all">{t('discover.statusFilterAll')}</option>
|
||||
<option value="upcoming">{t('discover.statusFilterUpcoming')}</option>
|
||||
<option value="past">{t('discover.statusFilterPast')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Time Filter Dropdown -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="time-filter" class="text-sm font-medium text-slate-400">Time:</label>
|
||||
<label for="time-filter" class="text-sm font-medium text-slate-400"
|
||||
>{t('discover.timeFilterLabel')}</label
|
||||
>
|
||||
<select
|
||||
id="time-filter"
|
||||
bind:value={selectedTimeFilter}
|
||||
class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
|
||||
>
|
||||
<option value="any">Any time</option>
|
||||
<option value="next-week">Next week</option>
|
||||
<option value="next-month">Next month</option>
|
||||
<option value="any">{t('discover.timeFilterAny')}</option>
|
||||
<option value="next-week">{t('discover.timeFilterNextWeek')}</option>
|
||||
<option value="next-month">{t('discover.timeFilterNextMonth')}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Sort Order Dropdown -->
|
||||
<div class="flex items-center gap-2">
|
||||
<label for="sort-order" class="text-sm font-medium text-slate-400">Sort:</label>
|
||||
<label for="sort-order" class="text-sm font-medium text-slate-400"
|
||||
>{t('discover.sortOrderLabel')}</label
|
||||
>
|
||||
<select
|
||||
id="sort-order"
|
||||
bind:value={selectedSortOrder}
|
||||
class="rounded-sm border border-slate-600 bg-slate-800 px-3 py-2 text-sm text-white focus:border-violet-500 focus:ring-2 focus:ring-violet-500/20"
|
||||
>
|
||||
<option value="asc">Earliest first</option>
|
||||
<option value="desc">Latest first</option>
|
||||
<option value="asc">{t('discover.sortOrderEarliest')}</option>
|
||||
<option value="desc">{t('discover.sortOrderLatest')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,7 +270,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">
|
||||
@@ -289,7 +298,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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -300,7 +309,7 @@
|
||||
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
|
||||
{t('discover.viewButton')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -310,8 +319,10 @@
|
||||
{#if searchQuery && filteredEvents.length === 0}
|
||||
<div class="mt-8 text-center">
|
||||
<div class="mb-4 text-4xl">🔍</div>
|
||||
<h3 class="mb-2 text-xl font-bold text-slate-300">No events found</h3>
|
||||
<p class="text-slate-500">Try adjusting your search terms or browse all events</p>
|
||||
<h3 class="mb-2 text-xl font-bold text-slate-300">
|
||||
{t('discover.noEventsFoundTitle')}
|
||||
</h3>
|
||||
<p class="text-slate-500">{t('discover.noEventsFoundDescription')}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user