Skip to content

A
AppUms_Lecturer
Commit fe74061b by tungnq
Options

TODO: Đã hoàn thiện được header lịch học

parent 5c465c38
Showing with 184 additions and 7 deletions
src/screens/compensate/register/index.js
...@@ -5,7 +5,128 @@ import CompensateRegisterView from './view'; ...@@ -5,7 +5,128 @@ import CompensateRegisterView from './view';
const CompensateRegister = (props) => { const CompensateRegister = (props) => {
const [isShow, setShowSchedule] = useState(false); const [isShow, setShowSchedule] = useState(false);
const scheduleData = [
{
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)' }
]
},
{
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 }
]
},
{
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)' }
]
},
{
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 }
]
},
{
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)' }
]
},
{
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)' }
]
}
];
...@@ -14,6 +135,7 @@ const CompensateRegister = (props) => { ...@@ -14,6 +135,7 @@ const CompensateRegister = (props) => {
<CompensateRegisterView <CompensateRegisterView
isShow={isShow} isShow={isShow}
setShowSchedule={setShowSchedule} setShowSchedule={setShowSchedule}
scheduleData={scheduleData}
/> />
); );
}; };
......
src/screens/compensate/register/style.js
...@@ -26,6 +26,39 @@ container:{ ...@@ -26,6 +26,39 @@ container:{
}, },
btnRegister:{ btnRegister:{
alignItems:'flex-end', alignItems:'flex-end',
} },
//Header bảng lịch
headerRow: {
flexDirection: 'row',
backgroundColor: R.colors.white,
borderBottomWidth: 1,
borderBottomColor: R.colors.gray,
},
headerText: {
fontSize: R.sizes.sm,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
},
dateColumn: {
minHeight: 40,
paddingHorizontal: 10,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.blue2,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
periodColumn: {
minHeight: 40,
paddingHorizontal: 10,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: R.colors.blue2,
borderRightWidth:1,
borderRightColor:R.colors.gray,
},
}) })
export default styles export default styles
\ No newline at end of file
src/screens/compensate/register/view.js
import React from 'react'; import React from 'react';
import {Text, View, TouchableOpacity, StyleSheet} from 'react-native'; import {Text, View, TouchableOpacity, StyleSheet, ScrollView} from 'react-native';
import styles from './style'; import styles from './style';
import Header from '../../../components/Header/Header'; import Header from '../../../components/Header/Header';
import TextField from '../../../components/Input/TextField'; import TextField from '../../../components/Input/TextField';
...@@ -11,23 +11,43 @@ const CompensateRegisterView = props => { ...@@ -11,23 +11,43 @@ const CompensateRegisterView = props => {
const { const {
isShow, isShow,
setShowSchedule, setShowSchedule,
scheduleData,
} = props; } = props;
const handleToggleSchedule = () => { const handleToggleSchedule = () => {
setShowSchedule(prevState => !prevState); setShowSchedule(prevState => !prevState);
}; };
//Header Lịch học
const renderHeaderSchedule = () =>{
return(
<View style= {styles.headerRow}>
<View style={styles.dateColumn}>
<Text style={styles.headerText}>Thứ / Tiết</Text>
</View>
{Array.from({length: 15}, (_, i) => (
<View key={i} style={styles.periodColumn}>
<Text style={styles.headerText}>Tiết {i + 1} </Text>
</View>
))}
</View>
)
}
const renderSchedule = (item) =>{ const renderSchedule = (item) =>{
if (!isShow) return null; if (!isShow) return null;
return( return(
<View> <ScrollView horizontal style={{marginTop:15}}>
<Text> hi</Text> {renderHeaderSchedule()}
</View> </ScrollView>
) )
} }
return ( return (
<View style={styles.container}> <View style={styles.container}>
<Header title={'Đăng kí báo bù'} isBack /> <Header title={'Đăng kí báo bù'} isBack />
<View style={styles.body}> <ScrollView>
<View style={styles.body}>
<View style={styles.containerInput}> <View style={styles.containerInput}>
<TextField <TextField
title={'Học kì'} title={'Học kì'}
...@@ -123,6 +143,7 @@ const CompensateRegisterView = props => { ...@@ -123,6 +143,7 @@ const CompensateRegisterView = props => {
{renderSchedule()} {renderSchedule()}
</View> </View>
</ScrollView>
</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