Merge pull request #12 from ssciwr/add-abstract-dropdown-page

Add abstract dropdown page
ssciwr · Aug 21, 2024 · fff3a6e · fff3a6e
2 parents 62f594a + ac33131
commit fff3a6e
Show file tree

Hide file tree

Showing 14 changed files with 180 additions and 20 deletions.
diff --git a/src/lib/components/AbstractContent.svelte b/src/lib/components/AbstractContent.svelte
@@ -26,12 +26,12 @@
 	export let showBottomNavbar = true;
 
 	// variables for communication upon hitting the page
-	// FIXME: these are placeholders and must later be changed using contexts or other better mechanisms for inter component comunication
-	export let lastpage = '/';
-	export let nextpage = '/';
-	export let infopage = '/';
-
 	export let userName = 'Registrieren';
+
+	// FIXME: these are placeholders and must later be changed using contexts or other better mechanisms for inter component comunication
+	export let lastPage = '/';
+	export let nextPage = '/';
+	export let infoPage = '/';
 </script>
 
 <!-- Top element: basic navigation-->
@@ -79,29 +79,29 @@
 		classInner="grid-cols-3"
 	>
 		<BottomNavItem
-			href={lastpage}
 			btnName="Zurück"
 			btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
+			href={lastPage}
 		>
 			<CaretLeftSolid
 				class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
 			/>
 			<Tooltip arrow={false}>Zur letzten Seite</Tooltip>
 		</BottomNavItem>
 		<BottomNavItem
-			href={infopage}
 			btnName="Hilfe"
 			btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
+			href={infoPage}
 		>
 			<LightbulbSolid
 				class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"
 			/>
 			<Tooltip arrow={false}>Hilfe</Tooltip>
 		</BottomNavItem>
 		<BottomNavItem
-			href={nextpage}
 			btnName="Weiter"
 			btnClass="text-gray-500 dark:text-gray-400 hover:text-primary-800 dark:hover:text-primary-500 group-hover:text-primary-800 dark:group-hover:text-primary-500"
+			href={nextPage}
 		>
 			<CaretRightSolid
 				class="mb-1 h-8 w-8 text-gray-500 hover:text-primary-800 group-hover:text-primary-800 dark:text-gray-400 dark:hover:text-primary-500 dark:group-hover:text-primary-500"

diff --git a/src/lib/components/DataInput/AbstractDataInput.svelte b/src/lib/components/DataInput/AbstractDataInput.svelte
@@ -0,0 +1,17 @@
+<script>
+	// @ts-nocheck
+	/**
+	 * @type {any[]}
+	 */
+	// @ts-ignore
+	export let data;
+	export let heading;
+	export let itemComponent; // = AbstractDropdownItem;
+</script>
+
+<div class="items-center space-x-4 rtl:space-x-reverse">
+	<h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-gray-400">{heading}</h1>
+	{#each data as data_element}
+		<svelte:component this={itemComponent} data={data_element} />
+	{/each}
+</div>
diff --git a/src/lib/components/DataInput/AbstractDropdownItem.svelte b/src/lib/components/DataInput/AbstractDropdownItem.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { Label, Select, Tooltip } from 'flowbite-svelte';
+	export let data;
+
+	// have the data processing here to coerce the input into the format that the component expects
+	// @ts-ignore
+	data.items = data.items.map((item) => ({ name: item, value: item }));
+</script>
+
+<div>
+	<div class="flex items-center space-x-2">
+		<Label for="select-lg" class="mb-2 text-lg text-gray-700 dark:text-gray-400">{data.name}</Label>
+		<Tooltip>{data.about}</Tooltip>
+	</div>
+	<Select
+		size="lg"
+		class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400"
+		items={data.items}
+		bind:value={data.selected}
+	/>
+</div>
diff --git a/src/lib/components/Frontpage.svelte b/src/lib/components/Frontpage.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { Button, Card, Gallery } from 'flowbite-svelte';
 	import { ArrowRightOutline } from 'flowbite-svelte-icons';
+	export let getStarted = '/';
+	console.log('get started: ', getStarted);
 </script>
 
 <!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
@@ -13,7 +15,9 @@
 			<i>Mondey</i> ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von
 			Kindern bis 6 Jahren.
 		</p>
-		<Button class="w-fit">Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button href="/info" class="w-fit"
+			>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
 
 	<Card class="m-4 w-full p-6">
@@ -25,7 +29,9 @@
 			Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt
 			einem übersichtlichen Ampelsystem.
 		</p>
-		<Button class="w-fit">Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button href="/info" class="w-fit"
+			>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
 
 	<Card class="m-4 w-full p-6">
@@ -37,9 +43,10 @@
 			6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale
 			Beziehungen.
 		</p>
-		<Button class="w-fit">Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button href="/info" class="w-fit"
+			>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
-
 	<Card class="m-4 w-full p-6">
 		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
 			Wie funktioniert Mondey?
@@ -48,7 +55,9 @@
 			Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer
 			Liste von Fragen.
 		</p>
-		<Button class="w-fit">Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button href="/info" class="w-fit"
+			>Mehr Info <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
 
 	<Card class="m-4 w-full p-6">
@@ -58,7 +67,9 @@
 		<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
 			Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.
 		</p>
-		<Button class="w-fit">Los geht's <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button class="w-fit" href={getStarted}
+			>Los geht's <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
 
 	<Card class="m-4 w-full p-6">
@@ -69,7 +80,9 @@
 				facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
 			</i>
 		</p>
-		<Button class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button href="/info" class="w-fit"
+			>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
 
 	<Card class="m-4 w-full p-6">
@@ -80,7 +93,9 @@
 				facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
 			</i>
 		</p>
-		<Button class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button href="/info" class="w-fit"
+			>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
 
 	<Card class="m-4 w-full p-6">
@@ -91,7 +106,9 @@
 				facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
 			</i>
 		</p>
-		<Button class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button href="/info" class="w-fit"
+			>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
 
 	<Card class="m-4 w-full p-6">
@@ -102,6 +119,8 @@
 				facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.
 			</i>
 		</p>
-		<Button class="w-fit">dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button>
+		<Button href="/info" class="w-fit"
+			>dummy <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
 	</Card>
 </Gallery>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,6 +3,6 @@
 	import Frontpage from '$lib/components/Frontpage.svelte';
 </script>
 
-<AbstractContent showBottomNavbar={true}>
-	<Frontpage />
+<AbstractContent showBottomNavbar={false}>
+	<Frontpage getStarted={'/firstdropdown'} />
 </AbstractContent>
diff --git a/src/routes/firstdropdown/+layout.svelte b/src/routes/firstdropdown/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+	import '../../app.css';
+</script>
+
+<slot></slot>
diff --git a/src/routes/firstdropdown/+layout.ts b/src/routes/firstdropdown/+layout.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/firstdropdown/+page.svelte b/src/routes/firstdropdown/+page.svelte
@@ -0,0 +1,36 @@
+<script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
+
+	const letteroptions = ['a', 'b', 'c', 'd'];
+	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
+
+	const data_to_display = [
+		{
+			name: 'standing up',
+			items: letteroptions,
+			about:
+				'How well can the child stand up from sitting or crawling around and how readily is it able to do so',
+			selected: false
+		},
+		{
+			name: 'gripping a pen the right way',
+			items: defaultOptions,
+			about: 'How well can the child hold a pen or pencil and how coordinated can it use it',
+			selected: false
+		},
+		{
+			name: 'talking in full sentences',
+			items: letteroptions,
+			about: 'How well articulated is the child in its speech and how well can it express itself',
+			selected: false
+		}
+	];
+
+	const heading = 'some initial dummy dropdown page';
+</script>
+
+<AbstractContent showBottomNavbar={true} lastPage="/" nextPage="/nextdropdown" infoPage="/info">
+	<AbstractDataInput data={data_to_display} {heading} itemComponent={AbstractDropdownItem} />
+</AbstractContent>
diff --git a/src/routes/info/+layout.svelte b/src/routes/info/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+	import '../../app.css';
+</script>
+
+<slot></slot>
diff --git a/src/routes/info/+layout.ts b/src/routes/info/+layout.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/info/+page.svelte b/src/routes/info/+page.svelte
@@ -0,0 +1,7 @@
+<script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+</script>
+
+<AbstractContent showBottomNavbar={true} lastPage="/" nextPage="/" infoPage="/info">
+	<h1>Info page</h1>
+</AbstractContent>
diff --git a/src/routes/nextdropdown/+layout.svelte b/src/routes/nextdropdown/+layout.svelte
@@ -0,0 +1,5 @@
+<script>
+	import '../../app.css';
+</script>
+
+<slot></slot>
diff --git a/src/routes/nextdropdown/+layout.ts b/src/routes/nextdropdown/+layout.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/src/routes/nextdropdown/+page.svelte b/src/routes/nextdropdown/+page.svelte
@@ -0,0 +1,42 @@
+<script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import AbstractDataInput from '$lib/components/DataInput/AbstractDataInput.svelte';
+	import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte';
+
+	const defaultOptions = ['gar nicht', 'ansatzweise', 'weitgehend', 'zuverlässig'];
+
+	const dropdownData = [
+		{
+			name: 'standing up',
+			items: defaultOptions,
+			about:
+				'How well can the child stand up from sitting or crawling around and how readily is it able to do so',
+			selected: false
+		},
+		{
+			name: 'making a mess',
+			items: defaultOptions,
+			about:
+				'This describes how efficiently the child can distribute toys in every single corner of every single room in the house',
+			selected: false
+		},
+		{
+			name: 'gripping a pen the right way',
+			items: defaultOptions,
+			about: 'How well can the child hold a pen or pencil and how coordinated can it use it',
+			selected: false
+		},
+		{
+			name: 'talking in full sentences',
+			items: defaultOptions,
+			about: 'How well articulated is the child in its speech and how well can it express itself',
+			selected: false
+		}
+	];
+
+	const heading = 'the second data selection page';
+</script>
+
+<AbstractContent showBottomNavbar={true} lastPage="/firstdropdown" nextPage="/" infoPage="/info">
+	<AbstractDataInput data={dropdownData} {heading} itemComponent={AbstractDropdownItem} />
+</AbstractContent>