Skip to content

A
AppUms_Lecturer
Commit 2e54f2ca by tungnq
Options

TODO: Đã kiểm tra giao diện lịch học và refactor code

parent 74d29a3c
Showing with 285 additions and 253 deletions
src/routers/drawer_schedule/drawerView.js
......@@ -18,7 +18,6 @@ import FilterWeekView from "../../screens/class_schedule/filterWeek";
import Filter3Date from "../../screens/class_schedule/filter3day";
const Drawer = createDrawerNavigator();
const ArrowLeft = R.images.icBack;
const IconMenu = R.images.icMenu;
const IconSearch = R.images.icSearch;
......@@ -58,7 +57,7 @@ const DrawerNavigatorView = (props) => {
const MenuButton = ({ onPress }) => (
<TouchableOpacity style={styles.menuButton} onPress={onPress}>
<Image source={IconMenu} style={{width: 25, height: 20}} tintColor={R.colors.white}/>
<Image source={IconMenu} style={styles.icon} tintColor={R.colors.white}/>
</TouchableOpacity>
);
......@@ -126,7 +125,7 @@ const DrawerNavigatorView = (props) => {
headerRight: () => (
<View style={styles.headerRightContainer}>
<TouchableOpacity style={styles.searchButton}>
<Image source={IconSearch} style={{width: 25, height: 25}} tintColor={R.colors.white}/>
<Image source={IconSearch} style={styles.iconSearch} tintColor={R.colors.white}/>
</TouchableOpacity>
<View style={styles.avatarButton} />
</View>
......@@ -198,8 +197,8 @@ const styles = StyleSheet.create({
marginRight: 10,
},
avatarButton: {
width: 30,
height: 30,
width: 25,
height: 25,
borderRadius: 30,
backgroundColor: R.colors.white,
},
......@@ -212,10 +211,19 @@ const styles = StyleSheet.create({
fontSize: R.sizes.lg,
color: R.colors.white,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
},
headerTitleContainer: {
flexDirection: 'row',
},
icon: {
width: 25,
height: 20,
},
iconSearch: {
width: 25,
height: 25,
},
});
export default connect(mapStateToProps, {})(DrawerNavigatorView);
\ No newline at end of file
src/routers/drawer_schedule/itemDrawer.js
......@@ -201,7 +201,7 @@ const styles = StyleSheet.create({
color: R.colors.black,
flex: 1,
fontFamily: R.fonts.fontMedium,
fontWeight: '400',
fontWeight: '600',
},
filterLabelSelected: {
color: R.colors.white,
......@@ -218,7 +218,7 @@ const styles = StyleSheet.create({
marginTop: 24,
},
sectionTitle: {
fontWeight: "400",
fontWeight: "600",
fontFamily: R.fonts.fontMedium,
marginBottom: 10,
fontSize: R.sizes.lg,
......
src/screens/class_schedule/detail/style.js
......@@ -4,6 +4,7 @@ import R from '../../../assets/R'
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: R.colors.white,
},
back_button: {
position: 'absolute',
......@@ -16,8 +17,8 @@ const styles = StyleSheet.create({
},
text_title: {
fontSize: R.fontsize.fontSizeSubTitle,
fontWeight: '500',
fontFamily: R.fonts.InterRegular,
fontWeight: '600',
fontFamily: R.fonts.fontMedium,
color: R.colors.blue,
},
container_content: {
......@@ -25,9 +26,16 @@ const styles = StyleSheet.create({
},
text_content: {
fontSize: R.fontsize.fontSizeLabel,
fontWeight: '500',
fontFamily: R.fonts.fontMedium,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
},
icon:{
width:20,
height:15,
},
info:{
paddingHorizontal: 15, paddingVertical: 5
}
})
export default styles
\ No newline at end of file
src/screens/class_schedule/detail/view.js
......@@ -16,13 +16,13 @@ const DetailClassScheduleView = (props) => {
style={styles.background_header}
>
<TouchableOpacity style={styles.back_button} onPress={() => navigate.goBack()}>
<Image source={ArrowLeftIcon} style= {{width:20, height:15}}/>
<Image source={ArrowLeftIcon} style= {styles.icon}/>
</TouchableOpacity>
</ImageBackground>
<View style={styles.container_content}>
<Text style={styles.text_title}>Lịch dạy lớp IT0032.47.T1</Text>
<Text style={styles.text_content}>Thứ 6: 25/07/2025, 07:00 - 09:00</Text>
<View style={[styles.container_content, { paddingHorizontal: 15, paddingVertical: 5 }]}>
<View style={[styles.container_content, styles.info]}>
<Text style={styles.text_content}>Vị trí: Phòng B205</Text>
<Text style={styles.text_content}>Sĩ số: 40</Text>
<Text style={styles.text_content}>Lớp học: Thực hành</Text>
......
src/screens/class_schedule/filter3day/style.js
......@@ -56,12 +56,14 @@ const styles = StyleSheet.create({
},
dayHeaderText: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
},
todayHeaderText: {
color: R.colors.black,
fontFamily: R.fonts.fontRegular,
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
},
dayNumberContainer: {
minWidth: 28,
......@@ -78,6 +80,7 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
fontWeight: '400',
},
todayHeaderNumber: {
color: R.colors.white,
......@@ -125,6 +128,7 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
fontWeight: '400',
},
eventCard: {
borderRadius: 8,
......@@ -141,11 +145,13 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
},
eventTime: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
},
});
......
src/screens/class_schedule/filter3day/view.js
......@@ -11,9 +11,7 @@ import styles from './style';
const Filter3DayView = (props) => {
const {
navigation,
currentDate,
selectedDate,
showMonthPicker,
scrollViewRef,
panResponder,
......@@ -23,7 +21,6 @@ const Filter3DayView = (props) => {
get3DaysDates,
isToday,
handleMonthSelect,
toggleMonthPicker,
calculateEventPosition
} = props;
......
src/screens/class_schedule/filterWeek/style.js
......@@ -46,14 +46,15 @@ const styles = StyleSheet.create({
},
dayHeaderText: {
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
fontFamily: R.fonts.fontMedium,
fontWeight: '600',
color: R.colors.black,
},
dayHeaderNumber: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
},
dayHeaderNumberContainerToday: {
......@@ -65,6 +66,7 @@ const styles = StyleSheet.create({
color: R.colors.blue,
fontFamily: R.fonts.fontMedium,
fontSize: R.fontsize.fontSizeContent,
fontWeight: '600',
},
timeSlotsContainer: {
flex: 1,
......@@ -130,17 +132,20 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeBtn,
fontFamily: R.fonts.fontMedium,
color: R.colors.white,
fontWeight: '600',
marginBottom: 1,
},
eventSubtitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
},
eventTime: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.white,
fontWeight: '400',
},
});
......
src/screens/class_schedule/filterWeek/view.js
......@@ -10,9 +10,7 @@ import R from '../../../assets/R';
import styles from './style';
const FilterWeekView = ({
navigation,
currentDate,
selectedDate,
showMonthPicker,
scrollViewRef,
panResponder,
......@@ -23,9 +21,6 @@ const FilterWeekView = ({
getEventsForDate,
calculateEventPosition,
handleMonthSelect,
toggleMonthPicker,
HOUR_HEIGHT,
DAY_COLUMN_WIDTH,
}) => {
const renderMonthPicker = () => {
......@@ -66,7 +61,7 @@ const FilterWeekView = ({
<View style={styles.weekHeaderContainer}>
<View style={styles.timeColumnHeader} />
{weekDates.map((date, index) => {
const isCurrentDay = isToday(date); // Gọi hàm kiểm tra
const isCurrentDay = isToday(date);
return (
<View key={index} style={styles.dayHeaderCell}>
......
src/screens/class_schedule/filterday/index.js
......@@ -59,7 +59,7 @@ const FilterDay = ({navigation}) => {
};
const getDayName = (date) => {
const days = ['CN', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7'];
const days = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
return days[date.getDay()];
};
......
src/screens/class_schedule/filterday/style.js
......@@ -35,15 +35,17 @@ const styles = StyleSheet.create({
borderRightColor:R.colors.gray,
},
dayName: {
fontSize: R.sizes.xs,
fontFamily: R.fonts.fontRegular,
fontSize: R.fontsize.fontSizeLabel,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
marginBottom: 2,
},
dayNumber: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
fontWeight: '400',
},
timeSlotsContainer: {
flex: 1,
......@@ -83,6 +85,7 @@ const styles = StyleSheet.create({
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
fontWeight: '400',
},
eventCard: {
borderRadius: 15,
......
src/screens/class_schedule/filterday/view.js
......@@ -9,17 +9,13 @@ import R from '../../../assets/R';
import styles from './style';
const FilterDayView = (props) => {
const { navigation,
currentDate,
const {
selectedDate,
showMonthPicker,
scrollViewRef,
panResponder,
getEventsForDate,
getDayName,
getMonthName,
handleMonthSelect,
toggleMonthPicker,
calculateEventPosition, } = props;
const isToday = (date) => {
......
src/screens/class_schedule/style.js
......@@ -13,218 +13,229 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
header: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 15,
},
header_title: {
fontSize: R.fontsize.fontsSizeTitle,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
},
navButton: {
width: 30,
height: 30,
borderRadius: 20,
backgroundColor: R.colors.blue,
alignItems: 'center',
justifyContent: 'center',
},
navButtonText: {
color: R.colors.white,
fontSize: R.fontsize.fontsSizeTitle,
fontFamily: R.fonts.fontMedium,
},
weekDaysContainer: {
flexDirection: 'row',
paddingBottom: 5,
marginBottom: 5,
},
weekDayCell: {
width: CELL_WIDTH,
alignItems: 'center',
},
weekDayText: {
fontFamily: R.fonts.fontRegular,
fontSize: R.fontsize.fontSizeLabel,
fontWeight: '400',
color: R.colors.black,
},
calendarGrid: {
},
weekRow: {
flexDirection: 'row',
},
dayCell: {
width: CELL_WIDTH,
minHeight: CELL_HEIGHT,
borderWidth: 1,
borderColor: R.colors.grayBorderInputTextHeader,
padding: 4,
alignItems: 'center',
},
selectedDayCell: {
borderColor: R.colors.blue,
borderWidth: 1,
},
dayText: {
fontSize: R.fontsize.fontSizeLabel,
fontWeight: '500',
fontFamily:R.fonts.fontSemiBold,
color: R.colors.black,
marginBottom: 2,
},
dayTextInactive: {
color: R.colors.black,
opacity: 1,
},
selectedDayText: {
color: R.colors.black,
fontWeight: 'bold',
fontFamily: R.fonts.fontSemiBold,
},
todayText: {
color: R.colors.white,
fontWeight: 'bold',
fontFamily: R.fonts.fontSemiBold,
backgroundColor: R.colors.blue,
borderRadius:15,
paddingHorizontal: 4,
paddingVertical: 3,
},
eventsContainer: {
width: '100%',
flex: 1,
},
eventBar: {
paddingVertical: 2,
paddingHorizontal: 5,
borderRadius: 10,
marginBottom: 2,
backgroundColor:R.colors.blue
},
eventBarText: {
fontSize: R.fontsize.fontSizeLabel,
color: R.colors.white,
fontWeight: '500',
fontFamily: R.fonts.fontRegular
},
moreEventsText: {
fontSize: R.sizes.xs,
color: R.colors.gray,
textAlign: 'center',
},
modalBackdrop: {
flex: 1,
backgroundColor: R.colors.grayBorderInputTextHeader,
justifyContent: 'flex-end',
},
bottomSheet: {
height: BOTTOM_SHEET_HEIGHT,
backgroundColor: R.colors.white,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
bottomSheetContent: {
paddingHorizontal: 15,
},
dragHandle: {
width: 40,
height: 4,
backgroundColor: R.colors.gray,
borderRadius: 2,
alignSelf: 'center',
marginTop: 10,
marginBottom: 15,
},
bottomSheetHeader: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
marginBottom: 20,
},
bottomSheetTitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
flex: 1,
},
closeButton: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: R.colors.gray,
alignItems: 'center',
justifyContent: 'center',
},
closeButtonText: {
fontSize: R.fontsize.fontsSize12,
color: R.colors.black,
fontFamily: R.fonts.fontRegular,
},
noEventsContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 40,
},
noEventsText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.gray,
fontWeight: '400'
},
eventCard: {
flexDirection: 'row',
backgroundColor: R.colors.white,
borderRadius: 12,
padding: 15,
marginBottom: 12,
borderLeftWidth: 4,
borderLeftColor: R.colors.blue500,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 1,
shadowRadius: 1,
elevation: 2,
},
eventTimeContainer: {
minWidth: 80,
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginRight: 15,
},
eventTime: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.blue,
fontWeight: '600',
},
eventContent: {
flex: 1,
},
eventTitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
marginBottom: 4,
},
eventDescription: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.gray,
},
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: 15,
},
header_title: {
fontSize: R.fontsize.fontsSizeTitle,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
},
navButton: {
width: 30,
height: 30,
borderRadius: 20,
backgroundColor: R.colors.blue,
alignItems: 'center',
justifyContent: 'center',
},
navButtonText: {
color: R.colors.white,
fontSize: R.fontsize.fontsSizeTitle,
fontFamily: R.fonts.fontMedium,
},
weekDaysContainer: {
flexDirection: 'row',
paddingBottom: 5,
marginBottom: 5,
},
weekDayCell: {
width: CELL_WIDTH,
alignItems: 'center',
},
weekDayText: {
fontFamily: R.fonts.fontMedium,
fontSize: R.fontsize.fontSizeLabel,
fontWeight: '600',
color: R.colors.black,
},
calendarGrid: {},
weekRow: {
flexDirection: 'row',
},
dayCell: {
width: CELL_WIDTH,
minHeight: CELL_HEIGHT,
borderWidth: 1,
borderColor: R.colors.grayBorderInputTextHeader,
padding: 4,
alignItems: 'center',
},
selectedDayCell: {
borderColor: R.colors.blue,
borderWidth: 1,
},
dayText: {
fontSize: R.fontsize.fontSizeLabel,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
color: R.colors.black,
marginBottom: 2,
},
dayTextInactive: {
color: R.colors.black,
opacity: 1,
},
selectedDayText: {
color: R.colors.black,
fontWeight: 'bold',
fontFamily: R.fonts.fontSemiBold,
},
todayText: {
color: R.colors.white,
fontWeight: 'bold',
fontFamily: R.fonts.fontSemiBold,
backgroundColor: R.colors.blue,
borderRadius: 15,
paddingHorizontal: 4,
paddingVertical: 3,
},
eventsContainer: {
width: '100%',
flex: 1,
},
eventBar: {
paddingVertical: 2,
paddingHorizontal: 5,
borderRadius: 10,
marginBottom: 2,
backgroundColor: R.colors.blue,
},
eventBarText: {
fontSize: R.fontsize.fontSizeLabel,
color: R.colors.white,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
},
moreEventsText: {
fontSize: R.fontsize.fontSizeLabel,
color: R.colors.gray,
fontWeight: '400',
fontFamily: R.fonts.fontRegular,
textAlign: 'center',
},
containerBottomSheet:{
flex:1,
marginBottom:10,
},
modalBackdrop: {
flex: 1,
backgroundColor: R.colors.grayBorderInputTextHeader,
justifyContent: 'flex-end',
},
bottomSheet: {
height: BOTTOM_SHEET_HEIGHT,
backgroundColor: R.colors.white,
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
},
bottomSheetContent: {
height: BOTTOM_SHEET_HEIGHT,
},
dragHandle: {
width: 40,
height: 4,
backgroundColor: R.colors.gray,
borderRadius: 5,
alignSelf: 'center',
marginTop: 10,
marginBottom: 15,
},
bottomSheetHeader: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 15,
},
bottomSheetTitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
flex: 1,
},
closeButton: {
width: 30,
height: 30,
borderRadius: 15,
backgroundColor: R.colors.gray,
alignItems: 'center',
justifyContent: 'center',
},
closeButtonText: {
fontSize: R.fontsize.fontSizeContent,
color: R.colors.black,
fontFamily: R.fonts.fontRegular,
fontWeight: '400',
},
eventsScrollView: {
paddingTop:10,
},
noEventsContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 40,
},
noEventsText: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.gray,
fontWeight: '400',
},
eventCard: {
flexDirection: 'row',
backgroundColor: R.colors.white,
borderRadius: 12,
padding: 15,
marginBottom: 10,
marginHorizontal:15,
borderLeftWidth: 4,
borderLeftColor: R.colors.blue500,
shadowColor: R.colors.black,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 1,
shadowRadius: 1,
elevation: 2,
},
eventTimeContainer: {
minWidth: 80,
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginRight: 15,
},
eventTime: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.blue,
fontWeight: '600',
},
eventContent: {
flex: 1,
},
eventTitle: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontMedium,
color: R.colors.black,
fontWeight: '600',
marginBottom: 4,
},
eventDescription: {
fontSize: R.fontsize.fontSizeContent,
fontFamily: R.fonts.fontRegular,
color: R.colors.gray2,
fontWeight: '400',
},
});
export {styles, CELL_WIDTH, BOTTOM_SHEET_HEIGHT};
src/screens/class_schedule/view.js
......@@ -127,8 +127,6 @@ const ClassScheduleView = ({
);
};
const renderCalendarGrid = () => {
const weeks = [];
for (let i = 0; i < 6; i++) {
......@@ -152,7 +150,9 @@ const ClassScheduleView = ({
return (
<View style={styles.bottomSheetContent}>
<View style={styles.dragHandle} />
<View style={styles.dragHandle} >
</View>
<View style={styles.bottomSheetHeader}>
<Text style={styles.bottomSheetTitle}>
......@@ -164,7 +164,6 @@ const ClassScheduleView = ({
<Text style={styles.closeButtonText}>✕</Text>
</TouchableOpacity>
</View>
<ScrollView
style={styles.eventsScrollView}
showsVerticalScrollIndicator={false}>
......@@ -172,8 +171,9 @@ const ClassScheduleView = ({
<View style={styles.noEventsContainer}>
<Text style={styles.noEventsText}>Không có sự kiện nào</Text>
</View>
) : (
selectedEvents.map((event, index) => (
) :
(selectedEvents.map((event, index) => (
<View style={styles.containerBottomSheet}>
<TouchableOpacity
key={event.id}
style={styles.eventCard}
......@@ -198,6 +198,7 @@ const ClassScheduleView = ({
)}
</View>
</TouchableOpacity>
</View>
))
)}
</ScrollView>
......@@ -226,7 +227,7 @@ const ClassScheduleView = ({
},
]}
{...panResponder.panHandlers}>
<TouchableOpacity activeOpacity={1}>
<TouchableOpacity activeOpacity={1} >
{renderBottomSheetContent()}
</TouchableOpacity>
</Animated.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