added classmates
This commit is contained in:
parent
c40fe8e073
commit
77f19ced0e
|
@ -15,8 +15,8 @@ import {AppNavigator} from './components/tabs.component'
|
||||||
export default () => (
|
export default () => (
|
||||||
<>
|
<>
|
||||||
<IconRegistry icons={EvaIconsPack}/>
|
<IconRegistry icons={EvaIconsPack}/>
|
||||||
<ApplicationProvider {...eva} theme={{...eva.light, customization}}>
|
<ApplicationProvider {...eva} theme={{...eva.light, ...customization}}>
|
||||||
<ChildList children={children} />
|
<AppNavigator child={children[1]}/>
|
||||||
</ApplicationProvider>
|
</ApplicationProvider>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
|
@ -1,18 +1,20 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { StyleSheet } from 'react-native';
|
import { StyleSheet } from 'react-native';
|
||||||
import { Divider, List, ListItem, Icon, Text} from '@ui-kitten/components';
|
import { Divider, List, ListItem, Icon, Text} from '@ui-kitten/components';
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
export const Calendar = ({calendar}) => {
|
export const Calendar = ({calendar}) => {
|
||||||
|
|
||||||
const renderItemIcon = (props) => (
|
const parseMoment = (date) => moment(date, 'YYYY-MM-DD hh:mm')
|
||||||
<Icon {...props} name='calendar-outline'/>
|
|
||||||
);
|
const renderItemIcon = (startDate, endDate) =>
|
||||||
|
(props) => <Icon {...props} fill={parseMoment(startDate).isBefore() && parseMoment(endDate).isAfter() ? '#33f' : '#333'} name={parseMoment(endDate || startDate).isBefore() ? 'calendar' : 'calendar-outline'}/>
|
||||||
|
|
||||||
const renderItem = ({ item }) => (
|
const renderItem = ({ item }) => (
|
||||||
<ListItem
|
<ListItem
|
||||||
title={`${item.title}`}
|
title={`${item.title}`}
|
||||||
description={`${item.startDate}`}
|
description={`${moment(item.startDate).calendar()}`}
|
||||||
accessoryLeft={renderItemIcon}
|
accessoryLeft={renderItemIcon(item.startDate, item.endDate)}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -20,7 +22,7 @@ export const Calendar = ({calendar}) => {
|
||||||
return (
|
return (
|
||||||
<List
|
<List
|
||||||
style={styles.container}
|
style={styles.container}
|
||||||
data={calendar}
|
data={calendar.sort((a, b) => b.startDate < a.startDate)}
|
||||||
ItemSeparatorComponent={Divider}
|
ItemSeparatorComponent={Divider}
|
||||||
renderItem={renderItem}
|
renderItem={renderItem}
|
||||||
/>
|
/>
|
||||||
|
@ -29,7 +31,12 @@ export const Calendar = ({calendar}) => {
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
container: {
|
container: {
|
||||||
maxHeight: 200,
|
|
||||||
width: "100%"
|
width: "100%"
|
||||||
},
|
},
|
||||||
|
ongoing: {
|
||||||
|
color: 'red'
|
||||||
|
},
|
||||||
|
normal: {
|
||||||
|
color: 'black'
|
||||||
|
}
|
||||||
});
|
});
|
|
@ -0,0 +1,33 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
import { Divider, List, ListItem, Icon, Text, Button} from '@ui-kitten/components';
|
||||||
|
import { ContactMenu } from './contactMenu.component';
|
||||||
|
|
||||||
|
export const Classmates = ({classmates}) => {
|
||||||
|
|
||||||
|
const renderItemIcon = (props) => <Icon {...props} name={'people-outline'}/>
|
||||||
|
|
||||||
|
const renderItem = ({ item }) => (
|
||||||
|
<ListItem
|
||||||
|
title={`${item.firstname} ${item.lastname}`}
|
||||||
|
description={item.guardians.map(guardian => `${guardian.firstname} ${guardian.lastname}`).join(', ')}
|
||||||
|
accessoryLeft={renderItemIcon}
|
||||||
|
accessoryRight={(props) => ContactMenu({...props, contact: item})}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<List
|
||||||
|
style={styles.container}
|
||||||
|
data={classmates}
|
||||||
|
ItemSeparatorComponent={Divider}
|
||||||
|
renderItem={renderItem}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
width: "100%",
|
||||||
|
},
|
||||||
|
});
|
|
@ -0,0 +1,37 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
import { Button, Icon, Layout, MenuItem, OverflowMenu, Text, Divider } from '@ui-kitten/components';
|
||||||
|
import {Linking} from 'react-native'
|
||||||
|
|
||||||
|
|
||||||
|
export const ContactMenu = ({contact}) => {
|
||||||
|
|
||||||
|
const [visible, setVisible] = React.useState(false);
|
||||||
|
const [selectedTitle, setSelectedTitle] = React.useState('No items selected');
|
||||||
|
|
||||||
|
const contactIcon = (props) => <Icon {...props} name={'phone-outline'}/>
|
||||||
|
const renderToggleButton = () => (
|
||||||
|
<Button onPress={() => setVisible(true)} appearance='ghost' accessoryLeft={contactIcon}>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
|
||||||
|
const CallIcon = (props) => <Icon {...props} name='phone-outline'/>
|
||||||
|
const SMSIcon = (props) => <Icon {...props} name='message-square-outline'/>
|
||||||
|
const EmailIcon = (props) => <Icon {...props} name='email-outline'/>
|
||||||
|
|
||||||
|
return (
|
||||||
|
<OverflowMenu
|
||||||
|
visible={visible}
|
||||||
|
anchor={renderToggleButton}
|
||||||
|
onBackdropPress={() => setVisible(false)}>
|
||||||
|
{contact.guardians.map(parent =>
|
||||||
|
<>
|
||||||
|
<MenuItem title={`${parent.firstname} ${parent.lastname}`} disabled="true"/>
|
||||||
|
<MenuItem accessoryLeft={CallIcon} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
|
||||||
|
<MenuItem accessoryLeft={SMSIcon} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/>
|
||||||
|
{parent.email ? <MenuItem accessoryLeft={EmailIcon} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/> : null}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</OverflowMenu>
|
||||||
|
);
|
||||||
|
};
|
|
@ -44,21 +44,13 @@ export const NewsList = ({news}) => {
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
header: {
|
header: {
|
||||||
backgroundColor: '#fff',
|
backgroundColor: '#eeeeef',
|
||||||
minHeight: 30,
|
minHeight: 30,
|
||||||
padding: 25
|
padding: 25
|
||||||
},
|
},
|
||||||
headerText: {
|
|
||||||
color: '#000'
|
|
||||||
},
|
|
||||||
container: {
|
|
||||||
maxHeight: '100%'
|
|
||||||
},
|
|
||||||
contentContainer: {
|
|
||||||
paddingVertical: 4
|
|
||||||
},
|
|
||||||
item: {
|
item: {
|
||||||
marginVertical: 4
|
marginVertical: 10,
|
||||||
|
marginRight: 10
|
||||||
},
|
},
|
||||||
footer: {
|
footer: {
|
||||||
backgroundColor: '#000'
|
backgroundColor: '#000'
|
||||||
|
|
|
@ -1,36 +1,69 @@
|
||||||
import React from 'react';
|
import React from 'react'
|
||||||
import { NavigationContainer } from '@react-navigation/native';
|
import { StyleSheet } from 'react-native';
|
||||||
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
|
import { TabBar, Tab, TabView, Layout, Text, Icon } from '@ui-kitten/components'
|
||||||
import { TabBar, Tab, Layout, Text } from '@ui-kitten/components';
|
import { NewsList } from './newsList.component'
|
||||||
import { ChildList } from './childList.component';
|
import { Calendar } from './calendar.component'
|
||||||
import { DetailsScreen } from './details.component';
|
import { Classmates } from './classmates.component'
|
||||||
|
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
const { Navigator, Screen } = createMaterialTopTabNavigator();
|
export const AppNavigator = ({child}) => {
|
||||||
|
const [selectedIndex, setSelectedIndex] = React.useState(0)
|
||||||
|
|
||||||
const ChildScreen = ({data}) => (
|
const NewsIcon = (props) => (
|
||||||
<Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
<Icon {...props} name='activity-outline'/>
|
||||||
<Text category='h1'>Nyheter</Text>
|
)
|
||||||
</Layout>
|
const CalendarIcon = (props) => (
|
||||||
);
|
<Icon {...props} name='calendar-outline'/>
|
||||||
|
)
|
||||||
|
|
||||||
const TopTabBar = ({ navigation, state }) => (
|
const ClassIcon = (props) => (
|
||||||
<TabBar
|
<Icon {...props} name='people-outline'/>
|
||||||
selectedIndex={state.index}
|
)
|
||||||
onSelect={index => navigation.navigate(state.routeNames[index])}>
|
|
||||||
<Tab title='Nyheter'/>
|
|
||||||
<Tab title='Klassen'/>
|
|
||||||
</TabBar>
|
|
||||||
);
|
|
||||||
|
|
||||||
const TabNavigator = ({children}) => (
|
const SettingsIcon = (props) => (
|
||||||
<Navigator tabBar={props => <TopTabBar {...props} />}>
|
<Icon {...props} name='options-2-outline'/>
|
||||||
<Screen name='Child' component={ChildScreen} data={children}/>
|
)
|
||||||
<Screen name='Class' component={DetailsScreen}/>
|
|
||||||
</Navigator>
|
return (
|
||||||
);
|
<SafeAreaView>
|
||||||
|
<TabView selectedIndex={selectedIndex} onSelect={index => setSelectedIndex(index)}>
|
||||||
|
<Tab title="Nyheter" icon={NewsIcon}>
|
||||||
|
<Layout style={styles.tabContainer}>
|
||||||
|
<NewsList news={child.news} />
|
||||||
|
</Layout>
|
||||||
|
</Tab>
|
||||||
|
<Tab title="Schema" icon={CalendarIcon}>
|
||||||
|
<Layout style={styles.tabContainer}>
|
||||||
|
<Calendar calendar={[...child.calendar, ...child.schedule].filter(a => moment(a.startDate).isAfter(moment().startOf('day')) ) }></Calendar>
|
||||||
|
</Layout>
|
||||||
|
</Tab>
|
||||||
|
<Tab title="Klassen" icon={ClassIcon}>
|
||||||
|
<Layout style={styles.tabContainer}>
|
||||||
|
<Text category='h5'>
|
||||||
|
Klass {child.classmates.length ? child.classmates[0].className : ''}
|
||||||
|
</Text>
|
||||||
|
<Classmates classmates={child.classmates}/>
|
||||||
|
</Layout>
|
||||||
|
</Tab>
|
||||||
|
<Tab title="Inställningar" icon={SettingsIcon}>
|
||||||
|
<Layout style={styles.tabContainer}>
|
||||||
|
<Text category='h5'>
|
||||||
|
Inställningar
|
||||||
|
</Text>
|
||||||
|
</Layout>
|
||||||
|
</Tab>
|
||||||
|
</TabView>
|
||||||
|
</SafeAreaView>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
export const AppNavigator = ({children}) => (
|
const styles = StyleSheet.create({
|
||||||
<NavigationContainer>
|
tabContainer: {
|
||||||
<TabNavigator children={children }/>
|
alignItems: 'flex-start',
|
||||||
</NavigationContainer>
|
justifyContent: 'flex-start',
|
||||||
);
|
paddingTop: 5,
|
||||||
|
paddingLeft: 10,
|
||||||
|
flexDirection: 'column'
|
||||||
|
},
|
||||||
|
})
|
Loading…
Reference in New Issue