From d3a7f70d12927f17fc7be17c39766671e19c66ec Mon Sep 17 00:00:00 2001 From: primakov Date: Sun, 23 Mar 2025 11:41:29 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=D1=8B=20=D0=BD=D0=BE=D0=B2=D1=8B=D0=B5=20=D0=B7=D0=B0?= =?UTF-8?q?=D0=B2=D0=B8=D1=81=D0=B8=D0=BC=D0=BE=D1=81=D1=82=D0=B8:=20"reac?= =?UTF-8?q?t-select"=20=D0=B8=20"@floating-ui/core".=20=D0=A0=D0=B5=D0=B0?= =?UTF-8?q?=D0=BB=D0=B8=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD=D0=B0=20=D0=BB=D0=BE?= =?UTF-8?q?=D0=BA=D0=B0=D0=BB=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8F=20=D1=81?= =?UTF-8?q?=20=D0=B8=D1=81=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0?= =?UTF-8?q?=D0=BD=D0=B8=D0=B5=D0=BC=20i18next,=20=D0=B4=D0=BE=D0=B1=D0=B0?= =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B2?= =?UTF-8?q?=D0=BE=D0=B4=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D0=B0=D0=BD=D0=B3?= =?UTF-8?q?=D0=BB=D0=B8=D0=B9=D1=81=D0=BA=D0=BE=D0=B3=D0=BE=20=D0=B8=20?= =?UTF-8?q?=D1=80=D1=83=D1=81=D1=81=D0=BA=D0=BE=D0=B3=D0=BE=20=D1=8F=D0=B7?= =?UTF-8?q?=D1=8B=D0=BA=D0=BE=D0=B2.=20=D0=9E=D0=B1=D0=BD=D0=BE=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D1=8B=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D0=BE?= =?UTF-8?q?=D0=B4=D0=B4=D0=B5=D1=80=D0=B6=D0=BA=D0=B8=20=D0=BB=D0=BE=D0=BA?= =?UTF-8?q?=D0=B0=D0=BB=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D0=B8,=20=D0=B2?= =?UTF-8?q?=D0=BA=D0=BB=D1=8E=D1=87=D0=B0=D1=8F=20AppHeader,=20Attendance,?= =?UTF-8?q?=20Dashboard=20=D0=B8=20=D0=B4=D1=80=D1=83=D0=B3=D0=B8=D0=B5.?= =?UTF-8?q?=20=D0=A3=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=BD=D0=B0=20=D0=BB?= =?UTF-8?q?=D0=BE=D0=B3=D0=B8=D0=BA=D0=B0=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80?= =?UTF-8?q?=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B4=D0=B0=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D1=85=20=D0=B8=20=D0=B2=D0=B7=D0=B0=D0=B8=D0=BC=D0=BE?= =?UTF-8?q?=D0=B4=D0=B5=D0=B9=D1=81=D1=82=D0=B2=D0=B8=D1=8F=20=D1=81=20?= =?UTF-8?q?=D0=BF=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5?= =?UTF-8?q?=D0=BB=D0=B5=D0=BC.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/en.json | 131 ++++++++++++++ locales/ru.json | 125 ++++++++++++- package-lock.json | 102 +++++++++++ package.json | 1 + src/__data__/model.ts | 1 + src/app.tsx | 12 +- src/components/app-header/app-header.tsx | 47 ++++- src/components/error-boundary/index.tsx | 20 ++- src/components/user-select/index.tsx | 165 ++++++++++++++++++ src/dashboard.tsx | 8 +- src/index.tsx | 8 +- src/pages/attendance/attendance.tsx | 4 +- .../attendance/components/AddDataDialog.tsx | 142 +++++++++++++++ .../attendance/components/AttendanceTable.tsx | 55 +++--- .../attendance/components/EmptyState.tsx | 42 +++++ src/pages/attendance/components/ShortText.tsx | 46 +++-- src/pages/attendance/components/StatsCard.tsx | 14 +- src/pages/course-list/course-card.tsx | 29 +-- src/pages/course-list/course-details.tsx | 20 ++- src/pages/course-list/course-list.tsx | 32 ++-- src/pages/lesson-details.tsx | 16 +- src/pages/lesson-list/components/bar.tsx | 57 +++--- src/pages/lesson-list/components/item.tsx | 20 ++- .../lesson-list/components/lessons-form.tsx | 17 +- src/pages/lesson-list/lesson-list.tsx | 45 ++--- src/pages/user-page.tsx | 12 +- src/utils/gravatar.ts | 15 ++ 27 files changed, 995 insertions(+), 191 deletions(-) create mode 100644 locales/en.json create mode 100644 src/components/user-select/index.tsx create mode 100644 src/pages/attendance/components/AddDataDialog.tsx create mode 100644 src/pages/attendance/components/EmptyState.tsx create mode 100644 src/utils/gravatar.ts diff --git a/locales/en.json b/locales/en.json new file mode 100644 index 0000000..5b758a7 --- /dev/null +++ b/locales/en.json @@ -0,0 +1,131 @@ +{ + "journal.pl.add": "Add", + "journal.pl.edit": "Edit", + "journal.pl.delete": "Delete", + "journal.pl.save": "Save", + "journal.pl.cancel": "Cancel", + "journal.pl.close": "Close", + "journal.pl.title": "Attendance Journal", + + "journal.pl.common.add": "Add", + "journal.pl.common.edit": "Edit", + "journal.pl.common.delete": "Delete", + "journal.pl.common.save": "Save", + "journal.pl.common.cancel": "Cancel", + "journal.pl.common.students": "students", + "journal.pl.common.teachers": "teachers", + "journal.pl.common.date": "Date", + "journal.pl.common.lessonName": "Lesson Name", + "journal.pl.common.name": "Name", + "journal.pl.common.noData": "No data", + "journal.pl.common.of": "of", + "journal.pl.common.required": "This field is required", + "journal.pl.common.error": "Error", + "journal.pl.common.error.something": "Something went wrong", + "journal.pl.common.create": "Create", + "journal.pl.common.requiredField": "This field is required", + "journal.pl.common.startDate": "Start Date", + "journal.pl.common.selectDateTime": "Select Date and Time", + "journal.pl.common.sending": "Sending", + "journal.pl.common.restored": "Restore", + "journal.pl.common.cancel": "Cancel", + "journal.pl.common.journal": "Journal", + "journal.pl.common.course": "Course", + "journal.pl.common.lesson": "Lesson", + "journal.pl.common.marked": "Marked", + "journal.pl.common.people": "people", + "journal.pl.common.success": "Success", + "journal.pl.common.open": "Open", + "journal.pl.common.loading": "Loading", + + "journal.pl.course.defaultName": "Title", + "journal.pl.course.sending": "Sending", + "journal.pl.course.created": "Course created", + "journal.pl.course.successMessage": "Course {{name}} successfully created", + "journal.pl.course.createTitle": "Create Course", + "journal.pl.course.specifyStartDate": "Specify the course start date", + "journal.pl.course.newLectureName": "New lecture name", + "journal.pl.course.namePlaceholder": "KFU-24-2", + "journal.pl.course.startDate": "Course start date", + "journal.pl.course.lessonCount": "Number of lessons", + "journal.pl.course.attendancePage": "Go to lessons page", + "journal.pl.course.attendance": "Attendance", + "journal.pl.course.details": "Details", + "journal.pl.course.viewDetails": "View details", + + "journal.pl.lesson.created": "Lesson created", + "journal.pl.lesson.successMessage": "Lesson {{name}} successfully created", + "journal.pl.lesson.updated": "Lesson updated", + "journal.pl.lesson.updateMessage": "Lesson {{name}} successfully updated", + "journal.pl.lesson.createTitle": "Create Lesson", + "journal.pl.lesson.editTitle": "Edit Lesson", + "journal.pl.lesson.deleteConfirm": "Delete lesson from {{date}}?", + "journal.pl.lesson.deleteWarning": "All attendance data for this lesson will be deleted", + "journal.pl.lesson.deletedMessage": "Deleted lesson {{name}}", + "journal.pl.lesson.noInternet": "No internet connection", + "journal.pl.lesson.topicTitle": "Lesson Topic:", + "journal.pl.lesson.dateFormat": "MMMM DD, YYYY", + "journal.pl.lesson.attendanceChart": "Lecture attendance chart", + "journal.pl.lesson.list": "Lesson List", + "journal.pl.lesson.link": "Link", + "journal.pl.lesson.time": "Time", + "journal.pl.lesson.action": "Actions", + + "journal.pl.exam.title": "Exam", + "journal.pl.exam.startExam": "Start exam", + "journal.pl.exam.open": "Open", + "journal.pl.exam.notSpecified": "Not specified", + "journal.pl.exam.createWithJury": "Create exam with jury", + "journal.pl.exam.juryCount": "Number of jury members", + + "journal.pl.access.expiredCode": "Failed to activate access code. Please try scanning the code again", + + "journal.pl.attendance.stats.title": "Attendance Statistics", + "journal.pl.attendance.stats.totalLessons": "Total Lessons", + "journal.pl.attendance.stats.averageAttendance": "Average Attendance", + "journal.pl.attendance.stats.topStudents": "Top 3 Students by Attendance", + "journal.pl.attendance.stats.noData": "No data", + + "journal.pl.attendance.emojis.excellent": "Excellent attendance", + "journal.pl.attendance.emojis.good": "Good attendance", + "journal.pl.attendance.emojis.average": "Average attendance", + "journal.pl.attendance.emojis.poor": "Poor attendance", + "journal.pl.attendance.emojis.critical": "Critical attendance", + "journal.pl.attendance.emojis.none": "No attendance", + + "journal.pl.attendance.table.copy": "Copy Table", + "journal.pl.attendance.table.show": "Show Table", + "journal.pl.attendance.table.hide": "Hide Table", + "journal.pl.attendance.table.copySuccess": "Table copied", + "journal.pl.attendance.table.copySuccessDescription": "Table data successfully copied to clipboard", + "journal.pl.attendance.table.copyError": "Copy error", + "journal.pl.attendance.table.copyErrorDescription": "Failed to copy table data", + + "journal.pl.attendance.addDialog.title": "Add Attendance Data", + "journal.pl.attendance.addDialog.lessonNamePlaceholder": "Enter lesson name", + "journal.pl.attendance.addDialog.selectStudents": "Select students who attended the lesson", + "journal.pl.attendance.addDialog.studentsPlaceholder": "Select students...", + "journal.pl.attendance.addDialog.studentsHelperText": "Select students who attended the lesson", + "journal.pl.attendance.addDialog.selectTeachers": "Select teachers who conducted the lesson", + "journal.pl.attendance.addDialog.teachersPlaceholder": "Select teachers...", + "journal.pl.attendance.addDialog.teachersHelperText": "Select teachers who conducted the lesson", + "journal.pl.attendance.emptyState.title": "No Attendance Data", + "journal.pl.attendance.emptyState.description": "Add lesson information and mark student attendance", + "journal.pl.userSelect.placeholder": "Select users...", + "journal.pl.userSelect.noOptions": "No users found", + + "journal.pl.theme.switchDark": "Switch to dark theme", + "journal.pl.theme.switchLight": "Switch to light theme", + + "journal.pl.lang.switchToEn": "Switch to English", + "journal.pl.lang.switchToRu": "Switch to Russian", + + "journal.pl.serviceMenu.title": "BRO Services", + "journal.pl.serviceMenu.ariaLabel": "BRO Services", + + "journal.pl.lesson.form.title": "New lesson title:", + "journal.pl.lesson.form.date": "Date", + "journal.pl.lesson.form.dateTime": "Specify date and time of the lesson", + "journal.pl.lesson.form.datePlaceholder": "Specify lesson date", + "journal.pl.lesson.form.namePlaceholder": "Lesson name" +} \ No newline at end of file diff --git a/locales/ru.json b/locales/ru.json index 4fc8b29..65cd08a 100644 --- a/locales/ru.json +++ b/locales/ru.json @@ -1,3 +1,126 @@ { - "": "" + "journal.pl.add": "Добавить", + "journal.pl.edit": "Редактировать", + "journal.pl.delete": "Удалить", + "journal.pl.save": "Сохранить", + "journal.pl.cancel": "Отменить", + "journal.pl.close": "Закрыть", + "journal.pl.title": "Журнал посещаемости", + + "journal.pl.common.students": "студентов", + "journal.pl.common.teachers": "преподавателей", + "journal.pl.common.noData": "Нет данных", + "journal.pl.common.date": "Дата", + "journal.pl.common.name": "Название", + "journal.pl.common.lessonName": "Название занятия", + "journal.pl.common.of": "из", + "journal.pl.common.required": "Обязательное поле", + "journal.pl.common.error": "Ошибка", + "journal.pl.common.error.something": "Что-то пошло не так", + "journal.pl.common.add": "Добавить", + "journal.pl.common.create": "Создать", + "journal.pl.common.requiredField": "Обязательное поле", + "journal.pl.common.startDate": "Дата начала", + "journal.pl.common.selectDateTime": "Выберите дату и время", + "journal.pl.common.sending": "Отправляем", + "journal.pl.common.restored": "Восстановить", + "journal.pl.common.cancel": "Отмена", + "journal.pl.common.journal": "Журнал", + "journal.pl.common.course": "Курс", + "journal.pl.common.lesson": "Лекция", + "journal.pl.common.marked": "Отмечено", + "journal.pl.common.people": "человек", + "journal.pl.common.success": "Успешно", + "journal.pl.common.open": "Открыть", + "journal.pl.common.loading": "Загрузка", + + "journal.pl.course.defaultName": "Название", + "journal.pl.course.sending": "Отправляем", + "journal.pl.course.created": "Курс создан", + "journal.pl.course.successMessage": "Курс {{name}} успешно создан", + "journal.pl.course.createTitle": "Создание курса", + "journal.pl.course.specifyStartDate": "Укажите дату начала курса", + "journal.pl.course.newLectureName": "Название новой лекции", + "journal.pl.course.namePlaceholder": "КФУ-24-2", + "journal.pl.course.startDate": "Дата начала курса", + "journal.pl.course.lessonCount": "Количество занятий", + "journal.pl.course.attendancePage": "На страницу с лекциями", + "journal.pl.course.attendance": "Посещаемость", + "journal.pl.course.details": "Детали", + "journal.pl.course.viewDetails": "Просмотреть детали", + + "journal.pl.lesson.created": "Лекция создана", + "journal.pl.lesson.successMessage": "Лекция {{name}} успешно создана", + "journal.pl.lesson.updated": "Лекция обновлена", + "journal.pl.lesson.updateMessage": "Лекция {{name}} успешно обновлена", + "journal.pl.lesson.createTitle": "Создание лекции", + "journal.pl.lesson.editTitle": "Редактирование лекции", + "journal.pl.lesson.deleteConfirm": "Удалить занятие от {{date}}?", + "journal.pl.lesson.deleteWarning": "Все данные о посещении данного занятия будут удалены", + "journal.pl.lesson.deletedMessage": "Удалена лекция {{name}}", + "journal.pl.lesson.noInternet": "Отсутствует интернет", + "journal.pl.lesson.topicTitle": "Тема занятия:", + "journal.pl.lesson.dateFormat": "DD MMMM YYYYг.", + "journal.pl.lesson.attendanceChart": "График посещаемости лекций", + "journal.pl.lesson.list": "Список занятий", + "journal.pl.lesson.link": "Ссылка", + "journal.pl.lesson.time": "Время", + "journal.pl.lesson.action": "Действия", + + "journal.pl.exam.title": "Экзамен", + "journal.pl.exam.startExam": "Начать экзамен", + "journal.pl.exam.open": "Открыть", + "journal.pl.exam.notSpecified": "Не задан", + "journal.pl.exam.createWithJury": "Создать экзамен с жюри", + "journal.pl.exam.juryCount": "Количество членов жюри", + + "journal.pl.access.expiredCode": "Не удалось активировать код доступа. Попробуйте отсканировать код ещё раз", + + "journal.pl.attendance.stats.title": "Статистика посещаемости", + "journal.pl.attendance.stats.totalLessons": "Всего занятий", + "journal.pl.attendance.stats.averageAttendance": "Средняя посещаемость", + "journal.pl.attendance.stats.topStudents": "Топ-3 студента по посещаемости", + "journal.pl.attendance.stats.noData": "Нет данных", + + "journal.pl.attendance.emojis.excellent": "Отличная посещаемость", + "journal.pl.attendance.emojis.good": "Хорошая посещаемость", + "journal.pl.attendance.emojis.average": "Средняя посещаемость", + "journal.pl.attendance.emojis.poor": "Низкая посещаемость", + "journal.pl.attendance.emojis.none": "Нет посещений", + + "journal.pl.attendance.table.copy": "Копировать таблицу", + "journal.pl.attendance.table.show": "Показать таблицу", + "journal.pl.attendance.table.hide": "Скрыть таблицу", + "journal.pl.attendance.table.copySuccess": "Таблица скопирована", + "journal.pl.attendance.table.copySuccessDescription": "Данные таблицы успешно скопированы в буфер обмена", + "journal.pl.attendance.table.copyError": "Ошибка копирования", + "journal.pl.attendance.table.copyErrorDescription": "Не удалось скопировать данные таблицы", + + "journal.pl.attendance.addDialog.title": "Добавить данные о посещаемости", + "journal.pl.attendance.addDialog.lessonNamePlaceholder": "Введите название занятия", + "journal.pl.attendance.addDialog.selectStudents": "Выберите студентов, присутствовавших на занятии", + "journal.pl.attendance.addDialog.studentsPlaceholder": "Выберите студентов...", + "journal.pl.attendance.addDialog.studentsHelperText": "Выберите студентов, которые присутствовали на занятии", + "journal.pl.attendance.addDialog.selectTeachers": "Выберите преподавателей, проводивших занятие", + "journal.pl.attendance.addDialog.teachersPlaceholder": "Выберите преподавателей...", + "journal.pl.attendance.addDialog.teachersHelperText": "Выберите преподавателей, которые проводили занятие", + "journal.pl.attendance.emptyState.title": "Нет данных о посещаемости", + "journal.pl.attendance.emptyState.description": "Добавьте информацию о занятиях и отметьте посещаемость студентов", + "journal.pl.userSelect.placeholder": "Выберите пользователей...", + "journal.pl.userSelect.noOptions": "Пользователи не найдены", + + "journal.pl.theme.switchDark": "Переключить на темную тему", + "journal.pl.theme.switchLight": "Переключить на светлую тему", + + "journal.pl.lang.switchToEn": "Переключить на английский", + "journal.pl.lang.switchToRu": "Переключить на русский", + + "journal.pl.serviceMenu.title": "Сервисы BRO", + "journal.pl.serviceMenu.ariaLabel": "Сервисы BRO", + + "journal.pl.lesson.form.title": "Название новой лекции:", + "journal.pl.lesson.form.date": "Дата", + "journal.pl.lesson.form.dateTime": "Укажите дату и время лекции", + "journal.pl.lesson.form.datePlaceholder": "Укажите дату лекции", + "journal.pl.lesson.form.namePlaceholder": "Название лекции" } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 90ba61c..c7983fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,6 +31,7 @@ "react-icons": "^5.5.0", "react-redux": "^9.1.0", "react-router-dom": "^6.22.1", + "react-select": "^5.10.1", "redux": "^5.0.1", "ts-node": "^10.9.2", "typescript": "^5.3.3", @@ -2120,6 +2121,31 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.9", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz", + "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.9" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.13", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz", + "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.9" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", + "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==", + "license": "MIT" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -2916,6 +2942,15 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.12", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz", + "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*" + } + }, "node_modules/@types/use-sync-external-store": { "version": "0.0.6", "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz", @@ -4855,6 +4890,16 @@ "node": ">=6.0.0" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -7673,6 +7718,12 @@ "node": ">= 4.0.0" } }, + "node_modules/memoize-one": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz", + "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==", + "license": "MIT" + }, "node_modules/merge-descriptors": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", @@ -9018,6 +9069,27 @@ "react-dom": ">=16.8" } }, + "node_modules/react-select": { + "version": "5.10.1", + "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.10.1.tgz", + "integrity": "sha512-roPEZUL4aRZDx6DcsD+ZNreVl+fM8VsKn0Wtex1v4IazH60ILp5xhdlp464IsEAlJdXeD+BhDAFsBVMfvLQueA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.12.0", + "@emotion/cache": "^11.4.0", + "@emotion/react": "^11.8.1", + "@floating-ui/dom": "^1.0.1", + "@types/react-transition-group": "^4.4.0", + "memoize-one": "^6.0.0", + "prop-types": "^15.6.0", + "react-transition-group": "^4.3.0", + "use-isomorphic-layout-effect": "^1.2.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-side-effect": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz", @@ -9049,6 +9121,22 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "license": "BSD-3-Clause", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -10549,6 +10637,20 @@ } } }, + "node_modules/use-isomorphic-layout-effect": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz", + "integrity": "sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-sidecar": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz", diff --git a/package.json b/package.json index ae335fd..b1a0fd9 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "react-icons": "^5.5.0", "react-redux": "^9.1.0", "react-router-dom": "^6.22.1", + "react-select": "^5.10.1", "redux": "^5.0.1", "ts-node": "^10.9.2", "typescript": "^5.3.3", diff --git a/src/__data__/model.ts b/src/__data__/model.ts index f6af58c..7f58971 100644 --- a/src/__data__/model.ts +++ b/src/__data__/model.ts @@ -51,6 +51,7 @@ export type BaseResponse = { export interface Lesson { id: string; + _id: string; name: string; students: User[]; teachers: Teacher[]; diff --git a/src/app.tsx b/src/app.tsx index 2b365e2..6087672 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -4,6 +4,7 @@ import { Global } from '@emotion/react' import { BrowserRouter } from 'react-router-dom'; import ruLocale from 'dayjs/locale/ru'; import dayjs from 'dayjs'; +import { useTranslation } from 'react-i18next'; import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react' import { Dashboard } from './dashboard'; @@ -19,19 +20,26 @@ const theme = extendTheme({ }, }) -const App = ({ store }) => ( +interface AppProps { + store: any; // Тип для store зависит от конкретной реализации хранилища +} + +const App: React.FC = ({ store }) => { + const { t } = useTranslation(); + return ( - Журнал + {t('journal.pl.title')} ) +} export default App; diff --git a/src/components/app-header/app-header.tsx b/src/components/app-header/app-header.tsx index cf0de5d..98a4124 100644 --- a/src/components/app-header/app-header.tsx +++ b/src/components/app-header/app-header.tsx @@ -1,10 +1,14 @@ import React from 'react'; import { + Box, Flex, IconButton, useColorMode, + Button, + HStack } from '@chakra-ui/react'; import { MoonIcon, SunIcon } from '@chakra-ui/icons'; +import { useTranslation } from 'react-i18next'; interface AppHeaderProps { serviceMenuContainerRef?: React.RefObject; @@ -12,7 +16,13 @@ interface AppHeaderProps { export const AppHeader = ({ serviceMenuContainerRef }: AppHeaderProps) => { const { colorMode, toggleColorMode } = useColorMode(); - + const { t, i18n } = useTranslation(); + + const toggleLanguage = () => { + const newLang = i18n.language === 'ru' ? 'en' : 'ru'; + i18n.changeLanguage(newLang); + }; + return ( { boxShadow="sm" > {serviceMenuContainerRef &&
} - - : } - onClick={toggleColorMode} - variant="ghost" - size="md" - /> + + + + + + + : } + onClick={toggleColorMode} + variant="ghost" + size="md" + /> + ); }; \ No newline at end of file diff --git a/src/components/error-boundary/index.tsx b/src/components/error-boundary/index.tsx index 1f72b55..96c7fb8 100644 --- a/src/components/error-boundary/index.tsx +++ b/src/components/error-boundary/index.tsx @@ -1,5 +1,18 @@ import { Alert } from '@chakra-ui/react' import React from 'react' +import { useTranslation } from 'react-i18next' + +// Компонент-обертка для использования хука useTranslation внутри классового компонента +const ErrorMessage = ({ error }: { error: string | null }) => { + const { t } = useTranslation() + + return ( + + {t('journal.pl.common.error.something')}
+ {error && {error}} + + ) +} export class ErrorBoundary extends React.Component< React.PropsWithChildren, @@ -13,12 +26,7 @@ export class ErrorBoundary extends React.Component< render() { if (this.state.hasError) { - return ( - - Что-то пошло не так
- {this.state.error && {this.state.error}} - - ) + return } return this.props.children diff --git a/src/components/user-select/index.tsx b/src/components/user-select/index.tsx new file mode 100644 index 0000000..dede1c0 --- /dev/null +++ b/src/components/user-select/index.tsx @@ -0,0 +1,165 @@ +import React, { useEffect, useState } from 'react'; +import Select, { components } from 'react-select'; +import { Avatar, HStack, Box, Text, useColorMode } from '@chakra-ui/react'; +import { useTranslation } from 'react-i18next'; +import { getGravatarURL } from '../../utils/gravatar'; + +// Кастомный компонент для отображения опций с аватарами +const Option = ({ children, ...props }: any) => { + const { email, picture, value } = props.data; + const avatarUrl = picture || getGravatarURL(email); + + return ( + + + + {children} + + + ); +}; + +// Кастомный компонент для отображения выбранных значений с аватарами +const SingleValue = ({ children, ...props }: any) => { + const { email, picture, value } = props.data; + const avatarUrl = picture || getGravatarURL(email); + + return ( + + + + {children} + + + ); +}; + +// Кастомный компонент для отображения множественных выбранных значений с аватарами +const MultiValue = ({ children, ...props }: any) => { + const { email, picture, value } = props.data; + const avatarUrl = picture || getGravatarURL(email); + + return ( + + + + {children} + + + ); +}; + +interface UserSelectProps { + isMulti?: boolean; + value: any; + onChange: (value: any) => void; + placeholder?: string; +} + +interface MockUserData { + value: string; + label: string; + email: string; + sub: string; +} + +const UserSelect = ({ isMulti = false, value, onChange, placeholder }: UserSelectProps) => { + const { colorMode } = useColorMode(); + const { t, i18n } = useTranslation(); + const [options, setOptions] = useState([]); + + useEffect(() => { + // В реальном приложении здесь будет запрос к API для получения списка пользователей + const mockUserData: MockUserData[] = [ + { value: 'Иван Иванов', label: 'Иван Иванов', email: 'ivan@example.com', sub: '1' }, + { value: 'Мария Петрова', label: 'Мария Петрова', email: 'maria@example.com', sub: '2' }, + { value: 'Алексей Сидоров', label: 'Алексей Сидоров', email: 'alexey@example.com', sub: '3' }, + { value: 'Екатерина Смирнова', label: 'Екатерина Смирнова', email: 'ekaterina@example.com', sub: '4' }, + { value: 'Дмитрий Козлов', label: 'Дмитрий Козлов', email: 'dmitry@example.com', sub: '5' }, + { value: 'Ольга Новикова', label: 'Ольга Новикова', email: 'olga@example.com', sub: '6' }, + { value: 'Сергей Морозов', label: 'Сергей Морозов', email: 'sergey@example.com', sub: '7' }, + { value: 'Анна Волкова', label: 'Анна Волкова', email: 'anna@example.com', sub: '8' }, + { value: 'Павел Соловьев', label: 'Павел Соловьев', email: 'pavel@example.com', sub: '9' }, + { value: 'Наталья Лебедева', label: 'Наталья Лебедева', email: 'natalia@example.com', sub: '10' }, + ]; + + // Mock data на английском языке + const mockEnUserData: MockUserData[] = [ + { value: 'John Smith', label: 'John Smith', email: 'john@example.com', sub: '1' }, + { value: 'Mary Johnson', label: 'Mary Johnson', email: 'mary@example.com', sub: '2' }, + { value: 'Alex Brown', label: 'Alex Brown', email: 'alex@example.com', sub: '3' }, + { value: 'Kate Williams', label: 'Kate Williams', email: 'kate@example.com', sub: '4' }, + { value: 'David Miller', label: 'David Miller', email: 'david@example.com', sub: '5' }, + { value: 'Olivia Jones', label: 'Olivia Jones', email: 'olivia@example.com', sub: '6' }, + { value: 'Steven Davis', label: 'Steven Davis', email: 'steven@example.com', sub: '7' }, + { value: 'Anna Wilson', label: 'Anna Wilson', email: 'anna_w@example.com', sub: '8' }, + { value: 'Paul Taylor', label: 'Paul Taylor', email: 'paul@example.com', sub: '9' }, + { value: 'Natalie Moore', label: 'Natalie Moore', email: 'natalie@example.com', sub: '10' }, + ]; + + setOptions(i18n.language === 'ru' ? mockUserData : mockEnUserData); + }, [i18n.language]); + + const customStyles = { + control: (provided: any) => ({ + ...provided, + backgroundColor: colorMode === 'dark' ? '#2D3748' : 'white', + borderColor: colorMode === 'dark' ? '#4A5568' : '#E2E8F0', + }), + menu: (provided: any) => ({ + ...provided, + backgroundColor: colorMode === 'dark' ? '#2D3748' : 'white', + }), + option: (provided: any, state: any) => ({ + ...provided, + backgroundColor: state.isFocused + ? colorMode === 'dark' + ? '#4A5568' + : '#EDF2F7' + : colorMode === 'dark' + ? '#2D3748' + : 'white', + color: colorMode === 'dark' ? 'white' : 'black', + }), + multiValue: (provided: any) => ({ + ...provided, + backgroundColor: colorMode === 'dark' ? '#4A5568' : '#EDF2F7', + }), + multiValueLabel: (provided: any) => ({ + ...provided, + color: colorMode === 'dark' ? 'white' : 'black', + }), + multiValueRemove: (provided: any) => ({ + ...provided, + color: colorMode === 'dark' ? 'white' : 'black', + ':hover': { + backgroundColor: colorMode === 'dark' ? '#718096' : '#CBD5E0', + color: colorMode === 'dark' ? 'white' : 'black', + }, + }), + singleValue: (provided: any) => ({ + ...provided, + color: colorMode === 'dark' ? 'white' : 'black', + }), + }; + + return ( + setName(e.target.value)} + placeholder={t('journal.pl.attendance.addDialog.lessonNamePlaceholder')} + /> + + + + {t('journal.pl.common.date')} + setDate(e.target.value)} + /> + + + + + {t('journal.pl.common.students')} + {t('journal.pl.common.teachers')} + + + + + {t('journal.pl.attendance.addDialog.selectStudents')} + + {t('journal.pl.attendance.addDialog.studentsHelperText')} + + + + + {t('journal.pl.attendance.addDialog.selectTeachers')} + + {t('journal.pl.attendance.addDialog.teachersHelperText')} + + + + + + + + + + + + + + ); +}; + +export default AddDataDialog; \ No newline at end of file diff --git a/src/pages/attendance/components/AttendanceTable.tsx b/src/pages/attendance/components/AttendanceTable.tsx index a91c273..3653933 100644 --- a/src/pages/attendance/components/AttendanceTable.tsx +++ b/src/pages/attendance/components/AttendanceTable.tsx @@ -22,19 +22,11 @@ import { import { CopyIcon, ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons' import { FaSmile, FaMeh, FaFrown, FaSadTear } from 'react-icons/fa' import dayjs from 'dayjs' -import { sha256 } from 'js-sha256' +import { useTranslation } from 'react-i18next' +import { getGravatarURL } from '../../../utils/gravatar' import { ShortText } from './ShortText' import { AttendanceData } from '../hooks' -// Функция для получения URL аватарки через Gravatar -function getGravatarURL(email) { - if (!email) return undefined - const address = String(email).trim().toLowerCase() - const hash = sha256(address) - - return `https://www.gravatar.com/avatar/${hash}?d=robohash` -} - interface AttendanceTableProps { data: AttendanceData } @@ -42,6 +34,7 @@ interface AttendanceTableProps { export const AttendanceTable: React.FC = ({ data }) => { const { colorMode } = useColorMode() const toast = useToast() + const { t } = useTranslation() const [showTable, setShowTable] = useState(false) const getPresentColor = () => { @@ -60,25 +53,25 @@ export const AttendanceTable: React.FC = ({ data }) => { return { icon: FaSmile, color: 'green.500', - label: 'Отличная посещаемость' + label: t('journal.pl.attendance.emojis.excellent') } } else if (attendanceRate >= 0.75) { return { icon: FaMeh, color: 'blue.400', - label: 'Хорошая посещаемость' + label: t('journal.pl.attendance.emojis.good') } } else if (attendanceRate >= 0.5) { return { icon: FaFrown, color: 'orange.400', - label: 'Низкая посещаемость' + label: t('journal.pl.attendance.emojis.poor') } } else { return { icon: FaSadTear, color: 'red.500', - label: 'Критически низкая посещаемость' + label: t('journal.pl.attendance.emojis.none') } } } @@ -97,11 +90,11 @@ export const AttendanceTable: React.FC = ({ data }) => { }) // Добавляем столбцы даты и названия занятия - headerRow.push('Дата', 'Название занятия') + headerRow.push(t('journal.pl.common.date'), t('journal.pl.common.lessonName')) // Добавляем студентов data.students.forEach(student => { - headerRow.push(student.name || student.value || 'Имя не определено') + headerRow.push(student.name || student.value || t('journal.pl.common.name')) }) // Добавляем заголовок в таблицу @@ -139,8 +132,8 @@ export const AttendanceTable: React.FC = ({ data }) => { navigator.clipboard.writeText(finalContent) .then(() => { toast({ - title: 'Скопировано в буфер обмена', - description: 'Таблица успешно скопирована без сокращений', + title: t('journal.pl.attendance.table.copySuccess'), + description: t('journal.pl.attendance.table.copySuccessDescription'), status: 'success', duration: 3000, isClosable: true, @@ -148,8 +141,8 @@ export const AttendanceTable: React.FC = ({ data }) => { }) .catch(err => { toast({ - title: 'Ошибка копирования', - description: 'Не удалось скопировать таблицу', + title: t('journal.pl.attendance.table.copyError'), + description: t('journal.pl.attendance.table.copyErrorDescription'), status: 'error', duration: 3000, isClosable: true, @@ -171,7 +164,7 @@ export const AttendanceTable: React.FC = ({ data }) => { return { student, - name: student.name || student.value || 'Имя не определено', + name: student.name || student.value || t('journal.pl.common.name'), email: student.email, picture: student.picture || getGravatarURL(student.email), attendedCount, @@ -182,7 +175,7 @@ export const AttendanceTable: React.FC = ({ data }) => { } if (!data.attendance?.length || !data.students?.length) { - return Нет данных для отображения + return {t('journal.pl.common.noData')} } return ( @@ -199,7 +192,7 @@ export const AttendanceTable: React.FC = ({ data }) => { onClick={copyTableData} mr={2} > - Копировать таблицу + {t('journal.pl.attendance.table.copy')} @@ -221,7 +214,7 @@ export const AttendanceTable: React.FC = ({ data }) => { return ( = ({ data }) => { name={name} > - + {name} - {attendedCount} из {totalLessons} ({attendance.toFixed(0)}%) + {attendedCount} {t('journal.pl.common.of')} {totalLessons} ({attendance.toFixed(0)}%) @@ -269,17 +262,17 @@ export const AttendanceTable: React.FC = ({ data }) => { {data.teachers?.map(teacher => ( {teacher.value} ))} - Дата - Название занятия + {t('journal.pl.common.date')} + {t('journal.pl.common.lessonName')} {data.students.map((student) => ( - {student.name || student.value || 'Имя не определено'} + {student.name || student.value || t('journal.pl.common.name')} ))} diff --git a/src/pages/attendance/components/EmptyState.tsx b/src/pages/attendance/components/EmptyState.tsx new file mode 100644 index 0000000..495c88d --- /dev/null +++ b/src/pages/attendance/components/EmptyState.tsx @@ -0,0 +1,42 @@ +import { Box, Button, Text, VStack, Icon, useColorMode } from "@chakra-ui/react"; +import { FaPlus, FaUsers } from "react-icons/fa"; +import { useTranslation } from 'react-i18next'; + +interface EmptyStateProps { + onAddData: () => void; +} + +const EmptyState = ({ onAddData }: EmptyStateProps) => { + const { colorMode } = useColorMode(); + const { t } = useTranslation(); + + return ( + + + + + {t('journal.pl.attendance.emptyState.title')} + + + {t('journal.pl.attendance.emptyState.description')} + + + + + ); +}; + +export default EmptyState; \ No newline at end of file diff --git a/src/pages/attendance/components/ShortText.tsx b/src/pages/attendance/components/ShortText.tsx index a78aaeb..c6e7b01 100644 --- a/src/pages/attendance/components/ShortText.tsx +++ b/src/pages/attendance/components/ShortText.tsx @@ -1,30 +1,40 @@ import React from 'react' import { Tooltip, Text, useColorMode } from '@chakra-ui/react' +import { useTranslation } from 'react-i18next' interface ShortTextProps { text: string maxLength?: number } -export const ShortText: React.FC = ({ text, maxLength = 20 }) => { - const needShortText = text.length > maxLength +export const ShortText = ({ text, maxLength = 30 }: ShortTextProps) => { + const { t } = useTranslation() const { colorMode } = useColorMode() - if (needShortText) { - return ( - - {text.slice(0, maxLength)}... - - ) + if (!text) { + return {t('journal.pl.common.noData')} } - return {text} -} \ No newline at end of file + if (text.length <= maxLength) { + return {text} + } + + const shortText = `${text.substring(0, maxLength)}...` + + return ( + + {shortText} + + ) +} + +export default ShortText \ No newline at end of file diff --git a/src/pages/attendance/components/StatsCard.tsx b/src/pages/attendance/components/StatsCard.tsx index d7c50be..c47b44f 100644 --- a/src/pages/attendance/components/StatsCard.tsx +++ b/src/pages/attendance/components/StatsCard.tsx @@ -15,6 +15,7 @@ import { Text, Badge } from '@chakra-ui/react' +import { useTranslation } from 'react-i18next' import { AttendanceStats } from '../hooks' interface StatsCardProps { @@ -23,6 +24,7 @@ interface StatsCardProps { export const StatsCard: React.FC = ({ stats }) => { const { colorMode } = useColorMode() + const { t } = useTranslation() const getBgColor = () => { return colorMode === 'dark' ? 'gray.700' : 'white' @@ -42,19 +44,19 @@ export const StatsCard: React.FC = ({ stats }) => { bg={getBgColor()} mb={6} > - Статистика посещаемости + {t('journal.pl.attendance.stats.title')} - Всего занятий + {t('journal.pl.attendance.stats.totalLessons')} {stats.totalLessons} - Средняя посещаемость + {t('journal.pl.attendance.stats.averageAttendance')} {stats.averageAttendance.toFixed(1)}% = ({ stats }) => { - Топ-3 студента по посещаемости + {t('journal.pl.attendance.stats.topStudents')} {stats.topStudents.map((student, index) => ( @@ -84,12 +86,12 @@ export const StatsCard: React.FC = ({ stats }) => { {student.name} - {student.attendance} из {stats.totalLessons} ({student.attendancePercent.toFixed(0)}%) + {student.attendance} {t('journal.pl.common.of')} {stats.totalLessons} ({student.attendancePercent.toFixed(0)}%) ))} {stats.topStudents.length === 0 && ( - Нет данных + {t('journal.pl.attendance.stats.noData')} )} diff --git a/src/pages/course-list/course-card.tsx b/src/pages/course-list/course-card.tsx index a4ed881..cd07001 100644 --- a/src/pages/course-list/course-card.tsx +++ b/src/pages/course-list/course-card.tsx @@ -1,7 +1,7 @@ import React, { useCallback, useEffect, useState } from 'react' import dayjs from 'dayjs' import { Link as ConnectedLink, generatePath } from 'react-router-dom' -import { getNavigationsValue } from '@brojs/cli' +import { getNavigationValue } from '@brojs/cli' import { Box, CardHeader, @@ -16,6 +16,7 @@ import { Tooltip, Spinner, } from '@chakra-ui/react' +import { useTranslation } from 'react-i18next' import { api } from '../../__data__/api/api' import { ArrowUpIcon, LinkIcon } from '@chakra-ui/icons' @@ -25,6 +26,8 @@ import { CourseDetails } from './course-details' export const CourseCard = ({ course }: { course: Course }) => { const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery() const [isOpened, setIsOpened] = useState(false) + const { t } = useTranslation() + useEffect(() => { if (isOpened) { getLessonList(course.id, true) @@ -46,10 +49,10 @@ export const CourseCard = ({ course }: { course: Course }) => { } spacing="8px"> - {`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`} + {`${t('journal.pl.course.startDate')} - ${dayjs(course.startDt).format(t('journal.pl.lesson.dateFormat'))}`} - Количество занятий - {course.lessons.length} + {t('journal.pl.course.lessonCount')} - {course.lessons.length} {populatedCourse.isFetching && } @@ -57,9 +60,9 @@ export const CourseCard = ({ course }: { course: Course }) => { )} - {getNavigationsValue('link.journal.attendance') && ( + {getNavigationValue('link.journal.attendance') && ( @@ -69,12 +72,12 @@ export const CourseCard = ({ course }: { course: Course }) => { variant="outline" colorScheme="blue" to={generatePath( - `${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`, + `${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`, { courseId: course.id }, )} > - Посещаемость + {t('journal.pl.course.attendance')} )} @@ -87,17 +90,17 @@ export const CourseCard = ({ course }: { course: Course }) => { mt="16px" flexDirection={['column', 'row']} > - + - + diff --git a/src/pages/course-list/course-details.tsx b/src/pages/course-list/course-details.tsx index 68597bd..229d860 100644 --- a/src/pages/course-list/course-details.tsx +++ b/src/pages/course-list/course-details.tsx @@ -3,12 +3,13 @@ import dayjs from 'dayjs' import { Link as ConnectedLink } from 'react-router-dom' import { getNavigationValue, getHistory } from '@brojs/cli' import { Stack, Heading, Link, Button, Tooltip, Box } from '@chakra-ui/react' +import { useTranslation } from 'react-i18next' +import { LinkIcon } from '@chakra-ui/icons' import { useAppSelector } from '../../__data__/store' import { isTeacher } from '../../utils/user' import { PopulatedCourse } from '../../__data__/model' import { api } from '../../__data__/api/api' -import { LinkIcon } from '@chakra-ui/icons' type CourseDetailsProps = { populatedCourse: PopulatedCourse @@ -21,14 +22,15 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => { const exam = populatedCourse.examWithJury const [toggleExamWithJury, examWithJuryRequest] = api.useToggleExamWithJuryMutation() + const { t } = useTranslation() return ( <> {isTeacher(user) && ( - Экзамен: {exam?.name}{' '} + {t('journal.pl.exam.title')}: {exam?.name}{' '} {exam && getNavigationValue('exam.main') && getNavigationValue('link.exam.details') && ( - + )} @@ -58,10 +60,10 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => { {!Boolean(exam) && ( <> - Не задан + {t('journal.pl.exam.notSpecified')} - + @@ -78,7 +80,7 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => { {Boolean(exam) && ( <> - Количество членов жюри: + {t('journal.pl.exam.juryCount')}: {populatedCourse.examWithJury.jury.length} @@ -86,7 +88,7 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => { )} - Список занятий: + {t('journal.pl.lesson.list')}: {populatedCourse?.lessons?.map((lesson) => ( diff --git a/src/pages/course-list/course-list.tsx b/src/pages/course-list/course-list.tsx index 9dbafaa..f2c6155 100644 --- a/src/pages/course-list/course-list.tsx +++ b/src/pages/course-list/course-list.tsx @@ -20,6 +20,7 @@ import { } from '@chakra-ui/react' import { useForm, Controller } from 'react-hook-form' import { AddIcon } from '@chakra-ui/icons' +import { useTranslation } from 'react-i18next' import { ErrorSpan } from '../style' import { useAppSelector } from '../../__data__/store' @@ -40,6 +41,7 @@ export const CoursesList = () => { const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation() const [showForm, setShowForm] = useState(false) const toastRef = useRef(null) + const { t } = useTranslation() const { colorMode } = useColorMode(); @@ -52,13 +54,13 @@ export const CoursesList = () => { } = useForm({ defaultValues: { startDt: dayjs().format('YYYY-MM-DD'), - name: 'Название', + name: t('journal.pl.course.defaultName'), }, }) const onSubmit = ({ startDt, name }) => { toastRef.current = toast({ - title: 'Отправляем', + title: t('journal.pl.course.sending'), status: 'loading', duration: 9000, }) @@ -70,8 +72,8 @@ export const CoursesList = () => { const values = getValues() if (toastRef.current) { toast.update(toastRef.current, { - title: 'Курс создан.', - description: `Курс ${values.name} успешно создан`, + title: t('journal.pl.course.created'), + description: t('journal.pl.course.successMessage', { name: values.name }), status: 'success', duration: 9000, isClosable: true, @@ -79,7 +81,7 @@ export const CoursesList = () => { } reset() } - }, [crucQuery.isSuccess]) + }, [crucQuery.isSuccess, t]) if (isLoading) { return ( @@ -95,7 +97,7 @@ export const CoursesList = () => { - Создание курса + {t('journal.pl.course.createTitle')} setShowForm(false)} /> @@ -105,17 +107,17 @@ export const CoursesList = () => { ( - Дата начала + {t('journal.pl.common.startDate')} @@ -125,7 +127,7 @@ export const CoursesList = () => { ) : ( - Укажите дату начала курса + {t('journal.pl.course.specifyStartDate')} )} @@ -135,18 +137,18 @@ export const CoursesList = () => { control={control} name="name" rules={{ - required: 'Обязательное поле', + required: t('journal.pl.common.requiredField'), }} render={({ field }) => ( - Название новой лекции: + {t('journal.pl.course.newLectureName')}: {errors.name && ( @@ -165,7 +167,7 @@ export const CoursesList = () => { leftIcon={} colorScheme="blue" > - Создать + {t('journal.pl.common.create')} @@ -183,7 +185,7 @@ export const CoursesList = () => { colorScheme="green" onClick={() => setShowForm(true)} > - Добавить + {t('journal.pl.common.add')} )} diff --git a/src/pages/lesson-details.tsx b/src/pages/lesson-details.tsx index c71296d..87d83d4 100644 --- a/src/pages/lesson-details.tsx +++ b/src/pages/lesson-details.tsx @@ -14,6 +14,7 @@ import { Heading, Stack, } from '@chakra-ui/react' +import { useTranslation } from 'react-i18next' import { api } from '../__data__/api/api' import { User } from '../__data__/model' @@ -40,6 +41,7 @@ const LessonDetail = () => { const { lessonId, courseId } = useParams() const canvRef = useRef(null) const user = useAppSelector((s) => s.user) + const { t } = useTranslation() const { isFetching, @@ -111,7 +113,7 @@ const LessonDetail = () => { - Журнал + {t('journal.pl.common.journal')} @@ -120,28 +122,28 @@ const LessonDetail = () => { as={Link} to={`${getNavigationValue('journal.main')}/lessons-list/${courseId}`} > - Курс + {t('journal.pl.common.course')} - Лекция + {t('journal.pl.common.lesson')} - Тема занятия: + {t('journal.pl.lesson.topicTitle')} {accessCode?.body?.lesson?.name} - {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '} - Отмечено - {accessCode?.body?.lesson?.students?.length}{' '} + {dayjs(accessCode?.body?.lesson?.date).format(t('journal.pl.lesson.dateFormat'))}{' '} + {t('journal.pl.common.marked')} - {accessCode?.body?.lesson?.students?.length}{' '} {AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '} - человек + {t('journal.pl.common.people')} diff --git a/src/pages/lesson-list/components/bar.tsx b/src/pages/lesson-list/components/bar.tsx index af2a5bd..53d7cad 100644 --- a/src/pages/lesson-list/components/bar.tsx +++ b/src/pages/lesson-list/components/bar.tsx @@ -1,28 +1,33 @@ import React from 'react' -import { ResponsiveBar } from '@nivo/bar' +import { type BarDatum, ResponsiveBar } from '@nivo/bar' +import { useTranslation } from 'react-i18next' -export const Bar = ({ data }) => ( - - e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue - } - /> -) +export const Bar = ({ data }: { data: BarDatum[] }) => { + const { t } = useTranslation() + + return ( + + e.id + ': ' + e.formattedValue + ' on lection: ' + e.indexValue + } + /> + ) +} diff --git a/src/pages/lesson-list/components/item.tsx b/src/pages/lesson-list/components/item.tsx index bf2c6ea..01ff631 100644 --- a/src/pages/lesson-list/components/item.tsx +++ b/src/pages/lesson-list/components/item.tsx @@ -13,6 +13,7 @@ import { useToast, } from '@chakra-ui/react' import { EditIcon } from '@chakra-ui/icons' +import { useTranslation } from 'react-i18next' import { qrCode } from '../../../assets' @@ -46,10 +47,11 @@ export const Item: React.FC = ({ const toast = useToast() const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation() const createdLessonRef = useRef(null) + const { t } = useTranslation() const onSubmit = (lessonData) => { toastRef.current = toast({ - title: 'Отправляем', + title: t('journal.pl.common.sending'), status: 'loading', duration: 9000, }) @@ -58,7 +60,7 @@ export const Item: React.FC = ({ updateLesson(lessonData) } else { toast.update(toastRef.current, { - title: 'Отсутствует интернет', + title: t('journal.pl.lesson.noInternet'), status: 'error', duration: 3000 }) @@ -68,8 +70,8 @@ export const Item: React.FC = ({ useEffect(() => { if (updateLessonRqst.isSuccess) { const toastProps = { - title: 'Лекция Обновлена', - description: `Лекция ${createdLessonRef.current?.name} успешно обновлена`, + title: t('journal.pl.lesson.updated'), + description: t('journal.pl.lesson.updateMessage', { name: createdLessonRef.current?.name }), status: 'success' as const, duration: 9000, isClosable: true, @@ -92,8 +94,8 @@ export const Item: React.FC = ({ setEdit(false) }} lesson={{ _id: id, id, name, date }} - title={'Редактирование лекции'} - nameButton={'Сохранить'} + title={t('journal.pl.lesson.editTitle')} + nameButton={t('journal.pl.save')} /> @@ -129,13 +131,13 @@ export const Item: React.FC = ({ setEdit(true) }} > - Edit + {t('journal.pl.edit')} - Delete + {t('journal.pl.delete')} )} - {edit && } + {edit && } )} {students.length} diff --git a/src/pages/lesson-list/components/lessons-form.tsx b/src/pages/lesson-list/components/lessons-form.tsx index d727860..55bde17 100644 --- a/src/pages/lesson-list/components/lessons-form.tsx +++ b/src/pages/lesson-list/components/lessons-form.tsx @@ -16,6 +16,7 @@ import { Input, } from '@chakra-ui/react' import { AddIcon } from '@chakra-ui/icons' +import { useTranslation } from 'react-i18next' import { dateToCalendarFormat } from '../../../utils/time' import { Lesson } from '../../../__data__/model' @@ -45,6 +46,8 @@ export const LessonForm = ({ title, nameButton, }: LessonFormProps) => { + const { t } = useTranslation() + const getNearestTimeSlot = () => { const now = new Date(); const minutes = now.getMinutes(); @@ -96,21 +99,21 @@ export const LessonForm = ({ ( - Дата + {t('journal.pl.lesson.form.date')} {errors.date ? ( {errors.date?.message} ) : ( - Укажите дату и время лекции + {t('journal.pl.lesson.form.dateTime')} )} )} @@ -119,14 +122,14 @@ export const LessonForm = ({ ( - Название новой лекции: + {t('journal.pl.lesson.form.title')} {errors.name && ( diff --git a/src/pages/lesson-list/lesson-list.tsx b/src/pages/lesson-list/lesson-list.tsx index 1ae080e..9504e74 100644 --- a/src/pages/lesson-list/lesson-list.tsx +++ b/src/pages/lesson-list/lesson-list.tsx @@ -26,6 +26,7 @@ import { AlertDialogOverlay, } from '@chakra-ui/react' import { AddIcon } from '@chakra-ui/icons' +import { useTranslation } from 'react-i18next' import { useAppSelector } from '../../__data__/store' import { api } from '../../__data__/api/api' @@ -57,6 +58,7 @@ const LessonList = () => { const toastRef = useRef(null) const createdLessonRef = useRef(null) const [editLesson, setEditLesson] = useState(null) + const { t } = useTranslation() const sorted = useMemo( () => [...(data?.body || [])]?.sort((a, b) => (a.date > b.date ? 1 : -1)), [data, data?.body], @@ -93,7 +95,7 @@ const LessonList = () => { const onSubmit = (lessonData) => { toastRef.current = toast({ - title: 'Отправляем', + title: t('journal.pl.common.sending'), status: 'loading', duration: 9000, }) @@ -123,7 +125,7 @@ const LessonList = () => { title={ <> - {`Удалена лекция ${lesson.name}`} + {t('journal.pl.lesson.deletedMessage', { name: lesson.name })} } @@ -145,8 +147,8 @@ const LessonList = () => { useEffect(() => { if (crLQuery.isSuccess) { const toastProps = { - title: 'Лекция создана', - description: `Лекция ${createdLessonRef.current?.name} успешно создана`, + title: t('journal.pl.lesson.created'), + description: t('journal.pl.lesson.successMessage', { name: createdLessonRef.current?.name }), status: 'success' as const, duration: 9000, isClosable: true, @@ -160,8 +162,8 @@ const LessonList = () => { useEffect(() => { if (updateLessonRqst.isSuccess) { const toastProps = { - title: 'Лекция Обновлена', - description: `Лекция ${createdLessonRef.current?.name} успешно обновлена`, + title: t('journal.pl.lesson.updated'), + description: t('journal.pl.lesson.updateMessage', { name: createdLessonRef.current?.name }), status: 'success' as const, duration: 9000, isClosable: true, @@ -186,12 +188,11 @@ const LessonList = () => { - Удалить занятие от{' '} - {dayjs(lessonToDelete?.date).format('DD.MM.YY')}? + {t('journal.pl.lesson.deleteConfirm', { date: dayjs(lessonToDelete?.date).format('DD.MM.YY') })} - Все данные о посещении данного занятия будут удалены + {t('journal.pl.lesson.deleteWarning')} @@ -200,7 +201,7 @@ const LessonList = () => { ref={cancelRef} onClick={() => setlessonToDelete(null)} > - Cancel + {t('journal.pl.cancel')} @@ -219,12 +220,12 @@ const LessonList = () => { - Журнал + {t('journal.pl.common.journal')} - Курс + {t('journal.pl.common.course')} @@ -242,8 +243,8 @@ const LessonList = () => { }} error={(crLQuery.error as any)?.error} lesson={editLesson} - title={editLesson ? 'Редактирование лекции' : 'Создание лекции'} - nameButton={editLesson ? 'Редактировать' : 'Создать'} + title={editLesson ? t('journal.pl.lesson.editTitle') : t('journal.pl.lesson.createTitle')} + nameButton={editLesson ? t('journal.pl.edit') : t('journal.pl.common.create')} /> ) : ( )} @@ -272,15 +273,15 @@ const LessonList = () => { {isTeacher(user) && ( - ссылка + {t('journal.pl.lesson.link')} )} - {groupByDate ? 'Время' : 'Дата'} + {groupByDate ? t('journal.pl.lesson.time') : t('journal.pl.common.date')} - Название - {isTeacher(user) && action} - Отмечено + {t('journal.pl.common.name')} + {isTeacher(user) && {t('journal.pl.lesson.action')}} + {t('journal.pl.common.marked')} diff --git a/src/pages/user-page.tsx b/src/pages/user-page.tsx index 1fc8e51..1bf4392 100644 --- a/src/pages/user-page.tsx +++ b/src/pages/user-page.tsx @@ -1,5 +1,6 @@ import React from 'react' import { useParams } from 'react-router-dom' +import { useTranslation } from 'react-i18next' import { api } from '../__data__/api/api' import dayjs from 'dayjs' @@ -16,6 +17,7 @@ import { UserCard } from '../components/user-card' const UserPage = () => { const { lessonId, accessId } = useParams() + const { t } = useTranslation() const acc = api.useGetAccessQuery({ accessCode: accessId }) const ls = api.useLessonByIdQuery(lessonId, { @@ -41,8 +43,8 @@ const UserPage = () => { return ( - {acc.isLoading &&

Отправляем запрос

} - {acc.isSuccess &&

Успешно

} + {acc.isLoading &&

{t('journal.pl.common.sending')}

} + {acc.isSuccess &&

{t('journal.pl.common.success')}

} {acc.error && ( @@ -50,7 +52,7 @@ const UserPage = () => { {(acc as any).error?.data?.body?.errorMessage === 'Code is expired' ? ( - 'Не удалось активировать код доступа. Попробуйте отсканировать код ещё раз' + t('journal.pl.access.expiredCode') ) : ( 
{JSON.stringify(acc.error, null, 4)}
)} @@ -60,10 +62,10 @@ const UserPage = () => { - Тема занятия: {ls.data?.body?.name} + {t('journal.pl.lesson.topicTitle')} {ls.data?.body?.name} - {dayjs(ls.data?.body?.date).format('DD MMMM YYYYг.')} + {dayjs(ls.data?.body?.date).format(t('journal.pl.lesson.dateFormat'))}