ПЗ_23-ИСТ-1-1_Какушкина_Ольга_Витальевна

Рисунок 8 форма регистрации после успешной оплаты

Администратор должен иметь возможность редактировать, удалять,

добавлять секции. Для этого у него на странице должна быть соответствующая форма с полями: название секции, выбор преподавателя из базы данных, время начала и конец занятия, дни для посещения, количество доступных мест на секцию, поле для загрузки фотографии. Добавленная секция должна отображаться автоматически на главной странице и на странице администратора, чтобы понимать, какие секции есть, а какие требуется добавить. Также должны быть кнопки для удаления и изменения секции (см рисунок 9)

Рисунок 9 карточка секции с кнопкой удаления и редактирования

При нажатии на «Изменить» для работы с секцией пользователя должен перенестись на форму редактирования. Это сделано для удобства пользователя, чтобы администратору самому не пришлось «скролить» до этой формы. И уже исходные данные должны подставиться в форму, чтобы лучше пользователь смог сориентироваться, что он хочет изменить. Также после нажатия на кнопку «Изменить» на форме должны появится кнопки

«Сохранить изменения», «Отмена»(см рисунок 10) Кнопка «Сохранить изменения» вносит изменения в Json файл и новые актуальные данные отображаются у пользователей. При нажатии на кнопку «Отмена» исходные данные возвращаются.

Рисунок 10 Форма редактирования секции

Далее на странице добавления, редактирования, удаления преподавателя тоже должна быть форма. Она должна содержать поля: имя, фамилия, почта,

пароль, который при преподаватель может изменить в личном кабинете, также опыт работы и образовательное учреждение. Дальше преподаватель в своем личном кабинете может добавить фотографию, и она отобразится на странице администратора. Работа с редактированием и удаление преподавателя построена аналогично с секциями. Только когда мы в редактировании у преподавателя меняем ему секцию. То обязательно у старого преподавателя из его дисциплин данная секцию удаляется и назначается новому. И на карточке преподавателя на странице администратора должны отображаться дисциплины, которые ведет данный преподаватель.(см рисунок 11 и 12)

Рисунок 11 форма добавления учителя в базу данных

Рисунок 12 Карточки преподавателей на страницу администратора

Далее форма авторизации студента, преподавателя, администратора должна быть по почте и паролю. Форма должны быть светлой и понятной что от нее требуют и какие поля. На странице авторизации студента должна быть ссылка на регистрацию. А на странице авторизации для преподавателя и администратора должен быть список для выбора роли.(см рисунок 13,14)

Рисунок 13 Форма авторизации студента

Рисунок 14 Форма авторизации преподавателя и студента

Теперь перейдем к личной страницу преподавателя. На страницу преподавателя должна отображаться личная информация, также секции ,

которые он ведет, поля для заметок преподавателя, на случай если ему нужно сделать, что-то важное. Также возможность загрузить фотографию. Страница должна быть светлой, расположение значений и кнопок должны располагаться интуитивно понятно. Также пользователь по двойному клику на поля контактной информации мог изменить почту и пароль. Фотография выбрана для примера (см рисунок 15)

Рисунок 15 Личная страница преподавателя

Далее рассмотрит личную страницу студента. Страница студента должны выводить личную информацию. У пользователя должна быть реализована логика изменения пароля и почты по двойному клику на странице студента должно выводиться его расписание секции(см рисунок 16)

Рисунок 16 Личная страница студента

4. Руководство программиста

Выделяем основные папки для дальнейшей работы в проекте(см рисунок 17)

Рисунок 17 Основные папки для проекта

В папке auth будут храниться формы авторизации студентов,

преподавателей, администратора. В папке components хранятся основные страницы приложения. В папку models будут храниться представления данных и их структурирование в приложении. Папка services предназначена для хранения сервисах приложения. Папка shared

хранит компоненты, которые могут повторно использоваться в приложении.

Начнем разработку с страницы администратора, потому что он добавляет в базу данных преподавателей и секции, которые понадобятся нам в дальнейшей работе. Страница администратора должна содержать карточки уже созданных секций и преподавателей, поэтому загружаем их в компоненте при его загрузке с помощью сервисов( см рисунок 18)

Рисунок 18 Загружаем данные уже созданных секций и преподавателей

Если еще не созданы, то у нас не выведутся данные. Прописываем шаблон компонента данной страницы и реализовываем загрузку фотографий на нашей страницы. Используя сервис uploadService и сервер, который мы создаем с помощью библиотек express и multer.(см рисунок 19 и 20)

Рисунок 19 Методы в компоненте для загрузки фотографий

onFileSelected(event: any): void метод вызывается, когда пользователь выбирает файл с своего устройства (например, изображение).Он получает выбранный файл из события (event) и сохраняет его в переменной selectedFile,

если файл действительно выбран.

Это необходимо, чтобы позже можно было использовать данный файл для загрузки.

uploadImage(section: Section): void метод отвечает за загрузку изображения на сервер. Если файл был выбран (т.е. selectedFile не равен null),

он вызывает метод uploadFile из UploadService и передает ему файл. В случае успешной загрузки (как указано в блоке next): URL загруженного изображения сохраняется в объекте section. Показано сообщение об успешной загрузке.

Переменная selectedFile сбрасывается в null.

Если есть ошибка при загрузке (в блоке error), ошибка логируется в консоль, и пользователю отображается уведомление о неудаче.

Если файл не был выбран, выводится соответствующее сообщение.

Сервис UploadService UploadService — это сервис, который отвечает за загрузку файлов на сервер. Он использует HttpClient для выполнения HTTP-

запросов. Метод uploadFile создает объект FormData, добавляет в него выбранный файл и отправляет его на указанный URL с помощью POST-

запроса.(см рисунок 21)