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>

99
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'
@ -271,52 +273,52 @@ const LessonDetail = () => {
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>
@ -381,7 +383,6 @@ 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>
@ -406,6 +407,12 @@ const LessonDetail = () => {
aspectRatio: "1" aspectRatio: "1"
}} }}
> >
<AddMissedButton
onClick={() => manualAdd({ lessonId, user: student })}
aria-label={t('journal.pl.common.add')}
>
<AddIcon boxSize={3} />
</AddMissedButton>
<Box <Box
position="absolute" position="absolute"
top="0" top="0"

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;