Skip to content

A
AppUms_Lecturer
Commit 5345fd17 by tungnq
Options

TODO: Đã hoàn thiện giao diện cơ bản của bảng lịch học đang bổ sung check box

parent fe74061b
Showing with 258 additions and 130 deletions
src/screens/compensate/register/index.js
......@@ -9,123 +9,117 @@ const CompensateRegister = (props) => {
{
date: 'Thứ 2\n28/07/2025',
periods: [
{ period: 1, percent: '100%', code: '(24/24)' },
{ period: 2, percent: '100%', code: '(24/24)' },
{ period: 3, percent: '100%', code: '(24/24)' },
{ period: 4, percent: '100%', code: '(24/24)' },
{ period: 5, percent: '100%', code: '(24/24)' },
{ period: 6, percent: '100%', code: '(24/24)' },
{ period: 7, percent: '100%', code: '(24/24)' },
{ period: 8, percent: '100%', code: '(24/24)' },
{ period: 9, percent: '100%', code: '(24/24)' },
{ period: 10, percent: '100%', code: '(24/24)' },
{ period: 11, percent: '100%', code: '(24/24)' },
{ period: 12, percent: '100%', code: '(24/24)' },
{ period: 13, percent: '100%', code: '(24/24)' },
{ period: 14, percent: '100%', code: '(24/24)' },
{ period: 15, percent: '100%', code: '(24/24)' }
]
},
{ period: 1, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] },
{
date: 'Thứ 3\n29/07/2025',
periods: [
{ period: 1, percent: '100%', code: '(24/24)', available: true },
{ period: 2, percent: '100%', code: '(24/24)', available: true },
{ period: 3, percent: '100%', code: '(24/24)', available: true },
{ period: 4, percent: '100%', code: '(24/24)', available: true },
{ period: 5, percent: '100%', code: '(24/24)', available: true },
{ period: 6, percent: '100%', code: '(24/24)', available: true },
{ period: 7, percent: '100%', code: '(24/24)', available: true },
{ period: 8, percent: '100%', code: '(24/24)', available: true },
{ period: 9, percent: '100%', code: '(24/24)', available: true },
{ period: 10, percent: '100%', code: '(24/24)', available: true },
{ period: 11, percent: '100%', code: '(24/24)', available: true },
{ period: 12, percent: '100%', code: '(24/24)', available: true },
{ period: 13, percent: '100%', code: '(24/24)', available: true },
{ period: 14, percent: '100%', code: '(24/24)', available: true },
{ period: 15, percent: '100%', code: '(24/24)', available: true }
]
},
{ period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] },
{
date: 'Thứ 4\n30/07/2025',
periods: [
{ period: 1, percent: '100%', code: '(24/24)' },
{ period: 2, percent: '100%', code: '(24/24)' },
{ period: 3, percent: '100%', code: '(24/24)' },
{ period: 4, percent: '100%', code: '(24/24)' },
{ period: 5, percent: '100%', code: '(24/24)' },
{ period: 6, percent: '100%', code: '(24/24)' },
{ period: 7, percent: '100%', code: '(24/24)' },
{ period: 8, percent: '100%', code: '(24/24)' },
{ period: 9, percent: '100%', code: '(24/24)' },
{ period: 10, percent: '100%', code: '(24/24)' },
{ period: 11, percent: '100%', code: '(24/24)' },
{ period: 12, percent: '100%', code: '(24/24)' },
{ period: 13, percent: '100%', code: '(24/24)' },
{ period: 14, percent: '100%', code: '(24/24)' },
{ period: 15, percent: '100%', code: '(24/24)' }
]
},
{ period: 1, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 2, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 3, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 4, percent: '3%', totalSession: '24' , breakTime:'1'},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] },
{
date: 'Thứ 5\n31/07/2025',
periods: [
{ period: 1, percent: '100%', code: '(24/24)', available: true },
{ period: 2, percent: '100%', code: '(24/24)', available: true },
{ period: 3, percent: '100%', code: '(24/24)', available: true },
{ period: 4, percent: '0%', code: '(0/24)', available: true },
{ period: 5, percent: '0%', code: '(0/24)', available: true },
{ period: 6, percent: '0%', code: '(0/24)', available: true },
{ period: 7, percent: '100%', code: '(24/24)', available: true },
{ period: 8, percent: '100%', code: '(24/24)', available: true },
{ period: 9, percent: '100%', code: '(24/24)', available: true },
{ period: 10, percent: '100%', code: '(24/24)', available: true },
{ period: 11, percent: '100%', code: '(24/24)', available: true },
{ period: 12, percent: '100%', code: '(24/24)', available: true },
{ period: 13, percent: '100%', code: '(24/24)', available: true },
{ period: 14, percent: '100%', code: '(24/24)', available: true },
{ period: 15, percent: '100%', code: '(24/24)', available: true }
]
},
{ period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] },
{
date: 'Thứ 6\n01/08/2025',
periods: [
{ period: 1, percent: '100%', code: '(24/24)' },
{ period: 2, percent: '100%', code: '(24/24)' },
{ period: 3, percent: '100%', code: '(24/24)' },
{ period: 4, percent: '100%', code: '(24/24)' },
{ period: 5, percent: '100%', code: '(24/24)' },
{ period: 6, percent: '100%', code: '(24/24)' },
{ period: 7, percent: '100%', code: '(24/24)' },
{ period: 8, percent: '100%', code: '(24/24)' },
{ period: 9, percent: '100%', code: '(24/24)' },
{ period: 10, percent: '100%', code: '(24/24)' },
{ period: 11, percent: '100%', code: '(24/24)' },
{ period: 12, percent: '100%', code: '(24/24)' },
{ period: 13, percent: '100%', code: '(24/24)' },
{ period: 14, percent: '100%', code: '(24/24)' },
{ period: 15, percent: '100%', code: '(24/24)' }
]
},
{ period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] },
{
date: 'Thứ 7\n02/08/2025',
periods: [
{ period: 1, percent: '100%', code: '(24/24)' },
{ period: 2, percent: '100%', code: '(24/24)' },
{ period: 3, percent: '100%', code: '(24/24)' },
{ period: 4, percent: '100%', code: '(24/24)' },
{ period: 5, percent: '100%', code: '(24/24)' },
{ period: 6, percent: '100%', code: '(24/24)' },
{ period: 7, percent: '100%', code: '(24/24)' },
{ period: 8, percent: '100%', code: '(24/24)' },
{ period: 9, percent: '100%', code: '(24/24)' },
{ period: 10, percent: '100%', code: '(24/24)' },
{ period: 11, percent: '100%', code: '(24/24)' },
{ period: 12, percent: '100%', code: '(24/24)' },
{ period: 13, percent: '100%', code: '(24/24)' },
{ period: 14, percent: '100%', code: '(24/24)' },
{ period: 15, percent: '100%', code: '(24/24)' }
]
}
{ period: 1, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 2, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 3, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 4, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 5, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 6, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 7, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 8, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 9, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 10, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 11, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 12, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 13, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 14, percent: '100%', totalSession: '24' , breakTime:'24'},
{ period: 15, percent: '100%', totalSession: '24' , breakTime:'24'}
] }
];
......
src/screens/compensate/register/style.js
import { StyleSheet, Text, View } from 'react-native'
import { StyleSheet, Text, View, Dimensions } from 'react-native'
import R from '../../../assets/R';
//B1: Xác định chiều rộng cột đầu tiên
const width_first = 100;
//B2: Xác định chiều rộng của 15 cột tiếp theo
const width_second = 110;
//B3: Xác định số tiết diễn ra trong 1 ngày -> để có kích thước bảng
const period_count = 15;
//B4: Xác định chiều rộng của bảng
const total_width_table = width_first + (width_second * period_count);
const styles = StyleSheet.create({
container:{
flex:1,
......@@ -29,6 +37,13 @@ container:{
},
//Header bảng lịch
tableContainer:{
marginTop:15,
borderWidth:1,
borderColor:R.colors.gray,
width:total_width_table,
},
headerRow: {
flexDirection: 'row',
backgroundColor: R.colors.white,
......@@ -43,7 +58,8 @@ container:{
color: R.colors.black,
},
dateColumn: {
minHeight: 40,
height: 40,
width:width_first,
paddingHorizontal: 10,
justifyContent: 'center',
alignItems: 'center',
......@@ -52,13 +68,65 @@ container:{
borderRightColor:R.colors.gray,
},
periodColumn: {
minHeight: 40,
paddingHorizontal: 10,
height: 40,
width:width_second,
paddingHorizontal: 5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.blue2,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
dateBody:{
width: width_first,
minHeight: 40,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.white,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
periodBody:{
width: width_second,
padding:5,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.white,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
dataRow: {
flexDirection: 'row',
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
minHeight: 50,
},
periodCell: {
padding: 2,
alignItems: 'center',
justifyContent: 'center',
minHeight: 50,
width: '100%',
},
dateText:{
fontSize: R.sizes.sm,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
percentText:{
fontSize: R.sizes.sm,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
codeText:{
fontSize: R.sizes.sm,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
})
export default styles
\ No newline at end of file
src/screens/compensate/register/view.js
import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet, ScrollView} from 'react-native';
import {
Text,
View,
TouchableOpacity,
StyleSheet,
ScrollView,
} from 'react-native';
import styles from './style';
import Header from '../../../components/Header/Header';
import TextField from '../../../components/Input/TextField';
......@@ -7,42 +13,98 @@ import R from '../../../assets/R';
import Dropdown from '../../../components/DropdownAlert/Dropdown';
import TextMulti from '../../../components/Input/TextMulti';
import Button from '../../../components/Button';
import CheckBox from '../../../components/CheckBox';
const CompensateRegisterView = props => {
const {
isShow,
setShowSchedule,
scheduleData,
} = props;
const {isShow, setShowSchedule, scheduleData} = props;
const getCheckColor = (item) => {
console.log(item?.totalSession);
if ( item?.breakTime=== item?.totalSession && item?.percent === '100%') {
return R.colors.blue;
}
return R.colors.red;
};
const handleToggleSchedule = () => {
setShowSchedule(prevState => !prevState);
};
//Header Lịch học
const renderHeaderSchedule = () =>{
return(
<View style= {styles.headerRow}>
<View style={styles.dateColumn}>
const renderHeaderSchedule = () => {
return (
<View style={styles.headerRow}>
<View style={[styles.dateColumn, {minWidth: 80}]}>
<Text style={styles.headerText}>Thứ / Tiết</Text>
</View>
{Array.from({length: 15}, (_, i) => (
<View key={i} style={styles.periodColumn}>
<View key={i} style={[styles.periodColumn, {backgroundColor: R.colors.blue3}]}>
<Text style={styles.headerText}>Tiết {i + 1} </Text>
</View>
))}
</View>
);
};
//Render một dòng của bảng lịch
const renderRow = (dayData, index) => {
return (
<View key={index} style={styles.dataRow}>
<View style={styles.dateBody}>
<Text
style={[
styles.dateText,
{textAlign: 'center', paddingHorizontal: 2},
]}>
{dayData.date}
</Text>
</View>
{dayData.periods.map((period, periodIndex) => (
<View key={periodIndex} style={styles.periodBody}>
<View
style={[
styles.periodCell,
period.available && styles.availableCell,
]}>
<CheckBox
size={20}
checked={period.available}
/>
<View style={{flexDirection:'row'}}>
<Text
style={[
styles.percentText,
period.available && styles.availableText,
{color:getCheckColor(period)}
]}>
{period.percent}
</Text>
<Text
style={[
styles.codeText,
{color:getCheckColor(period), marginLeft:3},
period.available && styles.availableText,
]}>
({period.breakTime}/{period.totalSession})
</Text>
</View>
)
}
const renderSchedule = (item) =>{
</View>
</View>
))}
</View>
);
};
const renderSchedule = item => {
if (!isShow) return null;
return(
<ScrollView horizontal style={{marginTop:15}}>
return (
<View style={styles.tableContainer}>
{renderHeaderSchedule()}
</ScrollView>
)
}
{scheduleData.map((dayData, index) => renderRow(dayData, index))}
</View>
);
};
return (
<View style={styles.container}>
<Header title={'Đăng kí báo bù'} isBack />
......@@ -85,14 +147,18 @@ const CompensateRegisterView = props => {
</View>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Mã lớp </Text>
<Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
Mã lớp{' '}
</Text>
<Text style={{color: R.colors.red}}>*</Text>
</View>
<Dropdown title={'Giảng viên thay thế'} />
</View>
<View style={styles.containerDropDown}>
<View style={{flexDirection: 'row'}}>
<Text style={[styles.txtSubtitle , {marginBottom: 5}]}>Lịch báo cần bù </Text>
<Text style={[styles.txtSubtitle, {marginBottom: 5}]}>
Lịch báo cần bù{' '}
</Text>
<Text style={{color: R.colors.red}}>*</Text>
</View>
<Dropdown title={'Lịch báo cần bù'} />
......@@ -140,8 +206,7 @@ const CompensateRegisterView = props => {
/>
</View>
{renderSchedule()}
<ScrollView horizontal>{renderSchedule()}</ScrollView>
</View>
</ScrollView>
</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