mark student button
This commit is contained in:
parent
870ac5348b
commit
1ec4bc081e
@ -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);
|
||||
}
|
||||
`
|
||||
@ -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<any, keyof React.JSX.IntrinsicElements>
|
||||
recentlyPresent?: boolean
|
||||
reaction?: Reaction
|
||||
@ -98,11 +96,7 @@ export const UserCard = ({
|
||||
</Box>
|
||||
)}
|
||||
</NameOverlay>
|
||||
{onAddUser && !present && (
|
||||
<AddMissedButton onClick={() => onAddUser(student)} aria-label={t('journal.pl.common.add')}>
|
||||
<AddIcon boxSize={3} />
|
||||
</AddMissedButton>
|
||||
)}
|
||||
|
||||
|
||||
{/* Анимация реакции */}
|
||||
<AnimatePresence>
|
||||
|
||||
@ -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<string>())
|
||||
|
||||
|
||||
// Добавляем состояние для отслеживания пульсации
|
||||
const [isPulsing, setIsPulsing] = useState(false)
|
||||
// Отслеживаем предыдущее количество студентов
|
||||
@ -75,7 +77,7 @@ const LessonDetail = () => {
|
||||
const prevReactionsRef = useRef<Record<string, Reaction[]>>({})
|
||||
// Храним актуальные реакции студентов
|
||||
const [studentReactions, setStudentReactions] = useState<Record<string, Reaction[]>>({})
|
||||
|
||||
|
||||
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<string, Reaction[]> = {};
|
||||
|
||||
|
||||
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')}
|
||||
</Heading>
|
||||
<Box as="span">{accessCode?.body?.lesson?.name}</Box>
|
||||
|
||||
|
||||
</VStack>
|
||||
<Stack spacing="8" direction={{ base: "column", md: "row" }} mt={6}>
|
||||
<Box
|
||||
flexShrink={0}
|
||||
alignSelf="flex-start"
|
||||
p={4}
|
||||
borderRadius="xl"
|
||||
<Box
|
||||
flexShrink={0}
|
||||
alignSelf="flex-start"
|
||||
p={4}
|
||||
borderRadius="xl"
|
||||
bg={colorMode === "light" ? "gray.50" : "gray.700"}
|
||||
boxShadow="md"
|
||||
position="sticky"
|
||||
top="20px"
|
||||
zIndex="2"
|
||||
><Box pb={3}>
|
||||
{formatDate(accessCode?.body?.lesson?.date, t('journal.pl.lesson.dateFormat'))}{' '}
|
||||
{t('journal.pl.common.marked')} -
|
||||
{AllStudents.isSuccess && (
|
||||
<Box
|
||||
as="span"
|
||||
px={2}
|
||||
py={1}
|
||||
ml={2}
|
||||
borderRadius="md"
|
||||
fontWeight="bold"
|
||||
bg={getAttendanceColor(
|
||||
accessCode?.body?.lesson?.students?.length || 0,
|
||||
AllStudents?.data?.body?.length || 1
|
||||
).bg}
|
||||
color={getAttendanceColor(
|
||||
accessCode?.body?.lesson?.students?.length || 0,
|
||||
AllStudents?.data?.body?.length || 1
|
||||
).color}
|
||||
_dark={{
|
||||
bg: getAttendanceColor(
|
||||
accessCode?.body?.lesson?.students?.length || 0,
|
||||
AllStudents?.data?.body?.length || 1
|
||||
).dark.bg,
|
||||
color: getAttendanceColor(
|
||||
accessCode?.body?.lesson?.students?.length || 0,
|
||||
AllStudents?.data?.body?.length || 1
|
||||
).dark.color
|
||||
}}
|
||||
position="relative"
|
||||
animation={isPulsing ? "pulse 1.5s ease-in-out" : "none"}
|
||||
sx={{
|
||||
'@keyframes pulse': {
|
||||
'0%': { transform: 'scale(1)' },
|
||||
'50%': { transform: 'scale(1.15)', boxShadow: '0 0 10px rgba(66, 153, 225, 0.7)' },
|
||||
'100%': { transform: 'scale(1)' }
|
||||
}
|
||||
}}
|
||||
>
|
||||
{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 && (
|
||||
<Box
|
||||
as="span"
|
||||
px={2}
|
||||
py={1}
|
||||
ml={2}
|
||||
borderRadius="md"
|
||||
fontWeight="bold"
|
||||
bg={getAttendanceColor(
|
||||
accessCode?.body?.lesson?.students?.length || 0,
|
||||
AllStudents?.data?.body?.length || 1
|
||||
).bg}
|
||||
color={getAttendanceColor(
|
||||
accessCode?.body?.lesson?.students?.length || 0,
|
||||
AllStudents?.data?.body?.length || 1
|
||||
).color}
|
||||
_dark={{
|
||||
bg: getAttendanceColor(
|
||||
accessCode?.body?.lesson?.students?.length || 0,
|
||||
AllStudents?.data?.body?.length || 1
|
||||
).dark.bg,
|
||||
color: getAttendanceColor(
|
||||
accessCode?.body?.lesson?.students?.length || 0,
|
||||
AllStudents?.data?.body?.length || 1
|
||||
).dark.color
|
||||
}}
|
||||
position="relative"
|
||||
animation={isPulsing ? "pulse 1.5s ease-in-out" : "none"}
|
||||
sx={{
|
||||
'@keyframes pulse': {
|
||||
'0%': { transform: 'scale(1)' },
|
||||
'50%': { transform: 'scale(1.15)', boxShadow: '0 0 10px rgba(66, 153, 225, 0.7)' },
|
||||
'100%': { transform: 'scale(1)' }
|
||||
}
|
||||
}}
|
||||
>
|
||||
{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>
|
||||
)}
|
||||
{!AllStudents.isSuccess && (
|
||||
<span> {accessCode?.body?.lesson?.students?.length}</span>
|
||||
)}{' '}
|
||||
{t('journal.pl.common.people')}
|
||||
</Box>
|
||||
<a href={userUrl}>
|
||||
<QRCanvas ref={canvRef} />
|
||||
</a>
|
||||
</Box>
|
||||
<Box
|
||||
flex={1}
|
||||
p={4}
|
||||
borderRadius="xl"
|
||||
<Box
|
||||
flex={1}
|
||||
p={4}
|
||||
borderRadius="xl"
|
||||
bg={colorMode === "light" ? "gray.50" : "gray.700"}
|
||||
boxShadow="md"
|
||||
>
|
||||
@ -334,20 +336,20 @@ const LessonDetail = () => {
|
||||
{studentsArr.map((student) => (
|
||||
<motion.li
|
||||
key={student.sub}
|
||||
animate={{
|
||||
animate={{
|
||||
rotateY: student.present ? 0 : 180,
|
||||
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)']
|
||||
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(0, 0, 0, 0)'
|
||||
}}
|
||||
transition={{
|
||||
transition={{
|
||||
rotateY: { type: "spring", stiffness: 300, damping: 20 },
|
||||
boxShadow: {
|
||||
repeat: student.recentlyPresent ? 3 : 0,
|
||||
duration: 1.5
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
style={{
|
||||
transformStyle: "preserve-3d",
|
||||
perspective: "1000px",
|
||||
aspectRatio: "1",
|
||||
@ -356,9 +358,9 @@ const LessonDetail = () => {
|
||||
}}
|
||||
>
|
||||
{/* Front side - visible when present */}
|
||||
<Box
|
||||
position="relative"
|
||||
width="100%"
|
||||
<Box
|
||||
position="relative"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{
|
||||
transformStyle: "preserve-3d"
|
||||
@ -381,11 +383,10 @@ const LessonDetail = () => {
|
||||
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)}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
|
||||
{/* Back side - visible when not present */}
|
||||
<Flex
|
||||
position="absolute"
|
||||
@ -406,7 +407,13 @@ const LessonDetail = () => {
|
||||
aspectRatio: "1"
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
<AddMissedButton
|
||||
onClick={() => manualAdd({ lessonId, user: student })}
|
||||
aria-label={t('journal.pl.common.add')}
|
||||
>
|
||||
<AddIcon boxSize={3} />
|
||||
</AddMissedButton>
|
||||
<Box
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
@ -426,15 +433,15 @@ const LessonDetail = () => {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
position="relative"
|
||||
<Box
|
||||
position="relative"
|
||||
textAlign="center"
|
||||
zIndex="1"
|
||||
>
|
||||
<Box
|
||||
width="60px"
|
||||
height="60px"
|
||||
mx="auto"
|
||||
<Box
|
||||
width="60px"
|
||||
height="60px"
|
||||
mx="auto"
|
||||
mb={2}
|
||||
sx={{
|
||||
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">
|
||||
{/* Академическая шапочка */}
|
||||
<path
|
||||
d="M12 2L2 6.5L12 11L22 6.5L12 2Z"
|
||||
<path
|
||||
d="M12 2L2 6.5L12 11L22 6.5L12 2Z"
|
||||
fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
|
||||
/>
|
||||
<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"
|
||||
<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"
|
||||
fill={colorMode === "light" ? "#2C5282" : "#4299E1"}
|
||||
/>
|
||||
<path
|
||||
d="M21 7V14M21 14L19 16M21 14L23 16"
|
||||
<path
|
||||
d="M21 7V14M21 14L19 16M21 14L23 16"
|
||||
stroke={colorMode === "light" ? "#2C5282" : "#4299E1"}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
|
||||
|
||||
{/* Лицо студента */}
|
||||
<circle
|
||||
cx="12"
|
||||
cy="15"
|
||||
r="2.5"
|
||||
<circle
|
||||
cx="12"
|
||||
cy="15"
|
||||
r="2.5"
|
||||
fill={colorMode === "light" ? "#3182CE" : "#63B3ED"}
|
||||
/>
|
||||
|
||||
|
||||
{/* Тело студента */}
|
||||
<path
|
||||
d="M8 18.5C8 17.1193 9.11929 16 10.5 16H13.5C14.8807 16 16 17.1193 16 18.5V21H8V18.5Z"
|
||||
<path
|
||||
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"}
|
||||
/>
|
||||
</svg>
|
||||
@ -481,8 +488,8 @@ const LessonDetail = () => {
|
||||
<Box fontSize="sm" fontWeight="medium">
|
||||
{student.name || student.preferred_username}
|
||||
</Box>
|
||||
<Box
|
||||
fontSize="xs"
|
||||
<Box
|
||||
fontSize="xs"
|
||||
opacity={0.8}
|
||||
color={colorMode === "light" ? "gray.600" : "gray.300"}
|
||||
>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user