Реализованы компоненты для отображения посещаемости: AttendanceTable, StatsCard и ShortText. Добавлены хуки useAttendanceData и useAttendanceStats для обработки данных. Обновлен компонент Attendance с использованием новых компонентов и хуков.

2025-03-23 09:01:00 +03:00 · 2025-03-23 09:01:00 +03:00 · 5e32e55ac2
commit 5e32e55ac2
parent 433e3b87bf
9 changed files with 438 additions and 125 deletions
--- 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 <PageLoader />
  }

  return (
+    <Container maxW="container.xl" p={1}>
+      <Flex alignItems="center" mb={6}>
        <Box>
-      <Box mt={12} mb={12}>
-        <Heading>{courseInfo.name}</Heading>
+          <Heading size="lg" mb={2}>{data.courseInfo?.name}</Heading>
+          <Badge colorScheme="blue">
+            {data.students.length} студентов • {data.teachers.length} преподавателей
+          </Badge>
        </Box>
-      <Box>
-        <table>
-          <thead>
-            <tr>
-              {data.taechers.map(teacher => (
-                <th id={teacher.id} key={teacher.id}>{teacher.value}</th>
-              ))}
-              <th>Дата</th>
-              <th>Название занятия</th>
-              {data.students.map((student) => (
-                <th id={student.id || student.sub} key={student.sub}>{student.name || student.value || 'Имя не определено'}</th>
-              ))}
-            </tr>
-          </thead>
-          <tbody>
-            {attendance.map((lesson, index) => (
-              <tr key={lesson.name}>
-                {data?.taechers?.map((teacher) => {
+        <Spacer />
+        <IconButton
+          aria-label="Переключить тему"
+          icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+          onClick={toggleColorMode}
+          variant="ghost"
+          size="lg"
+        />
+      </Flex>

-                  const wasThere = Boolean(lesson.teachers) &&
-                    lesson?.teachers?.findIndex((u) => u.sub === teacher.sub) !== -1
-                  return (
-                    <td
-                      style={{
-                        textAlign: 'center',
-                        backgroundColor: wasThere ? '#8ef78a' : '#e09797',
-                      }}
-                      key={teacher.sub}
-                    >
-                      {wasThere ? '+' : '-'}
-                    </td>
-                  )
-                })}
-                <td>{dayjs(lesson.date).format('DD.MM.YYYY')}</td>
-                <td>{<ShortText text={lesson.name} />}</td>
+      <StatsCard stats={stats} />
      
-                {data.students.map((st) => {
-                  const wasThere =
-                    lesson.students.findIndex((u) => u.sub === st.sub) !== -1
-                  return (
-                    <td
-                      style={{
-                        textAlign: 'center',
-                        backgroundColor: wasThere ? '#8ef78a' : '#e09797',
-                      }}
-                      key={st.sub}
+      <Box 
+        bg={colorMode === 'dark' ? 'gray.800' : 'gray.50'} 
+        p={4} 
+        borderRadius="lg"
+        boxShadow="sm"
      >
-                      {wasThere ? '+' : '-'}
-                    </td>
-                  )
-                })}
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </Box>
+        <AttendanceTable data={data} />
      </Box>
+    </Container>
  )
 }
-
-const ShortText = ({ text }: { text: string }) => {
-  const needShortText = text.length > 20
-
-  if (needShortText) {
-    return (
-      <Tooltip label={text} fontSize="12px" top="16px">
-        <Text>{text.slice(0, 20)}...</Text>
-      </Tooltip>
-    )
-  }
-
-  return text
-}
--- a/src/pages/attendance/components/AttendanceTable.tsx
+++ 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<AttendanceTableProps> = ({ 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 <Box>Нет данных для отображения</Box>
+  }
+
+  return (
+    <Box 
+      overflowX="auto" 
+      boxShadow="md" 
+      borderRadius="lg"
+      bg={colorMode === 'dark' ? 'gray.700' : 'white'}
+    >
+      <Table variant="simple" size="sm">
+        <Thead>
+          <Tr>
+            {data.teachers?.map(teacher => (
+              <Th key={teacher.id}>{teacher.value}</Th>
+            ))}
+            <Th>Дата</Th>
+            <Th>Название занятия</Th>
+            {data.students.map((student) => (
+              <Th key={student.sub}>
+                {student.name || student.value || 'Имя не определено'}
+              </Th>
+            ))}
+          </Tr>
+        </Thead>
+        <Tbody>
+          {data.attendance.map((lesson) => (
+            <Tr key={lesson.name}>
+              {data.teachers?.map((teacher) => {
+                const wasThere = Boolean(lesson.teachers) &&
+                  lesson.teachers.findIndex((u) => u.sub === teacher.sub) !== -1
+                return (
+                  <Td
+                    key={teacher.sub}
+                    textAlign="center"
+                    bg={wasThere ? getPresentColor() : getAbsentColor()}
+                  >
+                    {wasThere ? '+' : '-'}
+                  </Td>
+                )
+              })}
+              <Td>{dayjs(lesson.date).format('DD.MM.YYYY')}</Td>
+              <Td><ShortText text={lesson.name} /></Td>
+
+              {data.students.map((st) => {
+                const wasThere =
+                  lesson.students.findIndex((u) => u.sub === st.sub) !== -1
+                return (
+                  <Td
+                    key={st.sub}
+                    textAlign="center"
+                    bg={wasThere ? getPresentColor() : getAbsentColor()}
+                  >
+                    {wasThere ? '+' : '-'}
+                  </Td>
+                )
+              })}
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  )
+} 
--- a/src/pages/attendance/components/ShortText.tsx
+++ 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<ShortTextProps> = ({ text, maxLength = 20 }) => {
+  const needShortText = text.length > maxLength
+  const { colorMode } = useColorMode()
+
+  if (needShortText) {
+    return (
+      <Tooltip 
+        label={text} 
+        fontSize="sm" 
+        bg={colorMode === 'dark' ? 'gray.700' : 'white'}
+        color={colorMode === 'dark' ? 'white' : 'gray.800'}
+        boxShadow="md"
+        borderRadius="md"
+        p={2}
+      >
+        <Text>{text.slice(0, maxLength)}...</Text>
+      </Tooltip>
+    )
+  }
+
+  return <Text>{text}</Text>
+} 
--- a/src/pages/attendance/components/StatsCard.tsx
+++ 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<StatsCardProps> = ({ 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 (
+    <Box
+      p={5}
+      borderRadius="lg"
+      boxShadow="md"
+      bg={getBgColor()}
+      mb={6}
+    >
+      <Heading size="md" mb={4}>Статистика посещаемости</Heading>
+      <Divider mb={4} />
+      
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5}>
+        <Box>
+          <SimpleGrid columns={{ base: 1, md: 2 }} spacing={5}>
+            <Stat>
+              <StatLabel>Всего занятий</StatLabel>
+              <StatNumber>{stats.totalLessons}</StatNumber>
+            </Stat>
+            
+            <Stat>
+              <StatLabel>Средняя посещаемость</StatLabel>
+              <StatNumber>{stats.averageAttendance.toFixed(1)}%</StatNumber>
+              <Progress 
+                value={stats.averageAttendance} 
+                colorScheme={getProgressColor(stats.averageAttendance)} 
+                size="sm" 
+                mt={2}
+              />
+            </Stat>
+          </SimpleGrid>
+        </Box>
+        
+        <Box>
+          <Stat>
+            <StatLabel mb={3}>Топ-3 студента по посещаемости</StatLabel>
+            <VStack align="stretch" spacing={2}>
+              {stats.topStudents.map((student, index) => (
+                <HStack key={index} justify="space-between">
+                  <HStack>
+                    <Badge 
+                      colorScheme={index === 0 ? 'green' : index === 1 ? 'blue' : 'yellow'} 
+                      fontSize="sm"
+                      borderRadius="full" 
+                      px={2}
+                    >
+                      {index + 1}
+                    </Badge>
+                    <Text fontWeight="medium">{student.name}</Text>
+                  </HStack>
+                  <Text>
+                    {student.attendance} из {stats.totalLessons} ({student.attendancePercent.toFixed(0)}%)
+                  </Text>
+                </HStack>
+              ))}
+              {stats.topStudents.length === 0 && (
+                <Text color="gray.500">Нет данных</Text>
+              )}
+            </VStack>
+          </Stat>
+        </Box>
+        
+      </SimpleGrid>
+    </Box>
+  )
+} 
--- a/src/pages/attendance/components/index.ts
+++ b/src/pages/attendance/components/index.ts
@ -0,0 +1,3 @@
+export * from './AttendanceTable'
+export * from './ShortText'
+export * from './StatsCard' 
--- a/src/pages/attendance/hooks/index.ts
+++ b/src/pages/attendance/hooks/index.ts
@ -0,0 +1,2 @@
+export * from './useAttendanceData'
+export * from './useAttendanceStats' 
--- a/src/pages/attendance/hooks/useAttendanceData.ts
+++ 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
+  }
+} 
--- a/src/pages/attendance/hooks/useAttendanceStats.ts
+++ 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])
+} 
--- a/src/pages/attendance/index.tsx
+++ b/src/pages/attendance/index.tsx
@ -0,0 +1 @@
+export { Attendance as AttendancePage } from './attendance'
				`@ -0,0 +1 @@`
				`export { Attendance as AttendancePage } from './attendance'`