diff --git a/src/pages/attendance/attendance.tsx b/src/pages/attendance/attendance.tsx index bc32776..2af95c1 100644 --- a/src/pages/attendance/attendance.tsx +++ b/src/pages/attendance/attendance.tsx @@ -1,140 +1,60 @@ -import React, { useMemo } from 'react' +import React from 'react' import { useParams } from 'react-router-dom' -import { Box, Heading, Tooltip, Text } from '@chakra-ui/react' -import dayjs from 'dayjs' +import { + Box, + Heading, + Container, + useColorMode, + IconButton, + Flex, + Spacer, + Badge +} from '@chakra-ui/react' +import { MoonIcon, SunIcon } from '@chakra-ui/icons' -import { api } from '../../__data__/api/api' import { PageLoader } from '../../components/page-loader/page-loader' +import { useAttendanceData, useAttendanceStats } from './hooks' +import { AttendanceTable, StatsCard } from './components' export const Attendance = () => { const { courseId } = useParams() - const { data: attendance, isLoading } = api.useLessonListQuery(courseId, { - selectFromResult: ({ data, isLoading }) => ({ - data: data?.body, - isLoading, - }), - }) - const { data: courseInfo, isLoading: courseInfoIssLoading } = - api.useGetCourseByIdQuery(courseId) + const { colorMode, toggleColorMode } = useColorMode() + const data = useAttendanceData(courseId) + const stats = useAttendanceStats(data) - const data = useMemo(() => { - if (!attendance) return null - - const studentsMap = new Map() - const teachersMap = new Map() - - attendance.forEach((lesson) => { - lesson.teachers?.map((teacher: any) => { - teachersMap.set(teacher.sub, { id: teacher.sub, ...teacher, value: teacher.value || (teacher.family_name && teacher.given_name - ? `${teacher.family_name} ${teacher.given_name}` - : teacher.name || teacher.email || teacher.preferred_username || teacher.family_name || teacher.given_name), }) - }) - - lesson.students.forEach((student) => { - const current = studentsMap.get(student.sub) || {} - - studentsMap.set(student.sub, { - ...student, - id: student.sub, - value: current.value || (student.family_name && student.given_name - ? `${student.family_name} ${student.given_name}` - : student.name || student.email || student.preferred_username || student.family_name || student.given_name), - }) - }) - }) - - const compare = Intl.Collator('ru').compare - - const students = [...studentsMap.values()] - const taechers = [...teachersMap.values()] - students.sort(({ family_name: name }, { family_name: nname }) => - compare(name, nname), - ) - return { - students, - taechers, - } - }, [attendance]) - - if (!data || isLoading || courseInfoIssLoading) { + if (data.isLoading) { return } return ( - - - {courseInfo.name} - - - - - - {data.taechers.map(teacher => ( - - ))} - - - {data.students.map((student) => ( - - ))} - - - - {attendance.map((lesson, index) => ( - - {data?.taechers?.map((teacher) => { + + + + {data.courseInfo?.name} + + {data.students.length} студентов • {data.teachers.length} преподавателей + + + + : } + onClick={toggleColorMode} + variant="ghost" + size="lg" + /> + - const wasThere = Boolean(lesson.teachers) && - lesson?.teachers?.findIndex((u) => u.sub === teacher.sub) !== -1 - return ( - - ) - })} - - - - {data.students.map((st) => { - const wasThere = - lesson.students.findIndex((u) => u.sub === st.sub) !== -1 - return ( - - ) - })} - - ))} - -
{teacher.value}ДатаНазвание занятия{student.name || student.value || 'Имя не определено'}
- {wasThere ? '+' : '-'} - {dayjs(lesson.date).format('DD.MM.YYYY')}{} - {wasThere ? '+' : '-'} -
+ + + + - + ) } - -const ShortText = ({ text }: { text: string }) => { - const needShortText = text.length > 20 - - if (needShortText) { - return ( - - {text.slice(0, 20)}... - - ) - } - - return text -} diff --git a/src/pages/attendance/components/AttendanceTable.tsx b/src/pages/attendance/components/AttendanceTable.tsx new file mode 100644 index 0000000..955bc65 --- /dev/null +++ b/src/pages/attendance/components/AttendanceTable.tsx @@ -0,0 +1,97 @@ +import React from 'react' +import { + Table, + Thead, + Tbody, + Tr, + Th, + Td, + Box, + useColorMode, + useTheme +} from '@chakra-ui/react' +import dayjs from 'dayjs' +import { ShortText } from './ShortText' +import { AttendanceData } from '../hooks' + +interface AttendanceTableProps { + data: AttendanceData +} + +export const AttendanceTable: React.FC = ({ data }) => { + const { colorMode } = useColorMode() + const theme = useTheme() + + const getPresentColor = () => { + return colorMode === 'dark' ? 'green.600' : 'green.100' + } + + const getAbsentColor = () => { + return colorMode === 'dark' ? 'red.800' : 'red.100' + } + + if (!data.attendance?.length || !data.students?.length) { + return Нет данных для отображения + } + + return ( + + + + + {data.teachers?.map(teacher => ( + + ))} + + + {data.students.map((student) => ( + + ))} + + + + {data.attendance.map((lesson) => ( + + {data.teachers?.map((teacher) => { + const wasThere = Boolean(lesson.teachers) && + lesson.teachers.findIndex((u) => u.sub === teacher.sub) !== -1 + return ( + + ) + })} + + + + {data.students.map((st) => { + const wasThere = + lesson.students.findIndex((u) => u.sub === st.sub) !== -1 + return ( + + ) + })} + + ))} + +
{teacher.value}ДатаНазвание занятия + {student.name || student.value || 'Имя не определено'} +
+ {wasThere ? '+' : '-'} + {dayjs(lesson.date).format('DD.MM.YYYY')} + {wasThere ? '+' : '-'} +
+ + ) +} \ No newline at end of file diff --git a/src/pages/attendance/components/ShortText.tsx b/src/pages/attendance/components/ShortText.tsx new file mode 100644 index 0000000..a78aaeb --- /dev/null +++ b/src/pages/attendance/components/ShortText.tsx @@ -0,0 +1,30 @@ +import React from 'react' +import { Tooltip, Text, useColorMode } from '@chakra-ui/react' + +interface ShortTextProps { + text: string + maxLength?: number +} + +export const ShortText: React.FC = ({ text, maxLength = 20 }) => { + const needShortText = text.length > maxLength + const { colorMode } = useColorMode() + + if (needShortText) { + return ( + + {text.slice(0, maxLength)}... + + ) + } + + return {text} +} \ No newline at end of file diff --git a/src/pages/attendance/components/StatsCard.tsx b/src/pages/attendance/components/StatsCard.tsx new file mode 100644 index 0000000..d7c50be --- /dev/null +++ b/src/pages/attendance/components/StatsCard.tsx @@ -0,0 +1,101 @@ +import React from 'react' +import { + Box, + SimpleGrid, + Stat, + StatLabel, + StatNumber, + StatHelpText, + useColorMode, + Heading, + Divider, + Progress, + VStack, + HStack, + Text, + Badge +} from '@chakra-ui/react' +import { AttendanceStats } from '../hooks' + +interface StatsCardProps { + stats: AttendanceStats +} + +export const StatsCard: React.FC = ({ stats }) => { + const { colorMode } = useColorMode() + + const getBgColor = () => { + return colorMode === 'dark' ? 'gray.700' : 'white' + } + + const getProgressColor = (value: number) => { + if (value > 80) return 'green' + if (value > 50) return 'yellow' + return 'red' + } + + return ( + + Статистика посещаемости + + + + + + + Всего занятий + {stats.totalLessons} + + + + Средняя посещаемость + {stats.averageAttendance.toFixed(1)}% + + + + + + + + Топ-3 студента по посещаемости + + {stats.topStudents.map((student, index) => ( + + + + {index + 1} + + {student.name} + + + {student.attendance} из {stats.totalLessons} ({student.attendancePercent.toFixed(0)}%) + + + ))} + {stats.topStudents.length === 0 && ( + Нет данных + )} + + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/attendance/components/index.ts b/src/pages/attendance/components/index.ts new file mode 100644 index 0000000..5fc5236 --- /dev/null +++ b/src/pages/attendance/components/index.ts @@ -0,0 +1,3 @@ +export * from './AttendanceTable' +export * from './ShortText' +export * from './StatsCard' \ No newline at end of file diff --git a/src/pages/attendance/hooks/index.ts b/src/pages/attendance/hooks/index.ts new file mode 100644 index 0000000..60d8f72 --- /dev/null +++ b/src/pages/attendance/hooks/index.ts @@ -0,0 +1,2 @@ +export * from './useAttendanceData' +export * from './useAttendanceStats' \ No newline at end of file diff --git a/src/pages/attendance/hooks/useAttendanceData.ts b/src/pages/attendance/hooks/useAttendanceData.ts new file mode 100644 index 0000000..c94c5e6 --- /dev/null +++ b/src/pages/attendance/hooks/useAttendanceData.ts @@ -0,0 +1,72 @@ +import { useMemo } from 'react' +import { api } from '../../../__data__/api/api' + +export interface AttendanceData { + students: any[] + teachers: any[] + attendance: any[] + isLoading: boolean + courseInfo: any +} + +export const useAttendanceData = (courseId: string | undefined): AttendanceData => { + const { data: attendance, isLoading } = api.useLessonListQuery(courseId, { + selectFromResult: ({ data, isLoading }) => ({ + data: data?.body, + isLoading, + }), + }) + const { data: courseInfo, isLoading: courseInfoIsLoading } = + api.useGetCourseByIdQuery(courseId) + + const processedData = useMemo(() => { + if (!attendance) return { students: [], teachers: [], attendance: [] } + + const studentsMap = new Map() + const teachersMap = new Map() + + attendance.forEach((lesson) => { + lesson.teachers?.forEach((teacher: any) => { + teachersMap.set(teacher.sub, { + id: teacher.sub, + ...teacher, + value: teacher.value || (teacher.family_name && teacher.given_name + ? `${teacher.family_name} ${teacher.given_name}` + : teacher.name || teacher.email || teacher.preferred_username || teacher.family_name || teacher.given_name), + }) + }) + + lesson.students.forEach((student) => { + const current = studentsMap.get(student.sub) || {} + + studentsMap.set(student.sub, { + ...student, + id: student.sub, + value: current.value || (student.family_name && student.given_name + ? `${student.family_name} ${student.given_name}` + : student.name || student.email || student.preferred_username || student.family_name || student.given_name), + }) + }) + }) + + const compare = Intl.Collator('ru').compare + + const students = [...studentsMap.values()] + const teachers = [...teachersMap.values()] + students.sort(({ family_name: name }, { family_name: nname }) => + compare(name, nname), + ) + + return { + students, + teachers, + attendance, + } + }, [attendance]) + + return { + ...processedData, + isLoading: isLoading || courseInfoIsLoading, + courseInfo + } +} \ No newline at end of file diff --git a/src/pages/attendance/hooks/useAttendanceStats.ts b/src/pages/attendance/hooks/useAttendanceStats.ts new file mode 100644 index 0000000..a44e012 --- /dev/null +++ b/src/pages/attendance/hooks/useAttendanceStats.ts @@ -0,0 +1,87 @@ +import { useMemo } from 'react' +import { AttendanceData } from './useAttendanceData' + +export interface AttendanceStats { + totalLessons: number + averageAttendance: number + topStudents: Array<{ + name: string + attendance: number + attendancePercent: number + }> + lessonsAttendance: Array<{ + name: string + date: string + attendancePercent: number + }> +} + +export const useAttendanceStats = (data: AttendanceData): AttendanceStats => { + return useMemo(() => { + if (!data.attendance || !data.students.length) { + return { + totalLessons: 0, + averageAttendance: 0, + topStudents: [], + lessonsAttendance: [] + } + } + + const totalLessons = data.attendance.length + + // Рассчитываем посещаемость для каждого студента + const studentAttendance = data.students.map(student => { + let attended = 0 + + data.attendance.forEach(lesson => { + if (lesson.students.some(s => s.sub === student.sub)) { + attended++ + } + }) + + return { + student, + name: student.value, + attendance: attended, + attendancePercent: totalLessons > 0 ? (attended / totalLessons) * 100 : 0 + } + }) + + // Рассчитываем статистику посещаемости для каждого урока + const lessonsAttendance = data.attendance.map(lesson => { + const attendedStudents = lesson.students.length + const attendancePercent = data.students.length > 0 + ? (attendedStudents / data.students.length) * 100 + : 0 + + return { + name: lesson.name, + date: lesson.date, + attendancePercent + } + }) + + // Выбираем топ-3 студентов по посещаемости + const topStudents = [...studentAttendance] + .sort((a, b) => b.attendance - a.attendance) + .slice(0, 3) + .map(student => ({ + name: student.name, + attendance: student.attendance, + attendancePercent: student.attendancePercent + })) + + // Считаем среднюю посещаемость + const totalAttendance = studentAttendance.reduce((sum, student) => sum + student.attendance, 0) + const averageAttendance = data.students.length > 0 && totalLessons > 0 + ? (totalAttendance / (data.students.length * totalLessons)) * 100 + : 0 + + return { + totalLessons, + averageAttendance, + topStudents, + lessonsAttendance + } + }, [data]) +} \ No newline at end of file diff --git a/src/pages/attendance/index.tsx b/src/pages/attendance/index.tsx new file mode 100644 index 0000000..b19464d --- /dev/null +++ b/src/pages/attendance/index.tsx @@ -0,0 +1 @@ +export { Attendance as AttendancePage } from './attendance' \ No newline at end of file