appointment booking modularized

src/lib/dbdata.ts

@@ -16,4 +16,9 @@ export interface AppointmentTimes {
 
 export interface AuthTokenResponse {
     token: string;
+}
+
+export interface AppointmentDateTimes {
+    date: Date;
+    startTime: string;
 }

src/lib/modules/AppointmentInfo.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    export let title: string = "";
+    export let location: string = "";
+    export let description: string = "";
+</script>
+
+
+<article class="bottom-margin">
+    <h5>{title}</h5>
+    <p><i>pin_drop</i> {location}</p>
+    <p><i>description</i> {description}</p>
+</article>  

src/lib/modules/DateTimes.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { AppointmentDateTimes } from "$lib/dbdata";
+
+    export let availableTimes: AppointmentDateTimes[] = [];
+
+    function redirectToBooking(date: Date, startTime: string) {
+        console.log(date, startTime);
+    }
+</script>
+
+
+<h4 class="center-align top-margin">Times</h4>
+<article>
+    {#each availableTimes as time}
+        <button on:click={() => redirectToBooking(time.date, time.startTime)} 
+            class="responsive wave border bottom-margin">{time.startTime}</button>
+    {/each}
+</article>

src/routes/+layout.svelte

@@ -6,7 +6,7 @@
     <hr>
     <slot/>
 
-    <nav class="bottom no-space tabbed medium">
+    <nav class="bottom no-space tabbed large">
         <a href="/bookings">
             <i>event_note</i>
             <span>Termine</span>

src/routes/appointment/+page.svelte

@@ -1,5 +1,18 @@
 <script lang="ts">
+	import type { AppointmentDateTimes } from '$lib/dbdata';
+    import AppointmentInfo from '$lib/modules/AppointmentInfo.svelte';
     import DatePicker from '$lib/modules/DatePicker.svelte';
+	import DateTimes from '$lib/modules/DateTimes.svelte';
+
+    let title: string = "Appointment";
+    let location: string = "Somewhere";
+    let description: string = "Description ...";
+
+    let appointmentDateTimes: AppointmentDateTimes[] = [
+        {date: new Date(), startTime: "16:00"},
+        {date: new Date(), startTime: "17:00"},
+        {date: new Date(), startTime: "18:00"}
+    ];
 </script>
   
 <style>
@@ -14,24 +27,7 @@
 
 <DatePicker />
 
-<div class="top-margin w-80 inline-margin border"> 
-    <article class="bottom-margin">
-        <h5>Title</h5>
-        <p><i>pin_drop</i> Location</p>
-        <p><i>description</i> Description</p>
-    </article>  
-    <hr>
-    <h4>Times</h4>
-    <article>
-        <a class="row wave center-align">15:00</a>
-        <hr>
-        <a class="row wave center-align">15:15</a>
-        <hr>
-        <a class="row wave center-align">15:30</a>
-        <hr>
-        <a class="row wave center-align">17:00</a>
-        <hr>
-        <a class="row wave center-align">17:15</a>
-    </article>
-    <button class="button">Test</button>
+<div class="top-margin w-80 inline-margin"> 
+    <AppointmentInfo bind:title bind:description bind:location />
+    <DateTimes bind:availableTimes={appointmentDateTimes} />
 </div>

src/routes/creator/+page.svelte

@@ -13,13 +13,13 @@
 <h3 class="center-align top-padding bottom-padding">Termine</h3>
 
 <fieldset>
-    <div class="field border label">
-        <input>
+    <div class="field border">
+        <input placeholder="Thema">
         <label>Thema</label>
     </div>
 
-    <div class="field border label">
-        <input>
+    <div class="field border">
+        <input placeholder="Ort">
         <label>Ort</label>
     </div>