Merge branch 'create-abstract-table-display' into create-abstract-gal…

…lery-display

src/lib/components/DataDisplay/CardDisplay.svelte

@@ -2,19 +2,26 @@
 	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 summary;
+	export let button;
 	export let link = '/';
+	export let image;
 </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>
+<div class="space-y-4">
+	<Card class="m-4 w-full p-6" img={image || null} size="md" horizontal>
+		<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+			{header}
+		</h5>
+		{#if summary}
+			<p class="mb-3 font-normal leading-tight text-gray-700 dark:text-gray-400">
+				{summary}
+			</p>
+		{/if}
+		{#if button}
+			<Button href={link} class="w-fit"
+				>{button} <ArrowRightOutline class="ms-2 h-6 w-6 text-white" /></Button
+			>
+		{/if}
+	</Card>
+</div>

src/lib/components/DataDisplay/GalleryDisplay.svelte

@@ -0,0 +1,40 @@
+<script context="module">
+	// this will go into the backend at the end?
+
+	export function splitDataIntoPages(datasize, pagesize) {
+		let start = 0;
+		let stop = pagesize;
+		let indices = [];
+		while (stop < datasize - pagesize) {
+			stop = start + pagesize;
+			indices.push([start, stop]);
+			start = stop;
+		}
+
+		// add last element
+		indices.push([start, datasize]);
+		return indices;
+	}
+</script>
+
+<script>
+	import CardDisplay from '$lib/components/DataDisplay/CardDisplay.svelte';
+	import { Gallery } from 'flowbite-svelte';
+	export let data;
+	export let n = 3;
+	export let m = 2;
+	export let header = 'Currently monitored children';
+	let pageindices = splitDataIntoPages(Object.keys(data).length, n * m);
+</script>
+
+<h1 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{header}</h1>
+<Gallery class="grid-cols-2 gap-4 md:grid-cols-3">
+	{#each data.slice(pageindices[0][0], pageindices[0][1]) as item}
+		<CardDisplay
+			header={item.name}
+			link={item.link}
+			image="/children.png"
+			button={'Current surveys'}
+		/>
+	{/each}
+</Gallery>

src/routes/+page.svelte

@@ -4,5 +4,5 @@
 </script>
 
 <AbstractContent showBottomNavbar={false}>
-	<Frontpage getStarted={'/firstdropdown'} />
+	<Frontpage getStarted={'/childrengallery'} />
 </AbstractContent>

src/routes/childrengallery/+page.svelte

@@ -0,0 +1,75 @@
+<script>
+	import AbstractContent from '$lib/components/AbstractContent.svelte';
+	import GalleryDisplay from '$lib/components/DataDisplay/GalleryDisplay.svelte';
+	const data = [
+		{
+			name: 'A',
+			age: 2,
+			surveys: {
+				name: 'making a mess',
+				status: 'good'
+			},
+			tag: 'cohort1',
+			image: '/lib/assets/children.png'
+		},
+		{
+			name: 'B',
+			age: 2,
+			surveys: {
+				name: 'making a mess',
+				status: 'good'
+			},
+			tag: 'cohort1',
+			image: '/lib/assets/children.png'
+		},
+		{
+			name: 'C',
+			age: 4,
+			surveys: {
+				name: 'making a mess',
+				status: 'good'
+			},
+			tag: 'cohort2',
+			image: '/lib/assets/children.png'
+		},
+		{
+			name: 'D',
+			age: 1,
+			surveys: {
+				name: 'making a mess',
+				status: 'good'
+			},
+			tag: 'cohort1',
+			image: '/lib/assets/children.png'
+		},
+		{
+			name: 'E',
+			age: 2,
+			surveys: {
+				name: 'making a mess',
+				status: 'good'
+			},
+			tag: 'cohort1',
+			image: '/lib/assets/children.png'
+		},
+		{
+			name: 'F',
+			age: 4,
+			surveys: {
+				name: 'making a mess',
+				status: 'good'
+			},
+			tag: 'cohort2',
+			image: '/lib/assets/children.png'
+		}
+	];
+</script>
+
+<AbstractContent
+	showBottomNavbar={false}
+	lastpage={'/'}
+	nextpage={'/firstdropdown'}
+	infopage="/info"
+>
+	<GalleryDisplay {data} />
+</AbstractContent>