Практика №13

Сохранение реквизитов банковской карты. Страницы личного кабинета и заказа.

Что предстоит сделать?

Мы продолжаем проект, который начали на прошлой практике. Сегодня мы сохраним реквизиты банковской карты, сделаем страницы заказа и личного кабинета, а также реализуем несколько http-запросов.

Макеты: тык

Задание на практику

1. С прошлого занятия у нас осталась форма реквизитов банковской карты, которая пока не сохраняет результат. Вы отменили стандартное поведение формы, а именно отправку, и добавили валидацию формы по этому событию. Добавьте логику, что в случае удачной валидации формы, реквизиты сохранялись. Для этого вам нужно сделать PUT запрос по url '/api/card-requisites'. В теле запроса нужно передать поля date, number, cvv.

Тип контента - "application/json", вместе с запросом нужно передавать куки.

2. Сейчас на странице не видно, сохранились ли данные. Нужно шаблонизировать форму, подставить в поля соответствующие значения. Данные о карте текущего пользователя доступны в объекте cardRequisites - date, number, cvv

3. После успешного сохранения реквизитов нет смысла оставаться на этой странице. Исходя из логики приложения, на эту страницу мы попадаем при попытке сделать заказ, когда данные не заполнены, либо из личного кабинета, когда мы хотим изменить данные. Поэтому после сохранения формы нужно сделать редирект либо на страницу заказа, либо на личный кабинет (страница /lk). Страница заказа передаётся в качестве query-параметра в url страницы.

4. На странице личного кабинета доступен список арендованных велосипедов. Выведите его на странице с помощью шаблонизатора, он доступен в переменной orderList, у каждого пункта есть поля bike (name, img),  formatTotalTime, totalCost и _id.

5. При клике на кнопку "вернуть" должен вызываться метод удаления соответствующего заказа. Добавьте кнопке data-атрибут data-order-id с _id заказа, чтобы можно было понимать, какой пункт удалять. Повесьте на кнопку обработчик клика, который будет брать значение order-id и вызывать http-метод DELETE по url '/api/order/:orderId'.

6. В случае успешного удаления на сервере, нужно удалить соответствующий пункт и со страницы. В этом вам поможет метод contains DOM-элементов. 

7. Ранее вы использовали готовый метод api.getBikes(pointId = '', page = 1) для получения списка велосипедов. Теперь вы можете сами его реализовать. Для этого нужно посылать GET-запросы по url '/api/catalog/:pointId?', где pointId - это id пункта выдачи, у метода так же есть query- параметр page - номер нужно страницы.

8. На макетах видно, что у шапки сайта есть 2 вида - для залогиненых и не залогиненных пользователей. На шаблоне каждой страницы есть переменная isLogin. Используя её, сделайте 2 вида шапки.

9. Закончите вёрстку личного кабинета. В шаблоне также доступны переменные login, cardRequisites (number, date, cvv)

10. Сверстайте и шаблонизируйте страницу заказа (order.html). На ней доступны переменные bikeInfo (name, img) и orderCode.