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

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