added affiliated clubs and updated events page
This commit is contained in:
paololahoud2004@gmail.com
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { PortableText } from '@portabletext/svelte';
|
||||
import { CalendarDays, MapPin, Link as LinkIcon, FilePen } from '@lucide/svelte';
|
||||
import { CalendarDays, MapPin, Link as LinkIcon, FilePen, CalendarPlus } from '@lucide/svelte';
|
||||
|
||||
let {
|
||||
eventTitle,
|
||||
@@ -10,96 +10,220 @@
|
||||
thumbnail,
|
||||
registrationLink,
|
||||
paymentLink,
|
||||
eventCategory
|
||||
eventCategory,
|
||||
isPastEvent = false
|
||||
} = $props();
|
||||
|
||||
// Function to generate .ics file for calendar
|
||||
const addToCalendar = () => {
|
||||
const eventDate = new Date(date);
|
||||
const endDate = new Date(eventDate.getTime() + 2 * 60 * 60 * 1000); // 2 hours duration
|
||||
|
||||
const formatDate = (d: Date) => {
|
||||
return d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
|
||||
};
|
||||
|
||||
const icsContent = [
|
||||
'BEGIN:VCALENDAR',
|
||||
'VERSION:2.0',
|
||||
'PRODID:-//ECSESS//Events//EN',
|
||||
'BEGIN:VEVENT',
|
||||
`DTSTART:${formatDate(eventDate)}`,
|
||||
`DTEND:${formatDate(endDate)}`,
|
||||
`SUMMARY:${eventTitle}`,
|
||||
`LOCATION:${location || 'TBA'}`,
|
||||
`DESCRIPTION:${eventTitle} - ECSESS Event`,
|
||||
'END:VEVENT',
|
||||
'END:VCALENDAR'
|
||||
].join('\n');
|
||||
|
||||
const blob = new Blob([icsContent], { type: 'text/calendar' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.download = `${eventTitle.replace(/\s+/g, '_')}.ics`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="bg-ecsess-50 text-ecsess-800 mx-auto w-[100%] rounded-md p-5 lg:w-[64%] lg:max-w-3xl">
|
||||
<div class="bg-ecsess-150 rounded-md">
|
||||
<div
|
||||
class="group dark:bg-ecsess-950 dark:shadow-ecsess-950/50 relative flex h-full flex-col overflow-hidden rounded-2xl bg-white shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl"
|
||||
>
|
||||
<!-- Image Container with Gradient Overlay -->
|
||||
<div class="relative h-64 overflow-hidden">
|
||||
{#if thumbnail}
|
||||
<img
|
||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
src={thumbnail}
|
||||
alt={eventTitle}
|
||||
/>
|
||||
{:else if eventCategory?.[0] === 'social'}
|
||||
<img
|
||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
src="/Social.jpg"
|
||||
alt="Social Event"
|
||||
/>
|
||||
{:else if eventCategory?.[0] === 'technical'}
|
||||
<img
|
||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
src="/Technical.jpg"
|
||||
alt="Technical Event"
|
||||
/>
|
||||
{:else if eventCategory?.[0] === 'professional'}
|
||||
<img
|
||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
src="/Professional.jpg"
|
||||
alt="Professional Event"
|
||||
/>
|
||||
{:else if eventCategory?.[0] === 'academic'}
|
||||
<img
|
||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
src="/Academic.jpg"
|
||||
alt="Academic Event"
|
||||
/>
|
||||
{:else}
|
||||
<img
|
||||
class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
src="/ECSESS.png"
|
||||
alt="ECSESS Event"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<!-- Gradient overlay -->
|
||||
<div
|
||||
class="bg-ecsess-400 grid h-[200px] place-items-center overflow-hidden rounded-md"
|
||||
aria-label="Event banner"
|
||||
>
|
||||
{#if thumbnail}
|
||||
<img class="h-full object-cover" src={thumbnail} alt="Event banner" />
|
||||
{:else if eventCategory?.[0] === 'social'}
|
||||
<img class="h-full object-cover" src="/Social.jpg" alt="Social Placeholder" />
|
||||
{:else if eventCategory?.[0] === 'technical'}
|
||||
<img class="h-full object-cover" src="/Technical.jpg" alt="Technical Placeholder" />
|
||||
{:else if eventCategory?.[0] === 'professional'}
|
||||
<img class="h-full object-cover" src="/Professional.jpg" alt="Professional Placeholder" />
|
||||
{:else if eventCategory?.[0] === 'academic'}
|
||||
<img class="h-full object-cover" src="/Academic.jpg" alt="Academic Placeholder" />
|
||||
class="absolute inset-0 bg-gradient-to-b from-transparent via-black/30 to-black/80 dark:to-black/90"
|
||||
></div>
|
||||
|
||||
<!-- Badges -->
|
||||
<div class="absolute top-0 right-0 left-0 flex items-start justify-between gap-2 p-4">
|
||||
{#if isPastEvent}
|
||||
<span
|
||||
class="dark:bg-ecsess-900/95 rounded-full bg-gray-800/95 px-4 py-1.5 text-xs font-bold tracking-wider text-gray-300 uppercase backdrop-blur-sm"
|
||||
>
|
||||
Past Event
|
||||
</span>
|
||||
{:else}
|
||||
<img class="h-full object-cover" src="/ECSESS.png" alt="Default Placeholder" />
|
||||
<span
|
||||
class="bg-ecsess-500/95 dark:bg-ecsess-400/95 rounded-full px-4 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
|
||||
>
|
||||
Upcoming
|
||||
</span>
|
||||
{/if}
|
||||
|
||||
{#if eventCategory && eventCategory.length > 0}
|
||||
<div class="flex flex-wrap justify-end gap-2">
|
||||
{#each eventCategory as category}
|
||||
<span
|
||||
class="bg-ecsess-600/95 dark:bg-ecsess-500/95 rounded-full px-3 py-1.5 text-xs font-bold tracking-wider text-white uppercase backdrop-blur-sm"
|
||||
>
|
||||
{category}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Event Title Overlay -->
|
||||
<div class="absolute right-0 bottom-0 left-0 p-6">
|
||||
<h3 class="text-2xl leading-tight font-bold text-white drop-shadow-2xl">
|
||||
{eventTitle}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- content -->
|
||||
<div class="mt-[22px] grid gap-[18px]">
|
||||
<p
|
||||
class="text-ecsess-800 my-0 text-center text-xl leading-6 tracking-[0.3px] text-wrap lg:text-2xl lg:leading-8"
|
||||
>
|
||||
{eventTitle}
|
||||
</p>
|
||||
|
||||
<!-- Content Section -->
|
||||
<div class="flex flex-1 flex-col p-6">
|
||||
<!-- Description -->
|
||||
{#if eventDescription}
|
||||
<div class="text-ecsess-700 mx-auto max-w-[75ch] leading-relaxed">
|
||||
<div
|
||||
class="text-ecsess-800 dark:text-ecsess-100 mb-6 line-clamp-3 flex-1 text-sm leading-relaxed"
|
||||
>
|
||||
<PortableText value={eventDescription} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="mt-[6px] grid gap-4 md:grid-cols-2">
|
||||
<div class="bg-ecsess-100 grid gap-[10px] rounded-md px-4 py-[14px]">
|
||||
<div class="text-ecsess-800 flex items-center gap-2">
|
||||
<CalendarDays class="shrink-0" strokeWidth={2.5} />
|
||||
<span class="font-bold tracking-[0.2px]">Datetime:</span>
|
||||
<p class="m-0 text-left">{date}</p>
|
||||
<!-- Info Grid -->
|
||||
<div class="bg-ecsess-50 dark:bg-ecsess-900/40 mb-6 space-y-3 rounded-xl p-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="bg-ecsess-500 dark:bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
|
||||
>
|
||||
<CalendarDays class="h-5 w-5 text-white" strokeWidth={2.5} />
|
||||
</div>
|
||||
|
||||
<div class="text-ecsess-800 flex items-center gap-2">
|
||||
<MapPin class="shrink-0" strokeWidth={2.5} />
|
||||
<span class="font-bold tracking-[0.2px]">Location:</span>
|
||||
<p class="m-0 text-left">{location ?? 'TBA'}</p>
|
||||
<div class="flex-1">
|
||||
<p class="text-ecsess-900 dark:text-ecsess-50 text-sm font-semibold">{date}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-ecsess-100 grid gap-[10px] rounded-md px-4 py-[14px]">
|
||||
<div class="text-ecsess-800 flex items-center gap-2">
|
||||
<FilePen class="shrink-0" strokeWidth={2.5} />
|
||||
<span class="font-bold tracking-[0.2px]">Registration:</span>
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="bg-ecsess-500 dark:bg-ecsess-400 flex h-10 w-10 items-center justify-center rounded-full shadow-md"
|
||||
>
|
||||
<MapPin class="h-5 w-5 text-white" strokeWidth={2.5} />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-ecsess-900 dark:text-ecsess-50 text-sm font-semibold">
|
||||
{location ?? 'TBA'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
{#if !isPastEvent}
|
||||
<div class="space-y-2">
|
||||
<!-- Add to Calendar Button -->
|
||||
<button
|
||||
onclick={addToCalendar}
|
||||
class="bg-ecsess-500 hover:bg-ecsess-600 dark:bg-ecsess-400 dark:hover:bg-ecsess-500 flex w-full items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
||||
>
|
||||
<CalendarPlus class="h-5 w-5" strokeWidth={2.5} />
|
||||
Add to Calendar
|
||||
</button>
|
||||
|
||||
<!-- Registration & Payment Row -->
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
{#if registrationLink}
|
||||
<a
|
||||
href={registrationLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-ecsess-800 text-left underline-offset-4 hover:underline"
|
||||
class="bg-ecsess-600 hover:bg-ecsess-700 dark:bg-ecsess-500 dark:hover:bg-ecsess-600 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
||||
>
|
||||
Register Here
|
||||
<FilePen class="h-4 w-4" strokeWidth={2.5} />
|
||||
Register
|
||||
</a>
|
||||
{:else}
|
||||
<p class="m-0 text-left">Just drop in!</p>
|
||||
<div
|
||||
class="bg-ecsess-150 text-ecsess-800 dark:bg-ecsess-900 dark:text-ecsess-200 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold"
|
||||
>
|
||||
<FilePen class="h-4 w-4" strokeWidth={2.5} />
|
||||
Drop In
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="text-ecsess-800 flex items-center gap-2">
|
||||
<LinkIcon class="shrink-0" strokeWidth={2.5} />
|
||||
<span class="font-bold tracking-[0.2px]">Payment:</span>
|
||||
{#if paymentLink}
|
||||
<a
|
||||
href={paymentLink}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="text-ecsess-800 text-left underline-offset-4 hover:underline"
|
||||
class="bg-ecsess-700 hover:bg-ecsess-800 dark:bg-ecsess-600 dark:hover:bg-ecsess-700 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg active:scale-95"
|
||||
>
|
||||
Pay Here
|
||||
<LinkIcon class="h-4 w-4" strokeWidth={2.5} />
|
||||
Pay
|
||||
</a>
|
||||
{:else}
|
||||
<p class="m-0 text-left">Free!</p>
|
||||
<div
|
||||
class="bg-ecsess-400 dark:bg-ecsess-500 flex items-center justify-center gap-2 rounded-xl px-4 py-3 text-sm font-bold text-white shadow-md"
|
||||
>
|
||||
Free!
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -17,22 +17,121 @@
|
||||
return Array.isArray(c) ? c.includes(category) : (c as string) === category;
|
||||
};
|
||||
|
||||
const parseEventDate = (dateString: string): Date => {
|
||||
// Try to parse various date formats
|
||||
const parsed = new Date(dateString);
|
||||
return isNaN(parsed.getTime()) ? new Date() : parsed;
|
||||
};
|
||||
|
||||
const formatEventDate = (dateString: string): string => {
|
||||
const date = parseEventDate(dateString);
|
||||
|
||||
// Check if the time is midnight (00:00) which likely means no time was specified
|
||||
const isMidnight = date.getUTCHours() === 0 && date.getUTCMinutes() === 0;
|
||||
|
||||
if (isMidnight) {
|
||||
// Format without time - just the date
|
||||
return date.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
} else {
|
||||
// Format with time
|
||||
return date.toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
hour12: true
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isPastEvent = (dateString: string): boolean => {
|
||||
const eventDate = parseEventDate(dateString);
|
||||
const now = new Date();
|
||||
return eventDate < now;
|
||||
};
|
||||
|
||||
const filtered = $derived((events ?? []).filter(matchCategory));
|
||||
|
||||
const upcomingEvents = $derived(
|
||||
filtered
|
||||
.filter((e) => !isPastEvent(e.date))
|
||||
.sort((a, b) => parseEventDate(a.date).getTime() - parseEventDate(b.date).getTime())
|
||||
);
|
||||
|
||||
const finishedEvents = $derived(
|
||||
filtered
|
||||
.filter((e) => isPastEvent(e.date))
|
||||
.sort((a, b) => parseEventDate(b.date).getTime() - parseEventDate(a.date).getTime())
|
||||
);
|
||||
</script>
|
||||
|
||||
<Tabs.Panel {value}>
|
||||
<div class="m-1 flex flex-wrap gap-4 lg:m-4">
|
||||
{#each filtered as e (e._id ?? e.name)}
|
||||
<EventBlock
|
||||
eventTitle={e.name}
|
||||
date={e.date}
|
||||
location={e.location}
|
||||
eventDescription={e.description}
|
||||
thumbnail={e.thumbnail}
|
||||
registrationLink={e.reglink}
|
||||
paymentLink={e.paylink}
|
||||
eventCategory={e.category}
|
||||
/>
|
||||
{/each}
|
||||
<div class="space-y-12 px-4 py-8 lg:px-8">
|
||||
<!-- Upcoming Events -->
|
||||
{#if upcomingEvents.length > 0}
|
||||
<section>
|
||||
<div class="mb-6 flex items-center gap-3">
|
||||
<div class="bg-ecsess-500 h-1 w-12 rounded-full"></div>
|
||||
<h2 class="text-ecsess-600 text-3xl font-bold">Upcoming Events</h2>
|
||||
</div>
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each upcomingEvents as e (e._id ?? e.name)}
|
||||
<EventBlock
|
||||
eventTitle={e.name}
|
||||
date={formatEventDate(e.date)}
|
||||
location={e.location}
|
||||
eventDescription={e.description}
|
||||
thumbnail={e.thumbnail}
|
||||
registrationLink={e.reglink}
|
||||
paymentLink={e.paylink}
|
||||
eventCategory={e.category}
|
||||
isPastEvent={false}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- Finished Events -->
|
||||
{#if finishedEvents.length > 0}
|
||||
<section>
|
||||
<div class="mb-6 flex items-center gap-3">
|
||||
<div class="h-1 w-12 rounded-full bg-gray-400"></div>
|
||||
<h2 class="text-3xl font-bold text-gray-700">Past Events</h2>
|
||||
</div>
|
||||
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each finishedEvents as e (e._id ?? e.name)}
|
||||
<EventBlock
|
||||
eventTitle={e.name}
|
||||
date={formatEventDate(e.date)}
|
||||
location={e.location}
|
||||
eventDescription={e.description}
|
||||
thumbnail={e.thumbnail}
|
||||
registrationLink={e.reglink}
|
||||
paymentLink={e.paylink}
|
||||
eventCategory={e.category}
|
||||
isPastEvent={true}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<!-- No events message -->
|
||||
{#if upcomingEvents.length === 0 && finishedEvents.length === 0}
|
||||
<div class="flex min-h-[400px] items-center justify-center">
|
||||
<div class="text-center">
|
||||
<p class="text-xl font-semibold text-gray-600">No events in this category yet</p>
|
||||
<p class="mt-2 text-gray-500">Check back soon for updates!</p>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Tabs.Panel>
|
||||
|
||||
Reference in New Issue
Block a user