Merge pull request #62 from greybaron/feat/blockplan-tile

add blockplan tile

src/lib/DashboardTile.svelte

@@ -5,13 +5,14 @@
 	export let title: string;
 	export let clickable: boolean = true;
 	export let ready: boolean = false;
+	export let add_class: string = '';
 
 	const dispatch = createEventDispatcher();
 </script>
 
 <button
 	on:click={() => dispatch('click')}
-	class="{clickable && ready
+	class="{add_class} {ready
 		? ''
 		: 'pointer-events-none'} h-full bg-[#ddb8c1] dark:bg-[#3b1725] flex flex-col items-center w-full sm:w-96 rounded-xl p-4 pt-2 pb-3 space-y-1"
 >

src/lib/TSHelpers/ComponentOrder.ts

@@ -3,15 +3,17 @@ export const components: string[] = [
 	'GradesTile',
 	'MensaTile',
 	'CalendarTile',
-	'ExamSignupTile'
+	'ExamSignupTile',
+	'BlockplanTile'
 ];
 
 export const tileNames: Map<string, string> = new Map([
 	['BasicInfoTile', 'Deine Infos'],
 	['GradesTile', 'Noten'],
 	['ExamSignupTile', 'Prüfungen'],
 	['MensaTile', 'Mensa'],
-	['CalendarTile', 'Kalender']
+	['CalendarTile', 'Kalender'],
+	['BlockplanTile', 'Blockplan']
 ]);
 
 export function validateComponentOrder(order: string[]): boolean {

src/lib/TilesAndModals/BasicInfoTile.svelte

@@ -48,6 +48,7 @@
 <DashboardTile
 	title="Deine Infos"
 	clickable={false}
+	add_class="pointer-events-none"
 	ready={Boolean(basicUserData && fachsemester && ects)}
 >
 	<div class="h-full flex flex-col justify-around items-center">

src/lib/TilesAndModals/BlockplanTile.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import DashboardTile from '$lib/DashboardTile.svelte';
+	import { onMount } from 'svelte';
+
+	let timeline: Timeline;
+
+	import { createEventDispatcher } from 'svelte';
+	import { ToastPayloadClass, type Timeline, type ToastPayload } from '$lib/types';
+	import { Accordion, AccordionItem } from '@skeletonlabs/skeleton';
+	const dispatch = createEventDispatcher();
+
+	onMount(async () => {
+		console.log('Fetching timeline...');
+		const res = await fetch('/api/timeline');
+
+		if (!res.ok) {
+			let error = await res.text();
+			let payload: ToastPayload = {
+				text: error,
+				class: ToastPayloadClass.error
+			};
+			dispatch('showToast', payload);
+			return;
+		} else {
+			timeline = await res.json();
+		}
+	});
+</script>
+
+<DashboardTile title="Blockplan" clickable={false} ready={Boolean(timeline)}>
+	<Accordion>
+		{#if timeline.fachsemester.length > 0}
+			<AccordionItem>
+				<svelte:fragment slot="summary">Fachsemester</svelte:fragment>
+				<svelte:fragment slot="content">
+					<ul class="list-disc list-inside text-left">
+						{#each timeline.fachsemester as fsevent}
+							<li class="text-xs">{fsevent.description}</li>
+						{/each}
+					</ul>
+				</svelte:fragment>
+			</AccordionItem>
+		{/if}
+
+		{#if timeline.theoriesemester.length > 0}
+			<AccordionItem>
+				<svelte:fragment slot="summary">Theoriesemester</svelte:fragment>
+				<svelte:fragment slot="content">
+					<ul class="list-disc list-inside text-left">
+						{#each timeline.theoriesemester as tsevent}
+							<li class="text-xs">{tsevent.description}</li>
+						{/each}
+					</ul>
+				</svelte:fragment>
+			</AccordionItem>
+		{/if}
+
+		{#if timeline.praxissemester.length > 0}
+			<AccordionItem>
+				<svelte:fragment slot="summary">Praxissemester</svelte:fragment>
+				<svelte:fragment slot="content">
+					<ul class="list-disc list-inside text-left">
+						{#each timeline.praxissemester as psevent}
+							<li class="text-xs">{psevent.description}</li>
+						{/each}
+					</ul>
+				</svelte:fragment>
+			</AccordionItem>
+		{/if}
+
+		{#if timeline.specials.length > 0}
+			<AccordionItem>
+				<svelte:fragment slot="summary">Spezielles</svelte:fragment>
+				<svelte:fragment slot="content">
+					<ul class="list-disc list-inside text-left">
+						{#each timeline.specials as spevent}
+							<li class="text-xs">{spevent.description}</li>
+						{/each}
+					</ul>
+				</svelte:fragment>
+			</AccordionItem>
+		{/if}
+	</Accordion>
+</DashboardTile>

src/lib/types.ts

@@ -208,3 +208,18 @@ export interface Upcoming {
 	sm_stext: string;
 	sroom: string;
 }
+
+export type Timeline = {
+	fachsemester: TimelineEvent[];
+	theoriesemester: TimelineEvent[];
+	praxissemester: TimelineEvent[];
+	specials: TimelineEvent[];
+};
+
+export type TimelineEvent = {
+	name: string;
+	description: string;
+	color: string;
+	start: string;
+	end: string;
+};

src/routes/api/timeline/+server.js

@@ -0,0 +1,30 @@
+import { json } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private';
+
+export async function GET({ cookies }) {
+	const token = cookies.get('jwt');
+
+	if (!token) {
+		return json({ error: 'Unauthorized' }, { status: 401 });
+	}
+
+	try {
+		const response = await fetch(`${env.CD_API_URL}/get_timeline`, {
+			headers: {
+				Authorization: `Bearer ${token}`
+			}
+		});
+
+		if (!response.ok) {
+			throw new Error();
+		}
+
+		return response;
+	} catch (error) {
+		console.error('Error at blockplan:');
+		if (error instanceof Error) {
+			console.error(error.message);
+		}
+		return new Response('CaDu: Blockplan-Abfrage ist fehlgeschlagen', { status: 500 });
+	}
+}

src/routes/dashboard/+page.svelte

@@ -5,6 +5,7 @@
 	import ExamSignupTile from '$lib/TilesAndModals/ExamSignupTile.svelte';
 	import GradesTile from '$lib/TilesAndModals/GradesTile.svelte';
 	import MensaTile from '$lib/TilesAndModals/MensaTile.svelte';
+	import BlockplanTile from '$lib/TilesAndModals/BlockplanTile.svelte';
 
 	import {
 		getModalStore,
@@ -51,9 +52,10 @@
 	const componentMap: Record<string, object> = {
 		BasicInfoTile,
 		GradesTile,
+		ExamSignupTile,
 		MensaTile,
 		CalendarTile,
-		ExamSignupTile
+		BlockplanTile
 	};
 	let componentOrder: Writable<string[]>;
 	let componentProps: Record<string, object>;