Commit 05418e2b by tungnq

TODO: Đã hoàn thiện xong giao diện màn hình lịch học

parent 2e54f2ca
...@@ -35,15 +35,21 @@ const styles = StyleSheet.create({ ...@@ -35,15 +35,21 @@ const styles = StyleSheet.create({
justifyContent:'center', justifyContent:'center',
borderColor:R.colors.grayBorderInputTextHeader, borderColor:R.colors.grayBorderInputTextHeader,
}, },
text_title:{
fontSize:R.fontsize.fontSizeContent,
fontWeight:'600',
color:R.colors.black,
fontFamily:R.fonts.fontMedium,
},
text:{ text:{
fontSize:R.sizes.sm, fontSize:R.fontsize.fontSizeContent,
color:R.colors.black, color:R.colors.black,
fontFamily:R.fonts.fontRegular, fontFamily:R.fonts.fontRegular,
fontWeight:'400', fontWeight:'400',
}, },
containerCard:{ containerCard:{
padding:10, padding:10,
marginBottom:15, marginBottom:15 ,
borderRadius:10, borderRadius:10,
backgroundColor:R.colors.white, backgroundColor:R.colors.white,
shadowColor:R.colors.black, shadowColor:R.colors.black,
......
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, SafeAreaView, FlatList} from 'react-native'; import {
Text,
View,
TouchableOpacity,
StyleSheet,
SafeAreaView,
FlatList,
} from 'react-native';
import styles from './style'; import styles from './style';
import Header from '../../components/Header/Header'; import Header from '../../components/Header/Header';
import Button from '../../components/Button'; import Button from '../../components/Button';
import R from '../../assets/R'; import R from '../../assets/R';
import*as SCREENNAME from '../../routers/ScreenNames'; import * as SCREENNAME from '../../routers/ScreenNames';
import { useNavigation } from '@react-navigation/native'; import {useNavigation} from '@react-navigation/native';
const ClassActivityView = (props) => { const ClassActivityView = props => {
const {dataList,setDataList} = props; const {dataList, setDataList} = props;
const navigate = useNavigation(); const navigate = useNavigation();
const renderItem =({ const renderItem = ({item}) => {
item,
}) => {
return ( return (
<View style={styles.containerCard}> <View style={styles.containerCard}>
<Text style={styles.text}>Lp sinh hot: {item.class_activity}</Text> <Text style={styles.text_title}>Lp sinh hot:{' '}
<View style={styles.containerText}> <Text style={styles.text}>{item.class_activity}</Text>
<Text style={styles.text}>Khoá: {item.course}</Text> </Text>
<View style={styles.sizedBox}></View> <View style={styles.containerText}>
<Text style={styles.text}>H ĐT: {item.training_system}</Text> <Text style={styles.text_title}>Khoá: {' '}
</View> <Text style={styles.text}>{item.course}</Text>
<Text style={styles.text}>Lp theo khoa: {item.class_by_course}</Text> </Text>
<Text style={styles.text}>Khoa: {item.science}</Text> <View style={styles.sizedBox}></View>
<Text style={styles.text}>Lp trưởng: {item.class_leader}</Text> <Text style={styles.text_title}>H ĐT: {' '}
<Text style={styles.text}>{item.training_system}</Text>
</Text>
</View>
<Text style={styles.text_title}>Lp theo khoa: {' '}
<Text style={styles.text}>{item.class_by_course}</Text>
</Text>
<Text style={styles.text_title}>Khoa: {' '}
<Text style={styles.text}>{item.science}</Text>
</Text>
<Text style={styles.text_title}>Lp trưởng: {' '}
<Text style={styles.text}>{item.class_leader}</Text>
</Text>
<View style={styles.containerButton}> <View style={styles.containerButton}>
<Button <Button
title='Chi tiết' title="Chi tiết"
onPress={()=>{navigate.navigate(SCREENNAME.LISTSTUDENTCLASS)}} onPress={() => {
backgroundColor={R.colors.blue} navigate.navigate(SCREENNAME.LISTSTUDENTCLASS);
textColor={R.colors.white} }}
height={30} backgroundColor={R.colors.blue}
borderRadius={15} textColor={R.colors.white}
fontSize={R.sizes.sm} height={30}
fontWeight={'600'} borderRadius={15}
fontFamily={R.fonts.fontMedium} fontSize={R.sizes.sm}
paddingHorizontal={15} fontWeight={'600'}
paddingVertical={3} fontFamily={R.fonts.fontMedium}
paddingHorizontal={15}
paddingVertical={3}
/> />
</View> </View>
</View> </View>
) );
} };
return ( return (
< View style={styles.container}> <View style={styles.container}>
<Header title={'Danh sách lớp sinh hoạt'} isBack/> <Header title={'Danh sách lớp sinh hoạt'} isBack />
<View style={styles.body}> <View style={styles.body}>
<View style={styles.card}> <View style={styles.card}>
<TouchableOpacity style={styles.btnCard}> <TouchableOpacity style={styles.btnCard}>
...@@ -53,14 +71,12 @@ const ClassActivityView = (props) => { ...@@ -53,14 +71,12 @@ const ClassActivityView = (props) => {
</View> </View>
<FlatList <FlatList
data={dataList || []} data={dataList || []}
renderItem={renderItem} renderItem={renderItem}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
vertical vertical
keyExtractor={(item, index) => `${index}`} keyExtractor={(item, index) => `${index}`}
/> />
</View> </View>
</View> </View>
); );
}; };
......
...@@ -40,7 +40,7 @@ const styles = StyleSheet.create({ ...@@ -40,7 +40,7 @@ const styles = StyleSheet.create({
}, },
daysHeaderContainer: { daysHeaderContainer: {
flexDirection: 'row', flexDirection: 'row',
backgroundColor: R.colors.gray, backgroundColor: R.colors.grayBorderInputTextHeader,
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: R.colors.gray2, borderBottomColor: R.colors.gray2,
}, },
......
...@@ -43,6 +43,7 @@ const styles = StyleSheet.create({ ...@@ -43,6 +43,7 @@ const styles = StyleSheet.create({
justifyContent: 'center', justifyContent: 'center',
borderRightWidth: 1, borderRightWidth: 1,
borderRightColor: R.colors.gray, borderRightColor: R.colors.gray,
marginBottom: 5,
}, },
dayHeaderText: { dayHeaderText: {
fontSize: R.fontsize.fontSizeLabel, fontSize: R.fontsize.fontSizeLabel,
...@@ -63,10 +64,14 @@ const styles = StyleSheet.create({ ...@@ -63,10 +64,14 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
}, },
dayHeaderNumberToday: { dayHeaderNumberToday: {
color: R.colors.blue, color: R.colors.white,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
fontWeight: '600', fontWeight: '600',
backgroundColor: R.colors.blue,
borderRadius: 15,
paddingHorizontal: 8,
paddingVertical: 2,
}, },
timeSlotsContainer: { timeSlotsContainer: {
flex: 1, flex: 1,
......
...@@ -113,8 +113,8 @@ const styles = StyleSheet.create({ ...@@ -113,8 +113,8 @@ const styles = StyleSheet.create({
fontWeight: '400', fontWeight: '400',
backgroundColor: R.colors.blue, backgroundColor: R.colors.blue,
borderRadius: 15, borderRadius: 15,
paddingHorizontal: 4, paddingHorizontal: 8,
paddingVertical: 3, paddingVertical: 2,
}, },
eventTime: { eventTime: {
fontSize: R.fontsize.fontSizeContent, fontSize: R.fontsize.fontSizeContent,
......
...@@ -91,8 +91,8 @@ const styles = StyleSheet.create({ ...@@ -91,8 +91,8 @@ const styles = StyleSheet.create({
fontFamily: R.fonts.fontSemiBold, fontFamily: R.fonts.fontSemiBold,
backgroundColor: R.colors.blue, backgroundColor: R.colors.blue,
borderRadius: 15, borderRadius: 15,
paddingHorizontal: 4, paddingHorizontal: 8,
paddingVertical: 3, paddingVertical: 2,
}, },
eventsContainer: { eventsContainer: {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment