-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #20 from ssciwr/create-abstract-gallery-display
Create abstract gallery display
- Loading branch information
Showing
11 changed files
with
267 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} | ||
/> |
Oops, something went wrong.