From 089e478afc849673abdc2895112cd597f7434c90 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Wed, 28 Aug 2024 17:06:26 +0200
Subject: [PATCH 01/22] remove abstractregistrationpage from childDataInput

---
 .../components/ChildrenRegistration.svelte    | 20 ++++++++++++++-----
 .../DataInput/AbstractDropdownItem.svelte     |  2 +-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 8e9ff9ad..acaa7af9 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -1,8 +1,8 @@
 <script>
+	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
 	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
-	import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte';
-	import { Input, Textarea } from 'flowbite-svelte';
-	const data = [
+	import { Card, Heading, Input, Textarea } from 'flowbite-svelte';
+	$: data = [
 		{
 			itemComponent: Input,
 			componentProps: {
@@ -102,6 +102,7 @@
 			}
 		}
 	];
+
 	const heading = 'Neues Kind registrieren';
 
 	const buttons = [
@@ -112,6 +113,15 @@
 	];
 </script>
 
-<div class="container m-1 mx-auto w-full max-w-md">
-	<AbstractRegistrationForm {heading} props={data} {buttons} />
+<div class="container m-1 mx-auto w-full max-w-md items-center justify-center pb-6">
+	<Card>
+		{#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}
+		<AbstractDataInput props={data} {buttons} />
+	</Card>
 </div>
diff --git a/src/lib/components/DataInput/AbstractDropdownItem.svelte b/src/lib/components/DataInput/AbstractDropdownItem.svelte
index 031e9f05..1ec8fb2b 100644
--- a/src/lib/components/DataInput/AbstractDropdownItem.svelte
+++ b/src/lib/components/DataInput/AbstractDropdownItem.svelte
@@ -2,7 +2,7 @@
 	import { Select, Tooltip } from 'flowbite-svelte';
 	// have the data processing here to coerce the input into the format that the component expects
 
-	console.log($$props);
+	console.log('passed props: ', $$props, ', value: ', $$props.value);
 	const items = $$props.items.map((item) => ({ name: item, value: item }));
 </script>
 

From 5b30b5c94452a97c821f44c9ef6bb247bac373a7 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 09:40:33 +0200
Subject: [PATCH 02/22] break down childrenpage and start adding functionality

---
 .../components/ChildrenRegistration.svelte    | 248 +++++++++---------
 .../DataInput/AbstractDropdownItem.svelte     |   1 -
 .../DataInput/AbstractRegistrationForm.svelte |   1 -
 .../Navigation/NavigationButtons.svelte       |   2 +-
 4 files changed, 132 insertions(+), 120 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index acaa7af9..94c62eec 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -1,73 +1,109 @@
-<script>
-	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
-	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
-	import { Card, Heading, Input, Textarea } from 'flowbite-svelte';
-	$: data = [
-		{
-			itemComponent: Input,
-			componentProps: {
-				type: 'text',
-				name: 'name',
-				label: 'Name',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: Input,
-			componentProps: {
-				type: 'date',
-				name: 'dateofbirth',
-				label: 'Geburtsdatum',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['Ja', 'Nein'],
-				label: 'Frühgeburt',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['Männlich', 'Weiblich'],
-				label: 'Geschlecht',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['De', 'US', 'Fr', 'IT', 'Es'],
-				label: 'Nationalität',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
-				label: 'Bitte geben sie die erste Sprache an die das Kind gelernt hat',
-				value: '',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: [
+<script lang="ts">
+	import { Button, Card, Heading, Input, Label, Select, Textarea } from 'flowbite-svelte';
+
+	const heading = 'Neues Kind registrieren';
+
+	let name: String;
+	let date_of_birth: Date;
+	let bornEarly: Boolean;
+	let gender: String;
+	let nationality: String;
+	let first_language: String;
+	let problems: String;
+	let relationship: String;
+	let remarks: String;
+
+	function onSubmit() {
+		let data = {
+			name,
+			date_of_birth,
+			bornEarly,
+			gender,
+			nationality,
+			first_language,
+			problems,
+			relationship
+		};
+		if (Object.values(data).every((val) => val !== undefined)) {
+			console.log('everything defined: ', data);
+			data['remarks' as String] = remarks;
+			return data;
+		} else {
+		}
+	}
+</script>
+
+<Card class="container m-1 mx-auto w-full max-w-md items-center justify-center pb-6">
+	{#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}
+
+	<div class="space-y-6rtl:space-x-reverse items-center justify-center space-x-4">
+		<form class="flex flex-col space-y-6">
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Name</Label>
+			<Input
+				type="text"
+				name="name"
+				required={true}
+				placeholder="Bitte eingeben"
+				bind:value={name}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geburtsdatum</Label>
+			<Input type="date" name="birthday" required={true} bind:value={date_of_birth} />
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Frühgeburt</Label>
+			<Select
+				name={'born_early'}
+				placeholder={'Bitte auswählen'}
+				items={[
+					{ name: 'Ja', value: 'Ja' },
+					{ name: 'Nein', value: 'Nein' }
+				]}
+				bind:value={bornEarly}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geschlecht</Label>
+			<Select
+				name={'gender'}
+				placeholder={'Bitte auswählen'}
+				items={[
+					{ name: 'männlich', value: 'männlich' },
+					{ name: 'weiblich', value: 'weiblich' }
+				]}
+				bind:value={gender}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Nationalität</Label>
+			<Select
+				name={'nationality'}
+				placeholder={'Bitte auswählen'}
+				items={['Deutschland', 'Grossbritannien', 'USA', 'China'].map((item) => ({
+					name: item,
+					value: item
+				}))}
+				bind:value={nationality}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Sprache</Label>
+			<Select
+				name={'first_language'}
+				placeholder={'Bitte auswählen'}
+				items={['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map(
+					(item) => ({ name: item, value: item })
+				)}
+				bind:value={first_language}
+			/>
+
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Verhältnis zum Kind</Label>
+			<Select
+				name={'Verhältnis zum Kind'}
+				placeholder={'Bitte auswählen'}
+				items={[
 					'Kind',
 					'Enkelkind',
 					'Neffe/Nichte',
@@ -75,53 +111,31 @@
 					'Adoptivkind',
 					'Betreuung extern',
 					'Betreuung zu Hause'
-				],
-				value: '',
-				label: 'Verhältnis des Kindes zu ihnen',
-				required: true
-			}
-		},
-		{
-			itemComponent: AbstractDropdownItem,
-			componentProps: {
-				name: 'Bitte auswählen',
-				items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
-				value: '',
-				label: 'Entwicklungsauffälligkeiten',
-				required: true
-			}
-		},
-		{
-			itemComponent: Textarea,
-			componentProps: {
-				name: 'Bitte eintragen',
-				label: 'Sonstige Anmerkungen',
-				rows: 5,
-				value: '',
-				required: true
-			}
-		}
-	];
+				].map((item) => ({ name: item, value: item }))}
+				bind:value={relationship}
+			/>
 
-	const heading = 'Neues Kind registrieren';
+			<Label class=" font-semibold text-gray-700 dark:text-gray-400"
+				>Entwicklungsauffälligkeiten</Label
+			>
+			<Select
+				name={'developmental_problems'}
+				placeholder={'Bitte auswählen'}
+				items={['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'].map((item) => ({
+					name: item,
+					value: item
+				}))}
+				bind:value={problems}
+			/>
 
-	const buttons = [
-		{
-			label: 'Weiter',
-			href: '/'
-		}
-	];
-</script>
+			<Label class="font-semibold text-gray-700 dark:text-gray-400">Anmerkungen</Label>
+			<Textarea name={'remarks'} bind:value={remarks} placeholder="Bitte eintragen" />
 
-<div class="container m-1 mx-auto w-full max-w-md items-center justify-center pb-6">
-	<Card>
-		{#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}
-		<AbstractDataInput props={data} {buttons} />
-	</Card>
-</div>
+			<Button
+				class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
+				on:click={onSubmit}
+				>Weiter
+			</Button>
+		</form>
+	</div>
+</Card>
diff --git a/src/lib/components/DataInput/AbstractDropdownItem.svelte b/src/lib/components/DataInput/AbstractDropdownItem.svelte
index 1ec8fb2b..4a86edb4 100644
--- a/src/lib/components/DataInput/AbstractDropdownItem.svelte
+++ b/src/lib/components/DataInput/AbstractDropdownItem.svelte
@@ -2,7 +2,6 @@
 	import { Select, Tooltip } from 'flowbite-svelte';
 	// have the data processing here to coerce the input into the format that the component expects
 
-	console.log('passed props: ', $$props, ', value: ', $$props.value);
 	const items = $$props.items.map((item) => ({ name: item, value: item }));
 </script>
 
diff --git a/src/lib/components/DataInput/AbstractRegistrationForm.svelte b/src/lib/components/DataInput/AbstractRegistrationForm.svelte
index 58a70097..1be48c16 100644
--- a/src/lib/components/DataInput/AbstractRegistrationForm.svelte
+++ b/src/lib/components/DataInput/AbstractRegistrationForm.svelte
@@ -5,7 +5,6 @@
 	export let heading = null;
 	export let buttons = null;
 	export let description = null;
-	console.log('props: ', props);
 </script>
 
 <div class="m-1 items-center justify-center pb-6">
diff --git a/src/lib/components/Navigation/NavigationButtons.svelte b/src/lib/components/Navigation/NavigationButtons.svelte
index 9a4eff06..a80d0b24 100644
--- a/src/lib/components/Navigation/NavigationButtons.svelte
+++ b/src/lib/components/Navigation/NavigationButtons.svelte
@@ -9,7 +9,7 @@
 		<Button
 			href={bprops.href}
 			class="dark:bg-primay-700 w-full bg-primary-700 text-center text-sm text-white hover:bg-primary-800 hover:text-white dark:hover:bg-primary-800"
-			>{bprops.label}</Button
+			{...bprops.props}>{bprops.label}</Button
 		>
 	{/each}
 </ButtonGroup>

From c6dbcffd23ca0c5e17b96661d6ae8bee9c0c01f6 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 10:28:08 +0200
Subject: [PATCH 03/22] add alertmessage, update gitignore

---
 .gitignore                                    |  5 ++-
 src/lib/components/AlertMessage.svelte        | 25 +++++++++++
 .../components/ChildrenRegistration.svelte    | 45 ++++++++++++++++---
 3 files changed, 67 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/components/AlertMessage.svelte

diff --git a/.gitignore b/.gitignore
index 5b72c466..6b0d1f83 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,4 +21,7 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 # packaging
-package-lock.json
\ No newline at end of file
+package-lock.json
+
+# vscode extensions 
+.VSCodeCounter
\ No newline at end of file
diff --git a/src/lib/components/AlertMessage.svelte b/src/lib/components/AlertMessage.svelte
new file mode 100644
index 00000000..d261f129
--- /dev/null
+++ b/src/lib/components/AlertMessage.svelte
@@ -0,0 +1,25 @@
+<script>
+	import { Alert, Button } from 'flowbite-svelte';
+	import { EyeSolid, InfoCircleSolid } from 'flowbite-svelte-icons';
+
+	export let message = '';
+	export let title = '';
+	export let infotitle = 'Info';
+	export let lastpage = '';
+	export let infopage = '';
+	export let onclick = () => {};
+</script>
+
+<Alert>
+	<div>
+		<InfoCircleSolid class="h-5 w-5" />
+		<span class="text-lg font-medium"> {title} </span>
+	</div>
+	<p class="mb-4 mt-2 text-sm">{message}</p>
+	<div class="flex gap-2">
+		{#if infopage != ''}
+			<Button size="xs" href={infopage}><EyeSolid class="me-2 h-4 w-4" />{infotitle}</Button>
+		{/if}
+		<Button size="xs" outline href={lastpage} on:click={onclick}>Verstanden</Button>
+	</div>
+</Alert>
diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 94c62eec..84aa3015 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+	import AlertMessage from '$lib/components/AlertMessage.svelte';
 	import { Button, Card, Heading, Input, Label, Select, Textarea } from 'flowbite-svelte';
-
 	const heading = 'Neues Kind registrieren';
 
 	let name: String;
@@ -11,10 +11,27 @@
 	let first_language: String;
 	let problems: String;
 	let relationship: String;
-	let remarks: String;
+	let remarks: String = '';
+	let missing_values: Boolean[] = [];
+
+	interface SubmittedData {
+		name: String;
+		date_of_birth: Date;
+		bornEarly: Boolean;
+		gender: String;
+		nationality: String;
+		first_language: String;
+		problems: String;
+		relationship: String;
+		remarks?: String;
+	}
+
+	let _is_missing = false;
+
+	$: showAlert = false;
 
 	function onSubmit() {
-		let data = {
+		const data: SubmittedData = {
 			name,
 			date_of_birth,
 			bornEarly,
@@ -22,17 +39,31 @@
 			nationality,
 			first_language,
 			problems,
-			relationship
+			relationship,
+			remarks
 		};
+
 		if (Object.values(data).every((val) => val !== undefined)) {
-			console.log('everything defined: ', data);
-			data['remarks' as String] = remarks;
 			return data;
 		} else {
+			showAlert = true;
+			missing_values = Object.keys(data)
+				.map((key) => (data[key] ? true : false))
+				.filter((v) => v === false);
 		}
 	}
 </script>
 
+{#if showAlert}
+	<AlertMessage
+		title="Fehler"
+		message="Bitte füllen Sie alle Felder aus."
+		lastpage="/childLand/childDataInput"
+		onclick={() => {
+			showAlert = false;
+		}}
+	/>
+{/if}
 <Card class="container m-1 mx-auto w-full max-w-md items-center justify-center pb-6">
 	{#if heading}
 		<Heading
@@ -134,7 +165,7 @@
 			<Button
 				class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
 				on:click={onSubmit}
-				>Weiter
+				>Hinzufügen
 			</Button>
 		</form>
 	</div>

From a82216cdc1e1104a3ed97319239c1aea3b870893 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 10:30:35 +0200
Subject: [PATCH 04/22] correct typescript error.

---
 src/lib/components/ChildrenRegistration.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 84aa3015..f69430b7 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -26,8 +26,6 @@
 		remarks?: String;
 	}
 
-	let _is_missing = false;
-
 	$: showAlert = false;
 
 	function onSubmit() {
@@ -48,7 +46,7 @@
 		} else {
 			showAlert = true;
 			missing_values = Object.keys(data)
-				.map((key) => (data[key] ? true : false))
+				.map((key) => (data[key as keyof SubmittedData] ? true : false))
 				.filter((v) => v === false);
 		}
 	}

From 8381b40e1ce160e6e59a3e435b4aef7f50a8fa97 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 11:13:15 +0200
Subject: [PATCH 05/22] add reformatting

---
 src/lib/components/AlertMessage.svelte        |   2 +-
 .../components/ChildrenRegistration.svelte    | 229 ++++++++++--------
 2 files changed, 127 insertions(+), 104 deletions(-)

diff --git a/src/lib/components/AlertMessage.svelte b/src/lib/components/AlertMessage.svelte
index d261f129..34e44f8c 100644
--- a/src/lib/components/AlertMessage.svelte
+++ b/src/lib/components/AlertMessage.svelte
@@ -11,7 +11,7 @@
 </script>
 
 <Alert>
-	<div>
+	<div class="flex items-center gap-3">
 		<InfoCircleSolid class="h-5 w-5" />
 		<span class="text-lg font-medium"> {title} </span>
 	</div>
diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index f69430b7..9b36aaaa 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -12,8 +12,12 @@
 	let problems: String;
 	let relationship: String;
 	let remarks: String = '';
-	let missing_values: Boolean[] = [];
 
+	// rerender page if missing values or showAlert changes
+	$: missing_values = [];
+	$: showAlert = false;
+
+	// input data submission
 	interface SubmittedData {
 		name: String;
 		date_of_birth: Date;
@@ -26,8 +30,6 @@
 		remarks?: String;
 	}
 
-	$: showAlert = false;
-
 	function onSubmit() {
 		const data: SubmittedData = {
 			name,
@@ -42,16 +44,18 @@
 		};
 
 		if (Object.values(data).every((val) => val !== undefined)) {
+			missing_values = [];
 			return data;
 		} else {
 			showAlert = true;
-			missing_values = Object.keys(data)
-				.map((key) => (data[key as keyof SubmittedData] ? true : false))
-				.filter((v) => v === false);
+			(missing_values as Boolean[]) = Object.keys(data)
+				.map((key) => (data[key as keyof SubmittedData] ? false : true))
+				.filter((v) => v === true);
 		}
 	}
 </script>
 
+<!-- Show big alert message when something is missing -->
 {#if showAlert}
 	<AlertMessage
 		title="Fehler"
@@ -62,7 +66,8 @@
 		}}
 	/>
 {/if}
-<Card class="container m-1 mx-auto w-full max-w-md items-center justify-center pb-6">
+
+<Card class="container m-1 mx-auto w-full max-w-xl">
 	{#if heading}
 		<Heading
 			tag="h3"
@@ -71,100 +76,118 @@
 		>
 	{/if}
 
-	<div class="space-y-6rtl:space-x-reverse items-center justify-center space-x-4">
-		<form class="flex flex-col space-y-6">
-			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Name</Label>
-			<Input
-				type="text"
-				name="name"
-				required={true}
-				placeholder="Bitte eingeben"
-				bind:value={name}
-			/>
-
-			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geburtsdatum</Label>
-			<Input type="date" name="birthday" required={true} bind:value={date_of_birth} />
-
-			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Frühgeburt</Label>
-			<Select
-				name={'born_early'}
-				placeholder={'Bitte auswählen'}
-				items={[
-					{ name: 'Ja', value: 'Ja' },
-					{ name: 'Nein', value: 'Nein' }
-				]}
-				bind:value={bornEarly}
-			/>
-
-			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geschlecht</Label>
-			<Select
-				name={'gender'}
-				placeholder={'Bitte auswählen'}
-				items={[
-					{ name: 'männlich', value: 'männlich' },
-					{ name: 'weiblich', value: 'weiblich' }
-				]}
-				bind:value={gender}
-			/>
-
-			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Nationalität</Label>
-			<Select
-				name={'nationality'}
-				placeholder={'Bitte auswählen'}
-				items={['Deutschland', 'Grossbritannien', 'USA', 'China'].map((item) => ({
-					name: item,
-					value: item
-				}))}
-				bind:value={nationality}
-			/>
-
-			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Sprache</Label>
-			<Select
-				name={'first_language'}
-				placeholder={'Bitte auswählen'}
-				items={['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map(
-					(item) => ({ name: item, value: item })
-				)}
-				bind:value={first_language}
-			/>
-
-			<Label class=" font-semibold text-gray-700 dark:text-gray-400">Verhältnis zum Kind</Label>
-			<Select
-				name={'Verhältnis zum Kind'}
-				placeholder={'Bitte auswählen'}
-				items={[
-					'Kind',
-					'Enkelkind',
-					'Neffe/Nichte',
-					'Pflegekind',
-					'Adoptivkind',
-					'Betreuung extern',
-					'Betreuung zu Hause'
-				].map((item) => ({ name: item, value: item }))}
-				bind:value={relationship}
-			/>
-
-			<Label class=" font-semibold text-gray-700 dark:text-gray-400"
-				>Entwicklungsauffälligkeiten</Label
-			>
-			<Select
-				name={'developmental_problems'}
-				placeholder={'Bitte auswählen'}
-				items={['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'].map((item) => ({
-					name: item,
-					value: item
-				}))}
-				bind:value={problems}
-			/>
-
-			<Label class="font-semibold text-gray-700 dark:text-gray-400">Anmerkungen</Label>
-			<Textarea name={'remarks'} bind:value={remarks} placeholder="Bitte eintragen" />
-
-			<Button
-				class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
-				on:click={onSubmit}
-				>Hinzufügen
-			</Button>
-		</form>
-	</div>
+	<form class="m-1 mx-auto w-full flex-col space-y-6">
+		<Label class="font-semibold text-gray-700 dark:text-gray-400">Name</Label>
+		<Input
+			class={missing_values[0] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+			type="text"
+			name="name"
+			placeholder="Bitte eingeben"
+			bind:value={name}
+			required
+		/>
+
+		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geburtsdatum</Label>
+		<Input
+			class={missing_values[1] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+			type="date"
+			name="birthday"
+			bind:value={date_of_birth}
+			required
+		/>
+
+		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Frühgeburt</Label>
+		<Select
+			name={'born_early'}
+			class={missing_values[2] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+			placeholder={'Bitte auswählen'}
+			items={[
+				{ name: 'Ja', value: 'Ja' },
+				{ name: 'Nein', value: 'Nein' }
+			]}
+			bind:value={bornEarly}
+			required
+		/>
+
+		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geschlecht</Label>
+		<Select
+			class={missing_values[3] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+			name={'gender'}
+			placeholder={'Bitte auswählen'}
+			items={[
+				{ name: 'männlich', value: 'männlich' },
+				{ name: 'weiblich', value: 'weiblich' }
+			]}
+			bind:value={gender}
+			required
+		/>
+
+		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Nationalität</Label>
+		<Select
+			class={missing_values[4] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+			name={'nationality'}
+			placeholder={'Bitte auswählen'}
+			items={['Deutschland', 'Grossbritannien', 'USA', 'China'].map((item) => ({
+				name: item,
+				value: item
+			}))}
+			bind:value={nationality}
+			required
+		/>
+
+		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Sprache</Label>
+		<Select
+			class={missing_values[5] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+			name={'first_language'}
+			placeholder={'Bitte auswählen'}
+			items={['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map((item) => ({
+				name: item,
+				value: item
+			}))}
+			bind:value={first_language}
+			required
+		/>
+
+		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Verhältnis zum Kind</Label>
+		<Select
+			class={missing_values[6] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+			name={'Verhältnis zum Kind'}
+			placeholder={'Bitte auswählen'}
+			items={[
+				'Kind',
+				'Enkelkind',
+				'Neffe/Nichte',
+				'Pflegekind',
+				'Adoptivkind',
+				'Betreuung extern',
+				'Betreuung zu Hause'
+			].map((item) => ({ name: item, value: item }))}
+			bind:value={relationship}
+			required
+		/>
+
+		<Label class=" font-semibold text-gray-700 dark:text-gray-400"
+			>Entwicklungsauffälligkeiten</Label
+		>
+		<Select
+			class={missing_values[7] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+			name={'developmental_problems'}
+			placeholder={'Bitte auswählen'}
+			items={['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'].map((item) => ({
+				name: item,
+				value: item
+			}))}
+			required
+			bind:value={problems}
+		/>
+
+		<Label class="font-semibold text-gray-700 dark:text-gray-400">Anmerkungen</Label>
+		<Textarea name={'remarks'} bind:value={remarks} placeholder="Bitte eintragen (optional)" />
+
+		<Button
+			class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
+			on:click={onSubmit}
+			>Hinzufügen
+		</Button>
+	</form>
 </Card>

From 18968000cd132f539baf37067339491638d308ed Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 11:17:25 +0200
Subject: [PATCH 06/22] add info button to alert message

---
 src/lib/components/AlertMessage.svelte         | 8 ++++----
 src/lib/components/ChildrenRegistration.svelte | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/AlertMessage.svelte b/src/lib/components/AlertMessage.svelte
index 34e44f8c..8815a9b5 100644
--- a/src/lib/components/AlertMessage.svelte
+++ b/src/lib/components/AlertMessage.svelte
@@ -4,7 +4,7 @@
 
 	export let message = '';
 	export let title = '';
-	export let infotitle = 'Info';
+	export let infotitle = '';
 	export let lastpage = '';
 	export let infopage = '';
 	export let onclick = () => {};
@@ -15,11 +15,11 @@
 		<InfoCircleSolid class="h-5 w-5" />
 		<span class="text-lg font-medium"> {title} </span>
 	</div>
-	<p class="mb-4 mt-2 text-sm">{message}</p>
+	<p class="mb-4 mt-2">{message}</p>
 	<div class="flex gap-2">
 		{#if infopage != ''}
-			<Button size="xs" href={infopage}><EyeSolid class="me-2 h-4 w-4" />{infotitle}</Button>
+			<Button size="md" href={infopage}><EyeSolid class="me-2 h-4 w-4" />{infotitle}</Button>
 		{/if}
-		<Button size="xs" outline href={lastpage} on:click={onclick}>Verstanden</Button>
+		<Button size="md" outline href={lastpage} on:click={onclick}>Verstanden</Button>
 	</div>
 </Alert>
diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 9b36aaaa..ab172abb 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -61,6 +61,8 @@
 		title="Fehler"
 		message="Bitte füllen Sie alle Felder aus."
 		lastpage="/childLand/childDataInput"
+		infopage="/info"
+		infotitle="Was passiert mit den Daten"
 		onclick={() => {
 			showAlert = false;
 		}}

From fce856f4044f5d27eca1a2fec82e36ce5ce2c065 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 13:39:20 +0200
Subject: [PATCH 07/22] work on abstracting some elements of the registration
 page away

---
 .../components/ChildrenRegistration.svelte    | 146 +++++++++++++-----
 1 file changed, 105 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index ab172abb..b271f841 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -1,58 +1,109 @@
 <script lang="ts">
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
 	import { Button, Card, Heading, Input, Label, Select, Textarea } from 'flowbite-svelte';
-	const heading = 'Neues Kind registrieren';
 
-	let name: String;
-	let date_of_birth: Date;
-	let bornEarly: Boolean;
-	let gender: String;
-	let nationality: String;
-	let first_language: String;
-	let problems: String;
-	let relationship: String;
-	let remarks: String = '';
+	// data processing functions
+	function processData(element: any) {
+		let component = null;
+		if (element.items) {
+			element.items = element.items.map((item: String) => ({
+				name: item,
+				value: item
+			}));
 
-	// rerender page if missing values or showAlert changes
-	$: missing_values = [];
-	$: showAlert = false;
+			component = Select;
+		} else {
+			component = Input;
+			let type = 'text';
+			if (element.label.toLowerCase().includes('datum')) {
+				type = 'date';
+			}
+			element['type'] = type;
+		}
 
-	// input data submission
-	interface SubmittedData {
-		name: String;
-		date_of_birth: Date;
-		bornEarly: Boolean;
-		gender: String;
-		nationality: String;
-		first_language: String;
-		problems: String;
-		relationship: String;
-		remarks?: String;
+		return {
+			component: component,
+			props: element,
+			value: null
+		};
 	}
-
+	// event handlers
 	function onSubmit() {
-		const data: SubmittedData = {
-			name,
-			date_of_birth,
-			bornEarly,
-			gender,
-			nationality,
-			first_language,
-			problems,
-			relationship,
-			remarks
-		};
+		let childData = data.reduce((dict: any, curr) => {
+			dict[curr.props.label] = curr.value;
+			return dict;
+		}, {});
 
-		if (Object.values(data).every((val) => val !== undefined)) {
+		console.log(childData);
+
+		if (Object.values(childData).every((val) => val !== undefined)) {
 			missing_values = [];
-			return data;
+			return childData;
 		} else {
 			showAlert = true;
-			(missing_values as Boolean[]) = Object.keys(data)
-				.map((key) => (data[key as keyof SubmittedData] ? false : true))
+			(missing_values as Boolean[]) = Object.keys(childData)
+				.map((key) => (childData[key] ? false : true))
 				.filter((v) => v === true);
 		}
 	}
+
+	// data to display -> will later be fetched from the server
+	const heading = 'Neues Kind registrieren';
+
+	const rawData = [
+		{
+			label: 'Name',
+			placeholder: 'Bitte eintragen'
+		},
+		{
+			label: 'Geburtsdatum',
+			placeholder: 'Bitte eintragen'
+		},
+		{
+			label: 'Frühgeburt',
+			items: ['ja', 'nein'],
+			placeholder: 'Bitte auswählen'
+		},
+		{
+			label: 'Geschlecht',
+			items: ['männlich', 'weiblich'],
+			placeholder: 'Bitte auswählen'
+		},
+		{
+			label: 'Nationalität',
+			items: ['Deutschland', 'Grossbritannien', 'USA', 'China'],
+			placeholder: 'Bitte auswählen'
+		},
+		{
+			label: 'Sprache',
+			items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
+			placeholder: 'Bitte auswählen'
+		},
+		{
+			label: 'Verhältnis zum Kind',
+			items: [
+				'Kind',
+				'Enkelkind',
+				'Neffe/Nichte',
+				'Pflegekind',
+				'Adoptivkind',
+				'Betreuung extern',
+				'Betreuung zu Hause'
+			],
+			placeholder: 'Bitte auswählen'
+		},
+		{
+			label: 'Entwicklungsauffälligkeiten',
+			items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
+			placeholder: 'Bitte auswählen'
+		}
+	];
+	// rerender page if missing values or showAlert changes
+
+	$: data = rawData.map(processData);
+	$: missing_values = [];
+	$: showAlert = false;
+	$: remarks = '';
 </script>
 
 <!-- Show big alert message when something is missing -->
@@ -79,6 +130,18 @@
 	{/if}
 
 	<form class="m-1 mx-auto w-full flex-col space-y-6">
+		{#each data as element, i}
+			{#if element.props.label}
+				<Label class="font-semibold text-gray-700 dark:text-gray-400">{element.props.label}</Label>
+			{/if}
+			<svelte:component
+				this={element.component}
+				class={missing_values[i] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+				bind:value={element.value}
+				{...element.props}
+			/>
+		{/each}
+		<!-- 		
 		<Label class="font-semibold text-gray-700 dark:text-gray-400">Name</Label>
 		<Input
 			class={missing_values[0] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
@@ -182,13 +245,14 @@
 			required
 			bind:value={problems}
 		/>
-
+-->
 		<Label class="font-semibold text-gray-700 dark:text-gray-400">Anmerkungen</Label>
 		<Textarea name={'remarks'} bind:value={remarks} placeholder="Bitte eintragen (optional)" />
 
 		<Button
 			class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
 			on:click={onSubmit}
+			href={!showAlert ? undefined : '/childrengallery'}
 			>Hinzufügen
 		</Button>
 	</form>

From d3e9b943e29fdb7101269c9e45a729f877806b08 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 14:03:20 +0200
Subject: [PATCH 08/22] add remarks to childData

---
 .../components/ChildrenRegistration.svelte    | 116 +-----------------
 1 file changed, 6 insertions(+), 110 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index b271f841..1014c93e 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -24,7 +24,7 @@
 		return {
 			component: component,
 			props: element,
-			value: null
+			value: undefined
 		};
 	}
 	// event handlers
@@ -34,10 +34,10 @@
 			return dict;
 		}, {});
 
-		console.log(childData);
-
-		if (Object.values(childData).every((val) => val !== undefined)) {
+		if (Object.values(childData).every((val) => val !== undefined && val !== '' && val !== null)) {
 			missing_values = [];
+			childData['remarks'] = remarks;
+			console.log(childData);
 			return childData;
 		} else {
 			showAlert = true;
@@ -100,7 +100,7 @@
 	];
 	// rerender page if missing values or showAlert changes
 
-	$: data = rawData.map(processData);
+	let data = rawData.map(processData);
 	$: missing_values = [];
 	$: showAlert = false;
 	$: remarks = '';
@@ -115,7 +115,7 @@
 		infopage="/info"
 		infotitle="Was passiert mit den Daten"
 		onclick={() => {
-			showAlert = false;
+			showAlert = false; // FIXME: this does not rerender the page. it should though
 		}}
 	/>
 {/if}
@@ -141,111 +141,7 @@
 				{...element.props}
 			/>
 		{/each}
-		<!-- 		
-		<Label class="font-semibold text-gray-700 dark:text-gray-400">Name</Label>
-		<Input
-			class={missing_values[0] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
-			type="text"
-			name="name"
-			placeholder="Bitte eingeben"
-			bind:value={name}
-			required
-		/>
-
-		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geburtsdatum</Label>
-		<Input
-			class={missing_values[1] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
-			type="date"
-			name="birthday"
-			bind:value={date_of_birth}
-			required
-		/>
-
-		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Frühgeburt</Label>
-		<Select
-			name={'born_early'}
-			class={missing_values[2] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
-			placeholder={'Bitte auswählen'}
-			items={[
-				{ name: 'Ja', value: 'Ja' },
-				{ name: 'Nein', value: 'Nein' }
-			]}
-			bind:value={bornEarly}
-			required
-		/>
 
-		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Geschlecht</Label>
-		<Select
-			class={missing_values[3] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
-			name={'gender'}
-			placeholder={'Bitte auswählen'}
-			items={[
-				{ name: 'männlich', value: 'männlich' },
-				{ name: 'weiblich', value: 'weiblich' }
-			]}
-			bind:value={gender}
-			required
-		/>
-
-		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Nationalität</Label>
-		<Select
-			class={missing_values[4] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
-			name={'nationality'}
-			placeholder={'Bitte auswählen'}
-			items={['Deutschland', 'Grossbritannien', 'USA', 'China'].map((item) => ({
-				name: item,
-				value: item
-			}))}
-			bind:value={nationality}
-			required
-		/>
-
-		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Sprache</Label>
-		<Select
-			class={missing_values[5] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
-			name={'first_language'}
-			placeholder={'Bitte auswählen'}
-			items={['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'].map((item) => ({
-				name: item,
-				value: item
-			}))}
-			bind:value={first_language}
-			required
-		/>
-
-		<Label class=" font-semibold text-gray-700 dark:text-gray-400">Verhältnis zum Kind</Label>
-		<Select
-			class={missing_values[6] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
-			name={'Verhältnis zum Kind'}
-			placeholder={'Bitte auswählen'}
-			items={[
-				'Kind',
-				'Enkelkind',
-				'Neffe/Nichte',
-				'Pflegekind',
-				'Adoptivkind',
-				'Betreuung extern',
-				'Betreuung zu Hause'
-			].map((item) => ({ name: item, value: item }))}
-			bind:value={relationship}
-			required
-		/>
-
-		<Label class=" font-semibold text-gray-700 dark:text-gray-400"
-			>Entwicklungsauffälligkeiten</Label
-		>
-		<Select
-			class={missing_values[7] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
-			name={'developmental_problems'}
-			placeholder={'Bitte auswählen'}
-			items={['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'].map((item) => ({
-				name: item,
-				value: item
-			}))}
-			required
-			bind:value={problems}
-		/>
--->
 		<Label class="font-semibold text-gray-700 dark:text-gray-400">Anmerkungen</Label>
 		<Textarea name={'remarks'} bind:value={remarks} placeholder="Bitte eintragen (optional)" />
 

From fb4f5b9d507398c8ec7c054a1c15b89d07eef569 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 14:07:33 +0200
Subject: [PATCH 09/22] change comments

---
 src/lib/components/ChildrenRegistration.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 1014c93e..b959dd6c 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -115,11 +115,12 @@
 		infopage="/info"
 		infotitle="Was passiert mit den Daten"
 		onclick={() => {
-			showAlert = false; // FIXME: this does not rerender the page. it should though
+			showAlert = false;
 		}}
 	/>
 {/if}
 
+<!-- The actual content -->
 <Card class="container m-1 mx-auto w-full max-w-xl">
 	{#if heading}
 		<Heading

From 3ce57fabc58587a4d9da96db9acebd98e3d784a4 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 16:01:29 +0200
Subject: [PATCH 10/22] modify childrenstore to use localstorage, add
 localstorage support for data

---
 .../components/ChildrenRegistration.svelte    | 101 ++++++++++++++----
 src/lib/components/Childrenpage.svelte        |  29 +++--
 .../DataDisplay/GalleryDisplay.svelte         |   2 +-
 src/lib/stores/childrenStore.ts               |  17 ++-
 4 files changed, 115 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index b959dd6c..1fc40d42 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
+	import {
+		addChildData,
+		children,
+		generateChildID,
+		type ChildData
+	} from '$lib/stores/childrenStore';
 	import { Button, Card, Heading, Input, Label, Select, Textarea } from 'flowbite-svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { get } from 'svelte/store';
 
 	// data processing functions
-	function processData(element: any) {
+	export function processData(element: any) {
 		let component = null;
 		if (element.items) {
 			element.items = element.items.map((item: String) => ({
@@ -27,21 +35,29 @@
 			value: undefined
 		};
 	}
-	// event handlers
-	function onSubmit() {
-		let childData = data.reduce((dict: any, curr) => {
-			dict[curr.props.label] = curr.value;
+	// event handlers and verification function
+	async function submitData() {
+		addChildData(userid, generateChildID(childData.name), childData);
+	}
+
+	async function verifyInput() {
+		childData = data.reduce((dict: any, curr) => {
+			dict[curr.props.key] = curr.value;
 			return dict;
 		}, {});
 
 		if (Object.values(childData).every((val) => val !== undefined && val !== '' && val !== null)) {
-			missing_values = [];
+			missingValues = [];
+			const childID = generateChildID(childData.name);
+			// add additional data to the child
 			childData['remarks'] = remarks;
-			console.log(childData);
-			return childData;
+			childData['user'] = userid;
+			childData['id'] = childID;
+			nextpage = '/childrengallery';
+			verified = true;
 		} else {
 			showAlert = true;
-			(missing_values as Boolean[]) = Object.keys(childData)
+			(missingValues as Boolean[]) = Object.keys(childData)
 				.map((key) => (childData[key] ? false : true))
 				.filter((v) => v === true);
 		}
@@ -50,37 +66,44 @@
 	// data to display -> will later be fetched from the server
 	const heading = 'Neues Kind registrieren';
 
-	const rawData = [
+	export const rawData = [
 		{
 			label: 'Name',
-			placeholder: 'Bitte eintragen'
+			placeholder: 'Bitte eintragen',
+			key: 'name'
 		},
 		{
 			label: 'Geburtsdatum',
-			placeholder: 'Bitte eintragen'
+			placeholder: 'Bitte eintragen',
+			key: 'dateOfBirth'
 		},
 		{
 			label: 'Frühgeburt',
 			items: ['ja', 'nein'],
-			placeholder: 'Bitte auswählen'
+			placeholder: 'Bitte auswählen',
+			key: 'bornEarly'
 		},
 		{
 			label: 'Geschlecht',
 			items: ['männlich', 'weiblich'],
-			placeholder: 'Bitte auswählen'
+			placeholder: 'Bitte auswählen',
+			key: 'gender'
 		},
 		{
 			label: 'Nationalität',
 			items: ['Deutschland', 'Grossbritannien', 'USA', 'China'],
-			placeholder: 'Bitte auswählen'
+			placeholder: 'Bitte auswählen',
+			key: 'nationality'
 		},
 		{
 			label: 'Sprache',
 			items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
-			placeholder: 'Bitte auswählen'
+			placeholder: 'Bitte auswählen',
+			key: 'language'
 		},
 		{
 			label: 'Verhältnis zum Kind',
+			key: 'relationship',
 			items: [
 				'Kind',
 				'Enkelkind',
@@ -95,15 +118,47 @@
 		{
 			label: 'Entwicklungsauffälligkeiten',
 			items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
-			placeholder: 'Bitte auswählen'
+			placeholder: 'Bitte auswählen',
+			key: 'developmentalIssues'
 		}
 	];
-	// rerender page if missing values or showAlert changes
 
+	//  dummy user
+	export const userid = 'dummyUser';
+
+	// dummy user added to users until this page is hooked up to the user system
+	try {
+		children.update((childrenlist) => {
+			if (userid in childrenlist) {
+				throw new Error(`User token ${userid} already exists`);
+			}
+			childrenlist[userid] = {};
+			return childrenlist;
+		});
+	} catch (error) {
+		console.log('something went wrong when adding user: ', error);
+	}
+
+	// data
 	let data = rawData.map(processData);
-	$: missing_values = [];
+	let childData: ChildData;
+	let verified: Boolean = false;
+	let nextpage: string | null = null;
+	// rerender page if missing values or showAlert changes
+	$: missingValues = [];
 	$: showAlert = false;
 	$: remarks = '';
+
+	// use component lifecycle to make sure data is written and read persistently
+	onMount(() => {
+		const stored = localStorage.getItem('children');
+		const childrenlist = stored ? JSON.parse(stored) : {};
+		children.set(childrenlist);
+	});
+
+	onDestroy(() => {
+		localStorage.setItem('children', JSON.stringify(get(children)));
+	});
 </script>
 
 <!-- Show big alert message when something is missing -->
@@ -137,7 +192,7 @@
 			{/if}
 			<svelte:component
 				this={element.component}
-				class={missing_values[i] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+				class={missingValues[i] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
 				bind:value={element.value}
 				{...element.props}
 			/>
@@ -148,9 +203,9 @@
 
 		<Button
 			class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
-			on:click={onSubmit}
-			href={!showAlert ? undefined : '/childrengallery'}
-			>Hinzufügen
+			on:click={verified ? submitData : verifyInput}
+			href={nextpage}
+			>{verified ? 'Hinzufügen' : 'Überprüfen'}
 		</Button>
 	</form>
 </Card>
diff --git a/src/lib/components/Childrenpage.svelte b/src/lib/components/Childrenpage.svelte
index 5d966d55..a7cb5bd3 100644
--- a/src/lib/components/Childrenpage.svelte
+++ b/src/lib/components/Childrenpage.svelte
@@ -51,13 +51,10 @@
 <script lang="ts">
 	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
 	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
-	import {
-		createDummyData,
-		fetchChildrenDataforUser,
-		type ChildData
-	} from '$lib/stores/childrenStore';
+	import { children, fetchChildrenDataforUser, type ChildData } from '$lib/stores/childrenStore';
 	import { Heading } from 'flowbite-svelte';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { get } from 'svelte/store';
 	// create data and
 
 	let data: ChildData[] = [];
@@ -65,8 +62,21 @@
 
 	async function init() {
 		loading = true;
-		await createDummyData();
-		let rawdata = await fetchChildrenDataforUser('dummyUser');
+
+		const stored = localStorage.getItem('children');
+		const childrenlist = stored ? JSON.parse(stored) : {};
+
+		console.log('read childrenlist: ', childrenlist);
+
+		children.set(childrenlist);
+
+		// Update the store with the value from localStorage
+		let rawdata = [];
+		try {
+			rawdata = await fetchChildrenDataforUser('dummyUser');
+		} catch (error) {
+			console.log('some error occured: ', error);
+		}
 		data = convertData(rawdata);
 		loading = false;
 	}
@@ -74,6 +84,9 @@
 	// this fetches dummy child data for the dummy user whenever the component is mounted into the dom
 	// it is conceptualized as emulating an API call that would normally fetch this from the server.
 	onMount(init);
+	onDestroy(() => {
+		localStorage.setItem('children', JSON.stringify(get(children)));
+	});
 </script>
 
 <Heading tag="h1" class="mb-2" color="text-gray-700 dark:text-gray-400">Übersicht</Heading>
diff --git a/src/lib/components/DataDisplay/GalleryDisplay.svelte b/src/lib/components/DataDisplay/GalleryDisplay.svelte
index 28a55035..a72e7571 100644
--- a/src/lib/components/DataDisplay/GalleryDisplay.svelte
+++ b/src/lib/components/DataDisplay/GalleryDisplay.svelte
@@ -37,7 +37,7 @@
 
 {#if withSearch}
 	<form class="flex gap-2">
-		<Search size="md" placeholder={'Search for child'} bind:value={searchTerm} />
+		<Search size="md" placeholder={'Kinder nach Namen durchsuchen'} bind:value={searchTerm} />
 		<Button class="!p-2.5">
 			<SearchOutline class="h-6 w-6" />
 		</Button>
diff --git a/src/lib/stores/childrenStore.ts b/src/lib/stores/childrenStore.ts
index 810393c3..5ddf90b1 100644
--- a/src/lib/stores/childrenStore.ts
+++ b/src/lib/stores/childrenStore.ts
@@ -44,11 +44,24 @@ interface ChildrenList {
 }
 
 // the store itself: README: TODO: Consider creating a derived store for maps that exposes some key-value retrieval functionality
-const childrenlist: ChildrenList = {};
 
-const children = writable(childrenlist);
+const children = writable({});
 
 // addX and removeX are helper functions and can probably be removed once we have a proper backend
+
+/**
+ * Generate a dummy child id code
+ * @param childname name of the child
+ * @returns child id code string made up of ascii code numbers in string form
+ */
+export function generateChildID(childname: string): string {
+	return childname
+		.split('')
+		.map((char) => char.charCodeAt(0))
+		.reduce((acc, num) => acc + num.toString(), '')
+		.toLowerCase();
+}
+
 /**
  * Add a new user with an empty children store
  * @param usertoken the token of the user to add

From 37a459cf38683242dffc3ca54d7743c43ff656e3 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 16:35:21 +0200
Subject: [PATCH 11/22] add load and save functions

---
 src/lib/components/Childrenpage.svelte | 15 +++------------
 src/lib/stores/childrenStore.ts        | 10 ++++++++++
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/Childrenpage.svelte b/src/lib/components/Childrenpage.svelte
index a7cb5bd3..dc19a1b6 100644
--- a/src/lib/components/Childrenpage.svelte
+++ b/src/lib/components/Childrenpage.svelte
@@ -51,10 +51,9 @@
 <script lang="ts">
 	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
 	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
-	import { children, fetchChildrenDataforUser, type ChildData } from '$lib/stores/childrenStore';
+	import { fetchChildrenDataforUser, load, save, type ChildData } from '$lib/stores/childrenStore';
 	import { Heading } from 'flowbite-svelte';
 	import { onDestroy, onMount } from 'svelte';
-	import { get } from 'svelte/store';
 	// create data and
 
 	let data: ChildData[] = [];
@@ -62,13 +61,7 @@
 
 	async function init() {
 		loading = true;
-
-		const stored = localStorage.getItem('children');
-		const childrenlist = stored ? JSON.parse(stored) : {};
-
-		console.log('read childrenlist: ', childrenlist);
-
-		children.set(childrenlist);
+		load();
 
 		// Update the store with the value from localStorage
 		let rawdata = [];
@@ -84,9 +77,7 @@
 	// this fetches dummy child data for the dummy user whenever the component is mounted into the dom
 	// it is conceptualized as emulating an API call that would normally fetch this from the server.
 	onMount(init);
-	onDestroy(() => {
-		localStorage.setItem('children', JSON.stringify(get(children)));
-	});
+	onDestroy(save);
 </script>
 
 <Heading tag="h1" class="mb-2" color="text-gray-700 dark:text-gray-400">Übersicht</Heading>
diff --git a/src/lib/stores/childrenStore.ts b/src/lib/stores/childrenStore.ts
index 5ddf90b1..b6981135 100644
--- a/src/lib/stores/childrenStore.ts
+++ b/src/lib/stores/childrenStore.ts
@@ -47,6 +47,16 @@ interface ChildrenList {
 
 const children = writable({});
 
+export async function load() {
+	const stored = localStorage.getItem('children');
+	const childrenlist = stored ? JSON.parse(stored) : {};
+	children.set(childrenlist);
+}
+
+export async function save() {
+	localStorage.setItem('children', JSON.stringify(get(children)));
+}
+
 // addX and removeX are helper functions and can probably be removed once we have a proper backend
 
 /**

From 97b31ec235672af7c665d603e97f145d2a4e7803 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 16:41:59 +0200
Subject: [PATCH 12/22] add required dictionary to distinguish required and
 non-required fields

---
 .../components/ChildrenRegistration.svelte    | 88 ++++++++++++++-----
 1 file changed, 64 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 1fc40d42..3b42500e 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -6,7 +6,16 @@
 		generateChildID,
 		type ChildData
 	} from '$lib/stores/childrenStore';
-	import { Button, Card, Heading, Input, Label, Select, Textarea } from 'flowbite-svelte';
+	import {
+		Button,
+		Card,
+		Fileupload,
+		Heading,
+		Input,
+		Label,
+		Select,
+		Textarea
+	} from 'flowbite-svelte';
 	import { onDestroy, onMount } from 'svelte';
 	import { get } from 'svelte/store';
 
@@ -20,6 +29,10 @@
 			}));
 
 			component = Select;
+		} else if (element.key == 'image') {
+			component = Fileupload;
+		} else if (element.key == 'remarks') {
+			component = Textarea;
 		} else {
 			component = Input;
 			let type = 'text';
@@ -36,21 +49,26 @@
 		};
 	}
 	// event handlers and verification function
-	async function submitData() {
+	export function submitData() {
 		addChildData(userid, generateChildID(childData.name), childData);
 	}
 
-	async function verifyInput() {
+	export function verifyInput() {
+		let required: { [key: string]: Boolean } = {};
 		childData = data.reduce((dict: any, curr) => {
 			dict[curr.props.key] = curr.value;
+			required[curr.props.key] == curr.props.required;
 			return dict;
 		}, {});
 
-		if (Object.values(childData).every((val) => val !== undefined && val !== '' && val !== null)) {
+		if (
+			Object.entries(childData).every(
+				(kv) => required[kv[0]] && kv[1] !== undefined && kv[1] !== null
+			)
+		) {
 			missingValues = [];
 			const childID = generateChildID(childData.name);
 			// add additional data to the child
-			childData['remarks'] = remarks;
 			childData['user'] = userid;
 			childData['id'] = childID;
 			nextpage = '/childrengallery';
@@ -58,48 +76,57 @@
 		} else {
 			showAlert = true;
 			(missingValues as Boolean[]) = Object.keys(childData)
-				.map((key) => (childData[key] ? false : true))
+				.map((key) => {
+					return childData[key] && required[key] ? false : true;
+				})
 				.filter((v) => v === true);
 		}
 	}
 
 	// data to display -> will later be fetched from the server
-	const heading = 'Neues Kind registrieren';
+	export let heading = 'Neues Kind registrieren';
 
-	export const rawData = [
+	// this can be supplied from the database
+	export let rawData = [
 		{
 			label: 'Name',
 			placeholder: 'Bitte eintragen',
-			key: 'name'
+			key: 'name',
+			required: true
 		},
 		{
 			label: 'Geburtsdatum',
 			placeholder: 'Bitte eintragen',
-			key: 'dateOfBirth'
+			key: 'dateOfBirth',
+			required: true
 		},
 		{
 			label: 'Frühgeburt',
 			items: ['ja', 'nein'],
 			placeholder: 'Bitte auswählen',
-			key: 'bornEarly'
+			key: 'bornEarly',
+			required: true
 		},
 		{
 			label: 'Geschlecht',
 			items: ['männlich', 'weiblich'],
 			placeholder: 'Bitte auswählen',
-			key: 'gender'
+			key: 'gender',
+			required: true
 		},
 		{
 			label: 'Nationalität',
 			items: ['Deutschland', 'Grossbritannien', 'USA', 'China'],
 			placeholder: 'Bitte auswählen',
-			key: 'nationality'
+			key: 'nationality',
+			required: true
 		},
 		{
 			label: 'Sprache',
 			items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
 			placeholder: 'Bitte auswählen',
-			key: 'language'
+			key: 'language',
+			required: true
 		},
 		{
 			label: 'Verhältnis zum Kind',
@@ -113,18 +140,32 @@
 				'Betreuung extern',
 				'Betreuung zu Hause'
 			],
-			placeholder: 'Bitte auswählen'
+			placeholder: 'Bitte auswählen',
+			required: true
 		},
 		{
 			label: 'Entwicklungsauffälligkeiten',
 			items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
 			placeholder: 'Bitte auswählen',
-			key: 'developmentalIssues'
+			key: 'developmentalIssues',
+			required: true
+		},
+		{
+			label: 'Anmerkungen',
+			placeholder: 'Weitere Bemerkungen',
+			key: 'remarks',
+			required: false
+		},
+		{
+			label: 'Foto',
+			placeholder: 'Bitte wählen sie ein Bild aus falls gewünscht',
+			key: 'image',
+			required: false
 		}
 	];
 
 	//  dummy user
-	export const userid = 'dummyUser';
+	export let userid = 'dummyUser';
 
 	// dummy user added to users until this page is hooked up to the user system
 	try {
@@ -147,7 +188,6 @@
 	// rerender page if missing values or showAlert changes
 	$: missingValues = [];
 	$: showAlert = false;
-	$: remarks = '';
 
 	// use component lifecycle to make sure data is written and read persistently
 	onMount(() => {
@@ -165,12 +205,13 @@
 {#if showAlert}
 	<AlertMessage
 		title="Fehler"
-		message="Bitte füllen Sie alle Felder aus."
+		message="Bitte füllen Sie mindestens die benötigten Felder (hervorgehoben) aus."
 		lastpage="/childLand/childDataInput"
 		infopage="/info"
 		infotitle="Was passiert mit den Daten"
 		onclick={() => {
 			showAlert = false;
+			missingValues = [];
 		}}
 	/>
 {/if}
@@ -192,20 +233,19 @@
 			{/if}
 			<svelte:component
 				this={element.component}
-				class={missingValues[i] ? 'bg-primary-600 text-white dark:bg-primary-600' : ''}
+				class={missingValues[i] && element.props['required'] === true
+					? 'bg-primary-600 text-white dark:bg-primary-600'
+					: ''}
 				bind:value={element.value}
 				{...element.props}
 			/>
 		{/each}
 
-		<Label class="font-semibold text-gray-700 dark:text-gray-400">Anmerkungen</Label>
-		<Textarea name={'remarks'} bind:value={remarks} placeholder="Bitte eintragen (optional)" />
-
 		<Button
 			class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
 			on:click={verified ? submitData : verifyInput}
 			href={nextpage}
-			>{verified ? 'Hinzufügen' : 'Überprüfen'}
+			>{verified ? 'Kind hinzufügen' : 'Klicken um Daten zu bestätigen'}
 		</Button>
 	</form>
 </Card>

From 09b56857e17c641d226f5a3815d755160c50302d Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 20:28:32 +0200
Subject: [PATCH 13/22] try to fix error with localStorage

---
 .../components/ChildrenRegistration.svelte    | 21 +++++++++----------
 src/lib/stores/childrenStore.ts               | 16 +++++++++-----
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 3b42500e..a66230f7 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -4,6 +4,8 @@
 		addChildData,
 		children,
 		generateChildID,
+		load,
+		save,
 		type ChildData
 	} from '$lib/stores/childrenStore';
 	import {
@@ -17,7 +19,6 @@
 		Textarea
 	} from 'flowbite-svelte';
 	import { onDestroy, onMount } from 'svelte';
-	import { get } from 'svelte/store';
 
 	// data processing functions
 	export function processData(element: any) {
@@ -57,15 +58,15 @@
 		let required: { [key: string]: Boolean } = {};
 		childData = data.reduce((dict: any, curr) => {
 			dict[curr.props.key] = curr.value;
-			required[curr.props.key] == curr.props.required;
+			required[curr.props.key] = curr.props.required;
 			return dict;
 		}, {});
 
-		if (
-			Object.entries(childData).every(
-				(kv) => required[kv[0]] && kv[1] !== undefined && kv[1] !== null
-			)
-		) {
+		const test = Object.entries(childData).every((kv) =>
+			required[kv[0]] ? kv[1] !== undefined && kv[1] !== null : true
+		);
+
+		if (test) {
 			missingValues = [];
 			const childID = generateChildID(childData.name);
 			// add additional data to the child
@@ -191,13 +192,11 @@
 
 	// use component lifecycle to make sure data is written and read persistently
 	onMount(() => {
-		const stored = localStorage.getItem('children');
-		const childrenlist = stored ? JSON.parse(stored) : {};
-		children.set(childrenlist);
+		load();
 	});
 
 	onDestroy(() => {
-		localStorage.setItem('children', JSON.stringify(get(children)));
+		save();
 	});
 </script>
 
diff --git a/src/lib/stores/childrenStore.ts b/src/lib/stores/childrenStore.ts
index b6981135..c1abb5e9 100644
--- a/src/lib/stores/childrenStore.ts
+++ b/src/lib/stores/childrenStore.ts
@@ -1,3 +1,4 @@
+import { browser } from '$app/environment';
 import { get, writable } from 'svelte/store';
 
 // README: this API is experimental and not by any means a final design
@@ -47,14 +48,19 @@ interface ChildrenList {
 
 const children = writable({});
 
-export async function load() {
-	const stored = localStorage.getItem('children');
-	const childrenlist = stored ? JSON.parse(stored) : {};
+export function load() {
+	let childrenlist = {};
+	if (browser) {
+		const stored = localStorage.getItem('children');
+		childrenlist = stored ? JSON.parse(stored) : {};
+	}
 	children.set(childrenlist);
 }
 
-export async function save() {
-	localStorage.setItem('children', JSON.stringify(get(children)));
+export function save() {
+	if (browser) {
+		localStorage.setItem('children', JSON.stringify(get(children)));
+	}
 }
 
 // addX and removeX are helper functions and can probably be removed once we have a proper backend

From a03ae90cafd8f937d0d9b5d792f8291dd080681e Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 20:40:12 +0200
Subject: [PATCH 14/22] add error handling

---
 src/lib/components/Childrenpage.svelte | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Childrenpage.svelte b/src/lib/components/Childrenpage.svelte
index dc19a1b6..1f2b6339 100644
--- a/src/lib/components/Childrenpage.svelte
+++ b/src/lib/components/Childrenpage.svelte
@@ -51,17 +51,33 @@
 <script lang="ts">
 	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
 	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
-	import { fetchChildrenDataforUser, load, save, type ChildData } from '$lib/stores/childrenStore';
+	import {
+		addUser,
+		fetchChildrenDataforUser,
+		load,
+		save,
+		type ChildData
+	} from '$lib/stores/childrenStore';
 	import { Heading } from 'flowbite-svelte';
 	import { onDestroy, onMount } from 'svelte';
 	// create data and
 
 	let data: ChildData[] = [];
 	let loading = true;
+	const userID = 'dummyUser';
 
 	async function init() {
 		loading = true;
-		load();
+		try {
+			addUser(userID);
+		} catch (error) {
+			console.log('Error adding user: ', error);
+		}
+		try {
+			load();
+		} catch (error) {
+			console.log('Error loading data: ', error);
+		}
 
 		// Update the store with the value from localStorage
 		let rawdata = [];

From 72759c6f6a65a309a0ea6992b5bd1a35dea95990 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 20:41:25 +0200
Subject: [PATCH 15/22] correct variable name

---
 .../components/ChildrenRegistration.svelte    | 99 ++++++++++---------
 1 file changed, 50 insertions(+), 49 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index a66230f7..6f5ff7b3 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -51,7 +51,7 @@
 	}
 	// event handlers and verification function
 	export function submitData() {
-		addChildData(userid, generateChildID(childData.name), childData);
+		addChildData(userID, generateChildID(childData.name), childData);
 	}
 
 	export function verifyInput() {
@@ -70,7 +70,7 @@
 			missingValues = [];
 			const childID = generateChildID(childData.name);
 			// add additional data to the child
-			childData['user'] = userid;
+			childData['user'] = userID;
 			childData['id'] = childID;
 			nextpage = '/childrengallery';
 			verified = true;
@@ -108,49 +108,49 @@
 			key: 'bornEarly',
 			required: true
 		},
-		{
-			label: 'Geschlecht',
-			items: ['männlich', 'weiblich'],
-			placeholder: 'Bitte auswählen',
-			key: 'gender',
-			required: true
-		},
-		{
-			label: 'Nationalität',
-			items: ['Deutschland', 'Grossbritannien', 'USA', 'China'],
-			placeholder: 'Bitte auswählen',
-			key: 'nationality',
-			required: true
-		},
-		{
-			label: 'Sprache',
-			items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
-			placeholder: 'Bitte auswählen',
-			key: 'language',
-			required: true
-		},
-		{
-			label: 'Verhältnis zum Kind',
-			key: 'relationship',
-			items: [
-				'Kind',
-				'Enkelkind',
-				'Neffe/Nichte',
-				'Pflegekind',
-				'Adoptivkind',
-				'Betreuung extern',
-				'Betreuung zu Hause'
-			],
-			placeholder: 'Bitte auswählen',
-			required: true
-		},
-		{
-			label: 'Entwicklungsauffälligkeiten',
-			items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
-			placeholder: 'Bitte auswählen',
-			key: 'developmentalIssues',
-			required: true
-		},
+		// {
+		// 	label: 'Geschlecht',
+		// 	items: ['männlich', 'weiblich'],
+		// 	placeholder: 'Bitte auswählen',
+		// 	key: 'gender',
+		// 	required: true
+		// },
+		// {
+		// 	label: 'Nationalität',
+		// 	items: ['Deutschland', 'Grossbritannien', 'USA', 'China'],
+		// 	placeholder: 'Bitte auswählen',
+		// 	key: 'nationality',
+		// 	required: true
+		// },
+		// {
+		// 	label: 'Sprache',
+		// 	items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
+		// 	placeholder: 'Bitte auswählen',
+		// 	key: 'language',
+		// 	required: true
+		// },
+		// {
+		// 	label: 'Verhältnis zum Kind',
+		// 	key: 'relationship',
+		// 	items: [
+		// 		'Kind',
+		// 		'Enkelkind',
+		// 		'Neffe/Nichte',
+		// 		'Pflegekind',
+		// 		'Adoptivkind',
+		// 		'Betreuung extern',
+		// 		'Betreuung zu Hause'
+		// 	],
+		// 	placeholder: 'Bitte auswählen',
+		// 	required: true
+		// },
+		// {
+		// 	label: 'Entwicklungsauffälligkeiten',
+		// 	items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
+		// 	placeholder: 'Bitte auswählen',
+		// 	key: 'developmentalIssues',
+		// 	required: true
+		// },
 		{
 			label: 'Anmerkungen',
 			placeholder: 'Weitere Bemerkungen',
@@ -166,15 +166,15 @@
 	];
 
 	//  dummy user
-	export let userid = 'dummyUser';
+	export let userID = 'dummyUser';
 
 	// dummy user added to users until this page is hooked up to the user system
 	try {
 		children.update((childrenlist) => {
-			if (userid in childrenlist) {
-				throw new Error(`User token ${userid} already exists`);
+			if (userID in childrenlist) {
+				throw new Error(`User token ${userID} already exists`);
 			}
-			childrenlist[userid] = {};
+			childrenlist[userID] = {};
 			return childrenlist;
 		});
 	} catch (error) {
@@ -186,6 +186,7 @@
 	let childData: ChildData;
 	let verified: Boolean = false;
 	let nextpage: string | null = null;
+
 	// rerender page if missing values or showAlert changes
 	$: missingValues = [];
 	$: showAlert = false;

From 734c81136681f9780b88c248efe06724dd52456e Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 29 Aug 2024 21:28:09 +0200
Subject: [PATCH 16/22] reorganize data loading

---
 .../components/ChildrenRegistration.svelte    |  32 ++++-
 src/lib/components/Childrenpage.svelte        |  19 ++-
 src/lib/components/Frontpage.svelte           |  25 +++-
 src/lib/stores/childrenStore.ts               | 126 ++++--------------
 .../childLand/[userID]/[childID]/+page.js     |   2 -
 5 files changed, 80 insertions(+), 124 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 6f5ff7b3..da0d07ae 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
+
 	import {
 		addChildData,
+		addChildObservation,
 		children,
+		createDummyCurrent,
+		createDummySummary,
 		generateChildID,
 		load,
 		save,
 		type ChildData
 	} from '$lib/stores/childrenStore';
+
 	import {
 		Button,
 		Card,
@@ -18,6 +23,7 @@
 		Select,
 		Textarea
 	} from 'flowbite-svelte';
+
 	import { onDestroy, onMount } from 'svelte';
 
 	// data processing functions
@@ -50,11 +56,18 @@
 		};
 	}
 	// event handlers and verification function
-	export function submitData() {
-		addChildData(userID, generateChildID(childData.name), childData);
+	export async function submitData() {
+		const childID = generateChildID(childData.name);
+		await addChildData(userID, childID, childData);
+		await addChildObservation(userID, childID, {
+			user: userID,
+			id: childID,
+			summary: await createDummySummary(),
+			current: await createDummyCurrent()
+		});
 	}
 
-	export function verifyInput() {
+	export async function verifyInput() {
 		let required: { [key: string]: Boolean } = {};
 		childData = data.reduce((dict: any, curr) => {
 			dict[curr.props.key] = curr.value;
@@ -192,12 +205,17 @@
 	$: showAlert = false;
 
 	// use component lifecycle to make sure data is written and read persistently
-	onMount(() => {
-		load();
+	let unsubscribe;
+	onMount(async () => {
+		await load();
+		unsubscribe = children.subscribe((childrenlist) => {
+			save();
+		});
 	});
 
-	onDestroy(() => {
-		save();
+	onDestroy(async () => {
+		await save();
+		unsubscribe();
 	});
 </script>
 
diff --git a/src/lib/components/Childrenpage.svelte b/src/lib/components/Childrenpage.svelte
index 1f2b6339..dd6bd50b 100644
--- a/src/lib/components/Childrenpage.svelte
+++ b/src/lib/components/Childrenpage.svelte
@@ -62,19 +62,10 @@
 	import { onDestroy, onMount } from 'svelte';
 	// create data and
 
-	let data: ChildData[] = [];
-	let loading = true;
-	const userID = 'dummyUser';
-
 	async function init() {
 		loading = true;
 		try {
-			addUser(userID);
-		} catch (error) {
-			console.log('Error adding user: ', error);
-		}
-		try {
-			load();
+			await load();
 		} catch (error) {
 			console.log('Error loading data: ', error);
 		}
@@ -90,10 +81,16 @@
 		loading = false;
 	}
 
+	let data: ChildData[] = [];
+	let loading = true;
+	const userID = 'dummyUser';
+
 	// this fetches dummy child data for the dummy user whenever the component is mounted into the dom
 	// it is conceptualized as emulating an API call that would normally fetch this from the server.
 	onMount(init);
-	onDestroy(save);
+	onDestroy(async () => {
+		save();
+	});
 </script>
 
 <Heading tag="h1" class="mb-2" color="text-gray-700 dark:text-gray-400">Übersicht</Heading>
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
index 62fe9155..ddb9e208 100644
--- a/src/lib/components/Frontpage.svelte
+++ b/src/lib/components/Frontpage.svelte
@@ -1,8 +1,11 @@
 <script>
 	// @ts-nocheck
 
-	import CardDisplay from './DataDisplay/CardDisplay.svelte';
-	import GalleryDisplay from './DataDisplay/GalleryDisplay.svelte';
+	import CardDisplay from '$lib/components//DataDisplay/CardDisplay.svelte';
+	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
+	import { addUser, clear, save } from '$lib/stores/childrenStore';
+	import { onMount } from 'svelte';
+
 	export let getStarted = '';
 
 	export let items = [
@@ -64,6 +67,24 @@
 	];
 
 	const props = {};
+
+	onMount(async () => {
+		try {
+			await clear();
+		} catch (error) {
+			console.log('error in frontpage: ', error);
+		}
+		try {
+			await addUser('dummyUser');
+		} catch (error) {
+			console.log('error in frontpage: ', error);
+		}
+		try {
+			await save();
+		} catch (error) {
+			console.log('error in frontpage: ', error);
+		}
+	});
 </script>
 
 <GalleryDisplay
diff --git a/src/lib/stores/childrenStore.ts b/src/lib/stores/childrenStore.ts
index c1abb5e9..de8d8288 100644
--- a/src/lib/stores/childrenStore.ts
+++ b/src/lib/stores/childrenStore.ts
@@ -45,20 +45,29 @@ interface ChildrenList {
 }
 
 // the store itself: README: TODO: Consider creating a derived store for maps that exposes some key-value retrieval functionality
+let childrenlist = {};
+const children = writable(childrenlist);
 
-const children = writable({});
+async function clear() {
+	if (browser) {
+		localStorage.clear();
+	}
+}
 
-export function load() {
-	let childrenlist = {};
+async function load() {
 	if (browser) {
+		console.log('Loading children list');
+		console.log('childrenlist: ', childrenlist);
 		const stored = localStorage.getItem('children');
 		childrenlist = stored ? JSON.parse(stored) : {};
 	}
 	children.set(childrenlist);
 }
 
-export function save() {
+async function save() {
 	if (browser) {
+		console.log('Saving children list');
+		console.log('childrenlist: ', childrenlist);
 		localStorage.setItem('children', JSON.stringify(get(children)));
 	}
 }
@@ -271,17 +280,7 @@ function chooseRandom(values: string[]) {
 	return values[getRandomInt(values.length)];
 }
 
-/**
- * create dummy data for the children store. This will later be
- */
-async function createDummyData() {
-	if ('dummyUser' in childrenlist) {
-		return;
-	}
-	// add user
-	await addUser('dummyUser');
-
-	// create data
+async function createDummySummary() {
 	const values = ['good', 'warn', 'bad'];
 	const dates = [
 		'05-11-2017',
@@ -311,7 +310,11 @@ async function createDummyData() {
 		summary.push(element);
 	}
 
+	return summary;
+}
+async function createDummyCurrent() {
 	const current: { [survey: string]: { name: string; status: string }[] } = {};
+	const surveys: string[] = ['surveyA', 'surveyB', 'surveyC', 'surveyD', 'surveyE'];
 
 	const milestones = ['milestoneA', 'milestoneB', 'milestoneC', 'milestoneD', 'milestoneE'];
 	const completionValues = ['done', 'open', 'incomplete'];
@@ -325,105 +328,24 @@ async function createDummyData() {
 			});
 		}
 	}
-
-	await addChildData('dummyUser', 'childAnna', {
-		name: 'Anna',
-		id: 'childAnna',
-		user: 'dummyUser',
-		image: 'child_avatar.png',
-		info: 'Anna child that is doing good and developing according to their age.. Click to view more.'
-	});
-	await addChildObservation('dummyUser', 'childAnna', {
-		id: 'childAnna',
-		user: 'dummyUser',
-		summary: summary,
-		current: current
-	});
-
-	await addChildData('dummyUser', 'childBen', {
-		name: 'Ben',
-		id: 'childBen',
-		user: 'dummyUser',
-		image: 'child_avatar.png',
-		info: 'Ben child that is doing good and developing according to their age.. Click to view more.'
-	});
-	await addChildObservation('dummyUser', 'childBen', {
-		id: 'childAnna',
-		user: 'dummyUser',
-		summary: summary,
-		current: current
-	});
-
-	await addChildData('dummyUser', 'childC', {
-		name: 'C',
-		id: 'childC',
-		user: 'dummyUser',
-		image: 'children.png',
-		info: 'C child that is doing good and developing according to their age. Click to view more.'
-	});
-	await addChildObservation('dummyUser', 'childC', {
-		id: 'childAnna',
-		user: 'dummyUser',
-		summary: summary,
-		current: current
-	});
-
-	await addChildData('dummyUser', 'childDora', {
-		name: 'Dora',
-		id: 'childDora',
-		user: 'dummyUser',
-		image: 'children.png',
-		info: 'Dora child that is doing good and developing according to their age.. Click to view more.'
-	});
-	await addChildObservation('dummyUser', 'childDora', {
-		id: 'childAnna',
-		user: 'dummyUser',
-		summary: summary,
-		current: current
-	});
-
-	await addChildData('dummyUser', 'childE', {
-		name: 'E',
-		id: 'childE',
-		user: 'dummyUser',
-		image: 'children.png',
-		info: 'E child that is doing good and developing according to their age.. Click to view more.'
-	});
-	await addChildObservation('dummyUser', 'childE', {
-		id: 'childAnna',
-		user: 'dummyUser',
-		summary: summary,
-		current: current
-	});
-
-	await addChildData('dummyUser', 'childF', {
-		name: 'F',
-		id: 'childF',
-		user: 'dummyUser',
-		image: 'children.png',
-		info: 'F child that is doing good and developing according to their age.. Click to view more.'
-	});
-	await addChildObservation('dummyUser', 'childF', {
-		id: 'childAnna',
-		user: 'dummyUser',
-		summary: summary,
-		current: current
-	});
+	return current;
 }
 
-// <--
-
 export {
 	addChildData,
 	addChildObservation,
 	addUser,
 	children,
-	createDummyData,
+	clear,
+	createDummyCurrent,
+	createDummySummary,
 	fetchChildData,
 	fetchChildrenDataforUser,
 	fetchObservationData,
 	fetchObservationDataForUser,
+	load,
 	removeChildData,
+	save,
 	type ChildData,
 	type ChildObject,
 	type ChildrenList,
diff --git a/src/routes/childLand/[userID]/[childID]/+page.js b/src/routes/childLand/[userID]/[childID]/+page.js
index 67d75a5b..4c3d75da 100644
--- a/src/routes/childLand/[userID]/[childID]/+page.js
+++ b/src/routes/childLand/[userID]/[childID]/+page.js
@@ -3,8 +3,6 @@ import { error } from '@sveltejs/kit';
 
 /** @type {import('./$types').PageLoad}     */
 export async function load({ params }) {
-	// await createDummyData();
-
 	const observationData = await fetchObservationData(params.userID, params.childID);
 	const childData = await fetchChildData(params.userID, params.childID);
 

From af6b21a64bbfd77efd375371c8b30c402cbecfdf Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 30 Aug 2024 10:42:00 +0200
Subject: [PATCH 17/22] remove output,  add fileupload

---
 .../components/ChildrenRegistration.svelte    | 160 +++++++++++-------
 src/lib/components/Childrenpage.svelte        |  12 +-
 .../DataDisplay/GalleryDisplay.svelte         |   2 +-
 src/lib/stores/childrenStore.ts               |  37 ++--
 4 files changed, 115 insertions(+), 96 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index da0d07ae..99b4ceea 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -36,10 +36,11 @@
 			}));
 
 			component = Select;
-		} else if (element.key == 'image') {
-			component = Fileupload;
-		} else if (element.key == 'remarks') {
+		} else if (element.key === 'remarks') {
 			component = Textarea;
+		} else if (element.key === 'image') {
+			component = Fileupload;
+			element.accept = ['.jpg', '.png', '.webp'];
 		} else {
 			component = Input;
 			let type = 'text';
@@ -65,6 +66,8 @@
 			summary: await createDummySummary(),
 			current: await createDummyCurrent()
 		});
+
+		console.log('childData: ', childData);
 	}
 
 	export async function verifyInput() {
@@ -85,15 +88,15 @@
 			// add additional data to the child
 			childData['user'] = userID;
 			childData['id'] = childID;
+			childData['info'] = childData.remarks;
 			nextpage = '/childrengallery';
 			verified = true;
+			showCheckMessage = false;
 		} else {
 			showAlert = true;
-			(missingValues as Boolean[]) = Object.keys(childData)
-				.map((key) => {
-					return childData[key] && required[key] ? false : true;
-				})
-				.filter((v) => v === true);
+			(missingValues as Boolean[]) = Object.keys(childData).map((key) => {
+				return childData[key] && required[key] ? false : true;
+			});
 		}
 	}
 
@@ -121,49 +124,49 @@
 			key: 'bornEarly',
 			required: true
 		},
-		// {
-		// 	label: 'Geschlecht',
-		// 	items: ['männlich', 'weiblich'],
-		// 	placeholder: 'Bitte auswählen',
-		// 	key: 'gender',
-		// 	required: true
-		// },
-		// {
-		// 	label: 'Nationalität',
-		// 	items: ['Deutschland', 'Grossbritannien', 'USA', 'China'],
-		// 	placeholder: 'Bitte auswählen',
-		// 	key: 'nationality',
-		// 	required: true
-		// },
-		// {
-		// 	label: 'Sprache',
-		// 	items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
-		// 	placeholder: 'Bitte auswählen',
-		// 	key: 'language',
-		// 	required: true
-		// },
-		// {
-		// 	label: 'Verhältnis zum Kind',
-		// 	key: 'relationship',
-		// 	items: [
-		// 		'Kind',
-		// 		'Enkelkind',
-		// 		'Neffe/Nichte',
-		// 		'Pflegekind',
-		// 		'Adoptivkind',
-		// 		'Betreuung extern',
-		// 		'Betreuung zu Hause'
-		// 	],
-		// 	placeholder: 'Bitte auswählen',
-		// 	required: true
-		// },
-		// {
-		// 	label: 'Entwicklungsauffälligkeiten',
-		// 	items: ['Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
-		// 	placeholder: 'Bitte auswählen',
-		// 	key: 'developmentalIssues',
-		// 	required: true
-		// },
+		{
+			label: 'Geschlecht',
+			items: ['männlich', 'weiblich'],
+			placeholder: 'Bitte auswählen',
+			key: 'gender',
+			required: true
+		},
+		{
+			label: 'Nationalität',
+			items: ['Deutschland', 'Grossbritannien', 'USA', 'China'],
+			placeholder: 'Bitte auswählen',
+			key: 'nationality',
+			required: true
+		},
+		{
+			label: 'Sprache',
+			items: ['Deutsch', 'Englisch (UK)', 'Englisch (Us)', 'Mandarin', 'Arabisch'],
+			placeholder: 'Bitte auswählen',
+			key: 'language',
+			required: true
+		},
+		{
+			label: 'Verhältnis zum Kind',
+			key: 'relationship',
+			items: [
+				'Kind',
+				'Enkelkind',
+				'Neffe/Nichte',
+				'Pflegekind',
+				'Adoptivkind',
+				'Betreuung extern',
+				'Betreuung zu Hause'
+			],
+			placeholder: 'Bitte auswählen',
+			required: true
+		},
+		{
+			label: 'Entwicklungsauffälligkeiten',
+			items: ['keine', 'Hörprobleme', 'Fehlsichtigkeit', 'Sprachfehler'],
+			placeholder: 'Bitte auswählen',
+			key: 'developmentalIssues',
+			required: true
+		},
 		{
 			label: 'Anmerkungen',
 			placeholder: 'Weitere Bemerkungen',
@@ -199,18 +202,19 @@
 	let childData: ChildData;
 	let verified: Boolean = false;
 	let nextpage: string | null = null;
+	let unsubscribe: Function = children.subscribe((childrenlist) => {
+		save();
+	});
 
 	// rerender page if missing values or showAlert changes
 	$: missingValues = [];
 	$: showAlert = false;
+	$: showCheckMessage = true;
 
 	// use component lifecycle to make sure data is written and read persistently
-	let unsubscribe;
+
 	onMount(async () => {
 		await load();
-		unsubscribe = children.subscribe((childrenlist) => {
-			save();
-		});
 	});
 
 	onDestroy(async () => {
@@ -224,7 +228,7 @@
 	<AlertMessage
 		title="Fehler"
 		message="Bitte füllen Sie mindestens die benötigten Felder (hervorgehoben) aus."
-		lastpage="/childLand/childDataInput"
+		lastpage="/childLand/childDataInput/"
 		infopage="/info"
 		infotitle="Was passiert mit den Daten"
 		onclick={() => {
@@ -234,6 +238,19 @@
 	/>
 {/if}
 
+{#if showCheckMessage}
+	<AlertMessage
+		title="Bevor es weitergeht"
+		message="Bitte überprüfen sie ihre eingaben nochmals genau bevor sie weiter gehen"
+		lastpage="/childLand/childDataInput"
+		infopage="/"
+		infotitle="Was passiert mit den Daten?"
+		onclick={() => {
+			showCheckMessage = false;
+		}}
+	/>
+{/if}
+
 <!-- The actual content -->
 <Card class="container m-1 mx-auto w-full max-w-xl">
 	{#if heading}
@@ -249,14 +266,29 @@
 			{#if element.props.label}
 				<Label class="font-semibold text-gray-700 dark:text-gray-400">{element.props.label}</Label>
 			{/if}
-			<svelte:component
-				this={element.component}
-				class={missingValues[i] && element.props['required'] === true
-					? 'bg-primary-600 text-white dark:bg-primary-600'
-					: ''}
-				bind:value={element.value}
-				{...element.props}
-			/>
+
+			{#if element.props.key === 'image'}
+				<svelte:component
+					this={element.component}
+					class={missingValues[i] && element.props['required'] === true
+						? 'bg-primary-600 text-white dark:bg-primary-600'
+						: ''}
+					{...element.props}
+					on:change={(event) => {
+						console.log('event: ', event.target.files[0]);
+						element.value = event.target.files[0];
+					}}
+				/>
+			{:else}
+				<svelte:component
+					this={element.component}
+					class={missingValues[i] && element.props['required'] === true
+						? 'bg-primary-600 text-white dark:bg-primary-600'
+						: ''}
+					bind:value={element.value}
+					{...element.props}
+				/>
+			{/if}
 		{/each}
 
 		<Button
diff --git a/src/lib/components/Childrenpage.svelte b/src/lib/components/Childrenpage.svelte
index dd6bd50b..3b524fbc 100644
--- a/src/lib/components/Childrenpage.svelte
+++ b/src/lib/components/Childrenpage.svelte
@@ -51,13 +51,7 @@
 <script lang="ts">
 	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
 	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
-	import {
-		addUser,
-		fetchChildrenDataforUser,
-		load,
-		save,
-		type ChildData
-	} from '$lib/stores/childrenStore';
+	import { fetchChildrenDataforUser, load, save, type ChildData } from '$lib/stores/childrenStore';
 	import { Heading } from 'flowbite-svelte';
 	import { onDestroy, onMount } from 'svelte';
 	// create data and
@@ -71,7 +65,8 @@
 		}
 
 		// Update the store with the value from localStorage
-		let rawdata = [];
+		let rawdata: unknown = [];
+
 		try {
 			rawdata = await fetchChildrenDataforUser('dummyUser');
 		} catch (error) {
@@ -83,7 +78,6 @@
 
 	let data: ChildData[] = [];
 	let loading = true;
-	const userID = 'dummyUser';
 
 	// this fetches dummy child data for the dummy user whenever the component is mounted into the dom
 	// it is conceptualized as emulating an API call that would normally fetch this from the server.
diff --git a/src/lib/components/DataDisplay/GalleryDisplay.svelte b/src/lib/components/DataDisplay/GalleryDisplay.svelte
index a72e7571..4966e9fe 100644
--- a/src/lib/components/DataDisplay/GalleryDisplay.svelte
+++ b/src/lib/components/DataDisplay/GalleryDisplay.svelte
@@ -37,7 +37,7 @@
 
 {#if withSearch}
 	<form class="flex gap-2">
-		<Search size="md" placeholder={'Kinder nach Namen durchsuchen'} bind:value={searchTerm} />
+		<Search size="md" placeholder={'Durchsuchen'} bind:value={searchTerm} />
 		<Button class="!p-2.5">
 			<SearchOutline class="h-6 w-6" />
 		</Button>
diff --git a/src/lib/stores/childrenStore.ts b/src/lib/stores/childrenStore.ts
index de8d8288..ca50514f 100644
--- a/src/lib/stores/childrenStore.ts
+++ b/src/lib/stores/childrenStore.ts
@@ -56,8 +56,6 @@ async function clear() {
 
 async function load() {
 	if (browser) {
-		console.log('Loading children list');
-		console.log('childrenlist: ', childrenlist);
 		const stored = localStorage.getItem('children');
 		childrenlist = stored ? JSON.parse(stored) : {};
 	}
@@ -66,14 +64,10 @@ async function load() {
 
 async function save() {
 	if (browser) {
-		console.log('Saving children list');
-		console.log('childrenlist: ', childrenlist);
 		localStorage.setItem('children', JSON.stringify(get(children)));
 	}
 }
 
-// addX and removeX are helper functions and can probably be removed once we have a proper backend
-
 /**
  * Generate a dummy child id code
  * @param childname name of the child
@@ -97,7 +91,7 @@ async function addUser(usertoken: string) {
 			throw new Error(`User token ${usertoken} already exists`);
 		}
 
-		childrenlist[usertoken] = {};
+		childrenlist[usertoken as keyof typeof childrenlist] = {};
 
 		return childrenlist;
 	});
@@ -117,7 +111,7 @@ async function addChildData(usertoken: string, childtoken: string, data: ChildDa
 			throw new Error(`User token ${usertoken} not found`);
 		}
 
-		if (childtoken in childrenlist[usertoken]) {
+		if (childtoken in childrenlist[usertoken as keyof typeof childrenlist]) {
 			throw new Error(`Child token ${childtoken} already exists for user token ${usertoken}`);
 		}
 
@@ -143,11 +137,12 @@ async function addChildObservation(
 			throw new Error(`User token ${usertoken} not found`);
 		}
 
-		if (!(childtoken in childrenlist[usertoken])) {
+		if (!(childtoken in childrenlist[usertoken as keyof typeof childrenlist])) {
 			throw new Error(`Child token ${childtoken} does not exist for user token ${usertoken}`);
 		}
 
-		childrenlist[usertoken][childtoken].observationData = observationData;
+		childrenlist[usertoken as keyof typeof childrenlist][childtoken].observationData =
+			observationData;
 
 		return childrenlist;
 	});
@@ -166,11 +161,11 @@ async function removeChildData(usertoken: string, childtoken: string) {
 			throw new Error(`User token ${usertoken} not found`);
 		}
 
-		if (!(childtoken in childrenlist[usertoken])) {
+		if (!(childtoken in childrenlist[usertoken as keyof typeof childrenlist])) {
 			throw new Error(`Child token ${childtoken} not found for user token ${usertoken}`);
 		}
 
-		delete childrenlist[usertoken][childtoken];
+		delete childrenlist[usertoken as keyof typeof childrenlist][childtoken];
 
 		return childrenlist;
 	});
@@ -190,11 +185,11 @@ async function fetchChildData(usertoken: string, childtoken: string) {
 		throw new Error('No such user in the childrenstore');
 	}
 
-	if (!(childtoken in contentData[usertoken as keyof ChildrenList])) {
+	if (!(childtoken in contentData[usertoken as keyof typeof childrenlist])) {
 		throw new Error('No such child in the childrenstore for user ' + usertoken);
 	}
 
-	return contentData[usertoken as keyof ChildrenList][childtoken].childData;
+	return contentData[usertoken as keyof typeof childrenlist][childtoken].childData;
 }
 
 /**
@@ -211,11 +206,11 @@ async function fetchObservationData(usertoken: string, childtoken: string) {
 		throw new Error('No such user in the childrenstore');
 	}
 
-	if (!(childtoken in contentData[usertoken as keyof ChildrenList])) {
+	if (!(childtoken in contentData[usertoken as keyof typeof contentData])) {
 		throw new Error('No such child in the childrenstore for user ' + usertoken);
 	}
 
-	return contentData[usertoken as keyof ChildrenList][childtoken].observationData;
+	return contentData[usertoken as keyof typeof contentData][childtoken].observationData;
 }
 
 /**
@@ -231,9 +226,9 @@ async function fetchChildrenDataforUser(usertoken: string) {
 	}
 
 	// sort them alphabetically
-	return Object.keys(contentData[usertoken])
+	return Object.keys(contentData[usertoken as keyof typeof contentData])
 		.map((child) => {
-			return contentData[usertoken][child].childData;
+			return contentData[usertoken as keyof typeof contentData][child].childData;
 		})
 		.sort((a, b) => a.name.localeCompare(b.name));
 }
@@ -244,16 +239,14 @@ async function fetchChildrenDataforUser(usertoken: string) {
  * @returns A list of tuples, where the first element is the child identifier and the second element is the observation data of the child
  */
 async function fetchObservationDataForUser(usertoken: string) {
-	console.log('fetching observation data for user', usertoken);
 	const contentData = get(children);
-	console.log(contentData);
 
 	if (!(usertoken in contentData)) {
 		throw new Error('No such user in the childrenstore');
 	}
 
-	return Object.keys(contentData[usertoken]).map((child) => {
-		return [child, contentData[usertoken][child].observationData];
+	return Object.keys(contentData[usertoken as keyof typeof contentData]).map((child) => {
+		return [child, contentData[usertoken as keyof typeof contentData][child].observationData];
 	});
 }
 

From 50d1796eee13657bfbdd8bfadab920daba6cdb50 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 30 Aug 2024 10:55:59 +0200
Subject: [PATCH 18/22] make image input work

---
 src/lib/components/ChildrenRegistration.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 99b4ceea..afac9d81 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -275,8 +275,15 @@
 						: ''}
 					{...element.props}
 					on:change={(event) => {
-						console.log('event: ', event.target.files[0]);
-						element.value = event.target.files[0];
+						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}

From 257df02a3dea639433695dd6e3391a8b83e5b40e Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 30 Aug 2024 13:30:50 +0200
Subject: [PATCH 19/22] add dynamic rerouting

---
 .../components/ChildrenRegistration.svelte    | 41 +++++++++++--------
 src/lib/components/Frontpage.svelte           |  3 ++
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index afac9d81..d9e30cc5 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
 
 	import {
@@ -58,19 +59,24 @@
 	}
 	// event handlers and verification function
 	export async function submitData() {
-		const childID = generateChildID(childData.name);
-		await addChildData(userID, childID, childData);
-		await addChildObservation(userID, childID, {
-			user: userID,
-			id: childID,
-			summary: await createDummySummary(),
-			current: await createDummyCurrent()
-		});
+		verified = await verifyInput();
+		if (verified) {
+			const childID = generateChildID(childData.name);
+			await addChildData(userID, childID, childData);
+			await addChildObservation(userID, childID, {
+				user: userID,
+				id: childID,
+				summary: await createDummySummary(),
+				current: await createDummyCurrent()
+			});
 
-		console.log('childData: ', childData);
+			await goto(nextpage as string, false);
+		} else {
+			showAlert = true;
+		}
 	}
 
-	export async function verifyInput() {
+	export async function verifyInput(): Promise<Boolean> {
 		let required: { [key: string]: Boolean } = {};
 		childData = data.reduce((dict: any, curr) => {
 			dict[curr.props.key] = curr.value;
@@ -78,6 +84,8 @@
 			return dict;
 		}, {});
 
+		let success = false;
+
 		const test = Object.entries(childData).every((kv) =>
 			required[kv[0]] ? kv[1] !== undefined && kv[1] !== null : true
 		);
@@ -89,15 +97,15 @@
 			childData['user'] = userID;
 			childData['id'] = childID;
 			childData['info'] = childData.remarks;
-			nextpage = '/childrengallery';
-			verified = true;
+			success = true;
 			showCheckMessage = false;
 		} else {
-			showAlert = true;
 			(missingValues as Boolean[]) = Object.keys(childData).map((key) => {
 				return childData[key] && required[key] ? false : true;
 			});
 		}
+
+		return success;
 	}
 
 	// data to display -> will later be fetched from the server
@@ -201,7 +209,7 @@
 	let data = rawData.map(processData);
 	let childData: ChildData;
 	let verified: Boolean = false;
-	let nextpage: string | null = null;
+	let nextpage: string = '/childrengallery';
 	let unsubscribe: Function = children.subscribe((childrenlist) => {
 		save();
 	});
@@ -300,9 +308,8 @@
 
 		<Button
 			class="w-full rounded-lg bg-primary-700 px-4 py-2 font-semibold text-white hover:bg-primary-800"
-			on:click={verified ? submitData : verifyInput}
-			href={nextpage}
-			>{verified ? 'Kind hinzufügen' : 'Klicken um Daten zu bestätigen'}
+			on:click={submitData}
+			>{'Kind hinzufügen'}
 		</Button>
 	</form>
 </Card>
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
index ddb9e208..ea002606 100644
--- a/src/lib/components/Frontpage.svelte
+++ b/src/lib/components/Frontpage.svelte
@@ -69,16 +69,19 @@
 	const props = {};
 
 	onMount(async () => {
+		// delete old data first, then add new user and save it to disk
 		try {
 			await clear();
 		} catch (error) {
 			console.log('error in frontpage: ', error);
 		}
+
 		try {
 			await addUser('dummyUser');
 		} catch (error) {
 			console.log('error in frontpage: ', error);
 		}
+
 		try {
 			await save();
 		} catch (error) {

From 1cb7f156619547587cd0a1e9e56de079ad775fc5 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 30 Aug 2024 15:59:46 +0200
Subject: [PATCH 20/22] add debug output

---
 .../components/ChildrenRegistration.svelte    | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index d9e30cc5..ac14af40 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -59,7 +59,7 @@
 	}
 	// event handlers and verification function
 	export async function submitData() {
-		verified = await verifyInput();
+		const verified = await verifyInput();
 		if (verified) {
 			const childID = generateChildID(childData.name);
 			await addChildData(userID, childID, childData);
@@ -69,23 +69,25 @@
 				summary: await createDummySummary(),
 				current: await createDummyCurrent()
 			});
-
-			await goto(nextpage as string, false);
+			await goto(nextpage as string);
 		} else {
 			showAlert = true;
+			const firstError = missingValues.findIndex((value) => value === true);
+			if (missingValues[firstError] === true) {
+				refs[firstError].focus();
+			}
 		}
 	}
 
 	export async function verifyInput(): Promise<Boolean> {
 		let required: { [key: string]: Boolean } = {};
+
 		childData = data.reduce((dict: any, curr) => {
 			dict[curr.props.key] = curr.value;
 			required[curr.props.key] = curr.props.required;
 			return dict;
 		}, {});
 
-		let success = false;
-
 		const test = Object.entries(childData).every((kv) =>
 			required[kv[0]] ? kv[1] !== undefined && kv[1] !== null : true
 		);
@@ -97,15 +99,14 @@
 			childData['user'] = userID;
 			childData['id'] = childID;
 			childData['info'] = childData.remarks;
-			success = true;
 			showCheckMessage = false;
+			return true;
 		} else {
 			(missingValues as Boolean[]) = Object.keys(childData).map((key) => {
 				return childData[key] && required[key] ? false : true;
 			});
+			return false;
 		}
-
-		return success;
 	}
 
 	// data to display -> will later be fetched from the server
@@ -206,9 +207,9 @@
 	}
 
 	// data
+	let refs: unknown[] = [];
 	let data = rawData.map(processData);
 	let childData: ChildData;
-	let verified: Boolean = false;
 	let nextpage: string = '/childrengallery';
 	let unsubscribe: Function = children.subscribe((childrenlist) => {
 		save();
@@ -229,8 +230,20 @@
 		await save();
 		unsubscribe();
 	});
+
+	console.log(
+		' value: ',
+		data.map((d) => d.value)
+	);
 </script>
 
+{#each data as element, i}
+	<p>index: {i}</p>
+	<p>missing: {missingValues[i]}</p>
+	<p>name: {element.props.label}</p>
+	<p>value: {element.value}</p>
+{/each}
+
 <!-- Show big alert message when something is missing -->
 {#if showAlert}
 	<AlertMessage
@@ -274,10 +287,12 @@
 			{#if element.props.label}
 				<Label class="font-semibold text-gray-700 dark:text-gray-400">{element.props.label}</Label>
 			{/if}
-
+			Data value: {element.value == '' ? 'empty' : element.value}
+			Data type: {typeof element.value}
 			{#if element.props.key === 'image'}
 				<svelte:component
 					this={element.component}
+					bind:this={refs[i]}
 					class={missingValues[i] && element.props['required'] === true
 						? 'bg-primary-600 text-white dark:bg-primary-600'
 						: ''}

From b6abcb6646a02671cf60682b4738ca3f45699aa9 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 30 Aug 2024 17:05:00 +0200
Subject: [PATCH 21/22] add additionalcheck

---
 .../components/ChildrenRegistration.svelte    | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index ac14af40..7b54a80b 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -72,10 +72,6 @@
 			await goto(nextpage as string);
 		} else {
 			showAlert = true;
-			const firstError = missingValues.findIndex((value) => value === true);
-			if (missingValues[firstError] === true) {
-				refs[firstError].focus();
-			}
 		}
 	}
 
@@ -89,7 +85,7 @@
 		}, {});
 
 		const test = Object.entries(childData).every((kv) =>
-			required[kv[0]] ? kv[1] !== undefined && kv[1] !== null : true
+			required[kv[0]] ? kv[1] !== undefined && kv[1] !== null && kv[1] !== '' : true
 		);
 
 		if (test) {
@@ -230,20 +226,8 @@
 		await save();
 		unsubscribe();
 	});
-
-	console.log(
-		' value: ',
-		data.map((d) => d.value)
-	);
 </script>
 
-{#each data as element, i}
-	<p>index: {i}</p>
-	<p>missing: {missingValues[i]}</p>
-	<p>name: {element.props.label}</p>
-	<p>value: {element.value}</p>
-{/each}
-
 <!-- Show big alert message when something is missing -->
 {#if showAlert}
 	<AlertMessage
@@ -315,6 +299,13 @@
 					class={missingValues[i] && element.props['required'] === true
 						? 'bg-primary-600 text-white dark:bg-primary-600'
 						: ''}
+					on:change={(event) => {
+						if (missingValues[i]) {
+							if (element.value !== undefined && element.value !== null && element.value !== '') {
+								missingValues[i] = false;
+							}
+						}
+					}}
 					bind:value={element.value}
 					{...element.props}
 				/>

From b2610b4d584ad68ee4bcf42713384b8410e0d339 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Fri, 30 Aug 2024 18:18:27 +0200
Subject: [PATCH 22/22] remove some debug output

---
 src/lib/components/ChildrenRegistration.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/ChildrenRegistration.svelte b/src/lib/components/ChildrenRegistration.svelte
index 7b54a80b..59a28953 100644
--- a/src/lib/components/ChildrenRegistration.svelte
+++ b/src/lib/components/ChildrenRegistration.svelte
@@ -271,8 +271,7 @@
 			{#if element.props.label}
 				<Label class="font-semibold text-gray-700 dark:text-gray-400">{element.props.label}</Label>
 			{/if}
-			Data value: {element.value == '' ? 'empty' : element.value}
-			Data type: {typeof element.value}
+
 			{#if element.props.key === 'image'}
 				<svelte:component
 					this={element.component}