mirror of
https://github.com/polaroi8d/cactoide.git
synced 2026-03-22 06:05:28 +00:00
Initial commit
This commit is contained in:
Levente Orban
4
src/app.css
Normal file
4
src/app.css
Normal file
@@ -0,0 +1,4 @@
|
||||
@import 'tailwindcss';
|
||||
@plugin '@tailwindcss/forms';
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface PageState {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
11
src/app.html
Normal file
11
src/app.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
1
src/lib/assets/favicon.svg
Normal file
1
src/lib/assets/favicon.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
46
src/lib/components/Navbar.svelte
Normal file
46
src/lib/components/Navbar.svelte
Normal file
@@ -0,0 +1,46 @@
|
||||
<script lang="ts">
|
||||
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 {
|
||||
return $page.url.pathname === path;
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav class="relative z-50 backdrop-blur-md">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex h-16 items-center justify-between">
|
||||
<!-- Logo/Brand -->
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
on:click={() => navigateTo('/')}
|
||||
class="cursor-pointer text-2xl font-medium text-violet-400"
|
||||
>
|
||||
Event Cactus
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="md:flex md:items-center md:space-x-8">
|
||||
<button
|
||||
on:click={() => navigateTo('/')}
|
||||
class={isActive('/') ? 'text-violet-400' : 'cursor-pointer'}
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
|
||||
<button
|
||||
on:click={() => navigateTo('/create')}
|
||||
class={isActive('/create') ? 'text-violet-400' : 'cursor-pointer'}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
249
src/lib/stores/events-supabase.ts
Normal file
249
src/lib/stores/events-supabase.ts
Normal file
@@ -0,0 +1,249 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import { supabase } from '$lib/supabase';
|
||||
import type { Event, CreateEventData, RSVP, DatabaseEvent, DatabaseRSVP } from '$lib/types';
|
||||
|
||||
// Store for events
|
||||
const events = writable<Map<string, Event>>(new Map());
|
||||
|
||||
// Store for RSVPs
|
||||
const rsvps = writable<Map<string, RSVP[]>>(new Map());
|
||||
|
||||
// Generate a random URL-friendly ID
|
||||
function generateEventId(): string {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < 8; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// Convert database event to app event
|
||||
function convertDatabaseEvent(dbEvent: DatabaseEvent): Event {
|
||||
return {
|
||||
id: dbEvent.id,
|
||||
name: dbEvent.name,
|
||||
date: dbEvent.date,
|
||||
time: dbEvent.time,
|
||||
location: dbEvent.location,
|
||||
type: dbEvent.type,
|
||||
attendee_limit: dbEvent.attendee_limit,
|
||||
created_at: dbEvent.created_at,
|
||||
updated_at: dbEvent.updated_at
|
||||
};
|
||||
}
|
||||
|
||||
// Convert database RSVP to app RSVP
|
||||
function convertDatabaseRSVP(dbRSVP: DatabaseRSVP): RSVP {
|
||||
return {
|
||||
id: dbRSVP.id,
|
||||
event_id: dbRSVP.event_id,
|
||||
name: dbRSVP.name,
|
||||
user_id: dbRSVP.user_id,
|
||||
created_at: dbRSVP.created_at
|
||||
};
|
||||
}
|
||||
|
||||
export const eventsStore = {
|
||||
subscribe: events.subscribe,
|
||||
subscribeRSVPs: rsvps.subscribe,
|
||||
|
||||
// Create a new event
|
||||
createEvent: async (eventData: CreateEventData): Promise<string> => {
|
||||
const eventId = generateEventId();
|
||||
const now = new Date().toISOString();
|
||||
|
||||
try {
|
||||
const { error } = await supabase.from('events').insert({
|
||||
id: eventId,
|
||||
name: eventData.name,
|
||||
date: eventData.date,
|
||||
time: eventData.time,
|
||||
location: eventData.location,
|
||||
type: eventData.type,
|
||||
attendee_limit: eventData.attendee_limit,
|
||||
created_at: now,
|
||||
updated_at: now
|
||||
});
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Add to local store
|
||||
const newEvent: Event = {
|
||||
id: eventId,
|
||||
...eventData,
|
||||
created_at: now,
|
||||
updated_at: now
|
||||
};
|
||||
|
||||
events.update((currentEvents) => {
|
||||
const newMap = new Map(currentEvents);
|
||||
newMap.set(eventId, newEvent);
|
||||
return newMap;
|
||||
});
|
||||
|
||||
// Initialize empty RSVP list
|
||||
rsvps.update((currentRSVPs) => {
|
||||
const newMap = new Map(currentRSVPs);
|
||||
newMap.set(eventId, []);
|
||||
return newMap;
|
||||
});
|
||||
|
||||
return eventId;
|
||||
} catch (error) {
|
||||
console.error('Error creating event:', error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// Get event by ID
|
||||
getEvent: async (id: string): Promise<Event | undefined> => {
|
||||
try {
|
||||
const { data, error } = await supabase.from('events').select('*').eq('id', id).single();
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
if (data) {
|
||||
const event = convertDatabaseEvent(data);
|
||||
|
||||
// Update local store
|
||||
events.update((currentEvents) => {
|
||||
const newMap = new Map(currentEvents);
|
||||
newMap.set(id, event);
|
||||
return newMap;
|
||||
});
|
||||
|
||||
return event;
|
||||
}
|
||||
|
||||
return undefined;
|
||||
} catch (error) {
|
||||
console.error('Error fetching event:', error);
|
||||
return undefined;
|
||||
}
|
||||
},
|
||||
|
||||
// Get RSVPs for an event
|
||||
getRSVPs: async (eventId: string): Promise<RSVP[]> => {
|
||||
try {
|
||||
const { data, error } = await supabase
|
||||
.from('rsvps')
|
||||
.select('*')
|
||||
.eq('event_id', eventId)
|
||||
.order('created_at', { ascending: true });
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
const rsvpList = data?.map(convertDatabaseRSVP) || [];
|
||||
|
||||
// Update local store
|
||||
rsvps.update((currentRSVPs) => {
|
||||
const newMap = new Map(currentRSVPs);
|
||||
newMap.set(eventId, rsvpList);
|
||||
return newMap;
|
||||
});
|
||||
|
||||
return rsvpList;
|
||||
} catch (error) {
|
||||
console.error('Error fetching RSVPs:', error);
|
||||
return [];
|
||||
}
|
||||
},
|
||||
|
||||
// Add RSVP to an event
|
||||
addRSVP: async (eventId: string, name: string, userId: string): Promise<boolean> => {
|
||||
try {
|
||||
// First check if event exists and get its details
|
||||
const event = await eventsStore.getEvent(eventId);
|
||||
if (!event) return false;
|
||||
|
||||
// Check if event is full (for limited type events)
|
||||
if (event.type === 'limited' && event.attendee_limit) {
|
||||
const currentRSVPs = await eventsStore.getRSVPs(eventId);
|
||||
if (currentRSVPs.length >= event.attendee_limit) {
|
||||
return false; // Event is full
|
||||
}
|
||||
}
|
||||
|
||||
// Check if name is already in the list
|
||||
const existingRSVPs = await eventsStore.getRSVPs(eventId);
|
||||
if (existingRSVPs.some((rsvp) => rsvp.name.toLowerCase() === name.toLowerCase())) {
|
||||
return false; // Name already exists
|
||||
}
|
||||
|
||||
// Add RSVP to database
|
||||
const { data, error } = await supabase
|
||||
.from('rsvps')
|
||||
.insert({
|
||||
event_id: eventId,
|
||||
name: name.trim(),
|
||||
user_id: userId,
|
||||
created_at: new Date().toISOString()
|
||||
})
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Update local store
|
||||
const newRSVP = convertDatabaseRSVP(data);
|
||||
rsvps.update((currentRSVPs) => {
|
||||
const newMap = new Map(currentRSVPs);
|
||||
const eventRSVPs = newMap.get(eventId) || [];
|
||||
newMap.set(eventId, [...eventRSVPs, newRSVP]);
|
||||
return newMap;
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error adding RSVP:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// Remove RSVP from an event
|
||||
removeRSVP: async (eventId: string, rsvpId: string): Promise<boolean> => {
|
||||
try {
|
||||
const { error } = await supabase
|
||||
.from('rsvps')
|
||||
.delete()
|
||||
.eq('id', rsvpId)
|
||||
.eq('event_id', eventId);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
// Update local store
|
||||
rsvps.update((currentRSVPs) => {
|
||||
const newMap = new Map(currentRSVPs);
|
||||
const eventRSVPs = newMap.get(eventId) || [];
|
||||
const updatedRSVPs = eventRSVPs.filter((rsvp) => rsvp.id !== rsvpId);
|
||||
newMap.set(eventId, updatedRSVPs);
|
||||
return newMap;
|
||||
});
|
||||
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('Error removing RSVP:', error);
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// Get event with RSVPs
|
||||
getEventWithRSVPs: async (
|
||||
eventId: string
|
||||
): Promise<{ event: Event; rsvps: RSVP[] } | undefined> => {
|
||||
try {
|
||||
const [event, rsvpList] = await Promise.all([
|
||||
eventsStore.getEvent(eventId),
|
||||
eventsStore.getRSVPs(eventId)
|
||||
]);
|
||||
|
||||
if (!event) return undefined;
|
||||
|
||||
return { event, rsvps: rsvpList };
|
||||
} catch (error) {
|
||||
console.error('Error fetching event with RSVPs:', error);
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
113
src/lib/stores/events.ts
Normal file
113
src/lib/stores/events.ts
Normal file
@@ -0,0 +1,113 @@
|
||||
import { writable } from 'svelte/store';
|
||||
import type { Event, CreateEventData, RSVP } from '$lib/types';
|
||||
|
||||
// In-memory store for events (in a real app, this would be a database)
|
||||
const events = writable<Map<string, Event>>(new Map());
|
||||
|
||||
// Generate a random URL-friendly ID
|
||||
function generateEventId(): string {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
||||
let result = '';
|
||||
for (let i = 0; i < 8; i++) {
|
||||
result += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// Generate a random ID for RSVPs
|
||||
function generateRSVPId(): string {
|
||||
return Math.random().toString(36).substr(2, 9);
|
||||
}
|
||||
|
||||
export const eventsStore = {
|
||||
subscribe: events.subscribe,
|
||||
|
||||
createEvent: (eventData: CreateEventData): string => {
|
||||
const eventId = generateEventId();
|
||||
const newEvent: Event = {
|
||||
id: eventId,
|
||||
...eventData,
|
||||
createdAt: new Date().toISOString(),
|
||||
attendees: []
|
||||
};
|
||||
|
||||
events.update((currentEvents) => {
|
||||
const newMap = new Map(currentEvents);
|
||||
newMap.set(eventId, newEvent);
|
||||
return newMap;
|
||||
});
|
||||
|
||||
return eventId;
|
||||
},
|
||||
|
||||
getEvent: (id: string): Event | undefined => {
|
||||
let event: Event | undefined;
|
||||
events.update((currentEvents) => {
|
||||
event = currentEvents.get(id);
|
||||
return currentEvents;
|
||||
});
|
||||
return event;
|
||||
},
|
||||
|
||||
addRSVP: (eventId: string, name: string): boolean => {
|
||||
let success = false;
|
||||
|
||||
events.update((currentEvents) => {
|
||||
const event = currentEvents.get(eventId);
|
||||
if (!event) return currentEvents;
|
||||
|
||||
// Check if event is full (for limited type events)
|
||||
if (
|
||||
event.type === 'limited' &&
|
||||
event.attendee_limit &&
|
||||
event.attendees.length >= event.attendee_limit
|
||||
) {
|
||||
return currentEvents;
|
||||
}
|
||||
|
||||
// Check if name is already in the list
|
||||
if (event.attendees.some((attendee) => attendee.name.toLowerCase() === name.toLowerCase())) {
|
||||
return currentEvents;
|
||||
}
|
||||
|
||||
const newRSVP: RSVP = {
|
||||
id: generateRSVPId(),
|
||||
name,
|
||||
timestamp: new Date().toISOString()
|
||||
};
|
||||
|
||||
const updatedEvent = {
|
||||
...event,
|
||||
attendees: [...event.attendees, newRSVP]
|
||||
};
|
||||
|
||||
const newMap = new Map(currentEvents);
|
||||
newMap.set(eventId, updatedEvent);
|
||||
success = true;
|
||||
return newMap;
|
||||
});
|
||||
|
||||
return success;
|
||||
},
|
||||
|
||||
removeRSVP: (eventId: string, rsvpId: string): boolean => {
|
||||
let success = false;
|
||||
|
||||
events.update((currentEvents) => {
|
||||
const event = currentEvents.get(eventId);
|
||||
if (!event) return currentEvents;
|
||||
|
||||
const updatedEvent = {
|
||||
...event,
|
||||
attendees: event.attendees.filter((attendee) => attendee.id !== rsvpId)
|
||||
};
|
||||
|
||||
const newMap = new Map(currentEvents);
|
||||
newMap.set(eventId, updatedEvent);
|
||||
success = true;
|
||||
return newMap;
|
||||
});
|
||||
|
||||
return success;
|
||||
}
|
||||
};
|
||||
10
src/lib/supabase.ts
Normal file
10
src/lib/supabase.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import { createClient } from '@supabase/supabase-js';
|
||||
|
||||
const supabaseUrl = 'https://jbposrybstrsgtjqzjxk.supabase.co';
|
||||
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
|
||||
|
||||
if (!supabaseAnonKey) {
|
||||
throw new Error('Missing VITE_SUPABASE_ANON_KEY environment variable');
|
||||
}
|
||||
|
||||
export const supabase = createClient(supabaseUrl, supabaseAnonKey);
|
||||
50
src/lib/types.ts
Normal file
50
src/lib/types.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
export type EventType = 'limited' | 'unlimited';
|
||||
|
||||
export interface Event {
|
||||
id: string;
|
||||
name: string;
|
||||
date: string;
|
||||
time: string;
|
||||
location: string;
|
||||
type: EventType;
|
||||
attendee_limit?: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface RSVP {
|
||||
id: string;
|
||||
event_id: string;
|
||||
name: string;
|
||||
user_id: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface CreateEventData {
|
||||
name: string;
|
||||
date: string;
|
||||
time: string;
|
||||
location: string;
|
||||
type: EventType;
|
||||
attendee_limit?: number;
|
||||
}
|
||||
|
||||
export interface DatabaseEvent {
|
||||
id: string;
|
||||
name: string;
|
||||
date: string;
|
||||
time: string;
|
||||
location: string;
|
||||
type: EventType;
|
||||
attendee_limit?: number;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface DatabaseRSVP {
|
||||
id: string;
|
||||
event_id: string;
|
||||
name: string;
|
||||
user_id: string;
|
||||
created_at: string;
|
||||
}
|
||||
35
src/routes/+error.svelte
Normal file
35
src/routes/+error.svelte
Normal file
@@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
$: error = $page.error;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Error - Event Cactus</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex min-h-screen flex-col">
|
||||
<!-- Error Content -->
|
||||
<div class="container mx-auto flex-1 px-4 py-8">
|
||||
<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">Error</h2>
|
||||
|
||||
<p class=" mb-6">
|
||||
{error?.message || 'An unexpected error occurred.'}
|
||||
</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button
|
||||
on:click={() => goto('/')}
|
||||
class="border-white-500 bg-white-400/20 mt-2 w-48 rounded-sm border px-6 py-3 font-semibold text-white duration-400 hover:scale-110 hover:bg-white/10"
|
||||
>
|
||||
Home
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
53
src/routes/+layout.svelte
Normal file
53
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,53 @@
|
||||
<script>
|
||||
import '../app.css';
|
||||
import Navbar from '$lib/components/Navbar.svelte';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Event Cactus -</title>
|
||||
<meta name="description" content="Create and manage event RSVPs" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="min-h-screen font-mono text-white">
|
||||
<div class="relative">
|
||||
<!-- Navbar -->
|
||||
<Navbar />
|
||||
|
||||
<!-- Main content -->
|
||||
<main class="relative z-10">
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-12">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<div class="text-sm">
|
||||
<p>© 2025 Event Cactus</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
#080818 0%,
|
||||
#0f0f1f 25%,
|
||||
#0a0a1a 50%,
|
||||
#0a1428 75%,
|
||||
#020614 100%
|
||||
);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
:global(*) {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
188
src/routes/+page.svelte
Normal file
188
src/routes/+page.svelte
Normal file
@@ -0,0 +1,188 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Event Cactus - The RSVP site</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Create and manage event RSVPs. No registration required, instant sharing."
|
||||
/>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex min-h-screen flex-col">
|
||||
<!-- Hero Section -->
|
||||
<section class="from-dark-900 to-dark-950 relative overflow-hidden bg-gradient-to-b pt-20 pb-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<!-- Animated background elements -->
|
||||
<div class="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
<div class="animate-float absolute top-20 left-10 h-32 w-32 rounded-full blur-xl"></div>
|
||||
<div
|
||||
class="bg-crypto-neon/10 animate-float absolute top-40 right-20 h-24 w-24 rounded-full blur-xl"
|
||||
style="animation-delay: -2s;"
|
||||
></div>
|
||||
<div
|
||||
class="bg-crypto-cyber/10 animate-float absolute bottom-20 left-1/4 h-20 w-20 rounded-full blur-xl"
|
||||
style="animation-delay: -4s;"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<h1 class="bg-gradient-to-r bg-clip-text text-5xl font-bold md:text-7xl lg:text-8xl">
|
||||
Event Cactus
|
||||
</h1>
|
||||
<p class="mt-6 text-xl md:text-2xl">The Ultimate RSVP Platform</p>
|
||||
<p class="mt-4 text-lg md:text-xl">Create, share, and manage events with zero friction.</p>
|
||||
|
||||
<div
|
||||
class="mt-10 flex flex-col items-center justify-center space-y-4 sm:flex-row sm:space-y-0 sm:space-x-6"
|
||||
>
|
||||
<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 Event Now
|
||||
</button>
|
||||
<button
|
||||
on:click={() => goto('/about')}
|
||||
class="rounded-sm border-2 px-8 py-4 font-bold duration-400 hover:scale-110 hover:bg-white/10"
|
||||
>
|
||||
Learn More
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class=" mb-16 text-center text-4xl font-bold">Why Event Cactus?</h2>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<!-- Feature 1 -->
|
||||
<div class="rounded-sm border p-8 text-center">
|
||||
<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
|
||||
<span class="text-4xl">🎯</span>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold text-white">Instant Event Creation</h3>
|
||||
<p class="">
|
||||
Create events in seconds with our streamlined form. No accounts, no waiting, just pure
|
||||
efficiency.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="rounded-sm border p-8 text-center">
|
||||
<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
|
||||
<span class="text-4xl">🔗</span>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold text-white">One-Click Sharing</h3>
|
||||
<p class="">
|
||||
Each event gets a unique, memorable URL. Share instantly via any platform or messaging
|
||||
app.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="rounded-sm border p-8 text-center">
|
||||
<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
|
||||
<span class="text-4xl">🔍</span>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold text-white">All-in-One Clarity</h3>
|
||||
<p class="">
|
||||
No more scrolling through endless chats and reactions. See everyone’s availability and
|
||||
responses neatly in one place.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4 -->
|
||||
<div class="rounded-sm border p-8 text-center">
|
||||
<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
|
||||
<span class="text-4xl">👤</span>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold text-white">No Hassle, No Sign-Ups</h3>
|
||||
<p class="">
|
||||
Skip registrations and endless forms. Unlike other event platforms, you create and share
|
||||
instantly — no accounts, no barriers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 5 -->
|
||||
<div class="rounded-sm border p-8 text-center">
|
||||
<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
|
||||
<span class="text-4xl">🛡️</span>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold text-white">Smart Limits</h3>
|
||||
<p class="">
|
||||
Choose between unlimited RSVPs or set a limited capacity. Perfect for any event size.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 5 -->
|
||||
<div class="rounded-sm border p-8 text-center">
|
||||
<div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full">
|
||||
<span class="text-4xl">✨</span>
|
||||
</div>
|
||||
<h3 class="mb-4 text-xl font-bold text-white">Effortless Simplicity</h3>
|
||||
<p class="">
|
||||
Designed to be instantly clear and easy. No learning curve — just open, create, and go.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- How It Works Section -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-4">
|
||||
<h2 class=" mb-16 text-center text-4xl font-bold">How It Works</h2>
|
||||
|
||||
<div class="grid gap-8 md:grid-cols-3">
|
||||
<!-- Step 1 -->
|
||||
<div class="text-center">
|
||||
<h3 class="mb-4 text-xl font-bold text-white">
|
||||
<span class="text-violet-400">1.</span> Create Event
|
||||
</h3>
|
||||
<p class="">
|
||||
Fill out a simple form with event details. Choose between limited or unlimited capacity.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="text-center">
|
||||
<h3 class="mb-4 text-xl font-bold text-white">
|
||||
<span class="text-violet-400">2.</span> Get Unique URL
|
||||
</h3>
|
||||
<p class="">
|
||||
Receive a random, memorable URL for your event. Perfect for sharing anywhere.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="text-center">
|
||||
<h3 class="mb-4 text-xl font-bold text-white">
|
||||
<span class="text-violet-400">3.</span> Collect RSVPs
|
||||
</h3>
|
||||
<p class="">People visit your link and join with just their name. No accounts needed.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="py-20">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h2 class="mb-6 text-4xl font-bold text-white">
|
||||
Ready to Create Your <span class="text-violet-400">First Event</span>?
|
||||
</h2>
|
||||
<p class="mb-10 text-xl">Join thousands of event organizers who trust Event Cactus</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
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
242
src/routes/create/+page.svelte
Normal file
242
src/routes/create/+page.svelte
Normal file
@@ -0,0 +1,242 @@
|
||||
<script lang="ts">
|
||||
import { eventsStore } from '$lib/stores/events-supabase';
|
||||
import type { CreateEventData, EventType } from '$lib/types';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let eventData: CreateEventData = {
|
||||
name: '',
|
||||
date: '',
|
||||
time: '',
|
||||
location: '',
|
||||
type: 'unlimited',
|
||||
attendee_limit: undefined
|
||||
};
|
||||
|
||||
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];
|
||||
|
||||
function validateForm(): boolean {
|
||||
errors = {};
|
||||
|
||||
if (!eventData.name.trim()) {
|
||||
errors.name = 'Event name is required';
|
||||
}
|
||||
|
||||
if (!eventData.date) {
|
||||
errors.date = 'Date is required';
|
||||
} else if (new Date(eventData.date) < new Date(today)) {
|
||||
errors.date = 'Date cannot be in the past';
|
||||
}
|
||||
|
||||
if (!eventData.time) {
|
||||
errors.time = 'Time is required';
|
||||
}
|
||||
|
||||
if (!eventData.location.trim()) {
|
||||
errors.location = 'Location is required';
|
||||
}
|
||||
|
||||
if (
|
||||
eventData.type === 'limited' &&
|
||||
(!eventData.attendee_limit || eventData.attendee_limit < 1)
|
||||
) {
|
||||
errors.attendee_limit = 'Limit must be at least 1 for limited events';
|
||||
}
|
||||
|
||||
return Object.keys(errors).length === 0;
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!validateForm()) return;
|
||||
|
||||
isSubmitting = true;
|
||||
|
||||
try {
|
||||
// Simulate API call delay
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
|
||||
const eventId = await eventsStore.createEvent(eventData);
|
||||
|
||||
// Redirect to the event page
|
||||
goto(`/event/${eventId}`);
|
||||
} catch (error) {
|
||||
console.error('Error creating event:', error);
|
||||
} finally {
|
||||
isSubmitting = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleTypeChange(type: EventType) {
|
||||
eventData.type = type;
|
||||
if (type === 'unlimited') {
|
||||
eventData.attendee_limit = undefined;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Create Event - Event Cactus</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 Creation Form -->
|
||||
<div class="rounded-sm border p-8">
|
||||
<h2 class="mb-8 text-center text-3xl font-bold text-violet-400">Create New Event</h2>
|
||||
|
||||
<form on:submit|preventDefault={handleSubmit} class="space-y-6">
|
||||
<!-- 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"
|
||||
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"
|
||||
/>
|
||||
{#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"
|
||||
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"
|
||||
/>
|
||||
{#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"
|
||||
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"
|
||||
/>
|
||||
{#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"
|
||||
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"
|
||||
/>
|
||||
{#if errors.location}
|
||||
<p class="mt-2 text-sm font-medium text-red-600">{errors.location}</p>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Event Type -->
|
||||
<div>
|
||||
<label class="text-dark-800 mb-3 block text-sm font-semibold">
|
||||
Type <span class="text-red-400">*</span></label
|
||||
>
|
||||
<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>
|
||||
</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"
|
||||
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"
|
||||
/>
|
||||
{#if errors.attendee_limit}
|
||||
<p class="mt-2 text-sm font-medium text-red-600">{errors.attendee_limit}</p>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- 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"
|
||||
>
|
||||
{#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>
|
||||
Creating Event...
|
||||
</div>
|
||||
{:else}
|
||||
Create Event
|
||||
{/if}
|
||||
</button>
|
||||
</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>
|
||||
50
src/routes/event/[id]/+error.svelte
Normal file
50
src/routes/event/[id]/+error.svelte
Normal file
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
$: error = $page.error;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Error - Event Cactus</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex min-h-screen flex-col">
|
||||
<!-- Page Header -->
|
||||
<div class=" border-b py-6">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class=" font-display mb-2 text-2xl font-bold">Error</h1>
|
||||
<p class="">Something went wrong</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Content -->
|
||||
<div class="container mx-auto flex-1 px-4 py-8">
|
||||
<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">Something Went Wrong</h2>
|
||||
|
||||
<p class=" mb-6">
|
||||
{error?.message || 'An unexpected error occurred.'}
|
||||
</p>
|
||||
|
||||
<div class="space-y-3">
|
||||
<button
|
||||
on:click={() => goto('/')}
|
||||
class=" w-full rounded-sm px-6 py-3 font-semibold text-white transition-colors duration-200"
|
||||
>
|
||||
Create New Event
|
||||
</button>
|
||||
|
||||
<button
|
||||
on:click={() => window.location.reload()}
|
||||
class="bg-dark-600 hover:bg-dark-500 w-full rounded-sm px-6 py-3 font-semibold text-white transition-colors duration-200"
|
||||
>
|
||||
Try Again
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
338
src/routes/event/[id]/+page.svelte
Normal file
338
src/routes/event/[id]/+page.svelte
Normal file
@@ -0,0 +1,338 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { eventsStore } from '$lib/stores/events-supabase';
|
||||
import type { Event, RSVP } from '$lib/types';
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let event: Event | undefined;
|
||||
let rsvps: RSVP[] = [];
|
||||
let newAttendeeName = '';
|
||||
let isAddingRSVP = false;
|
||||
let error = '';
|
||||
let success = '';
|
||||
let currentUserId = '';
|
||||
|
||||
const eventId = $page.params.id;
|
||||
|
||||
onMount(() => {
|
||||
loadEvent();
|
||||
generateUserId();
|
||||
});
|
||||
|
||||
function generateUserId() {
|
||||
// Generate a unique user ID and store it in localStorage
|
||||
let userId = localStorage.getItem('eventCactusUserId');
|
||||
if (!userId) {
|
||||
userId = 'user_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
||||
localStorage.setItem('eventCactusUserId', userId);
|
||||
}
|
||||
currentUserId = userId;
|
||||
}
|
||||
|
||||
async function loadEvent() {
|
||||
if (!eventId) return;
|
||||
|
||||
try {
|
||||
const result = await eventsStore.getEventWithRSVPs(eventId);
|
||||
if (result) {
|
||||
event = result.event;
|
||||
rsvps = result.rsvps;
|
||||
} else {
|
||||
error = 'Event not found';
|
||||
}
|
||||
} catch (err) {
|
||||
error = 'Failed to load event';
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateString: string, timeString: string): string {
|
||||
const date = new Date(`${dateString}T${timeString}`);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}/${month}/${day}`;
|
||||
}
|
||||
|
||||
function formatTime(timeString: string): string {
|
||||
const [hours, minutes] = timeString.split(':');
|
||||
return `${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
async function addRSVP() {
|
||||
if (!newAttendeeName.trim() || !eventId) return;
|
||||
|
||||
isAddingRSVP = true;
|
||||
error = '';
|
||||
success = '';
|
||||
|
||||
try {
|
||||
const rsvpSuccess = await eventsStore.addRSVP(eventId, newAttendeeName.trim(), currentUserId);
|
||||
|
||||
if (rsvpSuccess) {
|
||||
newAttendeeName = '';
|
||||
await loadEvent(); // Reload to get updated attendee list
|
||||
success = 'RSVP added successfully!';
|
||||
} else {
|
||||
error = 'Failed to add RSVP. Event might be full or name already exists.';
|
||||
}
|
||||
} catch (err) {
|
||||
error = 'An error occurred while adding RSVP.';
|
||||
} finally {
|
||||
isAddingRSVP = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeRSVP(rsvpId: string) {
|
||||
if (!eventId) return;
|
||||
|
||||
const success = await eventsStore.removeRSVP(eventId, rsvpId);
|
||||
if (success) {
|
||||
await loadEvent(); // Reload to get updated attendee list
|
||||
}
|
||||
}
|
||||
|
||||
function copyEventLink() {
|
||||
const url = `${window.location.origin}/event/${eventId}`;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
success = 'Event link copied to clipboard!';
|
||||
setTimeout(() => (success = ''), 4000);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{event?.name || 'Event'} - Event Cactus</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="flex min-h-screen flex-col">
|
||||
<!-- Main Content -->
|
||||
<div class="container mx-auto flex-1 px-4 py-6">
|
||||
{#if error && !event}
|
||||
<!-- Error State -->
|
||||
<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>
|
||||
<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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else if event}
|
||||
<div class="mx-auto max-w-md space-y-6">
|
||||
<!-- Event Details Card -->
|
||||
|
||||
<div class="rounded-sm border p-6 shadow-2xl">
|
||||
<h2 class=" mb-4 text-center text-2xl font-bold">
|
||||
{event.name}
|
||||
</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Date & Time -->
|
||||
<div class="flex items-center space-x-3 text-violet-400">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-sm">
|
||||
<svg class=" h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
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>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">
|
||||
{formatDate(event.date, event.time)}
|
||||
<span class="font-medium text-violet-400">-</span>
|
||||
{formatTime(event.time)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Location -->
|
||||
<div class="flex items-center space-x-3 text-violet-400">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-sm">
|
||||
<svg class=" h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
||||
></path>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-semibold text-white">{event.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Type & Capacity -->
|
||||
<div class="flex items-center justify-between rounded-sm p-3">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="rounded-full border px-2 py-1 text-xs font-semibold text-violet-400">
|
||||
{event.type === 'limited' ? 'Limited' : 'Unlimited'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{#if event.type === 'limited' && event.attendee_limit}
|
||||
<div class="text-right">
|
||||
<p class="text-sm">Capacity</p>
|
||||
<p class=" text-lg font-bold">
|
||||
{rsvps.length}/{event.attendee_limit}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
{#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>
|
||||
</div>
|
||||
{:else}
|
||||
<form on:submit|preventDefault={addRSVP} class="space-y-4">
|
||||
<div>
|
||||
<label for="attendeeName" class=" mb-2 block text-sm font-semibold">
|
||||
Your Name <span class="text-red-400">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="attendeeName"
|
||||
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"
|
||||
maxlength="50"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isAddingRSVP || !newAttendeeName.trim()}
|
||||
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"
|
||||
>
|
||||
{#if isAddingRSVP}
|
||||
<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>
|
||||
Adding...
|
||||
</div>
|
||||
{:else}
|
||||
Join Event
|
||||
{/if}
|
||||
</button>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<span class="text-crypto-gold 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>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each rsvps as attendee, index}
|
||||
<div
|
||||
class="flex items-center justify-between rounded-sm border border-white/20 p-3"
|
||||
>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div
|
||||
class="flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold"
|
||||
>
|
||||
{attendee.name.charAt(0).toUpperCase()}
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-medium text-white">{attendee.name}</p>
|
||||
<p class="text-xs text-violet-400">
|
||||
{(() => {
|
||||
const date = new Date(attendee.created_at);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}/${month}/${day} ${hours}:${minutes}`;
|
||||
})()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if attendee.user_id === currentUserId}
|
||||
<button
|
||||
on:click={() => removeRSVP(attendee.id)}
|
||||
class="text-dark-400 p-1 transition-colors duration-200 hover:text-red-400"
|
||||
aria-label="Remove RSVP"
|
||||
>
|
||||
<svg class="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>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="max-w-2xl">
|
||||
<button
|
||||
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
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success/Error Messages -->
|
||||
{#if success}
|
||||
<div
|
||||
class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-green-500/30 bg-green-900/20 p-4 text-green-400"
|
||||
>
|
||||
{success}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div
|
||||
class="fixed right-4 bottom-4 z-40 w-128 rounded-sm border border-red-500/30 bg-red-900/20 p-4 text-red-400"
|
||||
>
|
||||
{error}
|
||||
</div>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user