Skip to content

A
AppUms_Student
Commit ff461bcc by tungnq
Options

TODO: Đã hoàn thiện giao diện điểm danh

parent 5159efcf
Showing with 178 additions and 132 deletions
src/screens/exam_schedule/index.js
import React, { useState } from 'react';
import React, {useState} from 'react';
import {Text, View, StyleSheet} from 'react-native';
import ExamScheduleView from './view';
const ExamSchedule = (props) => {
const [dataExamSchedule, setDataExamSchedule] = useState([
{
id: 1,
code_exam: 'MD001',
code_class:'MD0081',
poetry:'123 (7:30 - 10:30)',
time_exam:'2025-08-05',
class_exam:'A98',
day_exam:'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 2,
code_exam: 'MD001',
code_class:'MD0081',
poetry:'123 (7:30 - 10:30)',
time_exam:'2025-08-05',
class_exam:'A98',
day_exam:'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 3,
code_exam: 'MD001',
code_class:'MD0081',
poetry:'123 (7:30 - 10:30)',
time_exam:'2025-08-05',
class_exam:'A98',
day_exam:'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 4,
code_exam: 'MD001',
code_class:'MD0081',
poetry:'123 (7:30 - 10:30)',
time_exam:'2025-08-05',
class_exam:'A98',
day_exam:'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 5,
code_exam: 'MD001',
code_class:'MD0081',
poetry:'123 (7:30 - 10:30)',
time_exam:'2025-08-05',
class_exam:'A98',
day_exam:'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 6,
code_exam: 'MD001',
code_class:'MD0081',
poetry:'123 (7:30 - 10:30)',
time_exam:'2025-08-05',
class_exam:'A98',
day_exam:'Thứ 3',
description: 'Bảo vệ/ DA',
},
]);
const ExamSchedule = props => {
const [dataExamSchedule, setDataExamSchedule] = useState([
{
id: 1,
code_exam: 'MD001',
code_class: 'MD0081',
poetry: '123 (7:30 - 10:30)',
time_exam: '2025-08-05',
class_exam: 'A98',
day_exam: 'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 2,
code_exam: 'MD001',
code_class: 'MD0081',
poetry: '123 (7:30 - 10:30)',
time_exam: '2025-08-05',
class_exam: 'A98',
day_exam: 'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 3,
code_exam: 'MD001',
code_class: 'MD0081',
poetry: '123 (7:30 - 10:30)',
time_exam: '2025-08-05',
class_exam: 'A98',
day_exam: 'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 4,
code_exam: 'MD001',
code_class: 'MD0081',
poetry: '123 (7:30 - 10:30)',
time_exam: '2025-08-05',
class_exam: 'A98',
day_exam: 'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 5,
code_exam: 'MD001',
code_class: 'MD0081',
poetry: '123 (7:30 - 10:30)',
time_exam: '2025-08-05',
class_exam: 'A98',
day_exam: 'Thứ 3',
description: 'Bảo vệ/ DA',
},
{
id: 6,
code_exam: 'MD001',
code_class: 'MD0081',
poetry: '123 (7:30 - 10:30)',
time_exam: '2025-08-05',
class_exam: 'A98',
day_exam: 'Thứ 3',
description: 'Bảo vệ/ DA',
},
]);
return (
<ExamScheduleView dataExamSchedule={dataExamSchedule} />
);
return <ExamScheduleView dataExamSchedule={dataExamSchedule} />;
};
export default ExamSchedule;
src/screens/exam_schedule/item_view.js
......@@ -5,18 +5,32 @@ import { Text, View, TouchableOpacity, StyleSheet, Image } from 'react-native';
const ItemView = ({item}) => {
return (
<TouchableOpacity style={styles.container}>
<Text style={styles.text_title}>Mã môn học: {item.code_exam}</Text>
<Text style={styles.text_title}>Mã lớp: {item.code_class}</Text>
<Text style={styles.text_title}>Mã môn học:
<Text style={styles.text_content}> {item.code_exam}</Text>
</Text>
<Text style={styles.text_title}>Mã lớp:
<Text style={styles.text_content}> {item.code_class}</Text>
</Text>
<View style={styles.content}>
<Text style={styles.text_content}>Ca/Tiết thi: {item.poetry}</Text>
<Text style={styles.text_content}>Thứ thi: {item.day_exam}</Text>
<Text style={styles.text_title}>Ca/Tiết thi:
<Text style={styles.text_content}> {item.poetry}</Text>
</Text>
<Text style={styles.text_title}>Thứ thi:
<Text style={styles.text_content}> {item.day_exam}</Text>
</Text>
</View>
<View style={styles.content}>
<Text style={styles.text_content}>Ngày thi: {item.time_exam}</Text>
<Text style={styles.text_content}>Phòng thi: {item.class_exam}</Text>
<Text style={styles.text_title}>Ngày thi:
<Text style={styles.text_content}> {item.time_exam}</Text>
</Text>
<Text style={styles.text_title}>Phòng thi:
<Text style={styles.text_content}> {item.class_exam}</Text>
</Text>
</View>
<Text style={styles.text_content}>Ghi chú/ hình thức thi: {item.description}</Text>
<Text style={styles.text_title}>Ghi chú/ hình thức thi:
<Text style={styles.text_content}> {item.description}</Text>
</Text>
</TouchableOpacity>
);
......@@ -28,18 +42,14 @@ const styles = StyleSheet.create({
borderRadius: 10,
paddingHorizontal: 14,
paddingVertical: 10,
marginBottom: 10,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
height:2
},
shadowOpacity: 0.5,
shadowRadius: 2,
elevation: 1,
shadowOffset: {width: 0, height: 2},
shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
shadowRadius: 1,
elevation: Platform.OS === 'ios' ? 1 : 2,
backgroundColor: R.colors.white,
marginVertical: 5,
marginHorizontal:10
marginHorizontal:10,
marginVertical:7.5
},
content: {
flexDirection: 'row',
......@@ -48,9 +58,9 @@ const styles = StyleSheet.create({
},
text_title: {
fontSize: R.fontsize.fontsSize12,
fontWeight: '500',
color: R.colors.blue500,
fontFamily: R.fonts.InterSemiBold,
fontWeight: '600',
color: R.colors.black,
fontFamily: R.fonts.InterMedium,
},
text_content: {
fontSize: R.fontsize.fontsSize12,
......
src/screens/exam_schedule/style.js
......@@ -14,6 +14,14 @@ const styles = StyleSheet.create({
borderBottomWidth: 1,
borderBottomColor: R.colors.grey_200,
},
body: {
flex: 1,
backgroundColor: R.colors.white,
},
content_container: {
flexGrow: 1,
justifyContent: 'center',
},
title: {
fontSize: R.fontsize.fontsSize16,
fontWeight: '700',
......@@ -22,7 +30,14 @@ const styles = StyleSheet.create({
},
flatlist: {
flex: 1,
marginHorizontal: 5,
},
text_empty: {
fontSize: R.fontsize.fontsSize14,
fontWeight: '400',
fontFamily: R.fonts.InterRegular,
color: R.colors.black,
textAlign: 'center',
marginHorizontal:15
},
});
export default styles;
\ No newline at end of file
src/screens/exam_schedule/view.js
import React from 'react';
import {View, FlatList, SafeAreaView } from 'react-native';
import Header from "../../components/Header/Header";
import R from "../../assets/R";
import I18n from "../../helper/i18/i18n";
import ItemView from "./item_view";
import {
View,
FlatList,
SafeAreaView,
Text,
ActivityIndicator,
} from 'react-native';
import Header from '../../components/Header/Header';
import R from '../../assets/R';
import I18n from '../../helper/i18/i18n';
import ItemView from './item_view';
import styles from './style';
import ItemCalendar from '../roll_call/item_calendar';
const ExamScheduleView = (props) => {
const ExamScheduleView = props => {
const {dataExamSchedule} = props;
const renderContent = ({ item }) => {
const renderContent = ({item}) => {
return <ItemView item={item} />;
};
const renderBody = () => {
return (
<ItemView
item={item}
/>
<View style={styles.body}>
<ItemCalendar />
<View style={styles.flatlist}>
<FlatList
data={dataExamSchedule}
renderItem={renderContent}
keyExtractor={item => item.id}
contentContainerStyle={styles.content_container}
showsVerticalScrollIndicator={false}
ListEmptyComponent={() => (
<View style={styles.content_container}>
<ActivityIndicator
size="large"
color={R.colors.main}
animating
/>
<Text style={styles.text_empty}>Không có dữ liệu</Text>
</View>
)}
/>
</View>
</View>
);
};
return (
<View style={styles.container}>
<Header isBack title={I18n.t("ExamSchedule")} />
<View style={styles.container}>
<ItemCalendar/>
<View style={styles.flatlist}>
<FlatList
data={dataExamSchedule}
renderItem={renderContent}
keyExtractor={(item) => item.id}
showsVerticalScrollIndicator={false}
/>
</View>
</View>
<Header isBack title={I18n.t('ExamSchedule')} />
{renderBody()}
</View>
);
};
export default ExamScheduleView;
src/screens/roll_call/detail/view.js
......@@ -3,16 +3,9 @@ import {
Text,
View,
StyleSheet,
SafeAreaView,
ScrollView,
Dimensions,
} from "react-native";
import {
Table,
TableWrapper,
Row,
Cell,
} from 'react-native-reanimated-table';
import Header from "../../../components/Header/Header";
import R from "../../../assets/R";
......@@ -200,9 +193,9 @@ const styles = StyleSheet.create({
},
headerText: {
fontFamily: R.fonts.InterRegular,
fontFamily: R.fonts.InterMedium,
fontSize: R.fontsize.fontsSize12,
fontWeight: '400',
fontWeight: '600',
color: R.colors.black,
textAlign: 'center',
},
......
src/screens/roll_call/item.js
......@@ -12,11 +12,19 @@ const ItemList = ({ item }) => {
style={styles.card_item}
>
<View style={styles.content}>
<Text style={styles.text}>Mã lớp:{item.class_code}</Text>
<Text style={styles.text}>Tên môn: {item.subject_name}</Text>
<Text style={styles.text_title}>Mã lớp:{' '}
<Text style={styles.text_content}>{item.class_code}</Text>
</Text>
<Text style={styles.text_title}>Tên môn:{' '}
<Text style={styles.text_content}>{item.subject_name}</Text>
</Text>
<View style={styles.footer}>
<Text style={styles.text}>Tổng tiết: {item.total_lessons}</Text>
<Text style={styles.text}>Số buổi vắng:{item.absent_count}</Text>
<Text style={styles.text_title}>Tổng tiết:{' '}
<Text style={styles.text_content}>{item.total_lessons}</Text>
</Text>
<Text style={styles.text_title}>Số buổi vắng:{' '}
<Text style={styles.text_content}>{item.absent_count}</Text>
</Text>
</View>
</View>
<IconNext width={15} height={15} />
......@@ -56,7 +64,13 @@ const styles = StyleSheet.create({
marginRight:15
},
text:{
text_title:{
fontSize: R.fontsize.fontsSize12,
fontWeight: '600',
fontFamily: R.fonts.InterMedium,
color: R.colors.black,
},
text_content: {
fontSize: R.fontsize.fontsSize12,
fontWeight: '400',
fontFamily: R.fonts.InterRegular,
......
src/screens/roll_call/item_calendar.js
......@@ -24,9 +24,8 @@ const styles = StyleSheet.create({
width: 0,
height: 2,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,
elevation: 3,
shadowOpacity: 0.25,
elevation: 5,
borderRadius: 10,
},
container_schedule_item: {
......
src/screens/roll_call/view.js
......@@ -28,6 +28,7 @@ const RollCallView = (props) => {
keyExtractor={(item) => item.id.toString()}
scrollEnabled={true}
showsVerticalScrollIndicator={false}
/>
</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