changed time selection in appointment creator

src/lib/dbdata.ts

@@ -37,4 +37,9 @@ export interface WeekdayAppointment {
     name: string;
     active: boolean;
     times: AppointmentTimeRange[];
+}
+
+export interface AppointmentList {
+    week: number;
+    appointments: WeekdayAppointment[];
 }

src/lib/funcs.ts

@@ -9,4 +9,21 @@ export function isSameDate(dateA: Date, dateB: Date) {
 
 export function extractTime(date: Date): string {
     return moment(date).format("HH:mm");
-}
+}
+
+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");
+    let timeSlots = [];
+
+    while (start <= end) {
+        if (start.clone().add(intervalMinutes, "minutes").isAfter(end)) {
+            break; // Ensures the last slot does not exceed end time
+        }
+
+        timeSlots.push(start.format("YYYY-MM-DDTHH:mm")); // ISO-like format
+        start.add(intervalMinutes, "minutes");
+    }
+
+    return timeSlots;
+}

src/lib/modules/CreatorBaseInputs.svelte

@@ -4,6 +4,9 @@
     export let selectedWeek: number;
     export let duration: number;
 
+    export let changeWeek = function a(){};
+
+
     // TODO auto gen weeks
 </script>
 
@@ -18,7 +21,7 @@
 </div>
 
 <div class="field label border">
-    <select bind:value={selectedWeek} id="week">
+    <select on:input={changeWeek} 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>

src/lib/modules/CreatorInputs.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import type { AppointmentInputs } from '$lib/dbdata';
+	import { onMount } from 'svelte';
 	import AppointmentInfo from './AppointmentInfo.svelte';
+	import { getTimeSlots } from '$lib/funcs';
 
 	export let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
 
@@ -13,6 +15,10 @@
         // creatorInputs.splice(index, 1);
         creatorInputs = creatorInputs.filter((_, index) => index !== indexToRemove);
     }
+
+    onMount(() => {
+        console.log(getTimeSlots("2025-03-02", "07:15", "09:00", 30))
+    })
 </script>
 
 <fieldset>

src/lib/modules/CreatorTimeInputs.svelte

@@ -2,15 +2,7 @@
 	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: []}
-    ];
+    export let weekdays: WeekdayAppointment[] = [];
 
     $: {
         weekdays = weekdays.map(item => 

src/lib/modules/CreatorTimeRangeInput.svelte

@@ -6,6 +6,11 @@
     function addEntry() {
         timeRanges = [... timeRanges, {start: "", end: ""}];
     }
+
+    function removeInput(indexToRemove: number) {
+        // creatorInputs.splice(index, 1);
+        timeRanges = timeRanges.filter((_, index) => index !== indexToRemove);
+    }
 </script>
 
 <div class="">
@@ -17,12 +22,12 @@
     </button>
 </div>
 
-{#each timeRanges as timeEntry} 
+{#each timeRanges as timeEntry, index} 
     <div class="field border row">
         <input bind:value={timeEntry.start} type="time">
         -
         <input bind:value={timeEntry.end} type="time">
-        <button class="transparent circle large">
+        <button on:click={() => removeInput(index)} class="transparent circle large">
             <i>delete</i>
         </button>
     </div>

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

@@ -1,37 +1,91 @@
 <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";
+	import type { AppointmentInputs, AppointmentList, WeekdayAppointment } 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;
+	let creatorInputs: AppointmentInputs[] = [{ name: '', type: 'text' }];
+	let topic: string;
+	let location: string;
+	let selectedWeek: number = 202502;
+	let duration: number = 15;
 
-    $: console.log(creatorInputs);
+	$: console.log(appointmentList);
 
-</script>
+	let appointmentList: AppointmentList[] = [
+		{
+			week: selectedWeek,
+			appointments: [
+				{ 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: [] }
+			]
+		}
+	];
 
-<style>
-    fieldset {
-        max-width: 90%;
-        margin-inline: auto;
+    function changeWeek() {
+        console.log("changed");
+
+        const ix = appointmentList.findIndex((entry) => entry.week === selectedWeek);
+		if (ix === -1) {
+            const tmp = {
+                week: selectedWeek,
+                appointments: [
+                    { 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: [] }
+                ]
+            }
+            appointmentList = [... appointmentList, tmp];
+        }
+
+        selectedWeekAppointments = appointmentList.find(
+            (entry) => entry.week === selectedWeek
+        )?.appointments;
     }
-</style>
+
+    let selectedWeekAppointments = appointmentList.find(
+		(entry) => entry.week === selectedWeek
+	)?.appointments;
+
+	$: {
+		const ix = appointmentList.findIndex((entry) => entry.week === selectedWeek);
+		if (ix !== -1 && selectedWeekAppointments !== undefined) {
+			appointmentList[ix].appointments = selectedWeekAppointments;
+		}
+	}
+
+	// get time slots before sending
+</script>
 
 <h3 class="center-align top-padding bottom-padding">Termine</h3>
 
 <fieldset>
-    <CreatorBaseInputs bind:topic bind:location bind:selectedWeek bind:duration />
+	<CreatorBaseInputs changeWeek={changeWeek} bind:topic bind:location bind:selectedWeek bind:duration />
 
-    <CreatorTimeInputs />
+	{#if selectedWeekAppointments}
+		<CreatorTimeInputs bind:weekdays={selectedWeekAppointments} />
+	{/if}
 </fieldset>
 
 <CreatorInputs bind:creatorInputs />
 
 <div class="grid">
-    <button class="top-margin s6 large red">Loeschen</button>
-    <button class="top-margin s6 large">Speichern</button>
+	<button class="top-margin s6 large red">Loeschen</button>
+	<button class="top-margin s6 large">Speichern</button>
 </div>
+
+<style>
+	fieldset {
+		max-width: 90%;
+		margin-inline: auto;
+	}
+</style>