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

<script lang="ts">
	import type { AppointmentInputs } from '$lib/dbdata';
	import { onMount } from 'svelte';
	import AppointmentInfo from './AppointmentInfo.svelte';
	import { getTimeSlots } from '$lib/funcs';
	import { t } from '$lib/translations';

	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>{$t("common.inputs")}</legend>
	<button on:click={addInput} class="large circle tertiary">
		<i>add</i>
	</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">{$t("common.input-field")}</label>
					</div>
					<div class="max field border">
						<select bind:value={customInput.type} id="custom-type">
							<option value="text">{$t("common.text-input")}</option>
							<option value="email">{$t("common.email")}</option>
							<option value="tel">{$t("common.phone-number")}</option>
						</select>
						<label for="custom-type">{$t("common.input-type")}</label>
					</div>
					<button on:click={() => removeInput(index)} class="circle error medium m1">
						<i>delete</i>
					</button>
				</div>
			</div>
		{/each}
	</div>
</fieldset>