Enhanced DateTimes.svelte component bindings added extractTime and isSameDate utility functions

src/lib/funcs.ts

@@ -5,4 +5,8 @@ export function isSameDate(dateA: Date, dateB: Date) {
     const date2 = moment(dateB).format('YYYY-MM-DD');
 
     return date1 === date2;
+}
+
+export function extractTime(date: Date): string {
+    return moment(date).format("HH:mm");
 }

src/lib/modules/AppointmentConfirmDialog.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
+	import { extractTime } from "$lib/funcs";
 	import AppointmentInfo from "./AppointmentInfo.svelte";
 	import AppointmentRegisterInputs from "./AppointmentRegisterInputs.svelte";
 
   export let active: boolean;
 
-  let title: string = "Title";
-  let location: string = "Somewhere";
-  let description: string = "Description ...";
-  let date: Date = new Date();
-  let time: string = "18:00";
+  export let title: string = "Title";
+  export let location: string = "Somewhere";
+  export let description: string = "Description ...";
+  export let date: Date = new Date();
+  let time: string = "00:00";
+
+  $: {
+    time = extractTime(date);
+  }
 
   function closeModal() {
     active = false;
   }
+
+  function submitModal() {
+    // send to backend
+  }
 </script>
 
 <dialog class="max {active ? 'active': ''}">

src/lib/modules/DatePicker.svelte

@@ -13,7 +13,6 @@
 
   $: {
     if (appointmentDateTimes.length > 0) {
-      console.log(appointmentDateTimes);
       renderCalendar();
     }
   } 
@@ -29,7 +28,6 @@
 	 * Updates the calendar display by calculating the days of the current month.
 	 */
 	const renderCalendar = (): void => {
-    console.log(currentDate);
     const mDate: Moment = moment(currentDate);
 		const year: number = currentDate.getFullYear();
 		const month: number = mDate.month() + 1;

src/lib/modules/DateTimes.svelte

@@ -1,21 +1,19 @@
 <script lang="ts">
 	import type { AppointmentDateTimes } from "$lib/dbdata";
-	import { isSameDate } from "$lib/funcs";
+	import { extractTime, isSameDate } from "$lib/funcs";
 	import moment from "moment";
 	import { onMount } from "svelte";
+	import AppointmentConfirmDialog from "./AppointmentConfirmDialog.svelte";
 
     export let availableTimes: AppointmentDateTimes[] = [];
     export let selectedDate: Date = new Date();
 
-    function redirectToBooking(date: Date) {
-        console.log(date);
-    }
+    export let activateModal: boolean = false;
 
-    function extractTime(date: Date): string {
-        return moment(date).format("HH:mm");
+    function redirectToBooking(date: Date) {
+        selectedDate = date;
+        activateModal = true;
     }
-
-
 </script>
 
 

src/routes/appointment/+page.svelte

@@ -12,21 +12,11 @@
     let description: string = "Description ...";
 
     let selectedDate: Date = new Date();
-
+    let activateModal: boolean = false;
     let appointmentDateTimes: AppointmentDateTimes[] = [
 
     ];
 
-    $: {
-        updateSelectedDate(selectedDate);
-    }
-
-    function updateSelectedDate(date: Date) {
-        // request appointment date times from backend
-        console.log("updating");
-        console.log(date);
-    }
-
     async function getAppointmentInfo(appointmentId: string) {
         const response = await fetch(`${api_host}/api/schedule?appointmentId=${appointmentId}`, {
                 method: "GET",
@@ -62,8 +52,8 @@
 <div class="top-margin w-80 inline-margin"> 
     <AppointmentInfo bind:title bind:description bind:location />
     {#key selectedDate}
-        <DateTimes bind:selectedDate bind:availableTimes={appointmentDateTimes} />    
+        <DateTimes bind:activateModal bind:selectedDate bind:availableTimes={appointmentDateTimes} />    
     {/key}
 </div>
 
-<AppointmentConfirmDialog active={true} />
+<AppointmentConfirmDialog bind:active={activateModal} bind:date={selectedDate} bind:title bind:description bind:location />