Skip to content

A
AppUms_Lecturer
Commit 2e1a6c91 by tungnq
Options

IMPORTANT: Đã dựng xong khung cơ bản xem chi tiết điểm danh của lớp

parent 8f594117
Showing with 296 additions and 9 deletions
src/screens/roll_call/detail/style.js
...@@ -9,7 +9,100 @@ const styles = StyleSheet.create({ ...@@ -9,7 +9,100 @@ const styles = StyleSheet.create({
body:{ body:{
flex:1, flex:1,
backgroundColor:R.colors.white, backgroundColor:R.colors.white,
} marginHorizontal:15,
marginVertical:10,
},
btnGroup:{
flexDirection:'row',
justifyContent:'flex-end',
marginBottom:15,
},
sectionTitle: {
fontSize: R.fontsize.fontsSizeTitle,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.blue,
marginBottom: 10,
marginTop: 15,
},
attendanceTableContainer: {
borderWidth: 1,
borderColor: R.colors.gray3,
borderRadius: 8,
marginBottom: 20,
},
attendanceTable: {
minWidth: 800, // Minimum width to accommodate all columns
},
attendanceHeaderRow: {
flexDirection: 'row',
backgroundColor: R.colors.blue2,
height: 60,
},
attendanceHeaderCell: {
height: 60,
paddingVertical: 8,
paddingHorizontal: 4,
borderRightWidth: 1,
borderRightColor: R.colors.gray3,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray3,
justifyContent: 'center',
alignItems: 'center',
},
attendanceHeaderText: {
fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
textAlign: 'center',
},
attendanceDataRow: {
flexDirection: 'row',
height: 80,
},
attendanceDataCell: {
height: 80,
paddingVertical: 8,
paddingHorizontal: 4,
borderRightWidth: 1,
borderRightColor: R.colors.gray3,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray3,
justifyContent: 'center',
alignItems: 'center',
},
studentInfoColumn: {
width: 120,
},
dateColumn: {
width: 70,
},
studentCodeText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
textAlign: 'center',
marginBottom: 2,
},
studentNameText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
textAlign: 'center',
marginBottom: 2,
},
percentageText: {
fontSize: 10,
fontFamily: R.fonts.fontMedium,
textAlign: 'center',
},
attendanceStatusText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontBold,
fontWeight: '700',
textAlign: 'center',
},
}) })
export default styles export default styles
\ No newline at end of file
src/screens/roll_call/detail/view.js
import React from 'react'; import React, {useState} from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {Text, View, TouchableOpacity, StyleSheet, ScrollView, FlatList} from 'react-native';
import Header from '../../../components/Header/Header'; import Header from '../../../components/Header/Header';
import styles from './style'; import styles from './style';
const DetailRollCallView = (props) => { import Button from '../../../components/Button';
const { } = props; import R from '../../../assets/R';
const DetailRollCallView = props => {
const {} = props;
// Mock data - in real app this would come from API
const [sessionDates] = useState([
'30/06/2025', '06/07/2025', '13/07/2025', '20/07/2025', '27/07/2025',
'04/08/2025', '11/08/2025', '18/08/2025', '25/08/2025', '04/09/2025'
]);
const [studentsData] = useState([
{
id: 1,
studentCode: '85964',
name: 'Hoàng Lâm Anh',
attendance: [1, 1, 1, 1, 1, 1, 1, 1, 1, '*'],
percentage: '0%(0/18)'
},
{
id: 2,
studentCode: '85964',
name: 'Vũ Tuấn Khải',
attendance: [1, 1, 1, 1, 1, 1, 1, 1, 1, '*'],
percentage: '0%(0/18)'
},
{
id: 3,
studentCode: '85964',
name: 'Huỳnh Ngọc Lâm',
attendance: [1, 1, 0, 1, 0, 1, 1, 1, 1, '*'],
percentage: '22%(2/18)'
},
{
id: 4,
studentCode: '85964',
name: 'Nguyễn Đức Mạnh',
attendance: [1, 0, 0, 0, 0, 0, 1, 1, 1, '*'],
percentage: '50%(9/18)'
},
{
id: 5,
studentCode: '85964',
name: 'Vũ Thúy Linh',
attendance: [1, 1, 1, 1, 1, 0, 0, 0, 0, '*'],
percentage: '50%(9/18)'
},
{
id: 6,
studentCode: '85964',
name: 'Vũ Hồng Nhung',
attendance: [1, 1, 0, 0, 1, 1, 0, 1, 0, '*'],
percentage: '50%(9/18)'
}
]);
return ( return (
<View <View style={styles.container}>
style={styles.container}> <Header title={'Thống kê: ATTT2024.P1'} isBack />
<Header title={'Thống kê: ATTT2024.P1'} isBack /> <View style={styles.body}>
<View style={styles.body}> <View style={styles.btnGroup}>
<Button
title="Tạo QR điểm danh"
onPress={() => {}}
containerStyle={{
paddingHorizontal: 5,
paddingVertical: 5,
borderRadius: 20,
}}
backgroundColor={R.colors.orange}
textColor={R.colors.white}
fontSize={12}
height={40}
width={150}
/>
<Button />
<Button
title="Điểm danh"
onPress={() => {}}
containerStyle={{
paddingHorizontal: 5,
paddingVertical: 5,
borderRadius: 20,
marginLeft: 5,
}}
backgroundColor={R.colors.blue}
textColor={R.colors.white}
fontSize={12}
height={40}
width={150}
/>
<Button />
</View>
<View>
<Text>
SL sinh viên nghỉ quá số lượng cho phép: {' '}
<Text>
3
</Text>
</Text>
<Text>
SL sinh viên đang bị cảnh báo: {' '}
<Text>
1
</Text>
</Text>
<Text>
SL sinh viên đủ điều kiện: {' '}
<Text>
3
</Text>
</Text>
</View>
<View>
<Text>
Kí hiệu
</Text>
<View style={{flexDirection:'row', justifyContent:'space-between'}}>
<View>
<Text>
(1)
<Text>
Có mặt
</Text>
</Text>
</View>
<View>
<Text>
(0)
<Text>
Vắng mặt
</Text>
</Text>
</View>
<View>
<Text>
(*)
<Text>
Chưa đến ngày
</Text>
</Text>
</View>
</View>
</View>
<View>
<Text style={styles.sectionTitle}>
Danh sách
</Text>
<View style={styles.attendanceTableContainer}>
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<View style={styles.attendanceTable}>
{/* Header Row */}
<View style={styles.attendanceHeaderRow}>
<View style={[styles.attendanceHeaderCell, styles.studentInfoColumn]}>
<Text style={styles.attendanceHeaderText}>Mã SV,{'\n'}Họ và tên</Text>
</View>
{sessionDates.map((date, index) => (
<View key={index} style={[styles.attendanceHeaderCell, styles.dateColumn]}>
<Text style={styles.attendanceHeaderText}>{date}</Text>
</View>
))}
</View>
{/* Student Rows */}
{studentsData.map((student, studentIndex) => (
<View key={student.id} style={styles.attendanceDataRow}>
<View style={[styles.attendanceDataCell, styles.studentInfoColumn]}>
<Text style={styles.studentCodeText}>{student.studentCode}</Text>
<Text style={styles.studentNameText}>{student.name}</Text>
<Text style={[
styles.percentageText,
{color: student.percentage.includes('50%') ? R.colors.red : R.colors.green}
]}>
{student.percentage}
</Text>
</View>
{student.attendance.map((status, dateIndex) => (
<View key={dateIndex} style={[styles.attendanceDataCell, styles.dateColumn]}>
<Text style={[
styles.attendanceStatusText,
{
color: status === 1 ? R.colors.blue :
status === 0 ? R.colors.red : R.colors.gray2
}
]}>
{status}
</Text>
</View>
))}
</View>
))}
</View>
</ScrollView>
</View>
</View> </View>
</View>
</View> </View>
); );
}; };
......
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