layout fixes, images
This commit is contained in:
parent
0d2dbcaa14
commit
3f91af1f46
|
@ -14,7 +14,7 @@ To run the app in a simulator:
|
|||
|
||||
## TODO
|
||||
|
||||
[ ] Välj barn
|
||||
[ ] Login
|
||||
[x] Välj barn
|
||||
[x] Login
|
||||
[ ] Anmäl frånvaro
|
||||
[ ] Settings
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
After Width: | Height: | Size: 55 KiB |
|
@ -3,7 +3,7 @@ import { StyleSheet, View } from 'react-native'
|
|||
import { useFocusEffect } from '@react-navigation/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 { Divider, Button, Icon, Layout, Text, TopNavigation, TopNavigationAction, List, Card, Avatar, Spinner } from '@ui-kitten/components'
|
||||
// import children from '../output.json'
|
||||
import useAsyncStorage from '@rnhooks/async-storage'
|
||||
|
||||
|
@ -33,6 +33,7 @@ export const Children = ({ navigation }) => {
|
|||
useEffect(useCallback(() => {
|
||||
fetch(`${baseUrl}/children/`, {headers}).then(res => res.json()).then(children => {
|
||||
// TODO: performance
|
||||
console.log('fetch children', children)
|
||||
Promise.all((children || [] ).map(async child => ({
|
||||
...child,
|
||||
classmates: await fetch(`${baseUrl}/children/${child.sdsId}/classmates`, {headers}).then(res => res.json()),
|
||||
|
@ -67,13 +68,18 @@ export const Children = ({ navigation }) => {
|
|||
)
|
||||
|
||||
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] || status).join(', ')}`}
|
||||
</Text>
|
||||
<View {...props} style={{flexDirection: 'row', backgroundColor: '#FFf8f6'}}>
|
||||
<View style={{margin: 20}}>
|
||||
<Avatar source={require('../assets/avatar.png')} />
|
||||
</View>
|
||||
<View style={{margin: 20}}>
|
||||
<Text category='h6'>
|
||||
{info.item.name.split('(')[0]}
|
||||
</Text>
|
||||
<Text category='s1'>
|
||||
{`${(info.item.classmates || [])[0].className} ${info.item.status.split(';').map(status => abbrevations[status] || status).join(', ')}`}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
|
||||
|
@ -117,7 +123,7 @@ export const Children = ({ navigation }) => {
|
|||
)
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
|
||||
<TopNavigation title='Dina barn' alignment='center' accessoryLeft={BackAction} />
|
||||
<Divider/>
|
||||
<Layout style={{ flex: 1}} level='1'>
|
||||
|
@ -127,6 +133,8 @@ export const Children = ({ navigation }) => {
|
|||
data={children}
|
||||
renderItem={renderItem} />
|
||||
: <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Image source={require('../assets/undraw_teaching_f1cm.png')} style={{height: 400, width: '100%'}}></Image>
|
||||
<Spinner size='large'/>
|
||||
<Text category='h1'>Laddar...</Text>
|
||||
</Layout>}
|
||||
</Layout>
|
||||
|
|
|
@ -1,7 +1,5 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import { SafeAreaView, StyleSheet } from 'react-native';
|
||||
|
||||
import {Linking} from 'react-native'
|
||||
import { SafeAreaView, StyleSheet, Image, Linking } from 'react-native';
|
||||
import { Button, Icon, Modal, Card, Text, ImageBackground, Divider, Layout, TopNavigation, Input } from '@ui-kitten/components';
|
||||
import Personnummer from 'personnummer'
|
||||
import useAsyncStorage from '@rnhooks/async-storage';
|
||||
|
@ -20,7 +18,7 @@ export const Login = ({ navigation }) => {
|
|||
|
||||
useEffect(() => {
|
||||
setValid(Personnummer.valid(socialSecurityNumber))
|
||||
// setHasBankId(Linking.canOpenUrl('bankid://'))
|
||||
//setHasBankId(Linking.canOpenURL('bankid://'))
|
||||
}, [socialSecurityNumber])
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -64,10 +62,9 @@ export const Login = ({ navigation }) => {
|
|||
const token = await fetch(`${baseUrl}/login?socialSecurityNumber=${socialSecurityNumber}`, {method: 'POST'}).then(res => res.json())
|
||||
|
||||
console.log('got token', token)
|
||||
if (hasBankId) Linking.openURL(`bankid:///?autostarttoken=${token.token}`)
|
||||
const {token: jwt} = await fetch(`${baseUrl}/login/${token.order}/jwt`, {timeoutInterval: 60000}).then(res => res.ok ? res : Promise.reject(res.json())).then(res => res.json())
|
||||
console.log('got jwt', jwt)
|
||||
await setJwt(jwt)
|
||||
try {if (hasBankId) Linking.openURL(`bankid:///?autostarttoken=${token.token}`)} catch(err){ setHasBankId(false)}
|
||||
const jwt = await fetch(`${baseUrl}/login/${token.order}/jwt`, {timeoutInterval: 60000}).then(res => res.ok ? res : Promise.reject(res.json())).then(res => res.json())
|
||||
await setJwt(jwt.token || jwt)
|
||||
setVisible(false)
|
||||
if (jwt) return navigateToChildren([])
|
||||
} catch (err) {
|
||||
|
@ -82,24 +79,33 @@ export const Login = ({ navigation }) => {
|
|||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1 }}>
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
|
||||
<TopNavigation title={`Skolplattformen.org - det ${argument} alternativet`} alignment='center'/>
|
||||
{jwt ? <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', padding: 20}}>
|
||||
<Text category="h3">{socialSecurityNumber}</Text>
|
||||
<Button
|
||||
onPress={() => logout()}>
|
||||
Logga ut
|
||||
</Button>
|
||||
{jwt ? <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20}}>
|
||||
|
||||
<Image source={require('../assets/undraw_studying_s3l7.png')} style={{height: 400, width: '100%'}}></Image>
|
||||
<Text category="h3">{socialSecurityNumber}</Text>
|
||||
<Button
|
||||
status="success"
|
||||
size="medium"
|
||||
style={{marginTop: 10, width: 200}}
|
||||
accessoryRight = {CheckIcon}
|
||||
onPress={() => navigateToChildren()}>
|
||||
Fortsätt
|
||||
</Button>
|
||||
<Button
|
||||
onPress={() => logout()}
|
||||
accessoryRight={LogoutIcon}
|
||||
style={{marginTop: 10, width: 200}}
|
||||
size="medium">
|
||||
Logga ut
|
||||
</Button>
|
||||
|
||||
|
||||
</Layout>
|
||||
: <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'flex-start', padding: 20}}>
|
||||
<Text category="h3">Vårdnadshavare</Text>
|
||||
: <Layout style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20}}>
|
||||
<Image source={require('../assets/undraw_back_to_school_inwc.png')} style={{height: 400, width: '100%'}}></Image>
|
||||
<Text category="h3">Vårdnadshavare</Text>
|
||||
<Input label='Personnummer' autoFocus={true} value={socialSecurityNumber}
|
||||
accessoryLeft = {PersonIcon}
|
||||
caption={error && error.message || ''}
|
||||
|
|
|
@ -0,0 +1,56 @@
|
|||
import React from 'react'
|
||||
import { SafeAreaView, StyleSheet, View, ScrollView, Image } from 'react-native'
|
||||
import { Card, Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components'
|
||||
import Markdown from 'react-native-markdown-display'
|
||||
|
||||
const BackIcon = (props) => (
|
||||
<Icon {...props} name='arrow-back' />
|
||||
)
|
||||
|
||||
export const NewsItem = ({ navigation, route }) => {
|
||||
const { newsItem } = route.params
|
||||
|
||||
const navigateBack = () => {
|
||||
navigation.goBack()
|
||||
}
|
||||
|
||||
const BackAction = () => (
|
||||
<TopNavigationAction icon={BackIcon} onPress={navigateBack} />
|
||||
)
|
||||
|
||||
const renderItemHeader = (headerProps, newsItem) => (
|
||||
<View {...headerProps}>
|
||||
<Text category='h3'>
|
||||
{newsItem.header}
|
||||
</Text>
|
||||
</View>
|
||||
)
|
||||
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }} >
|
||||
<TopNavigation title='Nyhet från Skolplattformen' alignment='center' accessoryLeft={BackAction} />
|
||||
<Divider/>
|
||||
|
||||
<Layout style={styles.topContainer} level='1'>
|
||||
<ScrollView>
|
||||
<Card style={styles.card} header={headerProps => renderItemHeader(headerProps, newsItem)}>
|
||||
<Markdown style={{ body: {color: 'black'}, heading1: {color: 'black'} }}>
|
||||
{decodeURIComponent(newsItem.body)}
|
||||
</Markdown>
|
||||
</Card>
|
||||
</ScrollView>
|
||||
</Layout>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
topContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
card: {
|
||||
flex: 1,
|
||||
margin: 2
|
||||
}
|
||||
})
|
|
@ -9235,6 +9235,11 @@
|
|||
"prop-types": "^15.5.10"
|
||||
}
|
||||
},
|
||||
"react-native-fix-image": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-fix-image/-/react-native-fix-image-2.1.0.tgz",
|
||||
"integrity": "sha512-qn4xItNSKfwlSkMHgxH9cusUQuk5Lhag9aHqL9ESxnCDUDwqS6rsWuOYt/JlncaKhsCc9cANFomCLlY8+Ffuaw=="
|
||||
},
|
||||
"react-native-gesture-handler": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.9.0.tgz",
|
||||
|
|
|
@ -24,6 +24,7 @@
|
|||
"react": "16.11.0",
|
||||
"react-native": "0.62.2",
|
||||
"react-native-calendar-strip": "^2.0.9",
|
||||
"react-native-fix-image": "^2.1.0",
|
||||
"react-native-gesture-handler": "^1.9.0",
|
||||
"react-native-maps": "^0.27.1",
|
||||
"react-native-markdown-display": "^7.0.0-alpha.2",
|
||||
|
|
Loading…
Reference in New Issue