bro-js/journal.pl
bro-js/journal.pl
7
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

mark student button

Browse Source
This commit is contained in:
Primakov Alexandr Alexandrovich 2025-04-03 23:07:41 +03:00
parent 870ac5348b
commit 1ec4bc081e
4 changed files with 153 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/user-card/style.ts
View File

@ -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);
}
`

10
src/components/user-card/user-card.tsx
View File

@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'
import { Reaction, User } from '../../__data__/model' 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 // Map of reaction types to emojis
const REACTION_EMOJIS = { const REACTION_EMOJIS = {
@ -30,7 +30,6 @@ export function getGravatarURL(email, user) {
export const UserCard = ({ export const UserCard = ({
student, student,
present, present,
onAddUser = undefined,
wrapperAS = 'div', wrapperAS = 'div',
width, width,
recentlyPresent = false, recentlyPresent = false,
@ -39,7 +38,6 @@ export const UserCard = ({
student: User student: User
present: boolean present: boolean
width?: string | number width?: string | number
onAddUser?: (user: User) => void
wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements> wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>
recentlyPresent?: boolean recentlyPresent?: boolean
reaction?: Reaction reaction?: Reaction
@ -98,11 +96,7 @@ export const UserCard = ({
</Box> </Box>
)} )}
</NameOverlay> </NameOverlay>
{onAddUser && !present && (
<AddMissedButton onClick={() => onAddUser(student)} aria-label={t('journal.pl.common.add')}>
<AddIcon boxSize={3} />
</AddMissedButton>
)}
{/* Анимация реакции */} {/* Анимация реакции */}
<AnimatePresence> <AnimatePresence>

239
src/pages/lesson-details.tsx
View File

@ -4,6 +4,7 @@ import QRCode from 'qrcode'
import { sha256 } from 'js-sha256' import { sha256 } from 'js-sha256'
import { getConfigValue, getNavigationValue } from '@brojs/cli' import { getConfigValue, getNavigationValue } from '@brojs/cli'
import { motion, AnimatePresence } from 'framer-motion' import { motion, AnimatePresence } from 'framer-motion'
import { AddIcon } from '@chakra-ui/icons'
import { import {
Box, Box,
Container, Container,
@ -22,6 +23,7 @@ import { formatDate } from '../utils/dayjs-config'
import { useSetBreadcrumbs } from '../components' import { useSetBreadcrumbs } from '../components'
import { import {
AddMissedButton,
QRCanvas, QRCanvas,
StudentList, StudentList,
} from './style' } from './style'
@ -43,11 +45,11 @@ const LessonDetail = () => {
const user = useAppSelector((s) => s.user) const user = useAppSelector((s) => s.user)
const { t } = useTranslation() const { t } = useTranslation()
const { colorMode } = useColorMode() const { colorMode } = useColorMode()
// Получаем данные о курсе и уроке // Получаем данные о курсе и уроке
const { data: courseData } = api.useGetCourseByIdQuery(courseId) const { data: courseData } = api.useGetCourseByIdQuery(courseId)
const { data: lessonData } = api.useLessonByIdQuery(lessonId) const { data: lessonData } = api.useLessonByIdQuery(lessonId)
// Устанавливаем хлебные крошки // Устанавливаем хлебные крошки
useSetBreadcrumbs([ useSetBreadcrumbs([
{ {
@ -63,10 +65,10 @@ const LessonDetail = () => {
isCurrentPage: true isCurrentPage: true
} }
]) ])
// Создаем ref для отслеживания ранее присутствовавших студентов // Создаем ref для отслеживания ранее присутствовавших студентов
const prevPresentStudentsRef = useRef(new Set<string>()) const prevPresentStudentsRef = useRef(new Set<string>())
// Добавляем состояние для отслеживания пульсации // Добавляем состояние для отслеживания пульсации
const [isPulsing, setIsPulsing] = useState(false) const [isPulsing, setIsPulsing] = useState(false)
// Отслеживаем предыдущее количество студентов // Отслеживаем предыдущее количество студентов
@ -75,7 +77,7 @@ const LessonDetail = () => {
const prevReactionsRef = useRef<Record<string, Reaction[]>>({}) const prevReactionsRef = useRef<Record<string, Reaction[]>>({})
// Храним актуальные реакции студентов // Храним актуальные реакции студентов
const [studentReactions, setStudentReactions] = useState<Record<string, Reaction[]>>({}) const [studentReactions, setStudentReactions] = useState<Record<string, Reaction[]>>({})
const { const {
isFetching, isFetching,
data: accessCode, data: accessCode,
@ -101,7 +103,7 @@ const LessonDetail = () => {
useEffect(() => { useEffect(() => {
if (accessCode?.body) { if (accessCode?.body) {
const currentPresent = new Set(accessCode.body.lesson.students.map(s => s.sub)) const currentPresent = new Set(accessCode.body.lesson.students.map(s => s.sub))
// Проверяем, изменилось ли количество студентов // Проверяем, изменилось ли количество студентов
const currentCount = accessCode.body.lesson.students.length; const currentCount = accessCode.body.lesson.students.length;
if (prevStudentCountRef.current !== currentCount && prevStudentCountRef.current > 0) { if (prevStudentCountRef.current !== currentCount && prevStudentCountRef.current > 0) {
@ -112,15 +114,15 @@ const LessonDetail = () => {
setIsPulsing(false); setIsPulsing(false);
}, 1500); }, 1500);
} }
// Обновляем предыдущее количество // Обновляем предыдущее количество
prevStudentCountRef.current = currentCount; prevStudentCountRef.current = currentCount;
// Очищаем флаги предыдущего состояния после задержки // Очищаем флаги предыдущего состояния после задержки
const timeoutId = setTimeout(() => { const timeoutId = setTimeout(() => {
prevPresentStudentsRef.current = currentPresent prevPresentStudentsRef.current = currentPresent
}, 3000) }, 3000)
return () => clearTimeout(timeoutId) return () => clearTimeout(timeoutId)
} }
}, [accessCode]) }, [accessCode])
@ -129,25 +131,25 @@ const LessonDetail = () => {
useEffect(() => { useEffect(() => {
if (accessCode?.body?.lesson?.studentReactions) { if (accessCode?.body?.lesson?.studentReactions) {
const reactions = accessCode.body.lesson.studentReactions; const reactions = accessCode.body.lesson.studentReactions;
// Группируем реакции по sub (идентификатору студента) // Группируем реакции по sub (идентификатору студента)
const groupedReactions: Record<string, Reaction[]> = {}; const groupedReactions: Record<string, Reaction[]> = {};
reactions.forEach(reaction => { reactions.forEach(reaction => {
if (!groupedReactions[reaction.sub]) { if (!groupedReactions[reaction.sub]) {
groupedReactions[reaction.sub] = []; groupedReactions[reaction.sub] = [];
} }
groupedReactions[reaction.sub].push(reaction); groupedReactions[reaction.sub].push(reaction);
}); });
// Обновляем отображаемые реакции // Обновляем отображаемые реакции
setStudentReactions(groupedReactions); setStudentReactions(groupedReactions);
// Обновляем предыдущие реакции после небольшой задержки // Обновляем предыдущие реакции после небольшой задержки
const updatePrevReactionsTimeout = setTimeout(() => { const updatePrevReactionsTimeout = setTimeout(() => {
prevReactionsRef.current = groupedReactions; prevReactionsRef.current = groupedReactions;
}, 1000); }, 1000);
return () => clearTimeout(updatePrevReactionsTimeout); return () => clearTimeout(updatePrevReactionsTimeout);
} }
}, [accessCode?.body?.lesson?.studentReactions]); }, [accessCode?.body?.lesson?.studentReactions]);
@ -162,23 +164,23 @@ const LessonDetail = () => {
if (!isFetching && isSuccess) { if (!isFetching && isSuccess) {
const generateQRCode = () => { const generateQRCode = () => {
if (!canvRef.current) return; if (!canvRef.current) return;
// Получаем текущую ширину канваса, гарантируя квадратный QR-код // Получаем текущую ширину канваса, гарантируя квадратный QR-код
const canvas = canvRef.current; const canvas = canvRef.current;
const containerWidth = canvas.clientWidth; const containerWidth = canvas.clientWidth;
// Очищаем canvas перед новой генерацией // Очищаем canvas перед новой генерацией
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
// Устанавливаем одинаковые размеры для ширины и высоты (1:1) // Устанавливаем одинаковые размеры для ширины и высоты (1:1)
canvas.width = containerWidth; canvas.width = containerWidth;
canvas.height = containerWidth; canvas.height = containerWidth;
QRCode.toCanvas( QRCode.toCanvas(
canvas, canvas,
userUrl, userUrl,
{ {
width: containerWidth, width: containerWidth,
margin: 1 // Небольшой отступ для лучшей читаемости margin: 1 // Небольшой отступ для лучшей читаемости
}, },
@ -188,17 +190,17 @@ const LessonDetail = () => {
}, },
) )
} }
// Генерируем QR-код // Генерируем QR-код
generateQRCode(); generateQRCode();
// Перегенерируем при изменении размера окна // Перегенерируем при изменении размера окна
const handleResize = () => { const handleResize = () => {
generateQRCode(); generateQRCode();
}; };
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
return () => { return () => {
window.removeEventListener('resize', handleResize); window.removeEventListener('resize', handleResize);
}; };
@ -226,10 +228,10 @@ const LessonDetail = () => {
present.present = true present.present = true
present.recentlyPresent = newlyPresent.includes(student.sub) present.recentlyPresent = newlyPresent.includes(student.sub)
} else { } else {
allStudents.push({ allStudents.push({
...student, ...student,
present: true, present: true,
recentlyPresent: newlyPresent.includes(student.sub) recentlyPresent: newlyPresent.includes(student.sub)
}) })
} }
} }
@ -241,7 +243,7 @@ const LessonDetail = () => {
// Функция для определения цвета на основе посещаемости // Функция для определения цвета на основе посещаемости
const getAttendanceColor = (attendance: number, total: number) => { const getAttendanceColor = (attendance: number, total: number) => {
const percentage = total > 0 ? (attendance / total) * 100 : 0 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 > 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 > 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' } } 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')} {t('journal.pl.lesson.topicTitle')}
</Heading> </Heading>
<Box as="span">{accessCode?.body?.lesson?.name}</Box> <Box as="span">{accessCode?.body?.lesson?.name}</Box>
</VStack> </VStack>
<Stack spacing="8" direction={{ base: "column", md: "row" }} mt={6}> <Stack spacing="8" direction={{ base: "column", md: "row" }} mt={6}>
<Box <Box
flexShrink={0} flexShrink={0}
alignSelf="flex-start" alignSelf="flex-start"
p={4} p={4}
borderRadius="xl" borderRadius="xl"
bg={colorMode === "light" ? "gray.50" : "gray.700"} bg={colorMode === "light" ? "gray.50" : "gray.700"}
boxShadow="md" boxShadow="md"
position="sticky" position="sticky"
top="20px" top="20px"
zIndex="2" zIndex="2"
><Box pb={3}> ><Box pb={3}>
{formatDate(accessCode?.body?.lesson?.date, t('journal.pl.lesson.dateFormat'))}{' '} {formatDate(accessCode?.body?.lesson?.date, t('journal.pl.lesson.dateFormat'))}{' '}
{t('journal.pl.common.marked')} - {t('journal.pl.common.marked')} -
{AllStudents.isSuccess && ( {AllStudents.isSuccess && (
<Box <Box
as="span" as="span"
px={2} px={2}
py={1} py={1}
ml={2} ml={2}
borderRadius="md" borderRadius="md"
fontWeight="bold" fontWeight="bold"
bg={getAttendanceColor( bg={getAttendanceColor(
accessCode?.body?.lesson?.students?.length || 0, accessCode?.body?.lesson?.students?.length || 0,
AllStudents?.data?.body?.length || 1 AllStudents?.data?.body?.length || 1
).bg} ).bg}
color={getAttendanceColor( color={getAttendanceColor(
accessCode?.body?.lesson?.students?.length || 0, accessCode?.body?.lesson?.students?.length || 0,
AllStudents?.data?.body?.length || 1 AllStudents?.data?.body?.length || 1
).color} ).color}
_dark={{ _dark={{
bg: getAttendanceColor( bg: getAttendanceColor(
accessCode?.body?.lesson?.students?.length || 0, accessCode?.body?.lesson?.students?.length || 0,
AllStudents?.data?.body?.length || 1 AllStudents?.data?.body?.length || 1
).dark.bg, ).dark.bg,
color: getAttendanceColor( color: getAttendanceColor(
accessCode?.body?.lesson?.students?.length || 0, accessCode?.body?.lesson?.students?.length || 0,
AllStudents?.data?.body?.length || 1 AllStudents?.data?.body?.length || 1
).dark.color ).dark.color
}} }}
position="relative" position="relative"
animation={isPulsing ? "pulse 1.5s ease-in-out" : "none"} animation={isPulsing ? "pulse 1.5s ease-in-out" : "none"}
sx={{ sx={{
'@keyframes pulse': { '@keyframes pulse': {
'0%': { transform: 'scale(1)' }, '0%': { transform: 'scale(1)' },
'50%': { transform: 'scale(1.15)', boxShadow: '0 0 10px rgba(66, 153, 225, 0.7)' }, '50%': { transform: 'scale(1.15)', boxShadow: '0 0 10px rgba(66, 153, 225, 0.7)' },
'100%': { transform: 'scale(1)' } '100%': { transform: 'scale(1)' }
} }
}} }}
> >
{accessCode?.body?.lesson?.students?.length} / {AllStudents?.data?.body?.length} {accessCode?.body?.lesson?.students?.length} / {AllStudents?.data?.body?.length}
</Box>
)}
{!AllStudents.isSuccess && (
<span> {accessCode?.body?.lesson?.students?.length}</span>
)}{' '}
{t('journal.pl.common.people')}
</Box> </Box>
)}
{!AllStudents.isSuccess && (
<span> {accessCode?.body?.lesson?.students?.length}</span>
)}{' '}
{t('journal.pl.common.people')}
</Box>
<a href={userUrl}> <a href={userUrl}>
<QRCanvas ref={canvRef} /> <QRCanvas ref={canvRef} />
</a> </a>
</Box> </Box>
<Box <Box
flex={1} flex={1}
p={4} p={4}
borderRadius="xl" borderRadius="xl"
bg={colorMode === "light" ? "gray.50" : "gray.700"} bg={colorMode === "light" ? "gray.50" : "gray.700"}
boxShadow="md" boxShadow="md"
> >
@ -334,20 +336,20 @@ const LessonDetail = () => {
{studentsArr.map((student) => ( {studentsArr.map((student) => (
<motion.li <motion.li
key={student.sub} key={student.sub}
animate={{ animate={{
rotateY: student.present ? 0 : 180, rotateY: student.present ? 0 : 180,
boxShadow: student.recentlyPresent boxShadow: student.recentlyPresent
? ['0 0 0 0 rgba(66, 153, 225, 0)', '0 0 20px 5px rgba(66, 153, 225, 0.7)', '0 0 0 0 rgba(66, 153, 225, 0)'] ? ['0 0 0 0 rgba(66, 153, 225, 0)', '0 0 20px 5px rgba(66, 153, 225, 0.7)', '0 0 0 0 rgba(66, 153, 225, 0)']
: '0 0 0 0 rgba(0, 0, 0, 0)' : '0 0 0 0 rgba(0, 0, 0, 0)'
}} }}
transition={{ transition={{
rotateY: { type: "spring", stiffness: 300, damping: 20 }, rotateY: { type: "spring", stiffness: 300, damping: 20 },
boxShadow: { boxShadow: {
repeat: student.recentlyPresent ? 3 : 0, repeat: student.recentlyPresent ? 3 : 0,
duration: 1.5 duration: 1.5
} }
}} }}
style={{ style={{
transformStyle: "preserve-3d", transformStyle: "preserve-3d",
perspective: "1000px", perspective: "1000px",
aspectRatio: "1", aspectRatio: "1",
@ -356,9 +358,9 @@ const LessonDetail = () => {
}} }}
> >
{/* Front side - visible when present */} {/* Front side - visible when present */}
<Box <Box
position="relative" position="relative"
width="100%" width="100%"
height="100%" height="100%"
style={{ style={{
transformStyle: "preserve-3d" transformStyle: "preserve-3d"
@ -381,11 +383,10 @@ const LessonDetail = () => {
student={student} student={student}
present={student.present} present={student.present}
recentlyPresent={student.recentlyPresent} recentlyPresent={student.recentlyPresent}
onAddUser={(user: User) => manualAdd({ lessonId, user })}
reaction={accessCode?.body?.lesson?.studentReactions?.find(r => r.sub === student.sub)} reaction={accessCode?.body?.lesson?.studentReactions?.find(r => r.sub === student.sub)}
/> />
</Box> </Box>
{/* Back side - visible when not present */} {/* Back side - visible when not present */}
<Flex <Flex
position="absolute" position="absolute"
@ -406,7 +407,13 @@ const LessonDetail = () => {
aspectRatio: "1" aspectRatio: "1"
}} }}
> >
<Box <AddMissedButton
onClick={() => manualAdd({ lessonId, user: student })}
aria-label={t('journal.pl.common.add')}
>
<AddIcon boxSize={3} />
</AddMissedButton>
<Box
position="absolute" position="absolute"
top="0" top="0"
left="0" left="0"
@ -426,15 +433,15 @@ const LessonDetail = () => {
} }
}} }}
/> />
<Box <Box
position="relative" position="relative"
textAlign="center" textAlign="center"
zIndex="1" zIndex="1"
> >
<Box <Box
width="60px" width="60px"
height="60px" height="60px"
mx="auto" mx="auto"
mb={2} mb={2}
sx={{ sx={{
animation: "float 3s ease-in-out infinite", animation: "float 3s ease-in-out infinite",
@ -447,33 +454,33 @@ const LessonDetail = () => {
> >
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
{/* Академическая шапочка */} {/* Академическая шапочка */}
<path <path
d="M12 2L2 6.5L12 11L22 6.5L12 2Z" d="M12 2L2 6.5L12 11L22 6.5L12 2Z"
fill={colorMode === "light" ? "#3182CE" : "#63B3ED"} fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
/> />
<path <path
d="M19 9V14.5C19 15.163 18.6839 15.7989 18.1213 16.2678C17.0615 17.1301 13.7749 19 12 19C10.2251 19 6.93852 17.1301 5.87868 16.2678C5.31607 15.7989 5 15.163 5 14.5V9L12 12.5L19 9Z" d="M19 9V14.5C19 15.163 18.6839 15.7989 18.1213 16.2678C17.0615 17.1301 13.7749 19 12 19C10.2251 19 6.93852 17.1301 5.87868 16.2678C5.31607 15.7989 5 15.163 5 14.5V9L12 12.5L19 9Z"
fill={colorMode === "light" ? "#2C5282" : "#4299E1"} fill={colorMode === "light" ? "#2C5282" : "#4299E1"}
/> />
<path <path
d="M21 7V14M21 14L19 16M21 14L23 16" d="M21 7V14M21 14L19 16M21 14L23 16"
stroke={colorMode === "light" ? "#2C5282" : "#4299E1"} stroke={colorMode === "light" ? "#2C5282" : "#4299E1"}
strokeWidth="1.5" strokeWidth="1.5"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
/> />
{/* Лицо студента */} {/* Лицо студента */}
<circle <circle
cx="12" cx="12"
cy="15" cy="15"
r="2.5" r="2.5"
fill={colorMode === "light" ? "#3182CE" : "#63B3ED"} fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
/> />
{/* Тело студента */} {/* Тело студента */}
<path <path
d="M8 18.5C8 17.1193 9.11929 16 10.5 16H13.5C14.8807 16 16 17.1193 16 18.5V21H8V18.5Z" d="M8 18.5C8 17.1193 9.11929 16 10.5 16H13.5C14.8807 16 16 17.1193 16 18.5V21H8V18.5Z"
fill={colorMode === "light" ? "#3182CE" : "#63B3ED"} fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
/> />
</svg> </svg>
@ -481,8 +488,8 @@ const LessonDetail = () => {
<Box fontSize="sm" fontWeight="medium"> <Box fontSize="sm" fontWeight="medium">
{student.name || student.preferred_username} {student.name || student.preferred_username}
</Box> </Box>
<Box <Box
fontSize="xs" fontSize="xs"
opacity={0.8} opacity={0.8}
color={colorMode === "light" ? "gray.600" : "gray.300"} color={colorMode === "light" ? "gray.600" : "gray.300"}
> >

28
src/pages/style.ts
View File

@ -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` export const StudentList = styled.ul`
padding: 0; padding: 0;
list-style: none; list-style: none;