Create abstract gallery display

src/lib/components/AbstractContent.svelte

@@ -13,6 +13,8 @@
 	export let lastpage = '/';
 	export let nextpage = '/';
 	export let infopage = '/';
+	export let showNavIcons = true;
+	export let iconProps = {};
 </script>
 
 <!-- Top element: basic navigation-->
@@ -27,25 +29,32 @@
 		class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800"
 		classInner="grid-cols-3"
 	>
-		<BottomNavElement
-			href={lastpage}
-			description={'Zurück'}
-			Icon={CaretLeftSolid}
-			tooltip={'Zur letzten Seite'}
-		/>
+		{#if showNavIcons}
+			<BottomNavElement
+				href={lastpage}
+				description={'Zurück'}
+				Icon={CaretLeftSolid}
+				tooltip={'Zur letzten Seite'}
+				componentProps={iconProps}
+			/>
+		{/if}
 
 		<BottomNavElement
 			href={infopage}
 			description={'Hilfe'}
 			Icon={LightbulbSolid}
 			tooltip={'Zusätzliche Informationen'}
+			componentProps={iconProps}
 		/>
 
-		<BottomNavElement
-			href={nextpage}
-			description={'Weiter'}
-			Icon={CaretRightSolid}
-			tooltip={'Zur nächsten Seite'}
-		/>
+		{#if showNavIcons}
+			<BottomNavElement
+				href={nextpage}
+				description={'Weiter'}
+				Icon={CaretRightSolid}
+				tooltip={'Zur nächsten Seite'}
+				componentProps={iconProps}
+			/>
+		{/if}
 	</BottomNav>
 {/if}

src/lib/components/Childrenpage.svelte

@@ -0,0 +1,112 @@
+<script context="module">
+	export function convertData(rawdata) {
+		let data = rawdata.map((item) => {
+			return {
+				header: item.name,
+				summary: item.info,
+				image: item.image,
+				href: item.href ? item.href : '/'
+			};
+		});
+
+		// put in new element at the front which adds new child
+		data.unshift({
+			header: 'Neu',
+			summary: 'Ein neues Kind anmelden',
+			href: '/'
+		});
+		return data;
+	}
+
+	// dynamically create the styles for individual gallery tiles based on the data.
+	// The 'Neu' element needs to be styled differently in particular
+	export function createStyle(data) {
+		return data.map((item) => ({
+			card:
+				item.header === 'Neu'
+					? {
+							class:
+								'm-2 max-w-prose bg-primary-700 dark:bg-primary-600 hover:bg-primary-800 dark:hover:bg-primary-700',
+							horizontal: false
+						}
+					: { horizontal: item.image ? true : false },
+			header:
+				item.header == 'Neu'
+					? {
+							class: 'mb-2 text-2xl font-bold tracking-tight text-white dark:text-white'
+						}
+					: null,
+			summary:
+				item.header == 'Neu'
+					? {
+							class: 'mb-3 flex font-normal leading-tight text-white dark:text-white'
+						}
+					: null,
+			button: null
+		}));
+	}
+</script>
+
+<script>
+	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
+	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
+	import { Heading } from 'flowbite-svelte';
+	import AbstractContent from './AbstractContent.svelte';
+
+	const rawdata = [
+		{
+			name: 'Anna',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			image: 'child_avatar.png',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'Ben',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'C',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback',
+			image: 'child_avatar.png'
+		},
+		{
+			name: 'Dora',
+			image: '/children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'E',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		},
+		{
+			name: 'F',
+			image: 'children.png',
+			info: 'A child that is making a mess and is doing good. Click to view more.',
+			href: '/surveyfeedback'
+		}
+	];
+
+	const data = convertData(rawdata);
+</script>
+
+<AbstractContent showNavIcons={false} iconProps={{ class: 'w-10 h-10' }}>
+	<Heading tag="h1" class="mb-2" color="text-gray-700 dark:text-gray-400">Übersicht</Heading>
+
+	<div class="cols-1 grid gap-y-8">
+		<p class="text-lg text-gray-700 dark:text-gray-400">
+			Wählen sie ein Kind zur Beobachtung aus oder legen melden sie ein neues Kind an.
+		</p>
+		<GalleryDisplay
+			{data}
+			itemComponent={CardDisplay}
+			searchableCol={'header'}
+			componentProps={createStyle(data)}
+		/>
+	</div>
+</AbstractContent>

src/lib/components/DataDisplay/CardDisplay.svelte

@@ -1,20 +1,50 @@
 <script>
 	import { Button, Card } from 'flowbite-svelte';
 	import { ArrowRightOutline } from 'flowbite-svelte-icons';
-	export let header = 'header';
-	export let summary = 'summary';
-	export let button = 'button';
-	export let link = '/';
+	export let data = {
+		header: undefined,
+		summary: undefined,
+		button: undefined,
+		href: undefined,
+		image: undefined
+	};
+
+	export let styleProps = {
+		card: {},
+		header: {},
+		summary: {},
+		button: {}
+	};
 </script>
 
-<Card class="m-4 w-full p-6">
-	<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-		{header}
-	</h5>
-	<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
-		{summary}
-	</p>
-	<Button href={link} class="w-fit"
-		>{button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
-	>
+<Card
+	img={data.image}
+	imgClass="max-md:hidden object-scale-down"
+	href={data.button ? null : data.href}
+	class={data.button
+		? 'm-2 max-w-prose'
+		: 'hover:transition-color m-2 max-w-prose cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-600'}
+	{...styleProps.card}
+>
+	{#if data.header}
+		<h5
+			class="mb-2 text-2xl font-bold tracking-tight text-gray-700 dark:text-white"
+			{...styleProps.header}
+		>
+			{data.header}
+		</h5>
+	{/if}
+	{#if data.summary}
+		<p
+			class="mb-3 flex font-normal leading-tight text-gray-700 dark:text-gray-400"
+			{...styleProps.summary}
+		>
+			{data.summary}
+		</p>
+	{/if}
+	{#if data.button}
+		<Button href={data.href} class="w-fit" {...styleProps.button}
+			>{data.button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+		>
+	{/if}
 </Card>

src/lib/components/DataDisplay/GalleryDisplay.svelte

@@ -0,0 +1,51 @@
+<script context="module">
+	export function filterDataByColumn(data, col, searchTerm) {
+		if (searchTerm === '') {
+			return data;
+		} else {
+			return data.filter((item) => item[col].toLowerCase().includes(searchTerm.toLowerCase()));
+		}
+	}
+</script>
+
+<script>
+	import { Button, Gallery, Heading, Search } from 'flowbite-svelte';
+	import { SearchOutline } from 'flowbite-svelte-icons';
+
+	export let data;
+	export let header = null;
+	export let itemComponent;
+	export let withSearch = true;
+	export let searchableCol = '';
+	export let componentProps;
+
+	// dynamic statements
+	let searchTerm = '';
+	$: filteredItems = filterDataByColumn(data, searchableCol, searchTerm);
+</script>
+
+{#if header !== null}
+	<Heading
+		tag="h1"
+		class="mb-2  tracking-tight "
+		customSize="text-2xl"
+		color="text-gray-900 dark:text-white"
+	>
+		{header}
+	</Heading>
+{/if}
+
+{#if withSearch}
+	<form class="flex gap-2">
+		<Search size="md" placeholder={'Search for child'} bind:value={searchTerm} />
+		<Button class="!p-2.5">
+			<SearchOutline class="h-6 w-6" />
+		</Button>
+	</form>
+{/if}
+
+<Gallery class="grid-cols-1 justify-center gap-8 md:grid-cols-2">
+	{#each filteredItems as item, index}
+		<svelte:component this={itemComponent} data={item} styleProps={componentProps[index]} />
+	{/each}
+</Gallery>

src/lib/components/Frontpage.svelte

@@ -1,75 +1,74 @@
 <script>
-	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
-	import { Gallery } from 'flowbite-svelte';
+	// @ts-nocheck
+
+	import CardDisplay from './DataDisplay/CardDisplay.svelte';
+	import GalleryDisplay from './DataDisplay/GalleryDisplay.svelte';
 	export let getStarted = '/firstdropdown';
 
 	export let items = [
 		{
 			header: 'Was ist Mondey?',
 			summary:
 				'Mondey ist ein wissentschaftlich geprüftes Programm zure Dokumentation der Entwicklung von Kindern bis 6 Jahren.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wozu ist Mondey gut?',
 			summary:
 				'Anhand ihrer Bewertungen der Fähigkeiten des Kindes erhalten sie Feedback zum Entwicklungsstand des Kindes und können so frühzeitig Fördermaßnahmen einleiten. Dies folgt einem übersichtlichen Ampelsystem.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Was umfasst Mondey?',
 			summary:
 				'Mondey umfasst unterschiedliche Entwicklungsbereiche wie von Kindern im Alter von 0 bis 6 Jahren. Dazu gehören unter anderem Grob-und feinmotorik, Wahrnehmung, Denkne, Sprache und Soziale Beziehungen.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wie funktioniert Mondey?',
 			summary:
 				'Sie bewerten wie gut das Kind bestimmte Alltagshandlungen durchführen kann mit Hilfe einer Liste von Fragen.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'Wo fange ich an?',
 			summary: 'Um zu beginnen, müssen sie sich registrieren und ein Profil für ihr Kind anlegen.',
-			link: getStarted,
-			buttonName: 'Los geht´s'
+			href: getStarted,
+			button: 'Los geht´s'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		},
 		{
 			header: 'dummy?',
 			summary:
 				'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit repellendus distinctio facilis! Voluptas corrupti recusandae sapiente doloribus voluptatem fugiat ducimus.',
-			link: '/info',
-			buttonName: 'Mehr Info'
+			href: '/info',
+			button: 'Mehr Info'
 		}
 	];
+
+	const props = {};
 </script>
 
-<!-- This is a dummy landing page that is only there to check that the AbstractComponent works as it should-->
-<Gallery class="grid-cols-1 gap-y-12 md:grid-cols-2">
-	{#each items as item}
-		<CardDisplay
-			header={item.header}
-			summary={item.summary}
-			link={item.link}
-			button={item.buttonName}
-		/>
-	{/each}
-</Gallery>
+<GalleryDisplay
+	withSearch={false}
+	itemComponent={CardDisplay}
+	data={items}
+	componentProps={props}
+/>