added appointment participant table

src/lib/dbdata.ts

@@ -7,6 +7,7 @@ export interface Appointment {
     place: string;
     duration: number;
     times: AppointmentTimes[];
+    inputs: DynamicJson[];
 }  
 
 export interface AppointmentTimes {
@@ -42,4 +43,14 @@ export interface WeekdayAppointment {
 export interface AppointmentList {
     week: number;
     appointments: WeekdayAppointment[];
+}
+
+interface DynamicJson {
+    [key: string]: any; // Allows any key with any value
+}
+
+export interface AppointmentBooking {
+    appointment: string;
+    time: Date;
+    inputs: DynamicJson[];
 }

src/lib/funcs.ts

@@ -11,6 +11,10 @@ export function extractTime(date: Date): string {
     return moment(date).format("HH:mm");
 }
 
+export function extractDate(date: Date): string {
+    return moment(date).format("DD.MM.YYYY");
+}
+
 export function getTimeSlots(startDate: string, startTime: string, endTime: string, intervalMinutes: number = 15) {
     let start = moment(`${startDate} ${startTime}`, "YYYY-MM-DD HH:mm");
     let end = moment(`${startDate} ${endTime}`, "YYYY-MM-DD HH:mm");

src/routes/user/bookings/+page.svelte

@@ -1,34 +1,56 @@
+<script lang="ts">
+    import { api_host, authToken } from "$lib";
+	import type { Appointment } from "$lib/dbdata";
+	import { onMount } from "svelte";
+
+    let appointmentData: Appointment[] = [];
+    let ready: boolean = false;
+
+    async function fetchAppointments() {
+        try {
+            const response = await fetch(`${api_host}/api/users/appointments`, {
+                method: "GET",
+                headers: {
+                    "Authorization": "Bearer " + $authToken
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+
+            const data: Appointment[] = await response.json();
+            appointmentData = data;
+        } catch (error) {
+            console.log('Error during fetch:', error);
+        }
+    }
+
+
+    onMount(async () => {
+       await fetchAppointments();
+       
+       ready = true;
+    });
+</script>
+
 <table class="border large-space large-text">
     <thead>
         <tr>
-            <th class="min center-align">Datum</th>
-            <th class="min center-align">Zeit</th>
-            <th class="min center-align">Dauer</th>
-            <th class="min center-align">Teilnehmer</th>
-            <th class="min center-align">Thema</th>
+            <th class="min center-align">Veranstaltung</th>
+            <th class="min center-align">Teilnehmerliste</th>
         </tr>
     </thead>
     <tbody>
-        <tr>
-            <td class="center-align">19.01.2025</td>
-            <td class="center-align">14.30</td>
-            <td class="center-align">15 Min</td>
-            <td class="center-align">Herr Schulte</td>
-            <td class="center-align">Elternsprechtag 7d</td>
-        </tr>
-        <tr>
-            <td class="center-align">19.01.2025</td>
-            <td class="center-align">14.45</td>
-            <td class="center-align">30 Min</td>
-            <td class="center-align">Frau Schulte</td>
-            <td class="center-align">Elternsprechtag 7d</td>
-        </tr>
-        <tr>
-            <td class="center-align">19.01.2025</td>
-            <td class="center-align">15.15</td>
-            <td class="center-align">1 Std.</td>
-            <td class="center-align">Herr Schulte</td>
-            <td class="center-align">Elternsprechtag 7d</td>
-        </tr>
+        {#each appointmentData as data}
+            <tr>
+                <td>{data.title}</td>
+                <td class="center-align">
+                    <a href={`/user/participants?id=${data._id}`} class="button medium secondary">
+                        <span>Teilnehmer</span>
+                    </a>
+                </td>
+            </tr> 
+        {/each}
     </tbody>
 </table>

src/routes/user/participants/+page.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import { goto } from "$app/navigation";
+	import { page } from "$app/stores";
+    import { api_host, authToken } from "$lib";
+	import type { Appointment, AppointmentBooking } from "$lib/dbdata";
+	import { extractDate, extractTime } from "$lib/funcs";
+	import AppointmentInfo from "$lib/modules/AppointmentInfo.svelte";
+	import { onMount } from "svelte";
+
+    let bookingData: AppointmentBooking[] = [];
+    let appointmentData: Appointment;
+    let ready: boolean = false;
+
+    async function fetchParticipants(appointmentId: string) {
+        try {
+            const response = await fetch(`${api_host}/api/users/bookings?appointmentId=${appointmentId}`, {
+                method: "GET",
+                headers: {
+                    "Authorization": "Bearer " + $authToken
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+
+            const data: AppointmentBooking[] = await response.json();
+            bookingData = data;
+        } catch (error) {
+            console.log('Error during fetch:', error);
+        }
+    }
+
+    async function fetchAppointment(appointmentId: string) {
+        try {
+            const response = await fetch(`${api_host}/api/schedule?appointmentId=${appointmentId}&isUser=true`, {
+                method: "GET",
+                headers: {
+                    "Authorization": "Bearer " + $authToken
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(`HTTP error! Status: ${response.status}`);
+            }
+
+            const data: Appointment = await response.json();
+            appointmentData = data;
+        } catch (error) {
+            console.log('Error during fetch:', error);
+        }
+    }
+
+    onMount(async () => {
+        const id = $page.url.searchParams.get('id');
+        if (!id) {
+            goto('/user/bookings');
+        } else {
+            await fetchAppointment(id);
+            await fetchParticipants(id);
+        }
+       ready = true;
+    });
+</script>
+
+{#if appointmentData && ready}
+
+    <AppointmentInfo title={appointmentData.title} location={appointmentData.place} description={`${appointmentData.duration} Min`} />
+
+    <table class="border large-space large-text">
+        <thead>
+            <tr>
+                <th class="min center-align">Datum</th>
+                <th class="min center-align">Zeit</th>
+                {#if appointmentData}
+                    {#each appointmentData.inputs as input}
+                        <th class="min center-align">{input.name}</th>
+                    {/each}
+                {/if}
+            </tr>
+        </thead>
+        <tbody>
+            {#each bookingData as data}
+                <tr>
+                    <td class="center-align">{extractDate(data.time)}</td>
+                    <td class="center-align">{extractTime(data.time)}</td>
+                    {#each data.inputs as input}
+                        <td class="center-align">{input.value}</td>    
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+{/if}