#13 QR code centered #15

Merged
primakov merged 1 commits from bugfix/centered-qr-code into master 2024-03-31 19:02:57 +03:00
3 changed files with 45 additions and 37 deletions
Showing only changes of commit 8b1ecdced5 - Show all commits

View File

@ -3,16 +3,22 @@ import { useParams, Link } from 'react-router-dom'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import QRCode from 'qrcode' import QRCode from 'qrcode'
import { getConfigValue, getNavigationsValue } from '@ijl/cli' import { getConfigValue, getNavigationsValue } from '@ijl/cli'
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react' import {
Box,
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
Container,
HStack,
VStack,
Heading,
} from '@chakra-ui/react'
import { import {
MainWrapper,
StartWrapper,
QRCanvas, QRCanvas,
LessonItem, LessonItem,
Lessonname, Lessonname,
AddMissedButton, AddMissedButton,
Wrapper,
UnorderList, UnorderList,
} from './style' } from './style'
import { api } from '../__data__/api/api' import { api } from '../__data__/api/api'
@ -80,8 +86,8 @@ const LessonDetail = () => {
}, [accessCode?.body, AllStudents.data]) }, [accessCode?.body, AllStudents.data])
return ( return (
<MainWrapper> <Container maxW="container.xl" centerContent px="200">
<StartWrapper> <VStack align="left">
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}> <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@ -102,39 +108,41 @@ const LessonDetail = () => {
<BreadcrumbLink href="#">Лекция</BreadcrumbLink> <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<Heading as='h3' mt='4' mb='3'>
<h1 style={{ width: '70%' }}> Тема занятия:
Тема занятия - {accessCode?.body?.lesson?.name} </Heading>
</h1> <Box as="span">
<span style={{ display: 'flex' }}> {accessCode?.body?.lesson?.name}
</Box>
<Box as='span'>
{dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '} {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
Отмечено - {accessCode?.body?.lesson?.students?.length}{' '} Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
{AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '} {AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
человек человек
</span> </Box>
<Wrapper> </VStack>
<a href={userUrl}> <HStack spacing="8">
<QRCanvas ref={canvRef} /> <a href={userUrl}>
</a> <QRCanvas ref={canvRef} />
<UnorderList> </a>
{studentsArr.map((student) => ( <UnorderList>
<LessonItem key={student.sub} warn={!student.present}> {studentsArr.map((student) => (
<Lessonname> <LessonItem key={student.sub} warn={!student.present}>
{student.name || student.preferred_username}{' '} <Lessonname>
{!student.present && ( {student.name || student.preferred_username}{' '}
<AddMissedButton {!student.present && (
onClick={() => manualAdd({ lessonId, user: student })} <AddMissedButton
> onClick={() => manualAdd({ lessonId, user: student })}
add >
</AddMissedButton> add
)} </AddMissedButton>
</Lessonname> )}
</LessonItem> </Lessonname>
))} </LessonItem>
</UnorderList> ))}
</Wrapper> </UnorderList>
</StartWrapper> </HStack>
</MainWrapper> </Container>
) )
} }

View File

@ -4,7 +4,7 @@
"expires": "2024-03-01T07:52:16.374Z", "expires": "2024-03-01T07:52:16.374Z",
"lesson": { "lesson": {
"_id": "65df996c584b172772d69706", "_id": "65df996c584b172772d69706",
"name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ", "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
"students": [ "students": [
{ {
"sub": "f62905b1-e223-40ca-910f-c8d84c6137c1", "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",

View File

@ -20,7 +20,7 @@
"expires": "2024-03-01T07:52:09.233Z", "expires": "2024-03-01T07:52:09.233Z",
"lesson": { "lesson": {
"_id": "65df996c584b172772d69706", "_id": "65df996c584b172772d69706",
"name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ", "name": "ВВОДНАЯ ПО JS.ПРИМЕНЕНИЕ И СПОСОБЫ ПОДКЛЮЧЕНИЯ НА СТРАНИЦЕ. LET, CONST. БАЗОВЫЕ ТИПЫ ДАННЫХ, ПРИВЕДЕНИЕ ТИПОВ. ПЕРЕМЕННЫЕ, ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННЫХ",
"students": [], "students": [],
"date": "2024-02-28T20:37:00.057Z", "date": "2024-02-28T20:37:00.057Z",
"created": "2024-02-28T20:37:00.057Z", "created": "2024-02-28T20:37:00.057Z",