feat(group): show events

3 files changed, 78 insertions, 6 deletions

diff --git a/src/lib/Database/events.ts b/src/lib/Database/events.ts
index 714bd446..c6153d26 100644
--- a/src/lib/Database/events.ts
+++ b/src/lib/Database/events.ts
@@ -1,12 +1,14 @@
 import supabase from './supabase';
 
-interface Event {
+export interface Event {
 	id: number;
 	created_at: string;
 	updated_at: string;
 	title: string;
 	description: string;
-	group: number;
+	group: string;
+	banner: string;
+	anilist_url: string;
 }
 
 interface NewEvent {
@@ -15,11 +17,16 @@ interface NewEvent {
 	description: string;
 }
 
-export const getEvents = async (group?: number) => {
-	let data, error;
+export const getEvents = async () => {
+	const { data, error } = await supabase.from('events').select('*');
 
-	if (group) [data, error] = await supabase.from('events').select('*').eq('group', group);
-	else [data, error] = await supabase.from('events').select('*');
+	if (error) return [];
+
+	return data as Event[];
+};
+
+export const getGroupEvents = async (group: string) => {
+	const { data, error } = await supabase.from('events').select('*').eq('group', group);
 
 	if (error) return [];
 
diff --git a/src/routes/api/events/+server.ts b/src/routes/api/events/+server.ts
new file mode 100644
index 00000000..987eecae
--- /dev/null
+++ b/src/routes/api/events/+server.ts
@@ -0,0 +1,4 @@
+import { getGroupEvents } from '$lib/Database/events';
+
+export const GET = async ({ url }) =>
+	Response.json(await getGroupEvents(url.searchParams.get('group') || ''));
diff --git a/src/routes/events/group/[group]/+page.svelte b/src/routes/events/group/[group]/+page.svelte
index 5a36a755..7cd37100 100644
--- a/src/routes/events/group/[group]/+page.svelte
+++ b/src/routes/events/group/[group]/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
 	import type { Group } from '$lib/Database/groups';
+	import type { Event } from '$lib/Database/events';
 	import Message from '$lib/Loading/Message.svelte';
 	import tooltip from '$lib/Tooltip/tooltip';
 	import root from '$lib/Utility/root';
 	import { onMount } from 'svelte';
+	import locale from '$stores/locale.js';
 
 	export let data;
 
@@ -14,6 +16,8 @@
 	});
 
 	const asGroup = (group: any) => group as Group;
+
+	const asEvent = (event: any) => event as Event;
 </script>
 
 {#await groupsResponse}
@@ -76,6 +80,59 @@
 						</div>
 					</div>
 				</div>
+
+				<p />
+
+				<details open>
+					<summary>Events</summary>
+
+					{#await fetch(root(`/api/events?group=${data.group}`))}
+						<Message message="Loading events ..." />
+					{:then eventsResponse}
+						{#await eventsResponse.json()}
+							<Message message="Parsing events ..." />
+						{:then events}
+							{#if events}
+								{#each events as rawEvent}
+									{@const event = asEvent(rawEvent)}
+
+									<a href={event.anilist_url} target="_blank">
+										<div
+											class="card"
+											id="user-grid"
+											style={`background-image: ${
+												event.banner ? `url(${event.banner})` : 'none'
+											}; padding: 0;`}
+										>
+											{#if event}
+												<img src={event.banner} alt="" id="cover-image" />
+											{/if}
+
+											<div class="card" id="user-grid-content">
+												<div id="user-grid-content-text">
+													<p>
+														<a href={event.anilist_url} target="_blank" class="title-text">
+															{event.title}
+														</a>
+														<br />
+														{$locale().dateFormatter(new Date(event.created_at))}
+													</p>
+
+													<p>{event.description}</p>
+												</div>
+											</div>
+										</div>
+									</a>
+								{/each}
+							{/if}
+						{:catch}
+							<Message message="" loader="ripple" slot>
+								Error parsing events. Please
+								<a href={'#'} on:click={() => location.reload()}>try again</a> later.
+							</Message>
+						{/await}
+					{/await}
+				</details>
 			{/if}
 		{:catch}
 			<Message message="" loader="ripple" slot>
@@ -129,4 +186,8 @@
 		visibility: hidden;
 		height: 4.5em;
 	}
+
+	.title-text {
+		font-size: 1.1em;
+	}
 </style>