Piteball
/
skolplattformen-backup
mirror of https://github.com/kolplattformen/skolplattformen.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

added child chooser

This commit is contained in:
Christian Landgren 2020-12-16 23:07:15 +01:00
parent 33133dfa0f
commit 4a6812e28a
8 changed files with 216 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/app/App.js
View File

@ -7,15 +7,14 @@ import {
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import * as eva from '@eva-design/eva';
import customization from './design/customization.json';
import children from './output.json';
import {AppNavigator} from './components/tabs.component'
import { AppNavigator } from './components/navigation.component';
export default () => (
<>
<IconRegistry icons={EvaIconsPack}/>
<ApplicationProvider {...eva} theme={{...eva.light, ...customization}}>
<AppNavigator child={children[1]}/>
<AppNavigator />
</ApplicationProvider>
</>
)

22
packages/app/components/tabs.component.js → packages/app/components/child.component.js
View File

@ -1,14 +1,15 @@
import React from 'react'
import { StyleSheet } from 'react-native';
import { TabBar, Tab, TabView, Layout, Text, Icon } from '@ui-kitten/components'
import { TabBar, TopNavigation, TopNavigationAction, Tab, TabView, Layout, Text, Divider, Icon } from '@ui-kitten/components'
import { NewsList } from './newsList.component'
import { Calendar } from './calendar.component'
import { Classmates } from './classmates.component'
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import moment from 'moment'
export const AppNavigator = ({child}) => {
export const Child = ({route, navigation}) => {
const [selectedIndex, setSelectedIndex] = React.useState(0)
const { child } = route.params;
const NewsIcon = (props) => (
<Icon {...props} name='activity-outline'/>
@ -24,9 +25,21 @@ export const AppNavigator = ({child}) => {
const SettingsIcon = (props) => (
<Icon {...props} name='options-2-outline'/>
)
const BackIcon = (props) => (
<Icon {...props} name='arrow-back' />
)
const BackAction = () => (
<TopNavigationAction icon={BackIcon} onPress={navigateBack} />
)
const navigateBack = () => {
navigation.goBack()
}
return (
<SafeAreaView>
<SafeAreaView style={{ flex: 1 }}>
<TopNavigation title={ child.name} alignment='center' accessoryLeft={BackAction} />
<TabView selectedIndex={selectedIndex} onSelect={index => setSelectedIndex(index)}>
<Tab title="Nyheter" icon={NewsIcon}>
<Layout style={styles.tabContainer}>
@ -35,7 +48,7 @@ export const AppNavigator = ({child}) => {
</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>
<Calendar calendar={[...child.calendar = [], ...child.schedule = []].filter(a => moment(a.startDate).isAfter(moment().startOf('day')) ) }></Calendar>
</Layout>
</Tab>
<Tab title="Klassen" icon={ClassIcon}>
@ -54,6 +67,7 @@ export const AppNavigator = ({child}) => {
</Layout>
</Tab>
</TabView>
</SafeAreaView>
)
}

129
packages/app/components/children.component.js Normal file
View File

@ -0,0 +1,129 @@
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { SafeAreaView } from 'react-native'
import moment from 'moment'
import { Divider, Button, Icon, Layout, Text, TopNavigation, TopNavigationAction, List, Card, Avatar } from '@ui-kitten/components'
import children from '../output.json'
const BackIcon = (props) => (
<Icon {...props} name='arrow-back' />
)
const NotificationIcon = (style) => (
<Icon {...style} name='activity-outline' />
)
const CalendarIcon = (style) => (
<Icon {...style} name='calendar-outline' />
)
const PeopleIcon = (style) => (
<Icon {...style} name='people-outline' />
)
export const Children = ({ navigation }) => {
const abbrevations = {
G: 'Gymnasiet',
GR: 'Grundskolan',
F: 'Förskoleklass',
}
const navigateBack = () => {
navigation.goBack()
}
const navigateChild = (child) => {
navigation.navigate('Child', {child})
}
const BackAction = () => (
<TopNavigationAction icon={BackIcon} onPress={navigateBack} />
)
const Header = (props, info) => (
<View {...props}>
<Text category='h6'>
{info.item.name.split('(')[0]}
</Text>
<Text category='s1'>
{`${info.item.status.split(';').map(status => abbrevations[status]).join(', ')}`}
</Text>
</View>
)
const Footer = (props, info) => (
<View style={styles.itemFooter}>
<Button
style={styles.iconButton}
status='control'
size='small'
accessoryLeft={NotificationIcon}>
{`${info.item.news.length}`}
</Button>
<Button
style={styles.iconButton}
status='control'
size='small'
accessoryLeft={CalendarIcon}>
{`${info.item.notifications.filter(c => moment(c.startDate).isSame('day') ).length}`}
</Button>
<Button
style={styles.iconButton}
status='control'
size='small'
accessoryLeft={PeopleIcon}>
{`${info.item.classmates.length} i klassen`}
</Button>
</View>
)
const renderItem = (info) => (
<Card
style={styles.card}
header={headerProps => Header(headerProps, info)}
footer={footerProps => Footer(footerProps, info)}
onPress={() => navigateChild(info.item)}>
{info.item.menu.map(menu =>
<Text appearance='hint' category='c1'>
{`${menu.title.split(' -')[0]} - ${menu.description.split('<br/>')[0]}`}
</Text>
)}
</Card>
)
return (
<SafeAreaView style={{ flex: 1 }}>
<TopNavigation title='Dina barn' alignment='center' accessoryLeft={BackAction} />
<Divider/>
<Layout style={{ flex: 1}} level='1'>
<List
style={styles.container}
contentContainerStyle={styles.contentContainer}
data={children}
renderItem={renderItem} />
</Layout>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
topContainer: {
flexDirection: 'row',
justifyContent: 'space-between'
},
card: {
flex: 1,
margin: 10
},
itemDescription: {
zIndex: 1,
marginVertical: 16
},
itemFooter: {
flexDirection: 'row',
paddingHorizontal: 12
},
iconButton: {
paddingHorizontal: 0
}
})

8
packages/app/components/contactMenu.component.js
View File

@ -27,10 +27,10 @@ export const ContactMenu = ({contact}) => {
onBackdropPress={() => setVisible(false)}>
{contact.guardians.map((parent, i) =>
<MenuGroup key={i} title={`${parent.firstname} ${parent.lastname}`}>
<MenuItem accessoryLeft={CallIcon} disabled={!parent.mobile} title={`Ring`} onPress={e => Linking.openURL(`tel:${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}`)}/>
<MenuItem accessoryLeft={MapIcon} title={`Hem`} onPress={e => Linking.openURL(`http://maps.apple.com/?daddr=${parent.address}`)}/>
<MenuItem accessoryLeft={CallIcon} visible={!parent.mobile} title={`Ring`} onPress={e => Linking.openURL(`tel:${parent.mobile}`)}/>
<MenuItem accessoryLeft={SMSIcon} visible={!parent.mobile} title={`SMS`} onPress={e => Linking.openURL(`sms:${parent.mobile}`)}/>
<MenuItem accessoryLeft={EmailIcon} visible={!parent.email} title={`Maila`} onPress={e => Linking.openURL(`mailto:${parent.email}`)}/>
<MenuItem accessoryLeft={MapIcon} visible={!parent.address} title={`Hem`} onPress={e => Linking.openURL(`http://maps.apple.com/?daddr=${parent.address}`)}/>
</MenuGroup>
)}
</OverflowMenu>

20
packages/app/components/login.component.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import { SafeAreaView } from 'react-native';
import { Button, Divider, Layout, TopNavigation } from '@ui-kitten/components';
export const Login = ({ navigation }) => {
const navigateDetails = () => {
navigation.navigate('Children');
};
return (
<SafeAreaView style={{ flex: 1 }}>
<TopNavigation title='Skolplattformen' alignment='center'/>
<Divider/>
<Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Button onPress={navigateDetails}>Login</Button>
</Layout>
</SafeAreaView>
);
};

22
packages/app/components/navigation.component.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Login } from './login.component';
import { Children } from './children.component';
import { Child } from './child.component';
const { Navigator, Screen } = createStackNavigator();
const HomeNavigator = () => (
<Navigator headerMode='none'>
<Screen name='Login' component={Login}/>
<Screen name='Children' component={Children}/>
<Screen name='Child' component={Child}/>
</Navigator>
);
export const AppNavigator = (children) => (
<NavigationContainer>
<HomeNavigator/>
</NavigationContainer>
);

19
packages/app/package-lock.json generated
View File

@ -1591,6 +1591,11 @@
"integrity": "sha512-W/J0fNYVO01tioHjvYWQ9m6RgndVtbElzYozBq1ZPrHO/iCzlqoySHl4gO/fpCl9QEFjvJfjPgtPMTMlsoq5DQ==",
"dev": true
},
"@react-native-community/masked-view": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz",
"integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ=="
},
"@react-navigation/core": {
"version": "5.14.4",
"resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.14.4.tgz",
@ -1643,6 +1648,15 @@
"nanoid": "^3.1.15"
}
},
"@react-navigation/stack": {
"version": "5.12.8",
"resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.12.8.tgz",
"integrity": "sha512-wUJFbU0v606RBXOUxHToCXJNmiwxtFYhN2TFvjxCZ3PJU+OWWx8HTmn99pT3rVH4Ax2cfO5BDUy9v+r74ZrIWw==",
"requires": {
"color": "^3.1.3",
"react-native-iphone-x-helper": "^1.3.0"
}
},
"@types/babel__core": {
"version": "7.1.12",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.12.tgz",
@ -8979,6 +8993,11 @@
}
}
},
"react-native-iphone-x-helper": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.3.1.tgz",
"integrity": "sha512-HOf0jzRnq2/aFUcdCJ9w9JGzN3gdEg0zFE4FyYlp4jtidqU03D5X7ZegGKfT1EWteR0gPBGp9ye5T5FvSWi9Yg=="
},
"react-native-maps": {
"version": "0.27.1",
"resolved": "https://registry.npmjs.org/react-native-maps/-/react-native-maps-0.27.1.tgz",

2
packages/app/package.json
View File

@ -12,8 +12,10 @@
"dependencies": {
"@eva-design/eva": "2.0.0",
"@eva-design/material": "^2.0.0",
"@react-native-community/masked-view": "^0.1.10",
"@react-navigation/material-top-tabs": "^5.3.10",
"@react-navigation/native": "^5.8.10",
"@react-navigation/stack": "^5.12.8",
"@ui-kitten/components": "5.0.0",
"@ui-kitten/eva-icons": "5.0.0",
"react": "16.11.0",