guardians contact info
This commit is contained in:
parent
77f19ced0e
commit
33133dfa0f
|
@ -9,7 +9,6 @@ import * as eva from '@eva-design/eva';
|
||||||
import customization from './design/customization.json';
|
import customization from './design/customization.json';
|
||||||
import children from './output.json';
|
import children from './output.json';
|
||||||
|
|
||||||
import {ChildList} from './components/childList.component'
|
|
||||||
import {AppNavigator} from './components/tabs.component'
|
import {AppNavigator} from './components/tabs.component'
|
||||||
|
|
||||||
export default () => (
|
export default () => (
|
||||||
|
|
|
@ -1,11 +1,19 @@
|
||||||
# `app`
|
# `app`
|
||||||
|
|
||||||
> TODO: description
|
This is a demo app for using the API
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```
|
Clone the repo and make sure you have react-native installed:
|
||||||
const app = require('app');
|
|
||||||
|
|
||||||
// TODO: DEMONSTRATE API
|
npm i -g react-native
|
||||||
```
|
|
||||||
|
To run the app in a simulator:
|
||||||
|
|
||||||
|
react-native run-ios
|
||||||
|
|
||||||
|
## TODO:
|
||||||
|
[ ] Välj barn
|
||||||
|
[ ] Login
|
||||||
|
[ ] Anmäl frånvaro
|
||||||
|
[ ] Settings
|
||||||
|
|
|
@ -1,54 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import { StyleSheet } from 'react-native';
|
|
||||||
import { Layout, Text, ViewPager, Button, Icon } from '@ui-kitten/components';
|
|
||||||
import { NewsList } from './newsList.component'
|
|
||||||
import { Calendar } from './calendar.component'
|
|
||||||
import { ChildTopNavigation } from './childTopNavigation.component';
|
|
||||||
import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';
|
|
||||||
|
|
||||||
const SelectCategory = ({child}) => {
|
|
||||||
|
|
||||||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<BottomNavigation
|
|
||||||
selectedIndex={selectedIndex}
|
|
||||||
onSelect={index => setSelectedIndex(index)}>
|
|
||||||
<BottomNavigationTab title='Nyheter'/>
|
|
||||||
<BottomNavigationTab title='Kalender'/>
|
|
||||||
<BottomNavigationTab title='Klassen'/>
|
|
||||||
</BottomNavigation>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
export const ChildList = ({children}) => {
|
|
||||||
|
|
||||||
const [selectedIndex, setSelectedIndex] = React.useState(0);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<ViewPager
|
|
||||||
selectedIndex={selectedIndex}
|
|
||||||
onSelect={index => setSelectedIndex(index)}>
|
|
||||||
{children.map(child =>
|
|
||||||
<Layout
|
|
||||||
key={child.id}
|
|
||||||
style={{...styles.tab}}
|
|
||||||
level='2'>
|
|
||||||
<ChildTopNavigation child={child}></ChildTopNavigation>
|
|
||||||
<SelectCategory>
|
|
||||||
</SelectCategory>
|
|
||||||
<NewsList news={child.news} />
|
|
||||||
<Calendar calendar={[...child.calendar, ...child.schedule] }></Calendar>
|
|
||||||
</Layout>
|
|
||||||
)}
|
|
||||||
</ViewPager>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
tab: {
|
|
||||||
height: '100%',
|
|
||||||
paddingTop: 50,
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
});
|
|
|
@ -1,63 +0,0 @@
|
||||||
import React from 'react'
|
|
||||||
import { StyleSheet, View } from 'react-native'
|
|
||||||
import { Avatar, Icon, MenuItem, OverflowMenu, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components'
|
|
||||||
|
|
||||||
const MenuIcon = (props) => (
|
|
||||||
<Icon {...props} name='more-vertical' />
|
|
||||||
)
|
|
||||||
|
|
||||||
const InfoIcon = (props) => (
|
|
||||||
<Icon {...props} name='info' />
|
|
||||||
)
|
|
||||||
|
|
||||||
const LogoutIcon = (props) => (
|
|
||||||
<Icon {...props} name='log-out' />
|
|
||||||
)
|
|
||||||
|
|
||||||
export const ChildTopNavigation = ({child}) => {
|
|
||||||
|
|
||||||
const [menuVisible, setMenuVisible] = React.useState(false)
|
|
||||||
|
|
||||||
const toggleMenu = () => {
|
|
||||||
setMenuVisible(!menuVisible)
|
|
||||||
}
|
|
||||||
|
|
||||||
const renderMenuAction = () => (
|
|
||||||
<TopNavigationAction icon={MenuIcon} onPress={toggleMenu} />
|
|
||||||
)
|
|
||||||
|
|
||||||
const renderOverflowMenuAction = () => (
|
|
||||||
<React.Fragment>
|
|
||||||
<OverflowMenu anchor={renderMenuAction} visible={menuVisible} onBackdropPress={toggleMenu}>
|
|
||||||
<MenuItem accessoryLeft={InfoIcon} title='Sjukanmälan' />
|
|
||||||
<MenuItem accessoryLeft={InfoIcon} title='Kontakta' />
|
|
||||||
<MenuItem accessoryLeft={LogoutIcon} title='Logga ut' />
|
|
||||||
</OverflowMenu>
|
|
||||||
</React.Fragment>
|
|
||||||
)
|
|
||||||
|
|
||||||
const renderTitle = (props) => (
|
|
||||||
<View style={styles.titleContainer}>
|
|
||||||
<Icon {...props} style={styles.logo} name='person'/>
|
|
||||||
<Text {...props}>
|
|
||||||
{child.name}
|
|
||||||
</Text>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<TopNavigation title={renderTitle} accessoryRight={renderOverflowMenuAction} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
titleContainer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center'
|
|
||||||
},
|
|
||||||
logo: {
|
|
||||||
marginHorizontal: 16,
|
|
||||||
width: 16,
|
|
||||||
height: 16
|
|
||||||
}
|
|
||||||
})
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { StyleSheet } from 'react-native';
|
import { StyleSheet } from 'react-native';
|
||||||
import { Button, Icon, Layout, MenuItem, OverflowMenu, Text, Divider } from '@ui-kitten/components';
|
import { Button, Icon, Layout, MenuItem, MenuGroup, OverflowMenu, Text, Divider } from '@ui-kitten/components';
|
||||||
import {Linking} from 'react-native'
|
import {Linking} from 'react-native'
|
||||||
|
|
||||||
|
|
||||||
|
@ -18,19 +18,20 @@ export const ContactMenu = ({contact}) => {
|
||||||
const CallIcon = (props) => <Icon {...props} name='phone-outline'/>
|
const CallIcon = (props) => <Icon {...props} name='phone-outline'/>
|
||||||
const SMSIcon = (props) => <Icon {...props} name='message-square-outline'/>
|
const SMSIcon = (props) => <Icon {...props} name='message-square-outline'/>
|
||||||
const EmailIcon = (props) => <Icon {...props} name='email-outline'/>
|
const EmailIcon = (props) => <Icon {...props} name='email-outline'/>
|
||||||
|
const MapIcon = (props) => <Icon {...props} name='map-outline'/>
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<OverflowMenu
|
<OverflowMenu
|
||||||
visible={visible}
|
visible={visible}
|
||||||
anchor={renderToggleButton}
|
anchor={renderToggleButton}
|
||||||
onBackdropPress={() => setVisible(false)}>
|
onBackdropPress={() => setVisible(false)}>
|
||||||
{contact.guardians.map(parent =>
|
{contact.guardians.map((parent, i) =>
|
||||||
<>
|
<MenuGroup key={i} title={`${parent.firstname} ${parent.lastname}`}>
|
||||||
<MenuItem title={`${parent.firstname} ${parent.lastname}`} disabled="true"/>
|
<MenuItem accessoryLeft={CallIcon} disabled={!parent.mobile} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
|
||||||
<MenuItem accessoryLeft={CallIcon} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
|
<MenuItem accessoryLeft={SMSIcon} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/>
|
||||||
<MenuItem accessoryLeft={SMSIcon} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/>
|
<MenuItem accessoryLeft={EmailIcon} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/>
|
||||||
{parent.email ? <MenuItem accessoryLeft={EmailIcon} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/> : null}
|
<MenuItem accessoryLeft={MapIcon} title={`Hem`} onPress={e => Linking.openURL(`http://maps.apple.com/?daddr=${parent.address}`)}/>
|
||||||
</>
|
</MenuGroup>
|
||||||
)}
|
)}
|
||||||
</OverflowMenu>
|
</OverflowMenu>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { StyleSheet, View } from 'react-native'
|
import { StyleSheet, View } from 'react-native'
|
||||||
import { Card, List, Text } from '@ui-kitten/components'
|
import { Card, List, Text, Layout } from '@ui-kitten/components'
|
||||||
import Markdown from 'react-native-markdown-display'
|
import Markdown from 'react-native-markdown-display'
|
||||||
import { Image } from 'react-native-svg'
|
import { Image } from 'react-native-svg'
|
||||||
|
|
||||||
|
@ -8,25 +8,16 @@ import { Image } from 'react-native-svg'
|
||||||
export const NewsList = ({news}) => {
|
export const NewsList = ({news}) => {
|
||||||
|
|
||||||
const renderItemHeader = (headerProps, info) => (
|
const renderItemHeader = (headerProps, info) => (
|
||||||
<View {...headerProps} style={styles.header}>
|
<View {...headerProps} >
|
||||||
<Text category='h6' style={styles.headerText}>
|
<Text category='h6'>{info.item.header}</Text>
|
||||||
{info.item.header}
|
<Text category='s1'>By Wikipedia</Text>
|
||||||
</Text>
|
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|
||||||
const renderItemFooter = (footerProps, info) => (
|
|
||||||
<Text {...footerProps}>
|
|
||||||
Publicerad i Skolplattformen
|
|
||||||
</Text>
|
|
||||||
)
|
|
||||||
|
|
||||||
const renderItem = (info) => (
|
const renderItem = (info) => (
|
||||||
<Card
|
<Card
|
||||||
style={styles.item}
|
style={styles.card}
|
||||||
status='basic'
|
header={headerProps => renderItemHeader(headerProps, info)}>
|
||||||
header={headerProps => renderItemHeader(headerProps, info)}
|
|
||||||
footer={footerProps => renderItemFooter(footerProps, info)}>
|
|
||||||
<Markdown style={{ body: {color: 'black', fontSize: 15}, heading1: {color: 'black'} }}>
|
<Markdown style={{ body: {color: 'black', fontSize: 15}, heading1: {color: 'black'} }}>
|
||||||
{decodeURIComponent(info.item.body)}
|
{decodeURIComponent(info.item.body)}
|
||||||
</Markdown>
|
</Markdown>
|
||||||
|
@ -34,25 +25,24 @@ export const NewsList = ({news}) => {
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<List
|
<Layout style={styles.topContainer} level='1'>
|
||||||
style={styles.container}
|
<List
|
||||||
contentContainerStyle={styles.contentContainer}
|
style={styles.container}
|
||||||
data={news}
|
contentContainerStyle={styles.contentContainer}
|
||||||
renderItem={renderItem} />
|
data={news}
|
||||||
|
renderItem={renderItem} />
|
||||||
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
header: {
|
topContainer: {
|
||||||
backgroundColor: '#eeeeef',
|
flexDirection: 'row',
|
||||||
minHeight: 30,
|
justifyContent: 'space-between',
|
||||||
padding: 25
|
|
||||||
},
|
},
|
||||||
item: {
|
card: {
|
||||||
marginVertical: 10,
|
flex: 1,
|
||||||
marginRight: 10
|
margin: 2,
|
||||||
},
|
},
|
||||||
footer: {
|
});
|
||||||
backgroundColor: '#000'
|
|
||||||
}
|
|
||||||
})
|
|
|
@ -8979,6 +8979,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react-native-maps": {
|
||||||
|
"version": "0.27.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz",
|
||||||
|
"integrity": "sha512-HygBkZBecTnIVRYrSiLRAvu4OmXOYso/A7c6Cy73HkOh9CgGV8Ap5eBea24tvmFGptjj5Hg8AJ94/YbmWK1Okw=="
|
||||||
|
},
|
||||||
"react-native-markdown-display": {
|
"react-native-markdown-display": {
|
||||||
"version": "7.0.0-alpha.2",
|
"version": "7.0.0-alpha.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-native-markdown-display/-/react-native-markdown-display-7.0.0-alpha.2.tgz",
|
"resolved": "https://registry.npmjs.org/react-native-markdown-display/-/react-native-markdown-display-7.0.0-alpha.2.tgz",
|
||||||
|
|
|
@ -20,6 +20,7 @@
|
||||||
"react-native": "0.62.2",
|
"react-native": "0.62.2",
|
||||||
"react-native-calendar-strip": "^2.0.9",
|
"react-native-calendar-strip": "^2.0.9",
|
||||||
"react-native-gesture-handler": "^1.9.0",
|
"react-native-gesture-handler": "^1.9.0",
|
||||||
|
"react-native-maps": "^0.27.1",
|
||||||
"react-native-markdown-display": "^7.0.0-alpha.2",
|
"react-native-markdown-display": "^7.0.0-alpha.2",
|
||||||
"react-native-reanimated": "^1.13.2",
|
"react-native-reanimated": "^1.13.2",
|
||||||
"react-native-safe-area-context": "^3.1.9",
|
"react-native-safe-area-context": "^3.1.9",
|
||||||
|
|
Loading…
Reference in New Issue