Scheduler-Frontend/src/lib/modules/CreatorTimeInputs.svelte

<script lang="ts">
	import type { WeekdayAppointment } from "$lib/dbdata";
	import CreatorTimeRangeInput from "./CreatorTimeRangeInput.svelte";

    export let weekdays: WeekdayAppointment[] = [];
	export let selectedWeek: number;

    $: {
        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>