- public
index.html
: Основной HTML-файл приложения.styles.css
: Глобальные стили для всего приложения.
- src
index.js
: Точка входа в React-приложение.App.js
: Основной компонент, содержащий маршруты.Login.js
: Компонент для аутентификации пользователей.MainPage.js
: Главная страница для выбора здания, даты и времени.Gidro1.js
: Компонент для просмотра и бронирования доступных аудиторий.gidro1.css
: Стили для компонентаGidro1
.
- handleUsernameChange: Обновляет состояние с введённым значением в поле ввода имени пользователя.
- handlePasswordChange: Обновляет состояние с введённым значением в поле ввода пароля.
- handleSubmit: Обрабатывает отправку формы, отправляет имя пользователя и пароль на сервер для аутентификации, и перенаправляет на
MainPage
при успешном входе.-
Описание работы функции:
e.preventDefault()
: Предотвращает стандартное поведение формы, которое приводит к перезагрузке страницы.- Создаёт объект
loginData
, содержащий введённые имя пользователя и пароль. Пример:
{username: johndoe@spbstu.ru, password: 12345
- Выполняет
fetch
запрос к API по адресуhttp://31.134.129.26:8000/login/
с методомPOST
и заголовками для принятия и отправки данных в формате JSON. - В
body
запроса передаётся строка JSON, созданная из объектаloginData
. - Обрабатывает ответ:
- Если ответ успешный (
response.ok
), то парсит JSON данные из ответа. Пример:
- Если ответ успешный (
{ "username": "John Doe", "password": "12345", "email": "johndoe@spbstu.ru", "access": "Student" }
- Если ответ неуспешный, выбрасывает ошибку.
- В случае успешного ответа данные логина выводятся в консоль, и происходит переход на страницу
MainPage
, передавая в состоянии email пользователя. - В случае ошибки выводит сообщение об ошибке в консоль и показывает пользователю сообщение о неудачной попытке входа через
window.alert
.
-
- handleCampusSelect: Устанавливает выбранный корпус на основе пользовательского ввода.
- handleDateChange: Обновляет состояние с выбранной датой.
- handleTimeChange: Обновляет состояние с выбранным временем.
- handleBackToCampusSelect: Сбрасывает выбор, чтобы пользователь мог выбрать другой корпус.
- handleBackToDateSelect: Сбрасывает выбор даты и времени, чтобы пользователь мог выбрать другую дату.
- handleBackToTimeSelect: Сбрасывает выбор времени, чтобы пользователь мог выбрать другое время.
- renderTimeButtons: Создаёт кнопки для доступных временных интервалов на основе текущей даты и времени.
- renderDateButtons: Создаёт кнопки для выбора даты, позволяя пользователю выбрать дату в пределах следующей недели.
- getMonthName: Возвращает название месяца, соответствующее заданному индексу месяца.
- getDayName: Возвращает название дня недели, соответствующее заданному индексу дня.
- handleProceedToAuditoriumSelection: Запрашивает список недоступных аудиторий для выбранного корпуса, даты и времени, затем переходит к компоненту
Gidro1
с этой информацией.-
Описание работы функции:
- Формирует объект
selectedValues
, содержащий информацию о выбранном корпусе, дате и времени. Пример:
{ building: 11 date: "2024-05-04", time: "16:00:00" };
- Преобразует объект
selectedValues
в строку JSON с помощьюJSON.stringify
. - Выполняет
fetch
запрос к API по адресуhttp://31.134.129.26:8000/booking/
с методомPOST
, передавая данные в формате JSON. - Обрабатывает ответ:
- Если ответ успешный (
response.ok
), то парсит JSON данные из ответа. Пример:
- Если ответ успешный (
{ "bookings": [ { "audience": 1033, "time": "16:00:00", "date": "2024-05-04", "ordered_by": null }, { "audience": 563, "time": "16:00:00", "date": "2024-05-04", "ordered_by": null }, { "audience": 532, "time": "16:00:00", "date": "2024-05-04", "ordered_by": null }, { "audience": 554, "time": "16:00:00", "date": "2024-05-04", "ordered_by": null }, { "audience": 1304, "time": "16:00:00", "date": "2024-05-04", "ordered_by": null }, { "audience": 1358, "time": "16:00:00", "date": "2024-05-04", "ordered_by": null } ] }
- Если ответ неуспешный, выбрасывает ошибку.
- После успешного бронирования аудитории обновляет состояние загрузки, выводит сообщение о успешном бронировании в консоль, затем перенаправляет на страницу
Gidro1
, передавая информацию о выбранном корпусе, дате, времени, недоступных аудиториях и email пользователя в состоянии. - В случае ошибки выводит сообщение об ошибке в консоль и обновляет состояние загрузки, чтобы пользователь мог попробовать снова выполнить бронирование.
- Формирует объект
-
- toggleView: Переключает между списком аудиторий и планом здания с доступными аудиториями.
- handleGoToMainPage: Перенаправляет пользователя обратно на
MainPage
. - containsValue: Проверяет, существует ли значение в массиве объектов.
- getName: Извлекает название аудитории из объекта.
- handleRectClick: Обрабатывает событие клика на элемент плана здания, устанавливая выбранную аудиторию.
- handleBookAuditorium: Отправляет запрос на бронирование выбранной аудитории, даты и времени на сервер и обрабатывает ответ.
- Описание работы функции:
- Формирует объект
selectedValues
, содержащий информацию о выбранном корпусе, аудитории, дате, времени и email пользователя. Пример:
{ building: 11, audience: 123, date: "2024-05-11", time: "22:00:00", email: "test@mail.com" };
- Преобразует объект
selectedValues
в строку JSON с помощьюJSON.stringify
. - Выполняет
fetch
запрос к API по адресуhttp://31.134.129.26:8000/book/
с методомPOST
, передавая данные в формате JSON. - Обрабатывает ответ:
- Если ответ успешный (
response.ok
), то парсит JSON данные из ответа. - Если ответ неуспешный, выбрасывает ошибку.
- Если ответ успешный (
- После успешного бронирования аудитории выводит сообщение о успешном бронировании в консоль и показывает пользователю всплывающее окно с уведомлением о успешном бронировании.
- В случае ошибки выводит сообщение об ошибке в консоль и пользователю всплывающее окно с уведомлением о неудачной попытке бронирования аудитории.
- Формирует объект
- Описание работы функции: