From 006baf9723766572698f412a45eb9adf69141cd0 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 20 Sep 2024 16:16:41 +0200
Subject: [PATCH 01/28] add initial skeleton for CheckboxList

---
 .../components/DataInput/CheckboxList.svelte  | 35 +++++++++++++++++++
 .../src/lib/components/UserDataInput.svelte   | 23 ++++++------
 2 files changed, 48 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/lib/components/DataInput/CheckboxList.svelte

diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
new file mode 100644
index 00000000..f6f09af2
--- /dev/null
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Checkbox } from 'flowbite-svelte';
+
+	function handleChange(index: number) {
+		if (selected[index] === true) {
+			if (unique) {
+				value = $$props.items[index].value;
+				selected = selected.map((_, i) => i === index);
+			} else {
+				value.push($$props.items[index].value);
+			}
+		} else {
+			if (unique === true) {
+				value = null;
+			} else {
+				value = value.filter((v: string) => v !== $$props.items[index].value);
+			}
+		}
+		console.log('running handler: ', selected, value);
+	}
+
+	export let value: any;
+	export let unique: boolean = false;
+	let selected = $$props.items.map(() => false);
+</script>
+
+<div
+	class="xl:grid-cols-4flex grid w-full grid-cols-1 flex-col gap-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
+>
+	{#each $$props.items as element, index}
+		<Checkbox bind:checked={selected[index]} on:change={() => handleChange(index)}
+			>{element.label}</Checkbox
+		>
+	{/each}
+</div>
diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
index cec5aff4..3aeeb824 100644
--- a/frontend/src/lib/components/UserDataInput.svelte
+++ b/frontend/src/lib/components/UserDataInput.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
+	import CheckboxList from '$lib/components//DataInput/CheckboxList.svelte';
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
 	import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
@@ -103,22 +104,23 @@
 			}
 		},
 		{
-			component: Select,
+			component: CheckboxList,
 			value: null,
 			props: {
 				name: 'Geschlecht',
 				items: ['männlich', 'weiblich', 'divers', 'Andere'].map((v) => {
-					return { name: String(v), value: v };
+					return { label: String(v), value: v };
 				}),
 				placeholder: 'Bitte auswählen',
 				label: 'Geschlecht',
 				required: true,
-				textTrigger: 'Andere'
+				textTrigger: 'Andere',
+				unique: true
 			}
 		},
 		{
-			component: Select,
-			value: null,
+			component: CheckboxList,
+			value: [],
 			props: {
 				name: 'Höchster Bildungsabschluss',
 				items: [
@@ -131,15 +133,15 @@
 					'Promotion',
 					'Anderer'
 				].map((v) => {
-					return { name: String(v), value: v };
+					return { label: String(v), value: v };
 				}),
 				placeholder: 'Bitte auswählen',
 				required: true,
 				label: 'Höchster Bildungsabschluss',
-				textTrigger: 'Anderer'
+				textTrigger: 'Anderer',
+				unique: true
 			}
 		},
-
 		{
 			component: Select,
 			value: null,
@@ -164,7 +166,6 @@
 				textTrigger: 'Anderes'
 			}
 		},
-
 		{
 			component: Input,
 			value: null,
@@ -228,7 +229,9 @@
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
-					showTextField={element.value !== null &&
+					showTextField={(Array.isArray(element.value)
+						? element.value.length > 1
+						: element.value !== null) &&
 						element.props.items?.some((item) => item.value === element.value) === false}
 				/>
 			{/each}

From ea7c3fe21657531644cf0b9810f82705646764d7 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 20 Sep 2024 16:54:37 +0200
Subject: [PATCH 02/28] add selection persistence

---
 .../components/DataInput/CheckboxList.svelte  |  2 +-
 .../lib/components/DataInput/DataInput.svelte | 41 +------------------
 2 files changed, 3 insertions(+), 40 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
index f6f09af2..74ac3a7c 100644
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -21,7 +21,7 @@
 
 	export let value: any;
 	export let unique: boolean = false;
-	let selected = $$props.items.map(() => false);
+	let selected = $$props.items.map((element: any) => element.value === value);
 </script>
 
 <div
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 16ce0368..09558579 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -12,7 +12,7 @@
 	export let componentClass: string = '';
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;
-	let additionalInput: any = value;
+	export let additionalInput: any = value;
 
 	// data to display and event handlers for dynamcis.
 	export let properties: any = {};
@@ -26,28 +26,6 @@
 		return true;
 	};
 
-	// internal functionality for managing additional information given via textfield
-	function replaceValue(arrayvalue: any[], target: any, element: any): void {
-		for (let i = 0; i < arrayvalue.length; i++) {
-			if (arrayvalue[i] === target && element) {
-				arrayvalue[i] = element;
-			}
-		}
-	}
-
-	function updateValue(toupdate: any, additionalInput: string): any {
-		if (showTextField) {
-			if (toupdate instanceof Array) {
-				replaceValue(toupdate, textTrigger, additionalInput);
-				return toupdate;
-			} else {
-				return additionalInput as typeof value;
-			}
-		} else {
-			return toupdate;
-		}
-	}
-
 	// functionality for showing the textfield when the trigger is selected
 	function checkShowTextfield(v: any, trigger: string) {
 		if (v instanceof Array) {
@@ -61,16 +39,6 @@
 	$: valid = value !== undefined && value !== null && value !== '' && checkValid();
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = showTextField || checkShowTextfield(value, textTrigger);
-	// Flag to track initialization
-	let initialized = false;
-
-	// Reactive statement to initialize additionalInput based on value
-	$: {
-		if (!initialized && value !== null) {
-			additionalInput = value;
-			initialized = true;
-		}
-	}
 </script>
 
 {#if label}
@@ -91,11 +59,6 @@
 	/>
 
 	{#if showTextField === true}
-		<Textarea
-			bind:value={additionalInput}
-			on:blur={() => {
-				value = updateValue(value, additionalInput);
-			}}
-		/>
+		<Textarea bind:value={additionalInput} />
 	{/if}
 </div>

From 5e5a3c18e02efc264f0e99f9ed0474c0e8888796 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Mon, 23 Sep 2024 11:44:22 +0200
Subject: [PATCH 03/28] work on custom checkbox component

---
 .../lib/components/DataInput/Checkbox.svelte  |  17 +++
 .../components/DataInput/CheckboxList.svelte  |  43 +++---
 .../src/lib/components/UserDataInput.svelte   | 140 +++---------------
 .../userLand/userDataInput/+page.svelte       | 126 +++++++++++++++-
 4 files changed, 177 insertions(+), 149 deletions(-)
 create mode 100644 frontend/src/lib/components/DataInput/Checkbox.svelte

diff --git a/frontend/src/lib/components/DataInput/Checkbox.svelte b/frontend/src/lib/components/DataInput/Checkbox.svelte
new file mode 100644
index 00000000..5fb4895c
--- /dev/null
+++ b/frontend/src/lib/components/DataInput/Checkbox.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+
+	function handleChange(event) {
+		dispatch('changed', { checked: event.target.checked });
+	}
+
+	export let checked: boolean;
+	export let label: string;
+</script>
+
+<label>
+	{label}
+	<input type="checkbox" bind:checked on:change={handleChange} />
+</label>
diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
index 74ac3a7c..bea2fe1d 100644
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -1,35 +1,30 @@
 <script lang="ts">
-	import { Checkbox } from 'flowbite-svelte';
-
-	function handleChange(index: number) {
-		if (selected[index] === true) {
-			if (unique) {
-				value = $$props.items[index].value;
-				selected = selected.map((_, i) => i === index);
-			} else {
-				value.push($$props.items[index].value);
-			}
-		} else {
-			if (unique === true) {
-				value = null;
-			} else {
-				value = value.filter((v: string) => v !== $$props.items[index].value);
-			}
-		}
-		console.log('running handler: ', selected, value);
-	}
+	import Checkbox from '$lib/components/DataInput/Checkbox.svelte';
 
 	export let value: any;
 	export let unique: boolean = false;
-	let selected = $$props.items.map((element: any) => element.value === value);
+
+	let selected: boolean[] = $$props.items.map((e) => false);
+
+	$: console.log('unique: ', unique, 'value: ', value, 'selected:', selected);
 </script>
 
 <div
 	class="xl:grid-cols-4flex grid w-full grid-cols-1 flex-col gap-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
 >
-	{#each $$props.items as element, index}
-		<Checkbox bind:checked={selected[index]} on:change={() => handleChange(index)}
-			>{element.label}</Checkbox
-		>
+	{#each $$props.items as item, index}
+		<Checkbox
+			bind:checked={selected[index]}
+			label={item.label}
+			on:changed={() => {
+				if (unique) {
+					value = $$props.items[index].value;
+					selected = selected.map((_, i) => {
+						return i === index && selected[index];
+					});
+				} else {
+				}
+			}}
+		/>
 	{/each}
 </div>
diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
index 3aeeb824..a4351174 100644
--- a/frontend/src/lib/components/UserDataInput.svelte
+++ b/frontend/src/lib/components/UserDataInput.svelte
@@ -1,41 +1,13 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
-	import CheckboxList from '$lib/components//DataInput/CheckboxList.svelte';
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
 	import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
 	import { users, type UserData } from '$lib/stores/userStore';
-	import { Card, Heading, Input, Select } from 'flowbite-svelte';
-	import { onDestroy, onMount } from 'svelte';
-
-	// this stuff here will become backend calls in the end because that is where the data this page will be filled with
-	// will come from. Hence, they are not put into a separate library or anything
-	function intervalRange(size: number, startAt: number = 0, step: number = 1, asItems = false) {
-		let values = [...Array(size).keys()].map(
-			(i) => String(i * step + startAt) + '-' + String((i + 1) * step + startAt)
-		);
-
-		if (asItems) {
-			return values.map((v) => {
-				return { name: String(v), value: v };
-			});
-		} else {
-			return values;
-		}
-	}
+	import { Card, Heading } from 'flowbite-svelte';
+	import { afterUpdate, onDestroy, onMount } from 'svelte';
 
-	function numericalRange(size: number, startAt: number = 0, step: number = 1, asItems = false) {
-		let values = [...Array(size).keys()].map((i) => i * step + startAt);
-
-		if (asItems) {
-			return values.map((v) => {
-				return { name: String(v), value: v };
-			});
-		} else {
-			return values;
-		}
-	}
 	function validate(): boolean {
 		missingValues = data.map((element) => element.value === '' || element.value === null);
 		return missingValues.every((v) => v === false);
@@ -45,7 +17,9 @@
 		const valid = validate();
 		if (valid) {
 			for (let i = 0; i < data.length; ++i) {
-				(userData as UserData)[data[i].props.name] = data[i].value;
+				(userData as UserData)[data[i].props.name] = {};
+				(userData as UserData)[data[i].props.name]['value'] = data[i].value;
+				(userData as UserData)[data[i].props.name]['additionalValue'] = data[i].additionalValue;
 			}
 			if (userID) {
 				await users.update(userID, userData);
@@ -60,14 +34,14 @@
 	let userData: UserData;
 	let userID: string;
 
-	onMount(async () => {
-		await users.load();
+	onMount(() => {
+		users.load();
 		userID = users.get()['loggedIn'] as string;
 		userData = users.get()[userID] as UserData;
 
 		// initialize data values to stuff that is there already if
 		// data has been supplied already for that user.
-
+		console.log('load data');
 		const keys = [
 			'Geburtsjahr',
 			'Geschlecht',
@@ -79,7 +53,8 @@
 
 		for (let i = 0; i < data.length; ++i) {
 			if (userData[keys[i]]) {
-				data[i]['value'] = userData[keys[i]];
+				data[i]['value'] = userData[keys[i]].value;
+				data[i]['additionalValue'] = userData[keys[i]].additionalValue;
 			}
 		}
 
@@ -87,97 +62,15 @@
 	});
 
 	onDestroy(async () => {
-		await users.save();
+		users.save();
+	});
+
+	afterUpdate(async () => {
+		users.save();
 	});
 
 	// this can, but does not have to, come from a database later.
-	const data = [
-		{
-			component: Select,
-			value: null,
-			props: {
-				name: 'Geburtsjahr',
-				items: numericalRange(100, 1960, 1, true),
-				placeholder: 'Bitte auswählen',
-				label: 'Geburtsjahr',
-				required: true
-			}
-		},
-		{
-			component: CheckboxList,
-			value: null,
-			props: {
-				name: 'Geschlecht',
-				items: ['männlich', 'weiblich', 'divers', 'Andere'].map((v) => {
-					return { label: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				label: 'Geschlecht',
-				required: true,
-				textTrigger: 'Andere',
-				unique: true
-			}
-		},
-		{
-			component: CheckboxList,
-			value: [],
-			props: {
-				name: 'Höchster Bildungsabschluss',
-				items: [
-					'kein Schulabschluss',
-					'Hauptschulabschluss',
-					'Realschulabschluss',
-					'Abitur',
-					'Bachelor',
-					'Master',
-					'Promotion',
-					'Anderer'
-				].map((v) => {
-					return { label: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				required: true,
-				label: 'Höchster Bildungsabschluss',
-				textTrigger: 'Anderer',
-				unique: true
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				name: 'Arbeitszeit/Woche',
-				items: intervalRange(13, 0, 5, true),
-				placeholder: 'Bitte auswählen',
-				label: 'Arbeitszeit/Woche',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				name: 'Familieneinkommen/Jahr',
-				items: intervalRange(23, 0, 5000, true),
-				placeholder: 'Bitte auswählen',
-				label: 'Familieneinkommen/Jahr',
-				required: true,
-				textTrigger: 'Anderes'
-			}
-		},
-		{
-			component: Input,
-			value: null,
-			props: {
-				name: 'Beruf',
-				type: 'text',
-				placeholder: 'Geben sie ihren Beruf an',
-				label: 'Beruf',
-				required: true
-			}
-		}
-	];
+	export let data: any[];
 
 	// validation / data acceptance
 
@@ -226,6 +119,7 @@
 				<DataInput
 					component={element.component}
 					bind:value={element.value}
+					bind:additionalInput={element.additionalValue}
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
diff --git a/frontend/src/routes/userLand/userDataInput/+page.svelte b/frontend/src/routes/userLand/userDataInput/+page.svelte
index e13a3215..6af305d0 100644
--- a/frontend/src/routes/userLand/userDataInput/+page.svelte
+++ b/frontend/src/routes/userLand/userDataInput/+page.svelte
@@ -1,5 +1,127 @@
-<script>
+<script lang="ts">
+	import CheckboxList from '$lib/components/DataInput/CheckboxList.svelte';
 	import UserDataInput from '$lib/components/UserDataInput.svelte';
+
+	// this stuff here will become backend calls in the end because that is where the data this page will be filled with
+	// will come from. Hence, they are not put into a separate library or anything
+	function intervalRange(size: number, startAt: number = 0, step: number = 1, asItems = false) {
+		let values = [...Array(size).keys()].map(
+			(i) => String(i * step + startAt) + '-' + String((i + 1) * step + startAt)
+		);
+
+		if (asItems) {
+			return values.map((v) => {
+				return { name: String(v), value: v };
+			});
+		} else {
+			return values;
+		}
+	}
+
+	function numericalRange(size: number, startAt: number = 0, step: number = 1, asItems = false) {
+		let values = [...Array(size).keys()].map((i) => i * step + startAt);
+
+		if (asItems) {
+			return values.map((v) => {
+				return { name: String(v), value: v };
+			});
+		} else {
+			return values;
+		}
+	}
+	const data = [
+		// {
+		// 	component: Select,
+		// 	value: null,
+		// 	additionalValue: null,
+		// 	props: {
+		// 		name: 'Geburtsjahr',
+		// 		items: numericalRange(100, 1960, 1, true),
+		// 		placeholder: 'Bitte auswählen',
+		// 		label: 'Geburtsjahr',
+		// 		required: true
+		// 	}
+		// },
+		{
+			component: CheckboxList,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Geschlecht',
+				items: ['männlich', 'weiblich', 'divers', 'Andere'].map((v) => {
+					return { label: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				label: 'Geschlecht',
+				required: true,
+				textTrigger: 'Andere',
+				unique: true
+			}
+		}
+		// {
+		// 	component: CheckboxList,
+		// 	value: null,
+		// 	additionalValue: null,
+		// 	props: {
+		// 		name: 'Höchster Bildungsabschluss',
+		// 		items: [
+		// 			'kein Schulabschluss',
+		// 			'Hauptschulabschluss',
+		// 			'Realschulabschluss',
+		// 			'Abitur',
+		// 			'Bachelor',
+		// 			'Master',
+		// 			'Promotion',
+		// 			'Anderer'
+		// 		].map((v) => {
+		// 			return { label: String(v), value: v };
+		// 		}),
+		// 		placeholder: 'Bitte auswählen',
+		// 		required: true,
+		// 		label: 'Höchster Bildungsabschluss',
+		// 		textTrigger: 'Anderer',
+		// 		unique: true
+		// 	}
+		// },
+		// {
+		// 	component: Select,
+		// 	value: null,
+		// 	additionalValue: null,
+		// 	props: {
+		// 		name: 'Arbeitszeit/Woche',
+		// 		items: intervalRange(13, 0, 5, true),
+		// 		placeholder: 'Bitte auswählen',
+		// 		label: 'Arbeitszeit/Woche',
+		// 		required: true,
+		// 		textTrigger: 'Andere'
+		// 	}
+		// },
+		// {
+		// 	component: Select,
+		// 	value: null,
+		// 	additionalValue: null,
+		// 	props: {
+		// 		name: 'Familieneinkommen/Jahr',
+		// 		items: intervalRange(23, 0, 5000, true),
+		// 		placeholder: 'Bitte auswählen',
+		// 		label: 'Familieneinkommen/Jahr',
+		// 		required: true,
+		// 		textTrigger: 'Anderes'
+		// 	}
+		// },
+		// {
+		// 	component: Input,
+		// 	value: null,
+		// 	additionalValue: null,
+		// 	props: {
+		// 		name: 'Beruf',
+		// 		type: 'text',
+		// 		placeholder: 'Geben sie ihren Beruf an',
+		// 		label: 'Beruf',
+		// 		required: true
+		// 	}
+		// }
+	];
 </script>
 
-<UserDataInput />
+<UserDataInput {data} />

From 510e5b2cf4db894a246526dd20d944720735ab37 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 23 Sep 2024 09:44:52 +0000
Subject: [PATCH 04/28] pnpm format

---
 .../components/ChildrenRegistration.svelte    |   2 +-
 .../src/lib/components/Childrenpage.svelte    |   1 -
 .../lib/components/DataInput/DataInput.svelte |   2 +-
 .../src/lib/components/LocaleChooser.svelte   |  16 +-
 frontend/src/lib/components/Milestone.svelte  | 279 ++++++++++--------
 .../src/lib/components/MilestoneButton.svelte |  23 +-
 frontend/src/lib/components/UserLogin.svelte  |   2 +-
 .../src/lib/components/UserProfile.svelte     |   4 +-
 frontend/src/lib/i18n.ts                      |  10 +-
 frontend/src/locales/de.json                  |  48 +--
 frontend/src/locales/en.json                  |  48 +--
 frontend/src/routes/+layout.svelte            |  13 +-
 frontend/src/routes/+layout.ts                |   4 +-
 frontend/src/routes/+page.svelte              |   2 +-
 frontend/src/routes/milestone/+page.svelte    | 184 ++++++------
 frontend/svelte.config.js                     |   2 +-
 frontend/tailwind.config.ts                   |  36 +--
 frontend/vite.config.ts                       |   2 +-
 18 files changed, 366 insertions(+), 312 deletions(-)

diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/frontend/src/lib/components/ChildrenRegistration.svelte
index 35899be7..7b43b3ef 100644
--- a/frontend/src/lib/components/ChildrenRegistration.svelte
+++ b/frontend/src/lib/components/ChildrenRegistration.svelte
@@ -332,7 +332,7 @@
 		{/each}
 
 		<Button
-			class="bg-primary-700 hover:bg-primary-800 w-full rounded-lg px-4 py-2 font-semibold text-white"
+			class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
 			on:click={submitData}
 			>{'Kind hinzufügen'}
 		</Button>
diff --git a/frontend/src/lib/components/Childrenpage.svelte b/frontend/src/lib/components/Childrenpage.svelte
index 7e45ee25..cc61bcf3 100644
--- a/frontend/src/lib/components/Childrenpage.svelte
+++ b/frontend/src/lib/components/Childrenpage.svelte
@@ -1,4 +1,3 @@
-
 <script context="module">
 	import { base } from '$app/paths';
 	export function convertData(rawdata) {
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 09558579..346d0b75 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -49,7 +49,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-primary-600 dark:border-primary-600 border-2' + componentClass
+			? 'border-2 border-primary-600 dark:border-primary-600' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
diff --git a/frontend/src/lib/components/LocaleChooser.svelte b/frontend/src/lib/components/LocaleChooser.svelte
index e2cc4202..a954959c 100644
--- a/frontend/src/lib/components/LocaleChooser.svelte
+++ b/frontend/src/lib/components/LocaleChooser.svelte
@@ -6,13 +6,23 @@
 </script>
 
 <div class="flex">
-	<button id="locale-button" class="flex-shrink-0 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 rounded-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600" type="button">
+	<button
+		id="locale-button"
+		class="z-10 inline-flex flex-shrink-0 items-center rounded-lg bg-gray-100 px-4 py-2.5 text-center text-sm font-medium text-gray-500 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-700"
+		type="button"
+	>
 		{$locale}
-		<ChevronDownOutline class="w-6 h-6 ms-2" />
+		<ChevronDownOutline class="ms-2 h-6 w-6" />
 	</button>
 	<Dropdown triggeredBy="#locale-button" bind:open={dropdownOpen}>
 		{#each $locales as loc}
-			<DropdownItem class="flex items-center" on:click={() => {locale.set(loc); dropdownOpen = false}}>
+			<DropdownItem
+				class="flex items-center"
+				on:click={() => {
+					locale.set(loc);
+					dropdownOpen = false;
+				}}
+			>
 				{loc}
 			</DropdownItem>
 		{/each}
diff --git a/frontend/src/lib/components/Milestone.svelte b/frontend/src/lib/components/Milestone.svelte
index 868a6c0b..3b753403 100644
--- a/frontend/src/lib/components/Milestone.svelte
+++ b/frontend/src/lib/components/Milestone.svelte
@@ -1,130 +1,171 @@
 <script lang="ts">
-    import {P, Breadcrumb, BreadcrumbItem, AccordionItem, Accordion, Button, Checkbox} from 'flowbite-svelte';
-    import {QuestionCircleSolid, InfoCircleSolid, ArrowRightOutline, ArrowLeftOutline} from 'flowbite-svelte-icons'
-    import MilestoneButton from "$lib/components/MilestoneButton.svelte";
-    import { _ } from 'svelte-i18n';
+	import {
+		P,
+		Breadcrumb,
+		BreadcrumbItem,
+		AccordionItem,
+		Accordion,
+		Button,
+		Checkbox
+	} from 'flowbite-svelte';
+	import {
+		QuestionCircleSolid,
+		InfoCircleSolid,
+		ArrowRightOutline,
+		ArrowLeftOutline
+	} from 'flowbite-svelte-icons';
+	import MilestoneButton from '$lib/components/MilestoneButton.svelte';
+	import { _ } from 'svelte-i18n';
 
-    export let data;
+	export let data;
 
-    let currentMilestoneIndex: number = 0;
-    let selectedAnswer: number | null = data.milestones[currentMilestoneIndex].answer;
-    let autoGoToNextMilestone: boolean = false;
+	let currentMilestoneIndex: number = 0;
+	let selectedAnswer: number | null = data.milestones[currentMilestoneIndex].answer;
+	let autoGoToNextMilestone: boolean = false;
 
-    // build list of possible image urls at build time to be able to dynamically use them at run time:
-    const img_urls: Record<string, string> = import.meta.glob('$lib/assets/*.jpg', {
-        eager: true,
-        query: '?url',
-        import: 'default'
-    });
+	// build list of possible image urls at build time to be able to dynamically use them at run time:
+	const img_urls: Record<string, string> = import.meta.glob('$lib/assets/*.jpg', {
+		eager: true,
+		query: '?url',
+		import: 'default'
+	});
 
-    let currentImageIndex:number = 0;
-    const imageInterval = 5000;
-    setInterval(() => {
-        currentImageIndex = (currentImageIndex + 1) % data.milestones[currentMilestoneIndex].imgs.length;
-    }, imageInterval);
+	let currentImageIndex: number = 0;
+	const imageInterval = 5000;
+	setInterval(() => {
+		currentImageIndex =
+			(currentImageIndex + 1) % data.milestones[currentMilestoneIndex].imgs.length;
+	}, imageInterval);
 
-    function prevMilestone() {
-        if (currentMilestoneIndex === 0) {
-            console.log("prevMilestone: Already at first milestone, ignoring");
-        }
-        currentMilestoneIndex -= 1;
-        console.log(`prevMilestone: currentMilestoneIndex = ${currentMilestoneIndex}`);
-        selectedAnswer = data.milestones[currentMilestoneIndex].answer;
-    }
+	function prevMilestone() {
+		if (currentMilestoneIndex === 0) {
+			console.log('prevMilestone: Already at first milestone, ignoring');
+		}
+		currentMilestoneIndex -= 1;
+		console.log(`prevMilestone: currentMilestoneIndex = ${currentMilestoneIndex}`);
+		selectedAnswer = data.milestones[currentMilestoneIndex].answer;
+	}
 
-    function nextMilestone() {
-        if (selectedAnswer === null) {
-            console.log("nextMilestone: No answer selected, ignoring");
-        }
-        console.log(`nextMilestone: Submitting answer ${selectedAnswer} for milestone ${currentMilestoneIndex}`);
-        data.milestones[currentMilestoneIndex].answer = selectedAnswer;
-        // todo: API call to submit answer?
-        if (currentMilestoneIndex + 1 == data.milestones.length) {
-            console.log(`nextMilestone: Last milestone complete`)
-            // todo: redirect to bereichuebersicht? or go to next set of milestones?
-            return;
-        }
-        currentMilestoneIndex += 1;
-        console.log(`nextMilestone: currentMilestoneIndex = ${currentMilestoneIndex}`);
-        selectedAnswer = data.milestones[currentMilestoneIndex].answer;
-    }
-
-    function selectAnswer(answer: number | null) {
-        console.log(`selectAnswer: answer ${answer} selected for milestone ${currentMilestoneIndex}`);
-        selectedAnswer = answer;
-        if (selectedAnswer !== null && autoGoToNextMilestone) {
-            console.log(`selectAnswer: calling nextMilestone`);
-            nextMilestone();
-        }
-    }
+	function nextMilestone() {
+		if (selectedAnswer === null) {
+			console.log('nextMilestone: No answer selected, ignoring');
+		}
+		console.log(
+			`nextMilestone: Submitting answer ${selectedAnswer} for milestone ${currentMilestoneIndex}`
+		);
+		data.milestones[currentMilestoneIndex].answer = selectedAnswer;
+		// todo: API call to submit answer?
+		if (currentMilestoneIndex + 1 == data.milestones.length) {
+			console.log(`nextMilestone: Last milestone complete`);
+			// todo: redirect to bereichuebersicht? or go to next set of milestones?
+			return;
+		}
+		currentMilestoneIndex += 1;
+		console.log(`nextMilestone: currentMilestoneIndex = ${currentMilestoneIndex}`);
+		selectedAnswer = data.milestones[currentMilestoneIndex].answer;
+	}
 
+	function selectAnswer(answer: number | null) {
+		console.log(`selectAnswer: answer ${answer} selected for milestone ${currentMilestoneIndex}`);
+		selectedAnswer = answer;
+		if (selectedAnswer !== null && autoGoToNextMilestone) {
+			console.log(`selectAnswer: calling nextMilestone`);
+			nextMilestone();
+		}
+	}
 </script>
 
-<div class="flex flex-col bg-white border border-1 border-gray-200 md:rounded-lg shadow dark:border-gray-700 dark:bg-gray-800 md:max-w-7xl">
-    <div class="bg-gray-100 dark:bg-gray-600 md:rounded-t-lg">
-        <Breadcrumb olClass="inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse flex-wrap" navClass="m-2">
-            <BreadcrumbItem href="#" home>Start</BreadcrumbItem>
-            <BreadcrumbItem href="#">MEIKE</BreadcrumbItem>
-            <BreadcrumbItem href="#">{$_("milestone.milestones")}</BreadcrumbItem>
-            <!-- reload below is a temporary hack for demo purposes -->
-            <BreadcrumbItem href="javascript:window.location.reload(true)">{data.title}</BreadcrumbItem>
-            <BreadcrumbItem>{currentMilestoneIndex + 1} / {data.milestones.length}</BreadcrumbItem>
-        </Breadcrumb>
-    </div>
-    <div>
-        <div class="w-full flex flex-col md:flex-row">
-            <div>
-            {#each data.milestones[currentMilestoneIndex].imgs as img, imgIndex}
-                <img class={`absolute object-cover h-48 md:h-96 md:rounded-bl-lg w-full md:w-48 lg:w-72 xl:w-96 transition duration-1000 ease-in-out ${imgIndex===currentImageIndex ? 'opacity-100' : 'opacity-0'}`}
-                     src={img_urls[`/src/lib/assets/${img}`]} alt="">
-            {/each}
-                <div class="h-48 md:h-96 md:rounded-bl-lg w-full md:w-48 lg:w-72 xl:w-96"></div>
-            </div>
-            <div class="m-2 md:m-4">
-                <h2 class="mb-2 text-2xl font-bold text-gray-700 dark:text-gray-400">{data.milestones[currentMilestoneIndex].title}</h2>
-                <P>{data.milestones[currentMilestoneIndex].desc}</P>
-                <Accordion flush>
-                    <AccordionItem>
-                        <span slot="header" class="text-base flex gap-2">
-                            <InfoCircleSolid class="mt-0.5"/>
-                            <span>{$_("milestone.observation")}</span>
-                        </span>
-                        <P>
-                            {data.milestones[currentMilestoneIndex].observation}
-                        </P>
-                    </AccordionItem>
-                    <AccordionItem>
-                        <span slot="header" class="text-base flex gap-2">
-                            <QuestionCircleSolid class="mt-0.5"/>
-                            <span>{$_("milestone.help")}</span>
-                        </span>
-                        <P>
-                            {data.milestones[currentMilestoneIndex].help}
-                        </P>
-                    </AccordionItem>
-                </Accordion>
-            </div>
-            <div class="flex flex-col justify-items-stretch rounded-lg m-1">
-                {#each [0,1,2,3] as answerIndex}
-                <MilestoneButton index={answerIndex} selected={selectedAnswer===answerIndex} onClick={() => {selectAnswer(answerIndex)}}
-                                 tooltip={$_(`milestone.answer${answerIndex}.description`)}>
-                    {$_(`milestone.answer${answerIndex}.text`)}
-                </MilestoneButton>
-                {/each}
-                <div class="flex flex-row justify-center">
-                    <Button color="light" disabled={currentMilestoneIndex === 0} on:click={prevMilestone} class="m-1 mt-4">
-                        <ArrowLeftOutline class="w-5 h-5 me-2"/>
-                        {$_('milestone.prev')}
-                    </Button>
-                    <Button color="light" disabled={selectedAnswer === null} on:click={nextMilestone} class="m-1 mt-4">
-                        {$_('milestone.next')}
-                        <ArrowRightOutline class="w-5 h-5 ms-2"/>
-                    </Button>
-                </div>
-                <Checkbox class="m-1 justify-center" bind:checked={autoGoToNextMilestone}>
-                    <P class="text-xs">{$_("milestone.autonext")}</P>
-                </Checkbox>
-            </div>
-        </div>
-    </div>
+<div
+	class="border-1 flex flex-col border border-gray-200 bg-white shadow md:max-w-7xl md:rounded-lg dark:border-gray-700 dark:bg-gray-800"
+>
+	<div class="bg-gray-100 md:rounded-t-lg dark:bg-gray-600">
+		<Breadcrumb
+			olClass="inline-flex items-center space-x-1 rtl:space-x-reverse md:space-x-3 rtl:space-x-reverse flex-wrap"
+			navClass="m-2"
+		>
+			<BreadcrumbItem href="#" home>Start</BreadcrumbItem>
+			<BreadcrumbItem href="#">MEIKE</BreadcrumbItem>
+			<BreadcrumbItem href="#">{$_('milestone.milestones')}</BreadcrumbItem>
+			<!-- reload below is a temporary hack for demo purposes -->
+			<BreadcrumbItem href="javascript:window.location.reload(true)">{data.title}</BreadcrumbItem>
+			<BreadcrumbItem>{currentMilestoneIndex + 1} / {data.milestones.length}</BreadcrumbItem>
+		</Breadcrumb>
+	</div>
+	<div>
+		<div class="flex w-full flex-col md:flex-row">
+			<div>
+				{#each data.milestones[currentMilestoneIndex].imgs as img, imgIndex}
+					<img
+						class={`absolute h-48 w-full object-cover transition duration-1000 ease-in-out md:h-96 md:w-48 md:rounded-bl-lg lg:w-72 xl:w-96 ${imgIndex === currentImageIndex ? 'opacity-100' : 'opacity-0'}`}
+						src={img_urls[`/src/lib/assets/${img}`]}
+						alt=""
+					/>
+				{/each}
+				<div class="h-48 w-full md:h-96 md:w-48 md:rounded-bl-lg lg:w-72 xl:w-96"></div>
+			</div>
+			<div class="m-2 md:m-4">
+				<h2 class="mb-2 text-2xl font-bold text-gray-700 dark:text-gray-400">
+					{data.milestones[currentMilestoneIndex].title}
+				</h2>
+				<P>{data.milestones[currentMilestoneIndex].desc}</P>
+				<Accordion flush>
+					<AccordionItem>
+						<span slot="header" class="flex gap-2 text-base">
+							<InfoCircleSolid class="mt-0.5" />
+							<span>{$_('milestone.observation')}</span>
+						</span>
+						<P>
+							{data.milestones[currentMilestoneIndex].observation}
+						</P>
+					</AccordionItem>
+					<AccordionItem>
+						<span slot="header" class="flex gap-2 text-base">
+							<QuestionCircleSolid class="mt-0.5" />
+							<span>{$_('milestone.help')}</span>
+						</span>
+						<P>
+							{data.milestones[currentMilestoneIndex].help}
+						</P>
+					</AccordionItem>
+				</Accordion>
+			</div>
+			<div class="m-1 flex flex-col justify-items-stretch rounded-lg">
+				{#each [0, 1, 2, 3] as answerIndex}
+					<MilestoneButton
+						index={answerIndex}
+						selected={selectedAnswer === answerIndex}
+						onClick={() => {
+							selectAnswer(answerIndex);
+						}}
+						tooltip={$_(`milestone.answer${answerIndex}.description`)}
+					>
+						{$_(`milestone.answer${answerIndex}.text`)}
+					</MilestoneButton>
+				{/each}
+				<div class="flex flex-row justify-center">
+					<Button
+						color="light"
+						disabled={currentMilestoneIndex === 0}
+						on:click={prevMilestone}
+						class="m-1 mt-4"
+					>
+						<ArrowLeftOutline class="me-2 h-5 w-5" />
+						{$_('milestone.prev')}
+					</Button>
+					<Button
+						color="light"
+						disabled={selectedAnswer === null}
+						on:click={nextMilestone}
+						class="m-1 mt-4"
+					>
+						{$_('milestone.next')}
+						<ArrowRightOutline class="ms-2 h-5 w-5" />
+					</Button>
+				</div>
+				<Checkbox class="m-1 justify-center" bind:checked={autoGoToNextMilestone}>
+					<P class="text-xs">{$_('milestone.autonext')}</P>
+				</Checkbox>
+			</div>
+		</div>
+	</div>
 </div>
diff --git a/frontend/src/lib/components/MilestoneButton.svelte b/frontend/src/lib/components/MilestoneButton.svelte
index 8e92b1d5..cd76741d 100644
--- a/frontend/src/lib/components/MilestoneButton.svelte
+++ b/frontend/src/lib/components/MilestoneButton.svelte
@@ -1,18 +1,21 @@
 <script lang="ts">
-    import {Tooltip} from 'flowbite-svelte';
+	import { Tooltip } from 'flowbite-svelte';
 
-    export let selected: boolean = false;
-    export let index: number;
-    export let tooltip: string = '';
-    export let onClick: () => void;
+	export let selected: boolean = false;
+	export let index: number;
+	export let tooltip: string = '';
+	export let onClick: () => void;
 
-    let bg_color = `bg-milestone-answer-${index}`;
+	let bg_color = `bg-milestone-answer-${index}`;
 </script>
 
-<button type="button" on:click={onClick}
-        class={`${bg_color} ${selected ? 'opacity-100 outline-none ring-4 ring-blue-400' : 'opacity-50 hover:opacity-80'} border border-gray-200 rounded-lg font-medium border-1 px-5 py-3 m-1 md:my-2 text-center`}>
-    <slot />
+<button
+	type="button"
+	on:click={onClick}
+	class={`${bg_color} ${selected ? 'opacity-100 outline-none ring-4 ring-blue-400' : 'opacity-50 hover:opacity-80'} border-1 m-1 rounded-lg border border-gray-200 px-5 py-3 text-center font-medium md:my-2`}
+>
+	<slot />
 </button>
 <Tooltip class={`${bg_color} text-gray-700 dark:${bg_color} dark:text-gray-700`}>
-    {tooltip}
+	{tooltip}
 </Tooltip>
diff --git a/frontend/src/lib/components/UserLogin.svelte b/frontend/src/lib/components/UserLogin.svelte
index dad612e7..5967c7b4 100644
--- a/frontend/src/lib/components/UserLogin.svelte
+++ b/frontend/src/lib/components/UserLogin.svelte
@@ -150,7 +150,7 @@
 		<span class="container mx-auto w-full text-gray-700 dark:text-gray-400">Not registered?</span>
 		<a
 			href={`${base}/userLand/userRegistration`}
-			class="text-primary-700 dark:text-primary-500 hover:underline"
+			class="text-primary-700 hover:underline dark:text-primary-500"
 		>
 			Create account
 		</a>
diff --git a/frontend/src/lib/components/UserProfile.svelte b/frontend/src/lib/components/UserProfile.svelte
index bc876a6f..c693b82a 100644
--- a/frontend/src/lib/components/UserProfile.svelte
+++ b/frontend/src/lib/components/UserProfile.svelte
@@ -2,7 +2,7 @@
 	import { users } from '$lib/stores/userStore';
 	import { Button, Heading, Listgroup, Popover } from 'flowbite-svelte';
 	import { onDestroy } from 'svelte';
-	import {base} from "$app/paths";
+	import { base } from '$app/paths';
 
 	export let triggeredBy = '';
 	let loggedIn: string | null = users.get()['loggedIn'];
@@ -37,7 +37,7 @@
 			>
 				{item.name}
 			</Listgroup>
-			<Button href="{base}" on:click={logout}>Logout</Button>
+			<Button href={base} on:click={logout}>Logout</Button>
 		</div>
 	{:else}
 		<div class="mx-auto mb-6 flex flex-col items-center justify-center space-y-6">
diff --git a/frontend/src/lib/i18n.ts b/frontend/src/lib/i18n.ts
index b921c884..9c82e6f8 100644
--- a/frontend/src/lib/i18n.ts
+++ b/frontend/src/lib/i18n.ts
@@ -1,9 +1,9 @@
-import { register, init, getLocaleFromNavigator } from  'svelte-i18n';
+import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
 
-register('de', ()  =>  import('../locales/de.json'));
-register('en', ()  =>  import('../locales/en.json'));
+register('de', () => import('../locales/de.json'));
+register('en', () => import('../locales/en.json'));
 
 init({
-    fallbackLocale: 'de',
-    initialLocale: 'de',
+	fallbackLocale: 'de',
+	initialLocale: 'de'
 });
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index bcecaf11..ce04e0f3 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -1,26 +1,26 @@
 {
-  "milestone": {
-    "answer0": {
-      "text": "Noch gar nicht",
-      "description": "Das Kind macht noch keine Anstalten bzw. ist noch nicht in der Lage, das Verhalten auszuführen."
-    },
-    "answer1": {
-      "text": "In Ansätzen",
-      "description": "Das Kind zeigt erste Ansätze, das Verhalten auszuführen, weicht dabei aber noch erheblich von der Beschreibung ab oder/und ist sehr unsicher."
-    },
-    "answer2": {
-      "text": "Weitgehend",
-      "description": "Das Kind beherrscht das Verhalten im Prinzip, zeigt es aber erst selten, ist dabei  noch leicht unsicher oder führt es nicht ganz sauber aus."
-    },
-    "answer3": {
-      "text": "Zuverlässig",
-      "description": "Das Kind zeigt das Verhalten mehrmals sicher und genau wie beschrieben."
-    },
-    "milestones": "Meilensteine",
-    "observation": "Beobachtungshinweise",
-    "help": "Förderhilfen",
-    "next": "Weiter",
-    "prev": "Zurück",
-    "autonext" : "Automatisch weiter"
-  }
+	"milestone": {
+		"answer0": {
+			"text": "Noch gar nicht",
+			"description": "Das Kind macht noch keine Anstalten bzw. ist noch nicht in der Lage, das Verhalten auszuführen."
+		},
+		"answer1": {
+			"text": "In Ansätzen",
+			"description": "Das Kind zeigt erste Ansätze, das Verhalten auszuführen, weicht dabei aber noch erheblich von der Beschreibung ab oder/und ist sehr unsicher."
+		},
+		"answer2": {
+			"text": "Weitgehend",
+			"description": "Das Kind beherrscht das Verhalten im Prinzip, zeigt es aber erst selten, ist dabei  noch leicht unsicher oder führt es nicht ganz sauber aus."
+		},
+		"answer3": {
+			"text": "Zuverlässig",
+			"description": "Das Kind zeigt das Verhalten mehrmals sicher und genau wie beschrieben."
+		},
+		"milestones": "Meilensteine",
+		"observation": "Beobachtungshinweise",
+		"help": "Förderhilfen",
+		"next": "Weiter",
+		"prev": "Zurück",
+		"autonext": "Automatisch weiter"
+	}
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index e28a8ec2..690cff54 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -1,26 +1,26 @@
 {
-  "milestone": {
-    "answer0": {
-      "text": "Not yet",
-      "description": "The child does not yet make any attempt or is not yet able to carry out the behavior."
-    },
-    "answer1": {
-      "text": "Partially",
-      "description": "The child shows first attempts to perform the behavior, but still deviates considerably from the description and/or is very insecure."
-    },
-    "answer2": {
-      "text": "Mostly",
-      "description": "The child has mastered the behavior in principle, but rarely shows it, is still slightly unsure, or does not carry it out completely correctly."
-    },
-    "answer3": {
-      "text": "Reliably",
-      "description": "The child demonstrates the behavior several times safely and exactly as described."
-    },
-    "milestones": "Milestones",
-    "observation": "Observation notes",
-    "help": "More information",
-    "next": "Next",
-    "prev": "Back",
-    "autonext" : "Continue automatically"
-  }
+	"milestone": {
+		"answer0": {
+			"text": "Not yet",
+			"description": "The child does not yet make any attempt or is not yet able to carry out the behavior."
+		},
+		"answer1": {
+			"text": "Partially",
+			"description": "The child shows first attempts to perform the behavior, but still deviates considerably from the description and/or is very insecure."
+		},
+		"answer2": {
+			"text": "Mostly",
+			"description": "The child has mastered the behavior in principle, but rarely shows it, is still slightly unsure, or does not carry it out completely correctly."
+		},
+		"answer3": {
+			"text": "Reliably",
+			"description": "The child demonstrates the behavior several times safely and exactly as described."
+		},
+		"milestones": "Milestones",
+		"observation": "Observation notes",
+		"help": "More information",
+		"next": "Next",
+		"prev": "Back",
+		"autonext": "Continue automatically"
+	}
 }
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index c3e0e79d..3cd89966 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -12,16 +12,16 @@
 </script>
 
 <Navbar>
-	<NavBrand href="{base}">
+	<NavBrand href={base}>
 		<img src={logo_light} class="block h-16 dark:hidden" alt="MONDEY Logo" />
 		<img src={logo_dark} class="hidden h-16 dark:block" alt="MONDEY Logo" />
 	</NavBrand>
 	<NavHamburger />
 	<NavUl ulClass="flex space-x-4 text-lg ">
-		<NavLi href="{base}" active={true}>Home</NavLi>
-		<NavLi href="{base}">Aktuelles</NavLi>
-		<NavLi href="{base}">Downloads</NavLi>
-		<NavLi href="{base}">Kontakt</NavLi>
+		<NavLi href={base} active={true}>Home</NavLi>
+		<NavLi href={base}>Aktuelles</NavLi>
+		<NavLi href={base}>Downloads</NavLi>
+		<NavLi href={base}>Kontakt</NavLi>
 
 		<FunctionalIcon tooltip={'Darkmode ein- oder ausschalten'}>
 			<DarkMode class="apply-icon-style">
@@ -36,12 +36,11 @@
 		<UserProfile triggeredBy="#avatar" />
 
 		<LocaleChooser />
-
 	</NavUl>
 </Navbar>
 
 <div
-	class="md:mx-[max(10vw,2rem)] md:my-[max(2vw,2rem)] flex-auto items-center justify-center overflow-y-auto pb-20"
+	class="flex-auto items-center justify-center overflow-y-auto pb-20 md:mx-[max(10vw,2rem)] md:my-[max(2vw,2rem)]"
 >
 	<slot></slot>
 </div>
diff --git a/frontend/src/routes/+layout.ts b/frontend/src/routes/+layout.ts
index 20acdf05..c5ec2913 100644
--- a/frontend/src/routes/+layout.ts
+++ b/frontend/src/routes/+layout.ts
@@ -1,7 +1,7 @@
-import {waitLocale} from "svelte-i18n";
+import { waitLocale } from 'svelte-i18n';
 
 export const prerender = true;
 
 export async function load() {
-    await waitLocale()
+	await waitLocale();
 }
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 548684c7..4c1b703f 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-    import { base } from '$app/paths';
+	import { base } from '$app/paths';
 	import Frontpage from '$lib/components/Frontpage.svelte';
 </script>
 
diff --git a/frontend/src/routes/milestone/+page.svelte b/frontend/src/routes/milestone/+page.svelte
index ba98158c..0e43b7e5 100644
--- a/frontend/src/routes/milestone/+page.svelte
+++ b/frontend/src/routes/milestone/+page.svelte
@@ -1,96 +1,98 @@
 <script>
-    // Demo page for Milestone component - in the future all this data will come from an API call to the backend
-    import Milestone from '$lib/components/Milestone.svelte';
-    import { locale } from 'svelte-i18n';
+	// Demo page for Milestone component - in the future all this data will come from an API call to the backend
+	import Milestone from '$lib/components/Milestone.svelte';
+	import { locale } from 'svelte-i18n';
 
-    const data = {
-        "de": {
-        "title": "Grobmotorik",
-        "desc": "Hier geht es darum, zu beschreiben, wie sich das Kind fortbewegt Und seinen Körper (Rumpf, Arme, Beine) kontrollieren kann.",
-        "milestones": [
-            {
-                "number": 1,
-                "title": "Alleine von Stufe/Absatz springen",
-                "desc": "Kind springt mit beiden Beinen gleichzeitig hoch und überwindet im Sprung freihändig einen (kleinen) Absatz oder eine Stufe. Es kommt sicher wieder im Stand auf.",
-                "observation": "Beobachten Sie, ob das Kind spontan oder nach Aufforderung von einer Treppenstufe oder einem ähnlich hohen Absatz springt! Es sollte tatsächlich mit beiden Beinen gleichzeitig losspringen, sich nirgends festhalten und beim Landen nicht mit der Hand abfangen. Sie sollten es beim Springen auch nicht an die Hand nehmen müssen. Wurde dieses Verhalten mehrmals sicher ausgeführt, gilt der Meilenstein zuverlässig gekonnt.  Ist das Kind noch leicht unsicher, springt meist mit beiden Beinen versetzt los, oder berührt beim Landen mit der Hand den Boden, ist das Verhalten weitgehend gekonnt. Wagt es den Sprung nur, wenn man seine Hand hält und/oder führt es den Sprung noch unsauber aus, ist das Verhalten in Ansätzen gekonnt. In allen anderen Fällen gilt der Meilenstein als noch nicht gekonnt.",
-                "help": "Beim Treppengehen im Haus, beim Spazierengehen oder auf dem Spielplatz bieten sich vielfältige Gelegenheiten, Kinder zum Springen von einem Absatz (z.B. einem höheren Bordstein. einem Holzstamm, oder einem Stein) zu ermutigen. Machen Sie Ihrem Kind die Bewegung vor oder führen Sie sie gemeinsam mit dem Kind durch. Nehmen Sie das Kind dafür zunächst bei an die Hand. Später können sie die Hand immer lockerer mitführen und die Eigenbewegung des Kindes nur noch passiv begleiten. So kann das Kind am besten selbst herausfinden, wie es seine Arme einsetzen muss, um Schwung zu holen und beim Landen das Gleichgewicht zu finden. Ist das Springen an der Hand sicher, lösen Sie die Hand ganz und stellen Sie sich gegenüber dem Kind hin, damit es weiß, dass es im Notfall aufgefangen wird.",
-                "imgs": ["baby0.jpg", "baby1.jpg", "baby2.jpg"],
-                "answer": null
-            },
-            {
-                "number": 2,
-                "title": "Das Köpfchen alleine heben",
-                "desc": "Kind liegt auf dem Bauch, hält die Arme angewinkelt neben dem Körper und hebt sein Köpfchen aus eigener Kraft so hoch, dass das Kinn nicht mehr die Auflage berührt. Diese Position kann es mehr als 3 Sekunden halten.",
-                "observation": "Hier kommt der Beobachtungshilfetext hin",
-                "help": "Hier kommt der Förderhilfetext hin",
-                "imgs": ["baby1.jpg"],
-                "answer": null
-            },
-            {
-                "number": 3,
-                "title": "Den Kopf frei bewegen",
-                "desc": "Kind kann seinen Kopf frei halten und bewegen, wenn es z.B. auf dem Schoß sitzt. Wenn man seinen Körper ein wenig schräg hält, gleicht es diese Bewegung mit dem Kopf aus. Der Kopf wackelt kaum oder gar nicht, wenn das Kind ihn dreht.",
-                "observation": "Hier kommt der Beobachtungshilfetext hin",
-                "help": "Hier kommt der Förderhilfetext hin",
-                "imgs": ["baby2.jpg"],
-                "answer": null
-            },
-            {
-                "number": 4,
-                "title": "Sich in Bauchlage mit gestreckten Armen aufstützen",
-                "desc": "Kind liegt auf dem Bauch. Es stützt sich mit beiden Armen gestreckt von der Unterlage ab und hebt seinen Rücken an, um den Kopf aufrecht zu halten. Schultern und Brust liegen für mehr als 3 Sekunden nicht mehr auf der Unterlage.",
-                "observation": "Hier kommt der Beobachtungshilfetext hin",
-                "help": "Hier kommt der Förderhilfetext hin",
-                "imgs": ["baby3.jpg"],
-                "answer": null
-            }
-        ]
-    },
-        "en": {
-            "title": "Motorskills",
-            "desc": "The aim here is to describe the movement and body control (torso, arms, legs) of the child.",
-            "milestones": [
-                {
-                    "number": 1,
-                    "title": "Jump from a step unaided",
-                    "desc": "The child jumps up with both legs at the same time, overcomes a (small) ledge or step without using their hands, and lands back on their feet.",
-                    "observation": "Observe whether the child jumps spontaneously or when asked to do so from a step or similarly high ledge! They should actually jump off with both legs at the same time, not holding on to anything and not catching themselves with their hand when landing. You shouldn't have to hold them while jumping either.  If this behavior has been carried out safely several times, the milestone is considered to have been reliably accomplished.  If the child is still slightly unsteady, usually jumps with both legs offset, or touches the ground with their hand when landing, the behavior is largely skillful.  If they only dare to jump when you hold their hand and/or if they does not perform the jump properly, then the behavior is rudimentary.  In all other cases, the milestone is considered not yet achieved.",
-                    "help": "When climbing stairs in the house, when taking a walk, or on the playground, there are many opportunities to encourage children to jump from a step (e.g. a higher curb, a log, or a stone). Show your child the movement or do it together with them. To begin with, hold the child by the hand. Later, you can move your hand more loosely and only passively accompany the child's movement. This is the best way for the child to find out for themselves how to use their arms to gain momentum and find balance when landing. Once it is safe to jump holding your hand, release your hand completely and stand opposite the child so that they know that they will be caught in an emergency.",
-                    "imgs": ["baby0.jpg", "baby1.jpg", "baby2.jpg"],
-                    "answer": null
-                },
-                {
-                    "number": 2,
-                    "title": "Lift their head unaided",
-                    "desc": "The child lies on their stomach, holds their arms bent beside their body and lifts their head up under their own power until their chin no longer touches the support. They can hold this position for more than 3 seconds.",
-                    "observation": "Observation text goes here",
-                    "help": "Help text goes here",
-                    "imgs": ["baby1.jpg"],
-                    "answer": null
-                },
-                {
-                    "number": 3,
-                    "title": "Move their head freely",
-                    "desc": "The child can hold and move their head freely, for example when they are sitting on your lap. If you hold their body at a slight angle, they will compensate for this movement with their head. The head hardly wobbles or does not wobble at all when the child turns it.",
-                    "observation": "Observation text goes here",
-                    "help": "Help text goes here",
-                    "imgs": ["baby2.jpg"],
-                    "answer": null
-                },
-                {
-                    "number": 4,
-                    "title": "Lift head while lying face down",
-                    "desc": "Child lies on their stomach. They support themselves with both arms stretched out from the surface and lift their back to keep their head upright. Shoulders and chest are no longer on the surface for more than 3 seconds.",
-                    "observation": "Observation text goes here",
-                    "help": "Help text goes here",
-                    "imgs": ["baby3.jpg"],
-                    "answer": null
-                }
-            ]
-        }
-    }
+	const data = {
+		de: {
+			title: 'Grobmotorik',
+			desc: 'Hier geht es darum, zu beschreiben, wie sich das Kind fortbewegt Und seinen Körper (Rumpf, Arme, Beine) kontrollieren kann.',
+			milestones: [
+				{
+					number: 1,
+					title: 'Alleine von Stufe/Absatz springen',
+					desc: 'Kind springt mit beiden Beinen gleichzeitig hoch und überwindet im Sprung freihändig einen (kleinen) Absatz oder eine Stufe. Es kommt sicher wieder im Stand auf.',
+					observation:
+						'Beobachten Sie, ob das Kind spontan oder nach Aufforderung von einer Treppenstufe oder einem ähnlich hohen Absatz springt! Es sollte tatsächlich mit beiden Beinen gleichzeitig losspringen, sich nirgends festhalten und beim Landen nicht mit der Hand abfangen. Sie sollten es beim Springen auch nicht an die Hand nehmen müssen. Wurde dieses Verhalten mehrmals sicher ausgeführt, gilt der Meilenstein zuverlässig gekonnt.  Ist das Kind noch leicht unsicher, springt meist mit beiden Beinen versetzt los, oder berührt beim Landen mit der Hand den Boden, ist das Verhalten weitgehend gekonnt. Wagt es den Sprung nur, wenn man seine Hand hält und/oder führt es den Sprung noch unsauber aus, ist das Verhalten in Ansätzen gekonnt. In allen anderen Fällen gilt der Meilenstein als noch nicht gekonnt.',
+					help: 'Beim Treppengehen im Haus, beim Spazierengehen oder auf dem Spielplatz bieten sich vielfältige Gelegenheiten, Kinder zum Springen von einem Absatz (z.B. einem höheren Bordstein. einem Holzstamm, oder einem Stein) zu ermutigen. Machen Sie Ihrem Kind die Bewegung vor oder führen Sie sie gemeinsam mit dem Kind durch. Nehmen Sie das Kind dafür zunächst bei an die Hand. Später können sie die Hand immer lockerer mitführen und die Eigenbewegung des Kindes nur noch passiv begleiten. So kann das Kind am besten selbst herausfinden, wie es seine Arme einsetzen muss, um Schwung zu holen und beim Landen das Gleichgewicht zu finden. Ist das Springen an der Hand sicher, lösen Sie die Hand ganz und stellen Sie sich gegenüber dem Kind hin, damit es weiß, dass es im Notfall aufgefangen wird.',
+					imgs: ['baby0.jpg', 'baby1.jpg', 'baby2.jpg'],
+					answer: null
+				},
+				{
+					number: 2,
+					title: 'Das Köpfchen alleine heben',
+					desc: 'Kind liegt auf dem Bauch, hält die Arme angewinkelt neben dem Körper und hebt sein Köpfchen aus eigener Kraft so hoch, dass das Kinn nicht mehr die Auflage berührt. Diese Position kann es mehr als 3 Sekunden halten.',
+					observation: 'Hier kommt der Beobachtungshilfetext hin',
+					help: 'Hier kommt der Förderhilfetext hin',
+					imgs: ['baby1.jpg'],
+					answer: null
+				},
+				{
+					number: 3,
+					title: 'Den Kopf frei bewegen',
+					desc: 'Kind kann seinen Kopf frei halten und bewegen, wenn es z.B. auf dem Schoß sitzt. Wenn man seinen Körper ein wenig schräg hält, gleicht es diese Bewegung mit dem Kopf aus. Der Kopf wackelt kaum oder gar nicht, wenn das Kind ihn dreht.',
+					observation: 'Hier kommt der Beobachtungshilfetext hin',
+					help: 'Hier kommt der Förderhilfetext hin',
+					imgs: ['baby2.jpg'],
+					answer: null
+				},
+				{
+					number: 4,
+					title: 'Sich in Bauchlage mit gestreckten Armen aufstützen',
+					desc: 'Kind liegt auf dem Bauch. Es stützt sich mit beiden Armen gestreckt von der Unterlage ab und hebt seinen Rücken an, um den Kopf aufrecht zu halten. Schultern und Brust liegen für mehr als 3 Sekunden nicht mehr auf der Unterlage.',
+					observation: 'Hier kommt der Beobachtungshilfetext hin',
+					help: 'Hier kommt der Förderhilfetext hin',
+					imgs: ['baby3.jpg'],
+					answer: null
+				}
+			]
+		},
+		en: {
+			title: 'Motorskills',
+			desc: 'The aim here is to describe the movement and body control (torso, arms, legs) of the child.',
+			milestones: [
+				{
+					number: 1,
+					title: 'Jump from a step unaided',
+					desc: 'The child jumps up with both legs at the same time, overcomes a (small) ledge or step without using their hands, and lands back on their feet.',
+					observation:
+						"Observe whether the child jumps spontaneously or when asked to do so from a step or similarly high ledge! They should actually jump off with both legs at the same time, not holding on to anything and not catching themselves with their hand when landing. You shouldn't have to hold them while jumping either.  If this behavior has been carried out safely several times, the milestone is considered to have been reliably accomplished.  If the child is still slightly unsteady, usually jumps with both legs offset, or touches the ground with their hand when landing, the behavior is largely skillful.  If they only dare to jump when you hold their hand and/or if they does not perform the jump properly, then the behavior is rudimentary.  In all other cases, the milestone is considered not yet achieved.",
+					help: "When climbing stairs in the house, when taking a walk, or on the playground, there are many opportunities to encourage children to jump from a step (e.g. a higher curb, a log, or a stone). Show your child the movement or do it together with them. To begin with, hold the child by the hand. Later, you can move your hand more loosely and only passively accompany the child's movement. This is the best way for the child to find out for themselves how to use their arms to gain momentum and find balance when landing. Once it is safe to jump holding your hand, release your hand completely and stand opposite the child so that they know that they will be caught in an emergency.",
+					imgs: ['baby0.jpg', 'baby1.jpg', 'baby2.jpg'],
+					answer: null
+				},
+				{
+					number: 2,
+					title: 'Lift their head unaided',
+					desc: 'The child lies on their stomach, holds their arms bent beside their body and lifts their head up under their own power until their chin no longer touches the support. They can hold this position for more than 3 seconds.',
+					observation: 'Observation text goes here',
+					help: 'Help text goes here',
+					imgs: ['baby1.jpg'],
+					answer: null
+				},
+				{
+					number: 3,
+					title: 'Move their head freely',
+					desc: 'The child can hold and move their head freely, for example when they are sitting on your lap. If you hold their body at a slight angle, they will compensate for this movement with their head. The head hardly wobbles or does not wobble at all when the child turns it.',
+					observation: 'Observation text goes here',
+					help: 'Help text goes here',
+					imgs: ['baby2.jpg'],
+					answer: null
+				},
+				{
+					number: 4,
+					title: 'Lift head while lying face down',
+					desc: 'Child lies on their stomach. They support themselves with both arms stretched out from the surface and lift their back to keep their head upright. Shoulders and chest are no longer on the surface for more than 3 seconds.',
+					observation: 'Observation text goes here',
+					help: 'Help text goes here',
+					imgs: ['baby3.jpg'],
+					answer: null
+				}
+			]
+		}
+	};
 </script>
 
-<div class="flex justify-center items-center">
-    <Milestone data={data[$locale]}/>
+<div class="flex items-center justify-center">
+	<Milestone data={data[$locale]} />
 </div>
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index c7febe0c..010dcac3 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -13,7 +13,7 @@ const config = {
 			assets: 'build',
 			fallback: 'index.html',
 			precompress: false,
-			strict: true,
+			strict: true
 		}),
 		paths: {
 			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 8136eb90..561d76c9 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -11,11 +11,11 @@ export default {
 	darkMode: 'selector',
 	// ensure svelte compiler doesn't optimize these away if it doesn't realise we are using them
 	safelist: [
-               'bg-milestone-answer-0',
-               'bg-milestone-answer-1',
-               'bg-milestone-answer-2',
-               'bg-milestone-answer-3',
-       ],
+		'bg-milestone-answer-0',
+		'bg-milestone-answer-1',
+		'bg-milestone-answer-2',
+		'bg-milestone-answer-3'
+	],
 	theme: {
 		extend: {
 			colors: {
@@ -39,19 +39,19 @@ export default {
 					3: '#4ade80'
 				}
 			},
-            fontSize: {
-                'xs': '.75rem',
-                'sm': '.875rem',
-                'base': '1rem',
-                'lg': '1.125rem',
-                'xl': '1.25rem',
-                '2xl': '1.5rem',
-                '3xl': '1.875rem',
-                '4xl': '2.25rem',
-                '5xl': '3rem',
-                '6xl': '4rem',
-                '7xl': '5rem'
-            }
+			fontSize: {
+				xs: '.75rem',
+				sm: '.875rem',
+				base: '1rem',
+				lg: '1.125rem',
+				xl: '1.25rem',
+				'2xl': '1.5rem',
+				'3xl': '1.875rem',
+				'4xl': '2.25rem',
+				'5xl': '3rem',
+				'6xl': '4rem',
+				'7xl': '5rem'
+			}
 		}
 	},
 
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index c66b68b8..5b9ab556 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -6,6 +6,6 @@ export default defineConfig({
 	plugins: [sveltekit(), svelteTesting()],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}'],
-		environment: "jsdom"
+		environment: 'jsdom'
 	}
 });

From 61dedfc4b3f33816a3e91e0b94a089714a69af7b Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Mon, 23 Sep 2024 13:11:28 +0200
Subject: [PATCH 05/28] add custom checkbox component and build logic

---
 .../lib/components/DataInput/Checkbox.svelte  |   9 +-
 .../components/DataInput/CheckboxList.svelte  |  22 ++-
 .../lib/components/DataInput/DataInput.svelte |  18 ++-
 .../src/lib/components/UserDataInput.svelte   |   4 -
 .../userLand/userDataInput/+page.svelte       | 151 +++++++++---------
 5 files changed, 110 insertions(+), 94 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/Checkbox.svelte b/frontend/src/lib/components/DataInput/Checkbox.svelte
index 5fb4895c..a66053ae 100644
--- a/frontend/src/lib/components/DataInput/Checkbox.svelte
+++ b/frontend/src/lib/components/DataInput/Checkbox.svelte
@@ -11,7 +11,12 @@
 	export let label: string;
 </script>
 
-<label>
+<label class="m-1 p-1 text-gray-700 dark:text-gray-400">
 	{label}
-	<input type="checkbox" bind:checked on:change={handleChange} />
+	<input
+		type="checkbox"
+		bind:checked
+		on:change={handleChange}
+		class="text-primary-700 dark:text-primary-700 rounded"
+	/>
 </label>
diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
index bea2fe1d..8b347de2 100644
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -5,24 +5,34 @@
 	export let unique: boolean = false;
 
 	let selected: boolean[] = $$props.items.map((e) => false);
-
-	$: console.log('unique: ', unique, 'value: ', value, 'selected:', selected);
 </script>
 
-<div
-	class="xl:grid-cols-4flex grid w-full grid-cols-1 flex-col gap-2 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3"
->
+<div class="flex flex grid w-full auto-cols-auto grid-flow-col flex-col">
 	{#each $$props.items as item, index}
 		<Checkbox
 			bind:checked={selected[index]}
 			label={item.label}
 			on:changed={() => {
 				if (unique) {
-					value = $$props.items[index].value;
 					selected = selected.map((_, i) => {
 						return i === index && selected[index];
 					});
+
+					if (selected[index] === true) {
+						value = $$props.items[index].value;
+					} else {
+						value = null;
+					}
 				} else {
+					if (value instanceof Array === false) {
+						value = [];
+					}
+					if (selected[index] === true) {
+						value.push($$props.items[index].value);
+						value = [...new Set(value)];
+					} else {
+						value = value.filter((v) => v !== $$props.itmes[index].value);
+					}
 				}
 			}}
 		/>
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 09558579..c64aab95 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -7,12 +7,12 @@
 
 	// variables
 	export let component: any;
-	export let value: any = null;
-	export let label: string | null = null;
+	export let value: any;
+	export let label: string;
 	export let componentClass: string = '';
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;
-	export let additionalInput: any = value;
+	export let additionalInput: any = null;
 
 	// data to display and event handlers for dynamcis.
 	export let properties: any = {};
@@ -27,18 +27,22 @@
 	};
 
 	// functionality for showing the textfield when the trigger is selected
-	function checkShowTextfield(v: any, trigger: string) {
+	function checkShowTextfield(v: any): boolean {
 		if (v instanceof Array) {
-			return v.includes(trigger);
+			console.log(' test array: ', v.includes(textTrigger));
+			return v.includes(textTrigger);
 		} else {
-			return v === trigger;
+			console.log(' test other: ', v === textTrigger);
+			return v === textTrigger;
 		}
 	}
 
 	// reactive statement that makes sure 'valid' updates the page
 	$: valid = value !== undefined && value !== null && value !== '' && checkValid();
 	$: highlight = !valid && properties.required === true;
-	$: showTextField = showTextField || checkShowTextfield(value, textTrigger);
+	$: showTextField = checkShowTextfield(value);
+	$: console.log('DataInput value', value);
+	$: console.log('DataInput showTextField', showTextField);
 </script>
 
 {#if label}
diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
index a4351174..5c0ee543 100644
--- a/frontend/src/lib/components/UserDataInput.svelte
+++ b/frontend/src/lib/components/UserDataInput.svelte
@@ -123,10 +123,6 @@
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
-					showTextField={(Array.isArray(element.value)
-						? element.value.length > 1
-						: element.value !== null) &&
-						element.props.items?.some((item) => item.value === element.value) === false}
 				/>
 			{/each}
 		</form>
diff --git a/frontend/src/routes/userLand/userDataInput/+page.svelte b/frontend/src/routes/userLand/userDataInput/+page.svelte
index 6af305d0..b75896fa 100644
--- a/frontend/src/routes/userLand/userDataInput/+page.svelte
+++ b/frontend/src/routes/userLand/userDataInput/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import CheckboxList from '$lib/components/DataInput/CheckboxList.svelte';
 	import UserDataInput from '$lib/components/UserDataInput.svelte';
+	import { Input, Select } from 'flowbite-svelte';
 
 	// this stuff here will become backend calls in the end because that is where the data this page will be filled with
 	// will come from. Hence, they are not put into a separate library or anything
@@ -30,18 +31,18 @@
 		}
 	}
 	const data = [
-		// {
-		// 	component: Select,
-		// 	value: null,
-		// 	additionalValue: null,
-		// 	props: {
-		// 		name: 'Geburtsjahr',
-		// 		items: numericalRange(100, 1960, 1, true),
-		// 		placeholder: 'Bitte auswählen',
-		// 		label: 'Geburtsjahr',
-		// 		required: true
-		// 	}
-		// },
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Geburtsjahr',
+				items: numericalRange(100, 1960, 1, true),
+				placeholder: 'Bitte auswählen',
+				label: 'Geburtsjahr',
+				required: true
+			}
+		},
 		{
 			component: CheckboxList,
 			value: null,
@@ -57,70 +58,70 @@
 				textTrigger: 'Andere',
 				unique: true
 			}
+		},
+		{
+			component: CheckboxList,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Höchster Bildungsabschluss',
+				items: [
+					'kein Schulabschluss',
+					'Hauptschulabschluss',
+					'Realschulabschluss',
+					'Abitur',
+					'Bachelor',
+					'Master',
+					'Promotion',
+					'Anderer'
+				].map((v) => {
+					return { label: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				required: true,
+				label: 'Höchster Bildungsabschluss',
+				textTrigger: 'Anderer',
+				unique: true
+			}
+		},
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Arbeitszeit/Woche',
+				items: intervalRange(13, 0, 5, true),
+				placeholder: 'Bitte auswählen',
+				label: 'Arbeitszeit/Woche',
+				required: true,
+				textTrigger: 'Andere'
+			}
+		},
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Familieneinkommen/Jahr',
+				items: intervalRange(23, 0, 5000, true),
+				placeholder: 'Bitte auswählen',
+				label: 'Familieneinkommen/Jahr',
+				required: true,
+				textTrigger: 'Anderes'
+			}
+		},
+		{
+			component: Input,
+			value: null,
+			additionalValue: null,
+			props: {
+				name: 'Beruf',
+				type: 'text',
+				placeholder: 'Geben sie ihren Beruf an',
+				label: 'Beruf',
+				required: true
+			}
 		}
-		// {
-		// 	component: CheckboxList,
-		// 	value: null,
-		// 	additionalValue: null,
-		// 	props: {
-		// 		name: 'Höchster Bildungsabschluss',
-		// 		items: [
-		// 			'kein Schulabschluss',
-		// 			'Hauptschulabschluss',
-		// 			'Realschulabschluss',
-		// 			'Abitur',
-		// 			'Bachelor',
-		// 			'Master',
-		// 			'Promotion',
-		// 			'Anderer'
-		// 		].map((v) => {
-		// 			return { label: String(v), value: v };
-		// 		}),
-		// 		placeholder: 'Bitte auswählen',
-		// 		required: true,
-		// 		label: 'Höchster Bildungsabschluss',
-		// 		textTrigger: 'Anderer',
-		// 		unique: true
-		// 	}
-		// },
-		// {
-		// 	component: Select,
-		// 	value: null,
-		// 	additionalValue: null,
-		// 	props: {
-		// 		name: 'Arbeitszeit/Woche',
-		// 		items: intervalRange(13, 0, 5, true),
-		// 		placeholder: 'Bitte auswählen',
-		// 		label: 'Arbeitszeit/Woche',
-		// 		required: true,
-		// 		textTrigger: 'Andere'
-		// 	}
-		// },
-		// {
-		// 	component: Select,
-		// 	value: null,
-		// 	additionalValue: null,
-		// 	props: {
-		// 		name: 'Familieneinkommen/Jahr',
-		// 		items: intervalRange(23, 0, 5000, true),
-		// 		placeholder: 'Bitte auswählen',
-		// 		label: 'Familieneinkommen/Jahr',
-		// 		required: true,
-		// 		textTrigger: 'Anderes'
-		// 	}
-		// },
-		// {
-		// 	component: Input,
-		// 	value: null,
-		// 	additionalValue: null,
-		// 	props: {
-		// 		name: 'Beruf',
-		// 		type: 'text',
-		// 		placeholder: 'Geben sie ihren Beruf an',
-		// 		label: 'Beruf',
-		// 		required: true
-		// 	}
-		// }
 	];
 </script>
 

From 41711e8877493948663adf51e571e23c49fab4c8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 23 Sep 2024 12:56:07 +0000
Subject: [PATCH 06/28] pnpm format

---
 frontend/src/lib/components/DataInput/Checkbox.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/DataInput/Checkbox.svelte b/frontend/src/lib/components/DataInput/Checkbox.svelte
index a66053ae..1421e898 100644
--- a/frontend/src/lib/components/DataInput/Checkbox.svelte
+++ b/frontend/src/lib/components/DataInput/Checkbox.svelte
@@ -17,6 +17,6 @@
 		type="checkbox"
 		bind:checked
 		on:change={handleChange}
-		class="text-primary-700 dark:text-primary-700 rounded"
+		class="rounded text-primary-700 dark:text-primary-700"
 	/>
 </label>

From c44e0ebca7f2a9857ece9de3c5dace2a7a3e3d76 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Mon, 23 Sep 2024 15:11:40 +0200
Subject: [PATCH 07/28] remove debug output, add reset for additionalInput

---
 frontend/src/lib/components/DataInput/CheckboxList.svelte | 4 +++-
 frontend/src/lib/components/DataInput/DataInput.svelte    | 7 ++-----
 frontend/src/lib/components/UserDataInput.svelte          | 7 ++++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
index 8b347de2..4080cf21 100644
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -5,6 +5,8 @@
 	export let unique: boolean = false;
 
 	let selected: boolean[] = $$props.items.map((e) => false);
+
+	console.log('properties: ', $$props);
 </script>
 
 <div class="flex flex grid w-full auto-cols-auto grid-flow-col flex-col">
@@ -31,7 +33,7 @@
 						value.push($$props.items[index].value);
 						value = [...new Set(value)];
 					} else {
-						value = value.filter((v) => v !== $$props.itmes[index].value);
+						value = value.filter((v) => v !== $$props.items[index].value);
 					}
 				}
 			}}
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 372b0e36..7616994f 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -29,10 +29,8 @@
 	// functionality for showing the textfield when the trigger is selected
 	function checkShowTextfield(v: any): boolean {
 		if (v instanceof Array) {
-			console.log(' test array: ', v.includes(textTrigger));
 			return v.includes(textTrigger);
 		} else {
-			console.log(' test other: ', v === textTrigger);
 			return v === textTrigger;
 		}
 	}
@@ -41,8 +39,7 @@
 	$: valid = value !== undefined && value !== null && value !== '' && checkValid();
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = checkShowTextfield(value);
-	$: console.log('DataInput value', value);
-	$: console.log('DataInput showTextField', showTextField);
+	$: value !== textTrigger ? (additionalInput = null) : additionalInput;
 </script>
 
 {#if label}
@@ -53,7 +50,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-2 border-primary-600 dark:border-primary-600' + componentClass
+			? 'border-primary-600 dark:border-primary-600 border-2' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
index 5c0ee543..2e64a46d 100644
--- a/frontend/src/lib/components/UserDataInput.svelte
+++ b/frontend/src/lib/components/UserDataInput.svelte
@@ -34,14 +34,13 @@
 	let userData: UserData;
 	let userID: string;
 
-	onMount(() => {
-		users.load();
+	onMount(async () => {
+		await users.load();
 		userID = users.get()['loggedIn'] as string;
 		userData = users.get()[userID] as UserData;
 
 		// initialize data values to stuff that is there already if
 		// data has been supplied already for that user.
-		console.log('load data');
 		const keys = [
 			'Geburtsjahr',
 			'Geschlecht',
@@ -58,6 +57,8 @@
 			}
 		}
 
+		console.log('data', data);
+
 		buttons[0].label = 'Fertig';
 	});
 

From b2e22e16a7be7613f111ec3104236b031cd2b8d0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Mon, 23 Sep 2024 13:12:12 +0000
Subject: [PATCH 08/28] pnpm format

---
 frontend/src/lib/components/DataInput/DataInput.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 7616994f..08d84f24 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -50,7 +50,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-primary-600 dark:border-primary-600 border-2' + componentClass
+			? 'border-2 border-primary-600 dark:border-primary-600' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}

From d3c3541ace789bab44d3b046dc819db570801cac Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Mon, 23 Sep 2024 15:22:39 +0200
Subject: [PATCH 09/28] add selected property into the userdatainput

---
 .../lib/components/DataInput/CheckboxList.svelte | 16 ++++++----------
 frontend/src/lib/components/UserDataInput.svelte |  8 ++++++--
 .../routes/userLand/userDataInput/+page.svelte   |  6 ++++--
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
index 4080cf21..95537e8c 100644
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -3,24 +3,20 @@
 
 	export let value: any;
 	export let unique: boolean = false;
-
-	let selected: boolean[] = $$props.items.map((e) => false);
-
-	console.log('properties: ', $$props);
 </script>
 
-<div class="flex flex grid w-full auto-cols-auto grid-flow-col flex-col">
+<div class="flex grid w-full auto-cols-auto grid-flow-col flex-col">
 	{#each $$props.items as item, index}
 		<Checkbox
-			bind:checked={selected[index]}
+			bind:checked={$$props.selected[index]}
 			label={item.label}
 			on:changed={() => {
 				if (unique) {
-					selected = selected.map((_, i) => {
-						return i === index && selected[index];
+					$$props.selected = $$props.selected.map((_, i) => {
+						return i === index && $$props.selected[index];
 					});
 
-					if (selected[index] === true) {
+					if ($$props.selected[index] === true) {
 						value = $$props.items[index].value;
 					} else {
 						value = null;
@@ -29,7 +25,7 @@
 					if (value instanceof Array === false) {
 						value = [];
 					}
-					if (selected[index] === true) {
+					if ($$props.selected[index] === true) {
 						value.push($$props.items[index].value);
 						value = [...new Set(value)];
 					} else {
diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
index 2e64a46d..a8a4b66c 100644
--- a/frontend/src/lib/components/UserDataInput.svelte
+++ b/frontend/src/lib/components/UserDataInput.svelte
@@ -54,11 +54,15 @@
 			if (userData[keys[i]]) {
 				data[i]['value'] = userData[keys[i]].value;
 				data[i]['additionalValue'] = userData[keys[i]].additionalValue;
+
+				if (data[i].props['selected']) {
+					data[i].props['selected'] = data[i].props.items.map((e) => {
+						return e.value === userData[keys[i]].value;
+					});
+				}
 			}
 		}
 
-		console.log('data', data);
-
 		buttons[0].label = 'Fertig';
 	});
 
diff --git a/frontend/src/routes/userLand/userDataInput/+page.svelte b/frontend/src/routes/userLand/userDataInput/+page.svelte
index b75896fa..05924270 100644
--- a/frontend/src/routes/userLand/userDataInput/+page.svelte
+++ b/frontend/src/routes/userLand/userDataInput/+page.svelte
@@ -56,7 +56,8 @@
 				label: 'Geschlecht',
 				required: true,
 				textTrigger: 'Andere',
-				unique: true
+				unique: true,
+				selected: [false, false, false, false]
 			}
 		},
 		{
@@ -81,7 +82,8 @@
 				required: true,
 				label: 'Höchster Bildungsabschluss',
 				textTrigger: 'Anderer',
-				unique: true
+				unique: true,
+				selected: [false, false, false, false, false, false, false, false]
 			}
 		},
 		{

From cfdf5249da0fb48eaa4f85fff705d437d218edf8 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Mon, 23 Sep 2024 16:05:32 +0200
Subject: [PATCH 10/28] reduce range of birthyear

---
 .../src/routes/userLand/userDataInput/+page.svelte | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/frontend/src/routes/userLand/userDataInput/+page.svelte b/frontend/src/routes/userLand/userDataInput/+page.svelte
index 05924270..84112fcd 100644
--- a/frontend/src/routes/userLand/userDataInput/+page.svelte
+++ b/frontend/src/routes/userLand/userDataInput/+page.svelte
@@ -37,7 +37,7 @@
 			additionalValue: null,
 			props: {
 				name: 'Geburtsjahr',
-				items: numericalRange(100, 1960, 1, true),
+				items: numericalRange(60, 1960, 1, true),
 				placeholder: 'Bitte auswählen',
 				label: 'Geburtsjahr',
 				required: true
@@ -49,19 +49,19 @@
 			additionalValue: null,
 			props: {
 				name: 'Geschlecht',
-				items: ['männlich', 'weiblich', 'divers', 'Andere'].map((v) => {
+				items: ['männlich', 'weiblich', 'divers', 'Anderes'].map((v) => {
 					return { label: String(v), value: v };
 				}),
 				placeholder: 'Bitte auswählen',
 				label: 'Geschlecht',
 				required: true,
-				textTrigger: 'Andere',
+				textTrigger: 'Anderes',
 				unique: true,
 				selected: [false, false, false, false]
 			}
 		},
 		{
-			component: CheckboxList,
+			component: Select,
 			value: null,
 			additionalValue: null,
 			props: {
@@ -76,14 +76,12 @@
 					'Promotion',
 					'Anderer'
 				].map((v) => {
-					return { label: String(v), value: v };
+					return { name: String(v), value: v };
 				}),
 				placeholder: 'Bitte auswählen',
 				required: true,
 				label: 'Höchster Bildungsabschluss',
-				textTrigger: 'Anderer',
-				unique: true,
-				selected: [false, false, false, false, false, false, false, false]
+				textTrigger: 'Anderer'
 			}
 		},
 		{

From 16959ab7fa81acddbbec643693cd0cf85f796564 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Mon, 23 Sep 2024 21:31:13 +0200
Subject: [PATCH 11/28] fix error in updating

---
 .../components/ChildrenRegistration.svelte    | 229 +++---------------
 .../lib/components/DataInput/DataInput.svelte |   8 +-
 .../childLand/childDataInput/+page.svelte     | 154 +++++++++++-
 3 files changed, 188 insertions(+), 203 deletions(-)

diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/frontend/src/lib/components/ChildrenRegistration.svelte
index 7b43b3ef..5e2ae559 100644
--- a/frontend/src/lib/components/ChildrenRegistration.svelte
+++ b/frontend/src/lib/components/ChildrenRegistration.svelte
@@ -3,6 +3,7 @@
 	import { base } from '$app/paths';
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
+	import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
 
 	import {
 		children,
@@ -14,161 +15,10 @@
 
 	import { hash, users } from '$lib/stores/userStore';
 
-	import {
-		Button,
-		Card,
-		Fileupload,
-		Heading,
-		Input,
-		MultiSelect,
-		Select,
-		Textarea
-	} from 'flowbite-svelte';
+	import { Card, Heading } from 'flowbite-svelte';
 
 	import { onDestroy, onMount } from 'svelte';
 
-	// this can be supplied from the database
-	export let data = [
-		{
-			component: Input,
-			value: null,
-			props: {
-				type: 'text',
-
-				label: 'Name',
-				placeholder: 'Bitte eintragen',
-				key: 'name',
-				required: true
-			}
-		},
-		{
-			component: Input,
-			value: null,
-			props: {
-				type: 'date',
-
-				label: 'Geburtsdatum',
-				placeholder: 'Bitte eintragen',
-				key: 'dateOfBirth',
-				required: true
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				label: 'Frühgeburt',
-				items: ['nein', '0-2 Monate', '2-4 Monate', '4-6 Monate'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				key: 'bornEarly',
-				required: true
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				label: 'Geschlecht',
-				items: ['männlich', 'weiblich'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				key: 'gender',
-				required: true
-			}
-		},
-		{
-			component: MultiSelect,
-			value: [],
-			props: {
-				label: 'Nationalität',
-				items: ['Andere', 'Deutschland', 'Grossbritannien', 'USA', 'China'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				key: 'nationality',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: MultiSelect,
-			value: [],
-			props: {
-				label: 'Sprache',
-				items: ['Andere', 'Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map(
-					(v) => {
-						return { name: String(v), value: v };
-					}
-				),
-				placeholder: 'Bitte auswählen',
-				key: 'language',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: Select,
-			value: null,
-			props: {
-				label: 'Verhältnis zum Kind',
-				key: 'relationship',
-				items: [
-					'Anderes',
-					'Kind',
-					'Enkelkind',
-					'Neffe/Nichte',
-					'Pflegekind',
-					'Adoptivkind',
-					'Betreuung extern',
-					'Betreuung zu Hause'
-				].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				required: true,
-				textTrigger: 'Anderes'
-			}
-		},
-		{
-			component: MultiSelect,
-			value: [],
-			props: {
-				label: 'Entwicklungsauffälligkeiten',
-				items: ['keine', 'Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler', 'Andere'].map((v) => {
-					return { name: String(v), value: v };
-				}),
-				placeholder: 'Bitte auswählen',
-				key: 'developmentalIssues',
-				required: true,
-				textTrigger: 'Andere'
-			}
-		},
-		{
-			component: Textarea,
-			value: null,
-			props: {
-				label: 'Anmerkungen',
-				placeholder: 'Weitere Bemerkungen',
-				key: 'remarks',
-				required: false
-			}
-		},
-		{
-			component: Fileupload,
-			value: null,
-			props: {
-				label: 'Foto',
-				placeholder: 'Bitte wählen sie ein Bild aus falls gewünscht',
-				key: 'image',
-				required: false,
-				accept: ['png', 'jpg', 'svg', 'webp']
-			}
-		}
-	];
-
 	// event handlers and verification function
 	export async function submitData() {
 		const verified = await verifyInput();
@@ -182,7 +32,6 @@
 				current: await createDummyCurrent()
 			});
 
-			console.log(childData);
 			await goto(nextpage as string);
 		} else {
 			showAlert = true;
@@ -231,6 +80,8 @@
 	let unsubscribe: unknown = children.subscribe((childrenlist) => {
 		children.save();
 	});
+	// this can be supplied from the database
+	export let data: any[];
 
 	// rerender page if missing values or showAlert changes
 	$: missingValues = [];
@@ -255,6 +106,13 @@
 		await children.save();
 		await (unsubscribe as Function)();
 	});
+
+	const buttons = [
+		{
+			label: 'Abschließen',
+			onclick: submitData
+		}
+	];
 </script>
 
 <!-- Show big alert message when something is missing -->
@@ -286,55 +144,28 @@
 {/if}
 
 <!-- The actual content -->
-<Card class="container m-1 mx-auto w-full max-w-xl">
-	{#if heading}
-		<Heading
-			tag="h3"
-			class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
-			>{heading}</Heading
-		>
-	{/if}
-
-	<form class="m-1 mx-auto w-full flex-col space-y-6">
-		{#each data as element, i}
-			{#if element.props.key === 'image'}
+<div class="container m-1 mx-auto w-full max-w-xl">
+	<Card class="container m-1 mx-auto w-full max-w-xl">
+		{#if heading}
+			<Heading
+				tag="h3"
+				class="m-1 mb-3 p-1 text-center font-bold tracking-tight text-gray-700 dark:text-gray-400"
+				>{heading}</Heading
+			>
+		{/if}
+
+		<form class="m-1 mx-auto w-full flex-col space-y-6">
+			{#each data as element, i}
 				<DataInput
 					component={element.component}
-					bind:this={refs[i]}
-					properties={element.props}
+					bind:value={element.value}
+					bind:additionalInput={element.additionalValue}
 					label={element.props.label}
-					eventHandlers={{
-						...element?.eventHandlers,
-						...{
-							'on:change': (event) => {
-								if (!(event.target === null)) {
-									const image = event.target.files[0];
-									// use https://svelte.dev/repl/b17c13d4f1bb40799ccf09e0841ddd90?version=4.2.19
-									let reader = new FileReader();
-									reader.readAsDataURL(image);
-									reader.onload = (e) => {
-										element.value = e.target.result;
-									};
-								}
-							}
-						}
-					}}
-				/>
-			{:else}
-				<DataInput
-					component={element.component}
 					properties={element.props}
-					label={element.props.label}
 					textTrigger={element.props.textTrigger}
-					bind:value={element.value}
 				/>
-			{/if}
-		{/each}
-
-		<Button
-			class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
-			on:click={submitData}
-			>{'Kind hinzufügen'}
-		</Button>
-	</form>
-</Card>
+			{/each}
+		</form>
+		<NavigationButtons {buttons} />
+	</Card>
+</div>
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 08d84f24..a00f0485 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -12,7 +12,7 @@
 	export let componentClass: string = '';
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;
-	export let additionalInput: any = null;
+	export let additionalInput: any;
 
 	// data to display and event handlers for dynamcis.
 	export let properties: any = {};
@@ -39,7 +39,9 @@
 	$: valid = value !== undefined && value !== null && value !== '' && checkValid();
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = checkShowTextfield(value);
-	$: value !== textTrigger ? (additionalInput = null) : additionalInput;
+	// $: checkShowTextfield(value) ? (additionalInput = null) : additionalInput;
+	$: console.log('value: ', label, ': ', value);
+	$: console.log('additional:', additionalInput);
 </script>
 
 {#if label}
@@ -50,7 +52,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-2 border-primary-600 dark:border-primary-600' + componentClass
+			? 'border-primary-600 dark:border-primary-600 border-2' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
diff --git a/frontend/src/routes/childLand/childDataInput/+page.svelte b/frontend/src/routes/childLand/childDataInput/+page.svelte
index 4ef2e1c7..07b0dda6 100644
--- a/frontend/src/routes/childLand/childDataInput/+page.svelte
+++ b/frontend/src/routes/childLand/childDataInput/+page.svelte
@@ -1,5 +1,157 @@
 <script>
 	import ChildrenRegistration from '$lib/components/ChildrenRegistration.svelte';
+	import CheckboxList from '$lib/components/DataInput/CheckboxList.svelte';
+	import { Fileupload, Input, MultiSelect, Select, Textarea } from 'flowbite-svelte';
+
+	const data = [
+		{
+			component: Input,
+			value: null,
+			props: {
+				type: 'text',
+
+				label: 'Name',
+				placeholder: 'Bitte eintragen',
+				key: 'name',
+				required: true
+			}
+		},
+		{
+			component: Input,
+			value: null,
+			props: {
+				type: 'date',
+
+				label: 'Geburtsdatum',
+				placeholder: 'Bitte eintragen',
+				key: 'dateOfBirth',
+				required: true
+			}
+		},
+		{
+			component: CheckboxList,
+			value: null,
+			additionalValue: null,
+			props: {
+				label: 'Frühgeburt',
+				items: ['nein', '0-2 Monate', '2-4 Monate', '4-6 Monate', 'Anderes'].map((v) => {
+					return { label: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				key: 'bornEarly',
+				required: true,
+				unique: true,
+				textTrigger: 'Anderes',
+				selected: [false, false, false, false]
+			}
+		},
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				label: 'Geschlecht',
+				items: ['männlich', 'weiblich'].map((v) => {
+					return { name: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				key: 'gender',
+				required: true
+			}
+		},
+		{
+			component: MultiSelect,
+			value: [],
+			additionalValue: null,
+			props: {
+				label: 'Nationalität',
+				items: ['Andere', 'Deutschland', 'Grossbritannien', 'USA', 'China'].map((v) => {
+					return { name: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				key: 'nationality',
+				required: true,
+				textTrigger: 'Andere'
+			}
+		},
+		{
+			component: MultiSelect,
+			value: [],
+			additionalValue: null,
+			props: {
+				label: 'Sprache',
+				items: ['Andere', 'Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map(
+					(v) => {
+						return { name: String(v), value: v };
+					}
+				),
+				placeholder: 'Bitte auswählen',
+				key: 'language',
+				required: true,
+				textTrigger: 'Andere'
+			}
+		},
+		{
+			component: Select,
+			value: null,
+			additionalValue: null,
+			props: {
+				label: 'Verhältnis zum Kind',
+				key: 'relationship',
+				items: [
+					'Anderes',
+					'Kind',
+					'Enkelkind',
+					'Neffe/Nichte',
+					'Pflegekind',
+					'Adoptivkind',
+					'Betreuung extern',
+					'Betreuung zu Hause'
+				].map((v) => {
+					return { name: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				required: true,
+				textTrigger: 'Anderes'
+			}
+		},
+		{
+			component: MultiSelect,
+			value: [],
+			additionalValue: null,
+			props: {
+				label: 'Entwicklungsauffälligkeiten',
+				items: ['keine', 'Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler', 'Andere'].map((v) => {
+					return { name: String(v), value: v };
+				}),
+				placeholder: 'Bitte auswählen',
+				key: 'developmentalIssues',
+				required: true,
+				textTrigger: 'Andere'
+			}
+		},
+		{
+			component: Textarea,
+			value: null,
+			props: {
+				label: 'Anmerkungen',
+				placeholder: 'Weitere Bemerkungen',
+				key: 'remarks',
+				required: false
+			}
+		},
+		{
+			component: Fileupload,
+			value: null,
+			props: {
+				label: 'Foto',
+				placeholder: 'Bitte wählen sie ein Bild aus falls gewünscht',
+				key: 'image',
+				required: false,
+				accept: ['png', 'jpg', 'svg', 'webp']
+			}
+		}
+	];
 </script>
 
-<ChildrenRegistration />
+<ChildrenRegistration {data} />

From fa54a0f90631876bc10b52441882a09447003afa Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 24 Sep 2024 08:48:44 +0200
Subject: [PATCH 12/28] fix highlighting

---
 frontend/src/lib/components/DataInput/CheckboxList.svelte | 3 ++-
 frontend/src/lib/components/DataInput/DataInput.svelte    | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
index 95537e8c..cec66109 100644
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -3,9 +3,10 @@
 
 	export let value: any;
 	export let unique: boolean = false;
+	console.log('class: ', $$props.class);
 </script>
 
-<div class="flex grid w-full auto-cols-auto grid-flow-col flex-col">
+<div class={'flex grid w-full auto-cols-auto grid-flow-col flex-col ' + $$props.class}>
 	{#each $$props.items as item, index}
 		<Checkbox
 			bind:checked={$$props.selected[index]}
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index a00f0485..9a599b9f 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -40,7 +40,7 @@
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = checkShowTextfield(value);
 	// $: checkShowTextfield(value) ? (additionalInput = null) : additionalInput;
-	$: console.log('value: ', label, ': ', value);
+	$: console.log('value: ', label, ': ', value, 'valid: ', valid);
 	$: console.log('additional:', additionalInput);
 </script>
 
@@ -52,7 +52,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-primary-600 dark:border-primary-600 border-2' + componentClass
+			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}

From 2679ded1f6ea06b02691c1e6ae0f0058239eb8b7 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 24 Sep 2024 08:52:43 +0200
Subject: [PATCH 13/28] remove output

---
 frontend/src/lib/components/DataInput/CheckboxList.svelte | 1 -
 frontend/src/lib/components/DataInput/DataInput.svelte    | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
index cec66109..a75caf5d 100644
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -3,7 +3,6 @@
 
 	export let value: any;
 	export let unique: boolean = false;
-	console.log('class: ', $$props.class);
 </script>
 
 <div class={'flex grid w-full auto-cols-auto grid-flow-col flex-col ' + $$props.class}>
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 9a599b9f..8b1d87a3 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -39,9 +39,6 @@
 	$: valid = value !== undefined && value !== null && value !== '' && checkValid();
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = checkShowTextfield(value);
-	// $: checkShowTextfield(value) ? (additionalInput = null) : additionalInput;
-	$: console.log('value: ', label, ': ', value, 'valid: ', valid);
-	$: console.log('additional:', additionalInput);
 </script>
 
 {#if label}

From c595fa332b571ae71a0ce755379abe59b919379b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 24 Sep 2024 06:58:46 +0000
Subject: [PATCH 14/28] pnpm format

---
 frontend/src/lib/components/DataInput/DataInput.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 8b1d87a3..45bde0b1 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -49,7 +49,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
+			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}

From fc2f46d0d8db17f6efdccf2ebf672156d3d9f9a7 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 24 Sep 2024 09:15:23 +0200
Subject: [PATCH 15/28] move data to pages

---
 frontend/src/lib/components/UserLogin.svelte  | 19 +------
 .../lib/components/UserRegistration.svelte    | 51 +----------------
 .../routes/userLand/userLogin/+page.svelte    | 19 ++++++-
 .../userLand/userRegistration/+page.svelte    | 56 ++++++++++++++++++-
 4 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/frontend/src/lib/components/UserLogin.svelte b/frontend/src/lib/components/UserLogin.svelte
index 5967c7b4..4d12097a 100644
--- a/frontend/src/lib/components/UserLogin.svelte
+++ b/frontend/src/lib/components/UserLogin.svelte
@@ -40,22 +40,7 @@
 	}
 
 	// data and variables
-	let data = [
-		{
-			type: 'text',
-			name: 'Benutzerkennung',
-			placeholder: 'Benutzerkennung',
-			label: 'Benutzerkennung',
-			required: true
-		},
-		{
-			type: 'password',
-			name: 'Passwort',
-			placeholder: 'Passwort',
-			label: 'Passwort',
-			required: true
-		}
-	];
+	export let data;
 
 	const buttons = [
 		{
@@ -150,7 +135,7 @@
 		<span class="container mx-auto w-full text-gray-700 dark:text-gray-400">Not registered?</span>
 		<a
 			href={`${base}/userLand/userRegistration`}
-			class="text-primary-700 hover:underline dark:text-primary-500"
+			class="text-primary-700 dark:text-primary-500 hover:underline"
 		>
 			Create account
 		</a>
diff --git a/frontend/src/lib/components/UserRegistration.svelte b/frontend/src/lib/components/UserRegistration.svelte
index f23f297c..1a438044 100644
--- a/frontend/src/lib/components/UserRegistration.svelte
+++ b/frontend/src/lib/components/UserRegistration.svelte
@@ -5,7 +5,7 @@
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
 	import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
 	import { children } from '$lib/stores/childrenStore';
-	import { hash, users } from '$lib/stores/userStore';
+	import { users } from '$lib/stores/userStore';
 	import { Card, Heading, Input } from 'flowbite-svelte';
 	import { onDestroy, onMount } from 'svelte';
 
@@ -106,54 +106,7 @@
 		}
 	}
 
-	const data = [
-		{
-			label: 'Benutzername',
-			name: 'Benutzername',
-			type: 'text',
-			placeholder: 'Wählen sie einen beliebigen Benutzernamen',
-			required: true,
-			checkValid: () => {
-				return true;
-			}
-		},
-		{
-			label: 'E-Mail',
-			name: 'E-Mail',
-			type: 'email',
-			placeholder: 'E-Mail',
-			required: true,
-			checkValid: () => {
-				return true;
-			}
-		},
-		{
-			label: 'Passwort',
-			name: 'Passwort',
-			type: 'password',
-			placeholder: 'Passwort',
-			required: true,
-			onBlur: async (event: Event) => {
-				passwd = await hash(event.srcElement.value);
-			},
-			checkValid: () => {
-				return passwd !== '' && passwd !== null && passwd !== undefined && passwd === passwdTest;
-			}
-		},
-		{
-			label: 'Passwort wiederholen',
-			name: 'Passwort wiederholen',
-			type: 'password',
-			placeholder: 'Passwort wiederholen',
-			required: true,
-			onBlur: async (event: Event) => {
-				passwdTest = await hash(event.srcElement.value);
-			},
-			checkValid: () => {
-				return passwd !== '' && passwd !== null && passwd !== undefined && passwd === passwdTest;
-			}
-		}
-	];
+	export let data;
 
 	const heading = 'Als neuer Benutzer registrieren';
 	let showAlert: boolean = false;
diff --git a/frontend/src/routes/userLand/userLogin/+page.svelte b/frontend/src/routes/userLand/userLogin/+page.svelte
index e14b2ca2..faa44cbc 100644
--- a/frontend/src/routes/userLand/userLogin/+page.svelte
+++ b/frontend/src/routes/userLand/userLogin/+page.svelte
@@ -1,5 +1,22 @@
 <script>
 	import UserLogin from '$lib/components/UserLogin.svelte';
+
+	const data = [
+		{
+			type: 'text',
+			name: 'Benutzerkennung',
+			placeholder: 'Benutzerkennung',
+			label: 'Benutzerkennung',
+			required: true
+		},
+		{
+			type: 'password',
+			name: 'Passwort',
+			placeholder: 'Passwort',
+			label: 'Passwort',
+			required: true
+		}
+	];
 </script>
 
-<UserLogin />
+<UserLogin {data} />
diff --git a/frontend/src/routes/userLand/userRegistration/+page.svelte b/frontend/src/routes/userLand/userRegistration/+page.svelte
index 3aa2cd14..d78aef9f 100644
--- a/frontend/src/routes/userLand/userRegistration/+page.svelte
+++ b/frontend/src/routes/userLand/userRegistration/+page.svelte
@@ -1,5 +1,57 @@
-<script>
+<script lang="ts">
 	import UserRegistration from '$lib/components/UserRegistration.svelte';
+	import { hash } from '$lib/stores/userStore';
+	let passwd: string;
+	let passwdTest: string;
+
+	const data = [
+		{
+			label: 'Benutzername',
+			name: 'Benutzername',
+			type: 'text',
+			placeholder: 'Wählen sie einen beliebigen Benutzernamen',
+			required: true,
+			checkValid: () => {
+				return true;
+			}
+		},
+		{
+			label: 'E-Mail',
+			name: 'E-Mail',
+			type: 'email',
+			placeholder: 'E-Mail',
+			required: true,
+			checkValid: () => {
+				return true;
+			}
+		},
+		{
+			label: 'Passwort',
+			name: 'Passwort',
+			type: 'password',
+			placeholder: 'Passwort',
+			required: true,
+			onBlur: async (event: Event) => {
+				passwd = await hash(event.srcElement.value);
+			},
+			checkValid: () => {
+				return passwd !== '' && passwd !== null && passwd !== undefined && passwd === passwdTest;
+			}
+		},
+		{
+			label: 'Passwort wiederholen',
+			name: 'Passwort wiederholen',
+			type: 'password',
+			placeholder: 'Passwort wiederholen',
+			required: true,
+			onBlur: async (event: Event) => {
+				passwdTest = await hash(event.srcElement.value);
+			},
+			checkValid: () => {
+				return passwd !== '' && passwd !== null && passwd !== undefined && passwd === passwdTest;
+			}
+		}
+	];
 </script>
 
-<UserRegistration />
+<UserRegistration {data} />

From 5afbe2a1ec94d539f98bfe10a580e7b8e5f84204 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 24 Sep 2024 07:15:54 +0000
Subject: [PATCH 16/28] pnpm format

---
 frontend/src/lib/components/UserLogin.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/UserLogin.svelte b/frontend/src/lib/components/UserLogin.svelte
index 4d12097a..f0619ca8 100644
--- a/frontend/src/lib/components/UserLogin.svelte
+++ b/frontend/src/lib/components/UserLogin.svelte
@@ -135,7 +135,7 @@
 		<span class="container mx-auto w-full text-gray-700 dark:text-gray-400">Not registered?</span>
 		<a
 			href={`${base}/userLand/userRegistration`}
-			class="text-primary-700 dark:text-primary-500 hover:underline"
+			class="text-primary-700 hover:underline dark:text-primary-500"
 		>
 			Create account
 		</a>

From 7924f9b25b6654c45cec65cdd28de266ab247f75 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 24 Sep 2024 10:28:06 +0200
Subject: [PATCH 17/28] add fileupload component, eventhandling

---
 .../components/ChildrenRegistration.svelte    |  7 +++++-
 .../lib/components/DataInput/DataInput.svelte | 22 ++++++++++++++-----
 .../components/DataInput/Fileupload.svelte    | 22 +++++++++++++++++++
 .../src/lib/components/UserDataInput.svelte   |  5 +++++
 frontend/src/lib/components/UserLogin.svelte  |  7 +++++-
 .../lib/components/UserRegistration.svelte    |  6 ++++-
 .../childLand/childDataInput/+page.svelte     |  4 +++-
 7 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/lib/components/DataInput/Fileupload.svelte

diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/frontend/src/lib/components/ChildrenRegistration.svelte
index 5e2ae559..e02c45ff 100644
--- a/frontend/src/lib/components/ChildrenRegistration.svelte
+++ b/frontend/src/lib/components/ChildrenRegistration.svelte
@@ -155,7 +155,7 @@
 		{/if}
 
 		<form class="m-1 mx-auto w-full flex-col space-y-6">
-			{#each data as element, i}
+			{#each data as element}
 				<DataInput
 					component={element.component}
 					bind:value={element.value}
@@ -163,6 +163,11 @@
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
+					eventHandlers={{
+						'on:change': element.onchange,
+						'on:blur': element.onblur,
+						'on:click': element.onclick
+					}}
 				/>
 			{/each}
 		</form>
diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index 45bde0b1..fae4c6ac 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -12,7 +12,7 @@
 	export let componentClass: string = '';
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;
-	export let additionalInput: any;
+	export let additionalInput: any = null;
 
 	// data to display and event handlers for dynamcis.
 	export let properties: any = {};
@@ -49,13 +49,25 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
+			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
-		on:blur={eventHandlers['on:blur']}
-		on:change={eventHandlers['on:change']}
-		on:click={eventHandlers['on:click']}
+		on:blur={(event) => {
+			if (eventHandlers['on:blur']) {
+				eventHandlers['on:blur'](event);
+			}
+		}}
+		on:change={(event) => {
+			if (eventHandlers['on:change']) {
+				eventHandlers['on:change'](event);
+			}
+		}}
+		on:click={(event) => {
+			if (eventHandlers['on:click']) {
+				eventHandlers['on:click'](event);
+			}
+		}}
 	/>
 
 	{#if showTextField === true}
diff --git a/frontend/src/lib/components/DataInput/Fileupload.svelte b/frontend/src/lib/components/DataInput/Fileupload.svelte
new file mode 100644
index 00000000..a3a30c76
--- /dev/null
+++ b/frontend/src/lib/components/DataInput/Fileupload.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Fileupload } from 'flowbite-svelte';
+
+	export let value;
+	console.log('props: ', $$props);
+</script>
+
+<Fileupload
+	class={$$props.class}
+	accept={$$props.accept}
+	on:change={(event) => {
+		if (!(event.target === null)) {
+			const image = event.target.files[0];
+			// use https://svelte.dev/repl/b17c13d4f1bb40799ccf09e0841ddd90?version=4.2.19
+			let reader = new FileReader();
+			reader.readAsDataURL(image);
+			reader.onload = (e) => {
+				value = e.target.result;
+			};
+		}
+	}}
+/>
diff --git a/frontend/src/lib/components/UserDataInput.svelte b/frontend/src/lib/components/UserDataInput.svelte
index a8a4b66c..f09f978a 100644
--- a/frontend/src/lib/components/UserDataInput.svelte
+++ b/frontend/src/lib/components/UserDataInput.svelte
@@ -128,6 +128,11 @@
 					label={element.props.label}
 					properties={element.props}
 					textTrigger={element.props.textTrigger}
+					eventHandlers={{
+						'on:change': element.onchange,
+						'on:blur': element.onblur,
+						'on:click': element.onclick
+					}}
 				/>
 			{/each}
 		</form>
diff --git a/frontend/src/lib/components/UserLogin.svelte b/frontend/src/lib/components/UserLogin.svelte
index f0619ca8..259cf5c5 100644
--- a/frontend/src/lib/components/UserLogin.svelte
+++ b/frontend/src/lib/components/UserLogin.svelte
@@ -123,6 +123,11 @@
 						bind:value={credentials[i]}
 						properties={element}
 						label={element.label}
+						eventHandlers={{
+							'on:change': element.onchange,
+							'on:blur': element.onblur,
+							'on:click': element.onclick
+						}}
 					/>
 				{/each}
 			</form>
@@ -135,7 +140,7 @@
 		<span class="container mx-auto w-full text-gray-700 dark:text-gray-400">Not registered?</span>
 		<a
 			href={`${base}/userLand/userRegistration`}
-			class="text-primary-700 hover:underline dark:text-primary-500"
+			class="text-primary-700 dark:text-primary-500 hover:underline"
 		>
 			Create account
 		</a>
diff --git a/frontend/src/lib/components/UserRegistration.svelte b/frontend/src/lib/components/UserRegistration.svelte
index 1a438044..baa4654a 100644
--- a/frontend/src/lib/components/UserRegistration.svelte
+++ b/frontend/src/lib/components/UserRegistration.svelte
@@ -154,7 +154,11 @@
 					component={Input}
 					properties={element}
 					bind:value={inputValues[i]}
-					eventHandlers={{ 'on:blur': element.onBlur }}
+					eventHandlers={{
+						'on:change': element.onChange,
+						'on:blur': element.onBlur,
+						'on:click': element.onClick
+					}}
 					checkValid={element.checkValid}
 				/>
 			{/each}
diff --git a/frontend/src/routes/childLand/childDataInput/+page.svelte b/frontend/src/routes/childLand/childDataInput/+page.svelte
index 07b0dda6..4e76458e 100644
--- a/frontend/src/routes/childLand/childDataInput/+page.svelte
+++ b/frontend/src/routes/childLand/childDataInput/+page.svelte
@@ -1,7 +1,9 @@
 <script>
 	import ChildrenRegistration from '$lib/components/ChildrenRegistration.svelte';
 	import CheckboxList from '$lib/components/DataInput/CheckboxList.svelte';
-	import { Fileupload, Input, MultiSelect, Select, Textarea } from 'flowbite-svelte';
+	import Fileupload from '$lib/components/DataInput/Fileupload.svelte';
+
+	import { Input, MultiSelect, Select, Textarea } from 'flowbite-svelte';
 
 	const data = [
 		{

From 40b88b8a7259ba21bac65d93dd9c165690e63ecd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 24 Sep 2024 08:28:45 +0000
Subject: [PATCH 18/28] pnpm format

---
 frontend/src/lib/components/DataInput/DataInput.svelte | 2 +-
 frontend/src/lib/components/UserLogin.svelte           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index fae4c6ac..7ec6fbde 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -49,7 +49,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
+			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
diff --git a/frontend/src/lib/components/UserLogin.svelte b/frontend/src/lib/components/UserLogin.svelte
index 259cf5c5..7c2f82e0 100644
--- a/frontend/src/lib/components/UserLogin.svelte
+++ b/frontend/src/lib/components/UserLogin.svelte
@@ -140,7 +140,7 @@
 		<span class="container mx-auto w-full text-gray-700 dark:text-gray-400">Not registered?</span>
 		<a
 			href={`${base}/userLand/userRegistration`}
-			class="text-primary-700 dark:text-primary-500 hover:underline"
+			class="text-primary-700 hover:underline dark:text-primary-500"
 		>
 			Create account
 		</a>

From 80fb8d69f6c00dc34de70318db4bdcb82e75e95e Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 24 Sep 2024 10:48:37 +0200
Subject: [PATCH 19/28] fix userregistration

---
 .../src/lib/components/DataInput/DataInput.svelte |  2 +-
 .../src/lib/components/UserRegistration.svelte    | 15 ++++++---------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index fae4c6ac..7afb4dff 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -8,7 +8,7 @@
 	// variables
 	export let component: any;
 	export let value: any;
-	export let label: string;
+	export let label: string = null;
 	export let componentClass: string = '';
 	export let textTrigger: string = 'noAdditionalText';
 	export let showTextField: boolean = false;
diff --git a/frontend/src/lib/components/UserRegistration.svelte b/frontend/src/lib/components/UserRegistration.svelte
index baa4654a..101a0a86 100644
--- a/frontend/src/lib/components/UserRegistration.svelte
+++ b/frontend/src/lib/components/UserRegistration.svelte
@@ -5,7 +5,7 @@
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
 	import NavigationButtons from '$lib/components/Navigation/NavigationButtons.svelte';
 	import { children } from '$lib/stores/childrenStore';
-	import { users } from '$lib/stores/userStore';
+	import { hash, users } from '$lib/stores/userStore';
 	import { Card, Heading, Input } from 'flowbite-svelte';
 	import { onDestroy, onMount } from 'svelte';
 
@@ -22,7 +22,8 @@
 		const mailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 		missingValues[0] = inputValues[0] === null || inputValues[0] === ''; // username
 		missingValues[1] = inputValues[1] === null || mailRegex.test(inputValues[1]) === false; // email
-		missingValues[2] = inputValues[2] === null || inputValues[2] === ''; // password
+		missingValues[2] =
+			inputValues[2] === null || inputValues[2] === '' || inputValues[2] !== inputValues[3]; // password
 		missingValues[3] = inputValues[3] === null || missingValues[2];
 	}
 
@@ -35,15 +36,11 @@
 			})
 		) {
 			// README: userID is username+password just as a placeholder
-			const userID = inputValues[0] + passwd;
+			const h = await hash(inputValues[2]);
+			const userID = inputValues[0] + h;
+			console.log(userID);
 			let userAddSuccess: boolean = true;
 
-			if (passwd !== passwdTest) {
-				userAddSuccess = false;
-				alertMessage = 'Passwörter sind nicht identisch';
-				showAlert = true;
-			}
-
 			let userdata = {
 				name: inputValues[0],
 				id: userID, // README: without the backend, userID is emulated as username + password

From 6d3d3106cb83a2af7b31118833c9cc6c563eac7b Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 24 Sep 2024 11:23:01 +0200
Subject: [PATCH 20/28] fix highlighting error

---
 .../lib/components/DataInput/DataInput.svelte | 44 ++++++++++++-------
 .../components/DataInput/Fileupload.svelte    |  1 -
 .../childLand/childDataInput/+page.svelte     |  8 ++--
 3 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index af061e76..ed5a3a0a 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -35,10 +35,32 @@
 		}
 	}
 
+	function evalValid(v: any): boolean {
+		let result = true;
+		if (Array.isArray(v)) {
+			result = v.length > 0;
+		}
+
+		return result && value !== undefined && value !== null && value !== '' && checkValid();
+	}
+
 	// reactive statement that makes sure 'valid' updates the page
-	$: valid = value !== undefined && value !== null && value !== '' && checkValid();
+	$: valid = evalValid(value);
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = checkShowTextfield(value);
+	$: console.log(
+		label,
+		' value: ',
+		value,
+		'!valid: ',
+		!valid,
+		'checkValid: ',
+		checkValid(),
+		'required: ',
+		properties.required,
+		'highlight: ',
+		highlight
+	);
 </script>
 
 {#if label}
@@ -49,25 +71,13 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
+			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}
-		on:blur={(event) => {
-			if (eventHandlers['on:blur']) {
-				eventHandlers['on:blur'](event);
-			}
-		}}
-		on:change={(event) => {
-			if (eventHandlers['on:change']) {
-				eventHandlers['on:change'](event);
-			}
-		}}
-		on:click={(event) => {
-			if (eventHandlers['on:click']) {
-				eventHandlers['on:click'](event);
-			}
-		}}
+		on:blur={eventHandlers['on:blur']}
+		on:change={eventHandlers['on:change']}
+		on:click={eventHandlers['on:click']}
 	/>
 
 	{#if showTextField === true}
diff --git a/frontend/src/lib/components/DataInput/Fileupload.svelte b/frontend/src/lib/components/DataInput/Fileupload.svelte
index a3a30c76..4d5a3fa6 100644
--- a/frontend/src/lib/components/DataInput/Fileupload.svelte
+++ b/frontend/src/lib/components/DataInput/Fileupload.svelte
@@ -2,7 +2,6 @@
 	import { Fileupload } from 'flowbite-svelte';
 
 	export let value;
-	console.log('props: ', $$props);
 </script>
 
 <Fileupload
diff --git a/frontend/src/routes/childLand/childDataInput/+page.svelte b/frontend/src/routes/childLand/childDataInput/+page.svelte
index 4e76458e..99b2d96f 100644
--- a/frontend/src/routes/childLand/childDataInput/+page.svelte
+++ b/frontend/src/routes/childLand/childDataInput/+page.svelte
@@ -48,17 +48,19 @@
 			}
 		},
 		{
-			component: Select,
+			component: CheckboxList,
 			value: null,
 			additionalValue: null,
 			props: {
 				label: 'Geschlecht',
 				items: ['männlich', 'weiblich'].map((v) => {
-					return { name: String(v), value: v };
+					return { label: String(v), value: v };
 				}),
 				placeholder: 'Bitte auswählen',
 				key: 'gender',
-				required: true
+				required: true,
+				unique: true,
+				selected: [false, false]
 			}
 		},
 		{

From c5e3e0756d10251139e5549042b8a515d38a333c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Tue, 24 Sep 2024 09:23:35 +0000
Subject: [PATCH 21/28] pnpm format

---
 frontend/src/lib/components/DataInput/DataInput.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index ed5a3a0a..1842e72d 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -71,7 +71,7 @@
 	<svelte:component
 		this={component}
 		class={highlight
-			? 'border-primary-600 dark:border-primary-600 rounded border-2 ' + componentClass
+			? 'rounded border-2 border-primary-600 dark:border-primary-600 ' + componentClass
 			: componentClass}
 		bind:value
 		{...properties}

From ac1d5ef77d75734d6d4a39b9926f30c483761d3c Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 24 Sep 2024 11:25:10 +0200
Subject: [PATCH 22/28] remove debug output

---
 .../src/lib/components/DataInput/DataInput.svelte   | 13 -------------
 frontend/src/lib/components/UserRegistration.svelte |  1 -
 2 files changed, 14 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/DataInput.svelte b/frontend/src/lib/components/DataInput/DataInput.svelte
index ed5a3a0a..d8d3f0a7 100644
--- a/frontend/src/lib/components/DataInput/DataInput.svelte
+++ b/frontend/src/lib/components/DataInput/DataInput.svelte
@@ -48,19 +48,6 @@
 	$: valid = evalValid(value);
 	$: highlight = !valid && properties.required === true;
 	$: showTextField = checkShowTextfield(value);
-	$: console.log(
-		label,
-		' value: ',
-		value,
-		'!valid: ',
-		!valid,
-		'checkValid: ',
-		checkValid(),
-		'required: ',
-		properties.required,
-		'highlight: ',
-		highlight
-	);
 </script>
 
 {#if label}
diff --git a/frontend/src/lib/components/UserRegistration.svelte b/frontend/src/lib/components/UserRegistration.svelte
index 101a0a86..fe05b5d8 100644
--- a/frontend/src/lib/components/UserRegistration.svelte
+++ b/frontend/src/lib/components/UserRegistration.svelte
@@ -38,7 +38,6 @@
 			// README: userID is username+password just as a placeholder
 			const h = await hash(inputValues[2]);
 			const userID = inputValues[0] + h;
-			console.log(userID);
 			let userAddSuccess: boolean = true;
 
 			let userdata = {

From c14813c7ea98db7840447229f9982b344619d1d0 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Tue, 24 Sep 2024 11:47:39 +0200
Subject: [PATCH 23/28] do away with horizontal cards for images in
 childrenpage

---
 frontend/src/lib/components/Childrenpage.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/Childrenpage.svelte b/frontend/src/lib/components/Childrenpage.svelte
index cc61bcf3..6a880389 100644
--- a/frontend/src/lib/components/Childrenpage.svelte
+++ b/frontend/src/lib/components/Childrenpage.svelte
@@ -31,7 +31,7 @@
 								'm-2 max-w-prose bg-primary-700 dark:bg-primary-600 hover:bg-primary-800 dark:hover:bg-primary-700',
 							horizontal: false
 						}
-					: { horizontal: item.image ? true : false },
+					: { horizontal: false },
 			header:
 				item.header == 'Neu'
 					? {

From af4473e36053373ed4301b29a1f9681d3610a017 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 25 Sep 2024 13:53:50 +0200
Subject: [PATCH 24/28] add Radiolist, add additionalValue to

---
 .../components/ChildrenRegistration.svelte    |  6 +++++
 .../components/DataInput/CheckboxList.svelte  | 27 +++++--------------
 .../lib/components/DataInput/RadioList.svelte | 10 +++++++
 .../childLand/childDataInput/+page.svelte     |  6 ++---
 .../userLand/userDataInput/+page.svelte       |  9 +++----
 5 files changed, 30 insertions(+), 28 deletions(-)
 create mode 100644 frontend/src/lib/components/DataInput/RadioList.svelte

diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/frontend/src/lib/components/ChildrenRegistration.svelte
index d7c4f373..bf8860bd 100644
--- a/frontend/src/lib/components/ChildrenRegistration.svelte
+++ b/frontend/src/lib/components/ChildrenRegistration.svelte
@@ -24,6 +24,7 @@
 		const verified = await verifyInput();
 		if (verified) {
 			const childID = generateChildID(childData.name);
+			console.log('childData: ', childData);
 			await children.addChildData(userID, childID, childData);
 			await children.addChildObservation(userID, childID, {
 				user: userID,
@@ -44,6 +45,11 @@
 
 		childData = data.reduce((dict: any, curr) => {
 			dict[curr.props.key] = curr.value;
+
+			if (curr.additionalValue !== null) {
+				dict[curr.props.key + '_additional'] = curr.additionalValue;
+			}
+
 			required[curr.props.key] = curr.props.required;
 			return dict;
 		}, {});
diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
index a75caf5d..ec5939e2 100644
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ b/frontend/src/lib/components/DataInput/CheckboxList.svelte
@@ -2,7 +2,6 @@
 	import Checkbox from '$lib/components/DataInput/Checkbox.svelte';
 
 	export let value: any;
-	export let unique: boolean = false;
 </script>
 
 <div class={'flex grid w-full auto-cols-auto grid-flow-col flex-col ' + $$props.class}>
@@ -11,26 +10,14 @@
 			bind:checked={$$props.selected[index]}
 			label={item.label}
 			on:changed={() => {
-				if (unique) {
-					$$props.selected = $$props.selected.map((_, i) => {
-						return i === index && $$props.selected[index];
-					});
-
-					if ($$props.selected[index] === true) {
-						value = $$props.items[index].value;
-					} else {
-						value = null;
-					}
+				if (value instanceof Array === false) {
+					value = [];
+				}
+				if ($$props.selected[index] === true) {
+					value.push($$props.items[index].value);
+					value = [...new Set(value)];
 				} else {
-					if (value instanceof Array === false) {
-						value = [];
-					}
-					if ($$props.selected[index] === true) {
-						value.push($$props.items[index].value);
-						value = [...new Set(value)];
-					} else {
-						value = value.filter((v) => v !== $$props.items[index].value);
-					}
+					value = value.filter((v) => v !== $$props.items[index].value);
 				}
 			}}
 		/>
diff --git a/frontend/src/lib/components/DataInput/RadioList.svelte b/frontend/src/lib/components/DataInput/RadioList.svelte
new file mode 100644
index 00000000..bdc7b71f
--- /dev/null
+++ b/frontend/src/lib/components/DataInput/RadioList.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Radio } from 'flowbite-svelte';
+	export let value: any;
+</script>
+
+<div class={'flex grid w-full auto-cols-auto grid-flow-col flex-col ' + $$props.class}>
+	{#each $$props.items as item, index}
+		<Radio bind:group={value} value={item.value}>{item.label}</Radio>
+	{/each}
+</div>
diff --git a/frontend/src/routes/childLand/childDataInput/+page.svelte b/frontend/src/routes/childLand/childDataInput/+page.svelte
index 99b2d96f..bbf9fbf1 100644
--- a/frontend/src/routes/childLand/childDataInput/+page.svelte
+++ b/frontend/src/routes/childLand/childDataInput/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import ChildrenRegistration from '$lib/components/ChildrenRegistration.svelte';
-	import CheckboxList from '$lib/components/DataInput/CheckboxList.svelte';
 	import Fileupload from '$lib/components/DataInput/Fileupload.svelte';
+	import RadioList from '$lib/components/DataInput/RadioList.svelte';
 
 	import { Input, MultiSelect, Select, Textarea } from 'flowbite-svelte';
 
@@ -31,7 +31,7 @@
 			}
 		},
 		{
-			component: CheckboxList,
+			component: RadioList,
 			value: null,
 			additionalValue: null,
 			props: {
@@ -48,7 +48,7 @@
 			}
 		},
 		{
-			component: CheckboxList,
+			component: RadioList,
 			value: null,
 			additionalValue: null,
 			props: {
diff --git a/frontend/src/routes/userLand/userDataInput/+page.svelte b/frontend/src/routes/userLand/userDataInput/+page.svelte
index 84112fcd..346bc75d 100644
--- a/frontend/src/routes/userLand/userDataInput/+page.svelte
+++ b/frontend/src/routes/userLand/userDataInput/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import CheckboxList from '$lib/components/DataInput/CheckboxList.svelte';
+	import RadioList from '$lib/components/DataInput/RadioList.svelte';
+
 	import UserDataInput from '$lib/components/UserDataInput.svelte';
 	import { Input, Select } from 'flowbite-svelte';
 
@@ -44,7 +45,7 @@
 			}
 		},
 		{
-			component: CheckboxList,
+			component: RadioList,
 			value: null,
 			additionalValue: null,
 			props: {
@@ -52,12 +53,10 @@
 				items: ['männlich', 'weiblich', 'divers', 'Anderes'].map((v) => {
 					return { label: String(v), value: v };
 				}),
-				placeholder: 'Bitte auswählen',
 				label: 'Geschlecht',
 				required: true,
 				textTrigger: 'Anderes',
-				unique: true,
-				selected: [false, false, false, false]
+				selected: false
 			}
 		},
 		{

From 6e274d7f2a46b066dafaa5a863df2f4c3a2c5661 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 25 Sep 2024 14:05:29 +0200
Subject: [PATCH 25/28] remove checkboxes

---
 .../lib/components/DataInput/Checkbox.svelte  | 22 ----------------
 .../components/DataInput/CheckboxList.svelte  | 25 -------------------
 2 files changed, 47 deletions(-)
 delete mode 100644 frontend/src/lib/components/DataInput/Checkbox.svelte
 delete mode 100644 frontend/src/lib/components/DataInput/CheckboxList.svelte

diff --git a/frontend/src/lib/components/DataInput/Checkbox.svelte b/frontend/src/lib/components/DataInput/Checkbox.svelte
deleted file mode 100644
index 1421e898..00000000
--- a/frontend/src/lib/components/DataInput/Checkbox.svelte
+++ /dev/null
@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from 'svelte';
-
-	const dispatch = createEventDispatcher();
-
-	function handleChange(event) {
-		dispatch('changed', { checked: event.target.checked });
-	}
-
-	export let checked: boolean;
-	export let label: string;
-</script>
-
-<label class="m-1 p-1 text-gray-700 dark:text-gray-400">
-	{label}
-	<input
-		type="checkbox"
-		bind:checked
-		on:change={handleChange}
-		class="rounded text-primary-700 dark:text-primary-700"
-	/>
-</label>
diff --git a/frontend/src/lib/components/DataInput/CheckboxList.svelte b/frontend/src/lib/components/DataInput/CheckboxList.svelte
deleted file mode 100644
index ec5939e2..00000000
--- a/frontend/src/lib/components/DataInput/CheckboxList.svelte
+++ /dev/null
@@ -1,25 +0,0 @@
-<script lang="ts">
-	import Checkbox from '$lib/components/DataInput/Checkbox.svelte';
-
-	export let value: any;
-</script>
-
-<div class={'flex grid w-full auto-cols-auto grid-flow-col flex-col ' + $$props.class}>
-	{#each $$props.items as item, index}
-		<Checkbox
-			bind:checked={$$props.selected[index]}
-			label={item.label}
-			on:changed={() => {
-				if (value instanceof Array === false) {
-					value = [];
-				}
-				if ($$props.selected[index] === true) {
-					value.push($$props.items[index].value);
-					value = [...new Set(value)];
-				} else {
-					value = value.filter((v) => v !== $$props.items[index].value);
-				}
-			}}
-		/>
-	{/each}
-</div>

From f59574d0954d9068500cb4c8a6ce56b8b0705fc4 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 25 Sep 2024 14:20:07 +0200
Subject: [PATCH 26/28] remove debug output

---
 frontend/src/lib/components/ChildrenRegistration.svelte | 1 -
 frontend/src/lib/stores/userStore.ts                    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/frontend/src/lib/components/ChildrenRegistration.svelte
index bf8860bd..1b87d617 100644
--- a/frontend/src/lib/components/ChildrenRegistration.svelte
+++ b/frontend/src/lib/components/ChildrenRegistration.svelte
@@ -24,7 +24,6 @@
 		const verified = await verifyInput();
 		if (verified) {
 			const childID = generateChildID(childData.name);
-			console.log('childData: ', childData);
 			await children.addChildData(userID, childID, childData);
 			await children.addChildObservation(userID, childID, {
 				user: userID,
diff --git a/frontend/src/lib/stores/userStore.ts b/frontend/src/lib/stores/userStore.ts
index dce88d80..827193e2 100644
--- a/frontend/src/lib/stores/userStore.ts
+++ b/frontend/src/lib/stores/userStore.ts
@@ -75,7 +75,6 @@ async function createDummyUser(name: string = 'dummyUser') {
 }
 
 async function hash(input: string): string {
-	console.log('hash input');
 	const encoder = new TextEncoder();
 	const data = encoder.encode(input);
 	const hashArray = Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', data)));

From 4b6a9e9a62d694273cf879903c23a271e7470baa Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 25 Sep 2024 14:25:58 +0200
Subject: [PATCH 27/28] change column layout

---
 frontend/src/lib/components/DataInput/RadioList.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/RadioList.svelte b/frontend/src/lib/components/DataInput/RadioList.svelte
index bdc7b71f..f4c418e9 100644
--- a/frontend/src/lib/components/DataInput/RadioList.svelte
+++ b/frontend/src/lib/components/DataInput/RadioList.svelte
@@ -3,8 +3,8 @@
 	export let value: any;
 </script>
 
-<div class={'flex grid w-full auto-cols-auto grid-flow-col flex-col ' + $$props.class}>
+<div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
 	{#each $$props.items as item, index}
-		<Radio bind:group={value} value={item.value}>{item.label}</Radio>
+		<Radio class="mx-2" bind:group={value} value={item.value}>{item.label}</Radio>
 	{/each}
 </div>

From 908718a07e461cfb9245d600cb532d1a4749e60c Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 25 Sep 2024 14:36:23 +0200
Subject: [PATCH 28/28] add RadioButton

---
 .../lib/components/DataInput/RadioList.svelte | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/DataInput/RadioList.svelte b/frontend/src/lib/components/DataInput/RadioList.svelte
index f4c418e9..615f5095 100644
--- a/frontend/src/lib/components/DataInput/RadioList.svelte
+++ b/frontend/src/lib/components/DataInput/RadioList.svelte
@@ -1,10 +1,21 @@
 <script lang="ts">
-	import { Radio } from 'flowbite-svelte';
+	import { Radio, RadioButton } from 'flowbite-svelte';
+
 	export let value: any;
+	let windowWidth = 1920;
+	$: smallScreen = windowWidth < 800;
 </script>
 
+<svelte:window bind:innerWidth={windowWidth} />
+
 <div class="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
-	{#each $$props.items as item, index}
-		<Radio class="mx-2" bind:group={value} value={item.value}>{item.label}</Radio>
-	{/each}
+	{#if smallScreen}
+		{#each $$props.items as item, index}
+			<RadioButton class="mx-2" bind:group={value} value={item.value}>{item.label}</RadioButton>
+		{/each}
+	{:else}
+		{#each $$props.items as item, index}
+			<Radio class="mx-2" bind:group={value} value={item.value}>{item.label}</Radio>
+		{/each}
+	{/if}
 </div>