modularized appointment creator inputs

src/lib/dbdata.ts

@@ -25,4 +25,16 @@ export interface AppointmentDateTimes {
 export interface AppointmentInputs {
     name: string;
     type: "text" | "email" | "tel";
+}
+
+export interface AppointmentTimeRange {
+    start: string;
+    end: string;
+}
+
+
+export interface WeekdayAppointment {
+    name: string;
+    active: boolean;
+    times: AppointmentTimeRange[];
 }

src/lib/modules/CreatorBaseInputs.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+    export let topic: string;
+    export let location: string;
+    export let selectedWeek: number;
+    export let duration: number;
+
+    // TODO auto gen weeks
+</script>
+
+<div class="field border">
+    <input bind:value={topic} id="topic" placeholder="Thema">
+    <label for="topic">Thema</label>
+</div>
+
+<div class="field border">
+    <input bind:value={location} id="location" placeholder="Ort">
+    <label for="location">Ort</label>
+</div>
+
+<div class="field label border">
+    <select bind:value={selectedWeek} id="week">
+        <option value={202501}>01 KW (01.01.2024 - 05.01.2024)</option>
+        <option value={202502}>02 KW (06.01.2024 - 12.01.2024)</option>
+        <option value={202503}>03 KW (13.01.2024 - 19.01.2024)</option>
+        <option value={202504}>04 KW (20.01.2024 - 26.01.2024)</option>
+    </select>
+    <label for="week">Woche</label>
+</div>
+
+<div class="field border label">
+    <select bind:value={duration} id="duration">
+        <option value={15}>15 Minuten</option>
+        <option value={20}>20 Minuten</option>
+        <option value={30}>30 Minuten</option>
+        <option value={45}>45 Minuten</option>
+        <option value={60}>1 Stunde</option>
+    </select>
+    <label for="duration">Dauer</label>
+</div>

src/lib/modules/CreatorInputs.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { AppointmentInputs } from '$lib/dbdata';
+	import AppointmentInfo from './AppointmentInfo.svelte';
+
+	export let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
+
+	function addInput() {
+		const newInput: AppointmentInputs = { name: '', type: 'text' };
+		creatorInputs = [...creatorInputs, newInput];
+	}
+
+    function removeInput(indexToRemove: number) {
+        // creatorInputs.splice(index, 1);
+        creatorInputs = creatorInputs.filter((_, index) => index !== indexToRemove);
+    }
+</script>
+
+<fieldset>
+	<legend>Eingaben</legend>
+	<button on:click={addInput} class="large circle tertiary">
+		<i>add</i>
+		<span>Neues Feld</span>
+	</button>
+	<div class="grid">
+		{#each creatorInputs as customInput, index}
+			<div class="s12">
+				<div class="row bottom-margin">
+					<div class="max field border">
+						<input bind:value={customInput.name} id="custom-input" />
+						<label for="custom-input">Eingabefeld</label>
+					</div>
+					<div class="max field border">
+						<select bind:value={customInput.type} id="custom-type">
+							<option value="text">Texteingabe</option>
+							<option value="email">E-Mail</option>
+							<option value="tel">Telefonnummer</option>
+						</select>
+						<label for="custom-type">Eingabeart</label>
+					</div>
+					<button on:click={() => removeInput(index)} class="circle error medium m1">
+						<i>delete</i>
+						<span>Button</span>
+					</button>
+				</div>
+			</div>
+		{/each}
+	</div>
+</fieldset>

src/lib/modules/CreatorTimeInputs.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { WeekdayAppointment } from "$lib/dbdata";
+	import CreatorTimeRangeInput from "./CreatorTimeRangeInput.svelte";
+
+    let weekdays: WeekdayAppointment[] = [
+            {name: "Montag", active: false, times: []}, 
+            {name: "Dienstag", active: false, times: []}, 
+            {name: "Mittwoch", active: false, times: []}, 
+            {name: "Donnerstag", active: false, times: []},
+            {name: "Freitag", active: false, times: []}, 
+            {name: "Samstag", active: false, times: []}, 
+            {name: "Sonntag", active: false, times: []}
+    ];
+
+    $: {
+        weekdays = weekdays.map(item => 
+            item.active ? item : { ...item, times: [] }
+        );
+    }
+
+</script>
+
+<fieldset>
+	<legend>Select one or more</legend>
+	<nav class="vertical">
+		{#each weekdays as day, index}
+			<label class="checkbox">
+				<input bind:checked={day.active} type="checkbox" />
+				<span>{day.name}</span>
+			</label>
+            {#if day.active}
+                <CreatorTimeRangeInput bind:timeRanges={day.times} />    
+            {/if}
+			
+		{/each}
+	</nav>
+</fieldset>

src/lib/modules/CreatorTimeRangeInput.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { AppointmentTimeRange } from "$lib/dbdata";
+
+    export let timeRanges: AppointmentTimeRange[] = [];
+
+    function addEntry() {
+        timeRanges = [... timeRanges, {start: "", end: ""}];
+    }
+</script>
+
+<div class="">
+    <button class="transparent circle large">
+        <i>content_copy</i>
+    </button>
+    <button on:click={addEntry} class="transparent circle large">
+        <i>add</i>
+    </button>
+</div>
+
+{#each timeRanges as timeEntry} 
+    <div class="field border row">
+        <input bind:value={timeEntry.start} type="time">
+        -
+        <input bind:value={timeEntry.end} type="time">
+        <button class="transparent circle large">
+            <i>delete</i>
+        </button>
+    </div>
+{/each}

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

@@ -1,5 +1,16 @@
 <script lang="ts">
+	import type { AppointmentInputs } from "$lib/dbdata";
+	import CreatorBaseInputs from "$lib/modules/CreatorBaseInputs.svelte";
+	import CreatorInputs from "$lib/modules/CreatorInputs.svelte";
+	import CreatorTimeInputs from "$lib/modules/CreatorTimeInputs.svelte";
 
+    let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
+    let topic: string;
+    let location: string;
+    let selectedWeek: number = 202502;
+    let duration: number = 15;
+
+    $: console.log(creatorInputs);
 
 </script>
 
@@ -13,123 +24,12 @@
 <h3 class="center-align top-padding bottom-padding">Termine</h3>
 
 <fieldset>
-    <div class="field border">
-        <input id="topic" placeholder="Thema">
-        <label for="topic">Thema</label>
-    </div>
-
-    <div class="field border">
-        <input id="location" placeholder="Ort">
-        <label for="location">Ort</label>
-    </div>
-
-    <div class="field label border">
-        <select id="week">
-            <option>01 KW (01.01.2024 - 05.01.2024)</option>
-            <option>02 KW (06.01.2024 - 12.01.2024)</option>
-            <option>03 KW (13.01.2024 - 19.01.2024)</option>
-            <option>04 KW (20.01.2024 - 26.01.2024)</option>
-        </select>
-        <label for="week">Woche</label>
-    </div>
-
-    <div class="field border label">
-        <select id="duration">
-            <option>15 Minuten</option>
-            <option>20 Minuten</option>
-            <option>30 Minuten</option>
-            <option>45 Minuten</option>
-            <option>1 Stunde</option>
-        </select>
-        <label for="duration">Dauer</label>
-    </div>
+    <CreatorBaseInputs bind:topic bind:location bind:selectedWeek bind:duration />
 
-    <fieldset>
-        <legend>Select one or more</legend>
-        <nav class="vertical">
-            <label class="checkbox">
-                <input type="checkbox">
-                <span>Montag</span>
-            </label>
-            <label class="checkbox">
-                <input type="checkbox">
-                <span>Dienstag</span>
-            </label>
-
-            <label class="checkbox" id="checkbox">
-                <input type="checkbox">
-                <span>Mittwoch</span>
-            </label>
-
-            <div class="">
-                <button class="transparent circle large">
-                    <i>content_copy</i>
-                </button>
-                <button class="transparent circle large">
-                    <i>add</i>
-                </button>
-            </div>
-            <div class="field border row">
-                <input type="time">
-                -
-                <input type="time">
-                <button class="transparent circle large">
-                    <i>delete</i>
-                </button>
-            </div>
-            <div class="field border row">
-                <input type="time">
-                -
-                <input type="time">
-                <button class="transparent circle large">
-                    <i>delete</i>
-                </button>
-            </div>
-            <label class="checkbox">
-                <input type="checkbox">
-                <span>Donnerstag</span>
-            </label>
-            <label class="checkbox">
-                <input type="checkbox">
-                <span>Freitag</span>
-            </label>
-            <label class="checkbox">
-                <input type="checkbox">
-                <span>Samstag</span>
-            </label>
-            <label class="checkbox">
-                <input type="checkbox">
-                <span>Sonntag</span>
-            </label>
-        </nav>
-    </fieldset>
+    <CreatorTimeInputs />
 </fieldset>
 
-<fieldset>
-    <legend>Eingaben</legend>
-    <button class="large circle tertiary">
-        <i>add</i>
-        <span>Neues Feld</span>
-    </button>  
-    <div class="row bottom-margin">
-        <div class="max field border">
-            <input id="custom-input">
-            <label for="custom-input">Eingabefeld</label>
-        </div>
-        <div class="max field border">
-            <select id="custom-type">
-                <option>Texteingabe</option>
-                <option>E-Mail</option>
-                <option>Telefonnummer</option>
-            </select>
-            <label for="custom-type">Eingabeart</label>
-        </div>
-        <button class="circle error medium m1">
-            <i>delete</i>
-            <span>Button</span>
-        </button>
-    </div>
-</fieldset>
+<CreatorInputs bind:creatorInputs />
 
 <div class="grid">
     <button class="top-margin s6 large red">Loeschen</button>