fix typo

polling interval from config qrcode as link courses list page journal.pl as name fix package-lock lesson missed students merge students list reset version 1.0.0 styled page of visits rename students fake students, delete comments Обновил Readme Squashed commit of the following: commit ebc511e36b84c077f7bc029540ead1e3c58c49ab Author: Alexei <adu864222@gmail.com> Date: Tue Mar 19 00:23:30 2024 +1000 fake students, delete comments commit 018582d16c581663103e5fded99cc10fca400532 Author: Alexei <adu864222@gmail.com> Date: Mon Mar 18 23:13:01 2024 +1000 rename students commit e53922d7fd89cf371c90e167c6486b36b0789036 Author: Alexei <adu864222@gmail.com> Date: Sun Mar 17 00:45:11 2024 +1000 styled page of visits Обновил Readme Squashed commit of the following: commit ebc511e36b84c077f7bc029540ead1e3c58c49ab Author: Alexei <adu864222@gmail.com> Date: Tue Mar 19 00:23:30 2024 +1000 fake students, delete comments commit 018582d16c581663103e5fded99cc10fca400532 Author: Alexei <adu864222@gmail.com> Date: Mon Mar 18 23:13:01 2024 +1000 rename students commit e53922d7fd89cf371c90e167c6486b36b0789036 Author: Alexei <adu864222@gmail.com> Date: Sun Mar 17 00:45:11 2024 +1000 styled page of visits JRL-51 breadcrumbs + fonts 1.1.0 1.2.0 correct width h1 on page of visits students styled card of course
2024-03-01 12:49:55 +03:00
parent 0574d4e8d0
commit 25511f37d1
51 changed files with 3033 additions and 7778 deletions
--- a/src/pages/lesson-details.tsx
+++ b/src/pages/lesson-details.tsx
@@ -0,0 +1,139 @@
+import React, { useEffect, useState, useRef, useMemo } from 'react'
+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 {
+  MainWrapper,
+  StartWrapper,
+  QRCanvas,
+  LessonItem,
+  Lessonname,
+  AddMissedButton,
+  Wrapper,
+  UnorderList,
+} from './style'
+import { api } from '../__data__/api/api'
+import { User } from '../__data__/model'
+
+const LessonDetail = () => {
+  const { lessonId, courseId } = useParams()
+  const canvRef = useRef(null)
+  const [lesson, setLesson] = useState(null)
+  const {
+    isFetching,
+    isLoading,
+    data: accessCode,
+    error,
+    isSuccess,
+  } = api.useCreateAccessCodeQuery(
+    { lessonId },
+    {
+      pollingInterval:
+        Number(getConfigValue('journal.polling-interval')) || 3000,
+      skipPollingIfUnfocused: true,
+    },
+  )
+  const AllStudents = api.useCourseAllStudentsQuery(courseId)
+  const [manualAdd, manualAddRqst] = api.useManualAddStudentMutation()
+  const userUrl = useMemo(
+    () => `${location.origin}/journal/u/${lessonId}/${accessCode?.body?._id}`,
+    [accessCode, lessonId],
+  )
+  useEffect(() => {
+    if (!isFetching && isSuccess) {
+      QRCode.toCanvas(
+        canvRef.current,
+        userUrl,
+        { width: 600 },
+        function (error) {
+          if (error) console.error(error)
+          console.log('success!')
+        },
+      )
+    }
+  }, [isFetching, isSuccess])
+
+  const studentsArr = useMemo(() => {
+    let allStudents: (User & { present?: boolean })[] = [
+      ...(AllStudents.data?.body || []),
+    ].map((st) => ({ ...st, present: false }))
+    let presentStudents: (User & { present?: boolean })[] = [
+      ...(accessCode?.body.lesson.students || []),
+    ]
+
+    while (allStudents.length && presentStudents.length) {
+      const student = presentStudents.pop()
+
+      const present = allStudents.find((st) => st.sub === student.sub)
+
+      if (present) {
+        present.present = true
+      } else {
+        allStudents.push({ ...student, present: true })
+      }
+    }
+
+    return allStudents
+  }, [accessCode?.body, AllStudents.data])
+
+  return (
+    <MainWrapper>
+      <StartWrapper>
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>
+              Журнал
+            </Link>
+          </BreadcrumbItem>
+
+          <BreadcrumbItem>
+            <Link
+              as={BreadcrumbLink}
+              to={`${getNavigationsValue('journal.main')}/lessons-list/${courseId}`}
+            >
+              Курс
+            </Link>
+          </BreadcrumbItem>
+
+          <BreadcrumbItem isCurrentPage>
+            <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+
+        <h1 style={{ width: '70%' }} >Тема занятия - {accessCode?.body?.lesson?.name}</h1>
+        <span  style={{ display: 'flex' }}>
+          {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>
+  )
+}
+
+export default LessonDetail