372 lines
12 KiB
TypeScript
372 lines
12 KiB
TypeScript
import React, { useState } from 'react'
|
||
import {
|
||
Table,
|
||
Thead,
|
||
Tbody,
|
||
Tr,
|
||
Th,
|
||
Td,
|
||
Box,
|
||
useColorMode,
|
||
Button,
|
||
useToast,
|
||
Flex,
|
||
Collapse,
|
||
HStack,
|
||
Text,
|
||
Icon,
|
||
Tooltip,
|
||
Avatar,
|
||
AvatarBadge,
|
||
Modal,
|
||
ModalOverlay,
|
||
ModalContent,
|
||
ModalHeader,
|
||
ModalBody,
|
||
ModalCloseButton,
|
||
useDisclosure
|
||
} from '@chakra-ui/react'
|
||
import { CopyIcon, ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'
|
||
import { FaSmile, FaMeh, FaFrown, FaSadTear, FaExpand, FaCompress } from 'react-icons/fa'
|
||
import dayjs from 'dayjs'
|
||
import { useTranslation } from 'react-i18next'
|
||
import { getGravatarURL } from '../../../utils/gravatar'
|
||
import { ShortText } from './ShortText'
|
||
import { AttendanceData } from '../hooks'
|
||
|
||
interface AttendanceTableProps {
|
||
data: AttendanceData
|
||
}
|
||
|
||
export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
|
||
const { colorMode } = useColorMode()
|
||
const toast = useToast()
|
||
const { t } = useTranslation()
|
||
const [showTable, setShowTable] = useState(false)
|
||
const { isOpen, onOpen, onClose } = useDisclosure()
|
||
|
||
const getPresentColor = () => {
|
||
return colorMode === 'dark' ? 'green.600' : 'green.100'
|
||
}
|
||
|
||
const getAbsentColor = () => {
|
||
return colorMode === 'dark' ? 'red.800' : 'red.100'
|
||
}
|
||
|
||
// Получаем эмоджи на основе посещаемости
|
||
const getAttendanceEmoji = (attendedCount: number, totalLessons: number) => {
|
||
const attendanceRate = totalLessons > 0 ? attendedCount / totalLessons : 0
|
||
|
||
if (attendanceRate >= 0.9) {
|
||
return {
|
||
icon: FaSmile,
|
||
color: 'green.500',
|
||
label: t('journal.pl.attendance.emojis.excellent')
|
||
}
|
||
} else if (attendanceRate >= 0.75) {
|
||
return {
|
||
icon: FaMeh,
|
||
color: 'blue.400',
|
||
label: t('journal.pl.attendance.emojis.good')
|
||
}
|
||
} else if (attendanceRate >= 0.5) {
|
||
return {
|
||
icon: FaFrown,
|
||
color: 'orange.400',
|
||
label: t('journal.pl.attendance.emojis.poor')
|
||
}
|
||
} else {
|
||
return {
|
||
icon: FaSadTear,
|
||
color: 'red.500',
|
||
label: t('journal.pl.attendance.emojis.none')
|
||
}
|
||
}
|
||
}
|
||
|
||
// Функция для копирования данных таблицы без сокращений
|
||
const copyTableData = () => {
|
||
if (!data.attendance?.length) return
|
||
|
||
// Строим заголовок таблицы
|
||
let tableContent = []
|
||
|
||
// Добавляем заголовки с именами преподавателей
|
||
let headerRow = []
|
||
data.teachers?.forEach(teacher => {
|
||
headerRow.push(teacher.value)
|
||
})
|
||
|
||
// Добавляем столбцы даты и названия занятия
|
||
headerRow.push(t('journal.pl.common.date'), t('journal.pl.common.lessonName'))
|
||
|
||
// Добавляем студентов
|
||
data.students.forEach(student => {
|
||
headerRow.push(student.name || student.value || t('journal.pl.common.name'))
|
||
})
|
||
|
||
// Добавляем заголовок в таблицу
|
||
tableContent.push(headerRow.join('\t'))
|
||
|
||
// Формируем данные для каждой строки
|
||
data.attendance.forEach(lesson => {
|
||
let row = []
|
||
|
||
// Добавляем данные о присутствии преподавателей
|
||
data.teachers?.forEach(teacher => {
|
||
const wasThere = Boolean(lesson.teachers) &&
|
||
lesson.teachers.findIndex(u => u.sub === teacher.sub) !== -1
|
||
row.push(wasThere ? '+' : '-')
|
||
})
|
||
|
||
// Добавляем дату
|
||
row.push(dayjs(lesson.date).format('DD.MM.YYYY'))
|
||
|
||
// Добавляем полное название занятия (без сокращений)
|
||
row.push(lesson.name)
|
||
|
||
// Добавляем данные о присутствии студентов
|
||
data.students.forEach(student => {
|
||
const wasThere = lesson.students.findIndex(u => u.sub === student.sub) !== -1
|
||
row.push(wasThere ? '+' : '-')
|
||
})
|
||
|
||
// Добавляем строку в таблицу
|
||
tableContent.push(row.join('\t'))
|
||
})
|
||
|
||
// Копируем в буфер обмена
|
||
const finalContent = tableContent.join('\n')
|
||
navigator.clipboard.writeText(finalContent)
|
||
.then(() => {
|
||
toast({
|
||
title: t('journal.pl.attendance.table.copySuccess'),
|
||
description: t('journal.pl.attendance.table.copySuccessDescription'),
|
||
status: 'success',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
})
|
||
})
|
||
.catch(err => {
|
||
toast({
|
||
title: t('journal.pl.attendance.table.copyError'),
|
||
description: t('journal.pl.attendance.table.copyErrorDescription'),
|
||
status: 'error',
|
||
duration: 3000,
|
||
isClosable: true,
|
||
})
|
||
console.error('Ошибка копирования', err)
|
||
})
|
||
}
|
||
|
||
// Расчет статистики посещаемости для каждого студента
|
||
const getStudentAttendance = () => {
|
||
const totalLessons = data.attendance.length
|
||
return data.students.map(student => {
|
||
let attendedCount = 0
|
||
data.attendance.forEach(lesson => {
|
||
if (lesson.students.findIndex(s => s.sub === student.sub) !== -1) {
|
||
attendedCount++
|
||
}
|
||
})
|
||
|
||
return {
|
||
student,
|
||
name: student.name || student.value || t('journal.pl.common.name'),
|
||
email: student.email,
|
||
picture: student.picture || getGravatarURL(student.email),
|
||
attendedCount,
|
||
totalLessons,
|
||
attendance: totalLessons > 0 ? (attendedCount / totalLessons) * 100 : 0
|
||
}
|
||
})
|
||
}
|
||
|
||
if (!data.attendance?.length || !data.students?.length) {
|
||
return <Box>{t('journal.pl.common.noData')}</Box>
|
||
}
|
||
|
||
// Создаем компонент таблицы для переиспользования
|
||
const AttendanceTableContent = () => (
|
||
<Table variant="simple" size="sm">
|
||
<Thead>
|
||
<Tr>
|
||
{data.teachers?.map(teacher => (
|
||
<Th key={teacher.id}>{teacher.value}</Th>
|
||
))}
|
||
<Th>{t('journal.pl.common.date')}</Th>
|
||
<Th>{t('journal.pl.common.lessonName')}</Th>
|
||
{data.students.map((student) => (
|
||
<Th key={student.sub}>
|
||
<HStack>
|
||
<Avatar
|
||
size="xs"
|
||
src={student.picture || getGravatarURL(student.email)}
|
||
name={student.name || student.value || t('journal.pl.common.name')}
|
||
/>
|
||
<Text>{student.name || student.value || t('journal.pl.common.name')}</Text>
|
||
</HStack>
|
||
</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 ? (
|
||
<Icon as={FaSmile} color="green.500" />
|
||
) : (
|
||
<Icon as={FaFrown} color="red.500" />
|
||
)}
|
||
</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 ? (
|
||
<Icon as={FaSmile} color="green.500" />
|
||
) : (
|
||
<Icon as={FaFrown} color="red.500" />
|
||
)}
|
||
</Td>
|
||
)
|
||
})}
|
||
</Tr>
|
||
))}
|
||
</Tbody>
|
||
</Table>
|
||
)
|
||
|
||
return (
|
||
<Box
|
||
boxShadow="md"
|
||
borderRadius="lg"
|
||
bg={colorMode === 'dark' ? 'gray.700' : 'white'}
|
||
>
|
||
<Flex justifyContent="space-between" p={3} alignItems="center">
|
||
<Flex>
|
||
<Button
|
||
leftIcon={<CopyIcon />}
|
||
size="sm"
|
||
colorScheme="blue"
|
||
onClick={copyTableData}
|
||
mr={2}
|
||
>
|
||
{t('journal.pl.attendance.table.copy')}
|
||
</Button>
|
||
|
||
<Button
|
||
leftIcon={<Icon as={FaExpand} />}
|
||
size="sm"
|
||
colorScheme="teal"
|
||
onClick={onOpen}
|
||
mr={2}
|
||
>
|
||
{t('journal.pl.attendance.table.fullscreen')}
|
||
</Button>
|
||
</Flex>
|
||
|
||
<Button
|
||
rightIcon={showTable ? <ChevronUpIcon /> : <ChevronDownIcon />}
|
||
size="sm"
|
||
variant="outline"
|
||
onClick={() => setShowTable(!showTable)}
|
||
>
|
||
{showTable ? t('journal.pl.attendance.table.hide') : t('journal.pl.attendance.table.show')}
|
||
</Button>
|
||
</Flex>
|
||
|
||
{/* Краткая статистика по каждому студенту с эмоджи */}
|
||
<Box p={4} borderTop="1px" borderColor={colorMode === 'dark' ? 'gray.600' : 'gray.200'}>
|
||
<Flex flexWrap="wrap" gap={3}>
|
||
{getStudentAttendance().map(({ student, name, attendedCount, totalLessons, attendance, picture }) => {
|
||
const emoji = getAttendanceEmoji(attendedCount, totalLessons)
|
||
|
||
return (
|
||
<Tooltip
|
||
key={student.sub}
|
||
label={`${emoji.label}: ${attendedCount} ${t('journal.pl.common.of')} ${totalLessons} ${t('journal.pl.common.students')} (${attendance.toFixed(0)}%)`}
|
||
hasArrow
|
||
>
|
||
<Box
|
||
p={3}
|
||
borderRadius="md"
|
||
bg={colorMode === 'dark' ? 'gray.800' : 'gray.50'}
|
||
boxShadow="sm"
|
||
minWidth="180px"
|
||
>
|
||
<HStack spacing={3}>
|
||
<Avatar
|
||
size="md"
|
||
src={picture}
|
||
name={name}
|
||
>
|
||
<AvatarBadge boxSize='2em' bg={emoji.color}>
|
||
<Icon as={emoji.icon} color="white" boxSize={7} />
|
||
</AvatarBadge>
|
||
</Avatar>
|
||
<Box>
|
||
<Text fontSize="sm" fontWeight="medium" isTruncated maxW="110px">{name}</Text>
|
||
<Text fontSize="xs" mt={1} color={colorMode === 'dark' ? 'gray.400' : 'gray.600'}>
|
||
{attendedCount} {t('journal.pl.common.of')} {totalLessons} ({attendance.toFixed(0)}%)
|
||
</Text>
|
||
</Box>
|
||
</HStack>
|
||
</Box>
|
||
</Tooltip>
|
||
)
|
||
})}
|
||
</Flex>
|
||
</Box>
|
||
|
||
{/* Полная таблица с возможностью скрытия/показа */}
|
||
<Collapse in={showTable} animateOpacity>
|
||
<Box
|
||
overflowX="auto"
|
||
p={3}
|
||
borderTop="1px"
|
||
borderColor={colorMode === 'dark' ? 'gray.600' : 'gray.200'}
|
||
>
|
||
<AttendanceTableContent />
|
||
</Box>
|
||
</Collapse>
|
||
|
||
{/* Модальное окно для отображения таблицы на весь экран */}
|
||
<Modal isOpen={isOpen} onClose={onClose} size="full">
|
||
<ModalOverlay />
|
||
<ModalContent>
|
||
<ModalHeader>
|
||
<Flex justifyContent="space-between" alignItems="center">
|
||
{t('journal.pl.attendance.table.attendanceData')}
|
||
</Flex>
|
||
</ModalHeader>
|
||
<ModalCloseButton size="lg" top="16px" />
|
||
<ModalBody pb={6}>
|
||
<Box overflowX="auto">
|
||
<AttendanceTableContent />
|
||
</Box>
|
||
</ModalBody>
|
||
</ModalContent>
|
||
</Modal>
|
||
</Box>
|
||
)
|
||
}
|