From 1ec4bc081e97b6556c98e42b45fc9be1c71108f0 Mon Sep 17 00:00:00 2001 From: primakov Date: Thu, 3 Apr 2025 23:07:41 +0300 Subject: [PATCH] mark student button --- src/components/user-card/style.ts | 27 --- src/components/user-card/user-card.tsx | 10 +- src/pages/lesson-details.tsx | 239 +++++++++++++------------ src/pages/style.ts | 28 +++ 4 files changed, 153 insertions(+), 151 deletions(-) diff --git a/src/components/user-card/style.ts b/src/components/user-card/style.ts index 4718cca..62b7086 100644 --- a/src/components/user-card/style.ts +++ b/src/components/user-card/style.ts @@ -114,30 +114,3 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number; pos : ''} ` -export const AddMissedButton = styled.button` - position: absolute; - bottom: 8px; - right: 8px; - border: none; - background-color: var(--chakra-colors-blue-500); - color: white; - width: 26px; - height: 26px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - z-index: 2; - opacity: 0.8; - transition: opacity 0.3s ease, transform 0.3s ease; - - &:hover { - cursor: pointer; - opacity: 1; - transform: scale(1.1); - } - - .chakra-ui-dark & { - background-color: var(--chakra-colors-blue-400); - } -` \ No newline at end of file diff --git a/src/components/user-card/user-card.tsx b/src/components/user-card/user-card.tsx index cdda9af..6215298 100644 --- a/src/components/user-card/user-card.tsx +++ b/src/components/user-card/user-card.tsx @@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next' import { Reaction, User } from '../../__data__/model' -import { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style' +import { Avatar, Wrapper, NameOverlay } from './style' // Map of reaction types to emojis const REACTION_EMOJIS = { @@ -30,7 +30,6 @@ export function getGravatarURL(email, user) { export const UserCard = ({ student, present, - onAddUser = undefined, wrapperAS = 'div', width, recentlyPresent = false, @@ -39,7 +38,6 @@ export const UserCard = ({ student: User present: boolean width?: string | number - onAddUser?: (user: User) => void wrapperAS?: React.ElementType recentlyPresent?: boolean reaction?: Reaction @@ -98,11 +96,7 @@ export const UserCard = ({ )} - {onAddUser && !present && ( - onAddUser(student)} aria-label={t('journal.pl.common.add')}> - - - )} + {/* Анимация реакции */} diff --git a/src/pages/lesson-details.tsx b/src/pages/lesson-details.tsx index bbd88be..98d2115 100644 --- a/src/pages/lesson-details.tsx +++ b/src/pages/lesson-details.tsx @@ -4,6 +4,7 @@ import QRCode from 'qrcode' import { sha256 } from 'js-sha256' import { getConfigValue, getNavigationValue } from '@brojs/cli' import { motion, AnimatePresence } from 'framer-motion' +import { AddIcon } from '@chakra-ui/icons' import { Box, Container, @@ -22,6 +23,7 @@ import { formatDate } from '../utils/dayjs-config' import { useSetBreadcrumbs } from '../components' import { + AddMissedButton, QRCanvas, StudentList, } from './style' @@ -43,11 +45,11 @@ const LessonDetail = () => { const user = useAppSelector((s) => s.user) const { t } = useTranslation() const { colorMode } = useColorMode() - + // Получаем данные о курсе и уроке const { data: courseData } = api.useGetCourseByIdQuery(courseId) const { data: lessonData } = api.useLessonByIdQuery(lessonId) - + // Устанавливаем хлебные крошки useSetBreadcrumbs([ { @@ -63,10 +65,10 @@ const LessonDetail = () => { isCurrentPage: true } ]) - + // Создаем ref для отслеживания ранее присутствовавших студентов const prevPresentStudentsRef = useRef(new Set()) - + // Добавляем состояние для отслеживания пульсации const [isPulsing, setIsPulsing] = useState(false) // Отслеживаем предыдущее количество студентов @@ -75,7 +77,7 @@ const LessonDetail = () => { const prevReactionsRef = useRef>({}) // Храним актуальные реакции студентов const [studentReactions, setStudentReactions] = useState>({}) - + const { isFetching, data: accessCode, @@ -101,7 +103,7 @@ const LessonDetail = () => { useEffect(() => { if (accessCode?.body) { const currentPresent = new Set(accessCode.body.lesson.students.map(s => s.sub)) - + // Проверяем, изменилось ли количество студентов const currentCount = accessCode.body.lesson.students.length; if (prevStudentCountRef.current !== currentCount && prevStudentCountRef.current > 0) { @@ -112,15 +114,15 @@ const LessonDetail = () => { setIsPulsing(false); }, 1500); } - + // Обновляем предыдущее количество prevStudentCountRef.current = currentCount; - + // Очищаем флаги предыдущего состояния после задержки const timeoutId = setTimeout(() => { prevPresentStudentsRef.current = currentPresent }, 3000) - + return () => clearTimeout(timeoutId) } }, [accessCode]) @@ -129,25 +131,25 @@ const LessonDetail = () => { useEffect(() => { if (accessCode?.body?.lesson?.studentReactions) { const reactions = accessCode.body.lesson.studentReactions; - + // Группируем реакции по sub (идентификатору студента) const groupedReactions: Record = {}; - + reactions.forEach(reaction => { if (!groupedReactions[reaction.sub]) { groupedReactions[reaction.sub] = []; } groupedReactions[reaction.sub].push(reaction); }); - + // Обновляем отображаемые реакции setStudentReactions(groupedReactions); - + // Обновляем предыдущие реакции после небольшой задержки const updatePrevReactionsTimeout = setTimeout(() => { prevReactionsRef.current = groupedReactions; }, 1000); - + return () => clearTimeout(updatePrevReactionsTimeout); } }, [accessCode?.body?.lesson?.studentReactions]); @@ -162,23 +164,23 @@ const LessonDetail = () => { if (!isFetching && isSuccess) { const generateQRCode = () => { if (!canvRef.current) return; - + // Получаем текущую ширину канваса, гарантируя квадратный QR-код const canvas = canvRef.current; const containerWidth = canvas.clientWidth; - + // Очищаем canvas перед новой генерацией const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); - + // Устанавливаем одинаковые размеры для ширины и высоты (1:1) canvas.width = containerWidth; canvas.height = containerWidth; - + QRCode.toCanvas( canvas, userUrl, - { + { width: containerWidth, margin: 1 // Небольшой отступ для лучшей читаемости }, @@ -188,17 +190,17 @@ const LessonDetail = () => { }, ) } - + // Генерируем QR-код generateQRCode(); - + // Перегенерируем при изменении размера окна const handleResize = () => { generateQRCode(); }; - + window.addEventListener('resize', handleResize); - + return () => { window.removeEventListener('resize', handleResize); }; @@ -226,10 +228,10 @@ const LessonDetail = () => { present.present = true present.recentlyPresent = newlyPresent.includes(student.sub) } else { - allStudents.push({ - ...student, - present: true, - recentlyPresent: newlyPresent.includes(student.sub) + allStudents.push({ + ...student, + present: true, + recentlyPresent: newlyPresent.includes(student.sub) }) } } @@ -241,7 +243,7 @@ const LessonDetail = () => { // Функция для определения цвета на основе посещаемости const getAttendanceColor = (attendance: number, total: number) => { const percentage = total > 0 ? (attendance / total) * 100 : 0 - + if (percentage > 80) return { bg: 'green.100', color: 'green.800', dark: { bg: 'green.800', color: 'green.100' } } if (percentage > 60) return { bg: 'teal.100', color: 'teal.800', dark: { bg: 'teal.800', color: 'teal.100' } } if (percentage > 40) return { bg: 'yellow.100', color: 'yellow.800', dark: { bg: 'yellow.800', color: 'yellow.100' } } @@ -257,74 +259,74 @@ const LessonDetail = () => { {t('journal.pl.lesson.topicTitle')} {accessCode?.body?.lesson?.name} - + - - {formatDate(accessCode?.body?.lesson?.date, t('journal.pl.lesson.dateFormat'))}{' '} - {t('journal.pl.common.marked')} - - {AllStudents.isSuccess && ( - - {accessCode?.body?.lesson?.students?.length} / {AllStudents?.data?.body?.length} + {formatDate(accessCode?.body?.lesson?.date, t('journal.pl.lesson.dateFormat'))}{' '} + {t('journal.pl.common.marked')} - + {AllStudents.isSuccess && ( + + {accessCode?.body?.lesson?.students?.length} / {AllStudents?.data?.body?.length} + + )} + {!AllStudents.isSuccess && ( + {accessCode?.body?.lesson?.students?.length} + )}{' '} + {t('journal.pl.common.people')} - )} - {!AllStudents.isSuccess && ( - {accessCode?.body?.lesson?.students?.length} - )}{' '} - {t('journal.pl.common.people')} - - @@ -334,20 +336,20 @@ const LessonDetail = () => { {studentsArr.map((student) => ( { }} > {/* Front side - visible when present */} - { student={student} present={student.present} recentlyPresent={student.recentlyPresent} - onAddUser={(user: User) => manualAdd({ lessonId, user })} reaction={accessCode?.body?.lesson?.studentReactions?.find(r => r.sub === student.sub)} /> - + {/* Back side - visible when not present */} { aspectRatio: "1" }} > - manualAdd({ lessonId, user: student })} + aria-label={t('journal.pl.common.add')} + > + + + { } }} /> - - { > {/* Академическая шапочка */} - - - - + {/* Лицо студента */} - - + {/* Тело студента */} - @@ -481,8 +488,8 @@ const LessonDetail = () => { {student.name || student.preferred_username} - diff --git a/src/pages/style.ts b/src/pages/style.ts index 01d7319..1fdda1b 100644 --- a/src/pages/style.ts +++ b/src/pages/style.ts @@ -15,6 +15,34 @@ const reveal = keyframes` } ` +export const AddMissedButton = styled.button` + position: absolute; + bottom: 8px; + right: 8px; + border: none; + background-color: var(--chakra-colors-blue-500); + color: white; + width: 26px; + height: 26px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + z-index: 2; + opacity: 0.8; + transition: opacity 0.3s ease, transform 0.3s ease; + + &:hover { + cursor: pointer; + opacity: 1; + transform: scale(1.1); + } + + .chakra-ui-dark & { + background-color: var(--chakra-colors-blue-400); + } +` + export const StudentList = styled.ul` padding: 0; list-style: none;