#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

View File

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

View File

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

View File

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