init dynamic register input module

src/lib/dbdata.ts

@@ -21,4 +21,9 @@ export interface AuthTokenResponse {
 export interface AppointmentDateTimes {
     date: Date;
     startTime: string;
+}
+
+export interface AppointmentInputs {
+    name: string;
+    type: "text" | "email" | "tel";
 }

src/lib/modules/AppointmentConfirmDialog.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import AppointmentInfo from "./AppointmentInfo.svelte";
+	import AppointmentRegisterInputs from "./AppointmentRegisterInputs.svelte";
 
   export let active: boolean;
 
@@ -15,10 +16,12 @@
 </script>
 
 <dialog class="max {active ? 'active': ''}">
-    <div class="center middle medium-padding">
+    <div class="center medium-padding">
       <AppointmentInfo bind:title bind:location bind:description
           bind:time bind:date isConfirmation={true} />
 
+      <AppointmentRegisterInputs />
+
       <nav class="right-align">
         <button class="border" on:click={closeModal}>Cancel</button>
         <button>Confirm</button>

src/lib/modules/AppointmentRegisterInputs.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import type { AppointmentInputs } from "$lib/dbdata";
+
+    let dynamicInputs: AppointmentInputs[] = [
+        {name: "First name", type: "text"},
+        {name: "Last name", type: "text"},
+        {name: "E-Mail", type: "email"}
+    ];
+
+    let inputValues: Record<string, string> = {};
+
+    function submit() {
+        const jsonOutput: Record<string, any> = {};
+        for (const dInput of dynamicInputs) {
+            if (inputValues[dInput.name]) {
+                jsonOutput[dInput.name] = inputValues[dInput.name];
+            }
+        }
+        console.log(jsonOutput); // Output the JSON object
+    }
+
+</script>
+
+{#each dynamicInputs as dInput, index}
+    <div class="field border">
+        <input id={dInput.name} type={dInput.type} placeholder={dInput.name} bind:value={inputValues[dInput.name]}>
+        <label for={dInput.name}>{dInput.name}</label>
+    </div>
+{/each}
+
+<button on:click={submit}>Submit</button>

src/routes/+layout.svelte

@@ -1,7 +1,6 @@
 <main class="responsive max">
     <nav>
         <h5 class="max center-align">Booker</h5>
-
     </nav>
     <hr>
     <slot/>