feat: day summary on front page
This commit is contained in:
parent
3b6c176501
commit
b82f744567
|
@ -1,4 +1,4 @@
|
|||
# Öppna Skolplattformen App
|
||||
# Öppna skolplattformen App
|
||||
|
||||
This is the app for Öppna skolplattformen.
|
||||
|
||||
|
|
|
@ -120,7 +120,7 @@ export const Child = () => {
|
|||
|
||||
return (
|
||||
<ChildProvider child={child}>
|
||||
<TabNavigator initialRouteName={initialRouteName as any} />
|
||||
<TabNavigator initialRouteName={child.firstName} />
|
||||
</ChildProvider>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -10,6 +10,7 @@ import {
|
|||
import { Child } from '@skolplattformen/embedded-api'
|
||||
import {
|
||||
Button,
|
||||
Icon,
|
||||
StyleService,
|
||||
Text,
|
||||
useStyleSheet,
|
||||
|
@ -17,11 +18,13 @@ import {
|
|||
import moment from 'moment'
|
||||
import React from 'react'
|
||||
import { TouchableOpacity, View } from 'react-native'
|
||||
import { Layout, Sizing } from '../styles'
|
||||
import { Colors, Layout, Sizing } from '../styles'
|
||||
import { studentName } from '../utils/peopleHelpers'
|
||||
import { translate } from '../utils/translation'
|
||||
import { RootStackParamList } from './navigation.component'
|
||||
import { StudentAvatar } from './studentAvatar.component'
|
||||
import { DaySummary } from './daySummary.component'
|
||||
import { RightArrowIcon } from './icon.component'
|
||||
|
||||
interface ChildListItemProps {
|
||||
child: Child
|
||||
|
@ -108,7 +111,16 @@ export const ChildListItem = ({ child, color }: ChildListItemProps) => {
|
|||
{className ? <Text category="s1">{className}</Text> : null}
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.cardHeaderRight}>
|
||||
<RightArrowIcon
|
||||
style={styles.icon}
|
||||
fill={Colors.neutral.gray500}
|
||||
name="star"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<DaySummary child={child} />
|
||||
{scheduleAndCalendarThisWeek.slice(0, 3).map((calendarItem, i) => (
|
||||
<Text category="p1" key={i}>
|
||||
{`${calendarItem.title} (${displayDate(calendarItem.startDate)})`}
|
||||
|
@ -170,11 +182,20 @@ const themeStyles = StyleService.create({
|
|||
cardHeaderLeft: {
|
||||
...Layout.flex.row,
|
||||
...Layout.mainAxis.center,
|
||||
flex: 10,
|
||||
},
|
||||
cardHeaderRight: {
|
||||
...Layout.flex.row,
|
||||
...Layout.crossAxis.flexEnd,
|
||||
flex: 1,
|
||||
},
|
||||
cardHeaderText: {
|
||||
marginHorizontal: Sizing.t4,
|
||||
flex: 1,
|
||||
flex: 10,
|
||||
},
|
||||
icon: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
itemFooter: {
|
||||
...Layout.flex.row,
|
||||
|
|
|
@ -9,10 +9,10 @@ import { translate } from '../utils/translation'
|
|||
|
||||
interface DaySummaryProps {
|
||||
child: Child
|
||||
date: Moment
|
||||
date?: Moment
|
||||
}
|
||||
|
||||
export const DaySummary = ({ child, date }: DaySummaryProps) => {
|
||||
export const DaySummary = ({ child, date = moment() }: DaySummaryProps) => {
|
||||
const styles = useStyleSheet(themedStyles)
|
||||
const [year, week] = [moment().isoWeekYear(), moment().isoWeek()]
|
||||
const { data: weekLessons } = useTimetable(
|
||||
|
@ -26,14 +26,16 @@ export const DaySummary = ({ child, date }: DaySummaryProps) => {
|
|||
.filter((lesson) => lesson.dayOfWeek === date.isoWeekday())
|
||||
.sort((a, b) => a.dateStart.localeCompare(b.dateStart))
|
||||
|
||||
const gymBag = lessons.some((lesson) => lesson.code === 'IDH')
|
||||
|
||||
if (lessons.length <= 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const gymBag = lessons.some((lesson) => lesson.code === 'IDH')
|
||||
|
||||
return (
|
||||
<View style={styles.summary}>
|
||||
<Text category="h5">
|
||||
<Text category="s1">Skoldag </Text>
|
||||
<Text category="s1">
|
||||
{lessons[0].timeStart.slice(0, 5)}-
|
||||
{lessons[lessons.length - 1].timeEnd.slice(0, 5)}
|
||||
{gymBag
|
||||
|
|
|
@ -29,3 +29,4 @@ export const BookOpenIcon = uiIcon('book-open-outline')
|
|||
export const GlobeIcon = uiIcon('globe-outline')
|
||||
export const ExternalLinkIcon = uiIcon('external-link-outline')
|
||||
export const ClipboardIcon = uiIcon('clipboard-outline')
|
||||
export const RightArrowIcon = uiIcon('arrow-ios-forward-outline')
|
||||
|
|
|
@ -24,6 +24,7 @@ interface WeekProps {
|
|||
|
||||
interface LessonListProps {
|
||||
lessons: TimetableEntry[]
|
||||
lunch?: MenuItem
|
||||
header: string
|
||||
}
|
||||
|
||||
|
@ -33,7 +34,7 @@ interface DayProps {
|
|||
lessons: TimetableEntry[]
|
||||
}
|
||||
|
||||
const LessonList = ({ lessons, header }: LessonListProps) => {
|
||||
const LessonList = ({ lessons, header, lunch }: LessonListProps) => {
|
||||
const styles = useStyleSheet(themedStyles)
|
||||
|
||||
return (
|
||||
|
@ -52,9 +53,11 @@ const LessonList = ({ lessons, header }: LessonListProps) => {
|
|||
key={id}
|
||||
style={styles.item}
|
||||
title={() => (
|
||||
<Text style={styles.lessonTitle} maxFontSizeMultiplier={1}>
|
||||
{name}
|
||||
</Text>
|
||||
<View style={styles.header}>
|
||||
<Text style={styles.lessonTitle} maxFontSizeMultiplier={1}>
|
||||
{name}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
description={() => (
|
||||
<Text
|
||||
|
@ -107,10 +110,12 @@ export const Day = ({ weekDay, lunch, lessons }: DayProps) => {
|
|||
</View>
|
||||
<LessonList
|
||||
header="FM"
|
||||
lunch={lunch}
|
||||
lessons={lessons.filter(({ timeStart }) => timeStart < '12:00')}
|
||||
/>
|
||||
<LessonList
|
||||
header="EM"
|
||||
lunch={lunch}
|
||||
lessons={lessons.filter(({ timeStart }) => timeStart >= '12:00')}
|
||||
/>
|
||||
</View>
|
||||
|
|
|
@ -1,13 +1,13 @@
|
|||
import { ViewStyle } from 'react-native'
|
||||
|
||||
type MainAxis = 'center' | 'flexStart'
|
||||
type MainAxis = 'center' | 'flexStart' | 'flexEnd'
|
||||
export const mainAxis: Record<MainAxis, ViewStyle> = {
|
||||
center: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
flexStart: {
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
type CrossAxis = 'center' | 'flexEnd' | 'evenly' | 'spaceBetween'
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
"auth": {
|
||||
"bankid": {
|
||||
"OpenManually": "Öppna BankID manuellt",
|
||||
"OpenOnAnotherDevice": "Öppna BankID på en annan enhet",
|
||||
"OpenOnAnotherDevice": "Öppna BankID på annan enhet",
|
||||
"OpenOnThisDevice": "Logga in med BankID",
|
||||
"Waiting": "Väntar på BankID…"
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue