Skip to content

Latest commit

 

History

History
147 lines (132 loc) · 9.64 KB

frontend.md

File metadata and controls

147 lines (132 loc) · 9.64 KB
Raw

Структура проекта

  • public
    • index.html: Основной HTML-файл приложения.
    • styles.css: Глобальные стили для всего приложения.
  • src
    • index.js: Точка входа в React-приложение.
    • App.js: Основной компонент, содержащий маршруты.
    • Login.js: Компонент для аутентификации пользователей.
    • MainPage.js: Главная страница для выбора здания, даты и времени.
    • Gidro1.js: Компонент для просмотра и бронирования доступных аудиторий.
    • gidro1.css: Стили для компонента Gidro1.

Описание функций

Login.js

  • 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.

MainPage.js

  • 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 пользователя в состоянии.
      • В случае ошибки выводит сообщение об ошибке в консоль и обновляет состояние загрузки, чтобы пользователь мог попробовать снова выполнить бронирование.

Gidro1.js

  • 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 данные из ответа.
        • Если ответ неуспешный, выбрасывает ошибку.
      • После успешного бронирования аудитории выводит сообщение о успешном бронировании в консоль и показывает пользователю всплывающее окно с уведомлением о успешном бронировании.
      • В случае ошибки выводит сообщение об ошибке в консоль и пользователю всплывающее окно с уведомлением о неудачной попытке бронирования аудитории.