-
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 branch 'main' into add-stores-for-data
- Loading branch information
Showing
27 changed files
with
811 additions
and
151 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,117 @@ | ||
| <script> | ||
| import AbstractDropdownItem from '$lib/components/DataInput/AbstractDropdownItem.svelte'; | ||
| import AbstractRegistrationForm from '$lib/components/DataInput/AbstractRegistrationForm.svelte'; | ||
| import { Input, Textarea } from 'flowbite-svelte'; | ||
| const 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: [ | ||
| 'Kind', | ||
| 'Enkelkind', | ||
| 'Neffe/Nichte', | ||
| 'Pflegekind', | ||
| '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 | ||
| } | ||
| } | ||
| ]; | ||
| const heading = 'Neues Kind registrieren'; | ||
| const buttons = [ | ||
| { | ||
| label: 'Weiter', | ||
| href: '/' | ||
| } | ||
| ]; | ||
| </script> | ||
|
|
||
| <div class="container m-1 mx-auto w-full max-w-md"> | ||
| <AbstractRegistrationForm {heading} props={data} {buttons} /> | ||
| </div> |
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: '/childLand/childDataInput' | ||
| }); | ||
| 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> |
Oops, something went wrong.