在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:wgnet/wg_forge_frontend开源软件地址:https://github.com/wgnet/wg_forge_frontend开源编程语言:JavaScript 84.0%开源软件介绍:Тестовое задание WG Forge Platform Front-EndЭто стартовый проект для выполнения тестового задания программы WG Forge Platform Front-End, на основе которого вам нужно выполнять задание. Подготовка
git clone https://github.com/<username>/wg_forge_frontend.git
npm install
npm start Задача:Необходимо реализовать вывод в табличное представление данных o заказах, которые хранятся в файле
|
поле | тип | описание |
---|---|---|
id | integer | порядковый номер записи |
transaction_id | string | уникальный номер заказа |
created_at | string | временнáя метка создания заказа в формате unix (timestamp) |
user_id | integer | идентификатор пользователя |
total | float | общая сумма заказа в базовой валюте (USD) |
card_type | string | тип карты оплаты |
card_number | string | номер карты оплаты |
order_country | string | страна, из которой сделан заказ |
order_ip | string | IP-адрес пользователя, с которого сделан заказ |
users.json
В файле user.json
содержится сериализованный в JSON массив пользователей. Вот описание:
{
"id": 15,
"first_name": "Ivan",
"last_name": "Ivanivanskiy",
"gender": "Male",
"birthday": "665366400",
"avatar": "https://robohash.org/quibusdamminusea.bmp?size=100x100&set=set1",
"company_id": 6
}
поле | тип | описание |
---|---|---|
id | integer | идентификатор пользователя, соответстует order.user_id |
first_name | string | имя пользователя |
last_name | string | фамилия пользователя |
gender | string | пол, может быть один из "Male", "Female" |
birthday | float / null | день рождения пользователя в формате unix timestamp |
avatar | string / null | ссылка на изображения с аватаром пользователя |
company_id | integer / null | идентификатор компании, которую представляет пользователь |
companies.json
И наконец, файл companies.json
хранит сериализованный в JSON массив зарегистрированных компаний. Имеется следующая информация:
{
"id": 6,
"title": "Bumbershoot Corp.",
"industry": "Apparel",
"market_cap": "$36.6M",
"sector": "Consumer Services",
"url": "http://awesome.website"
}
поле | тип | описание |
---|---|---|
id | integer | идентификатор компании, соответстует user.id |
title | string | название компании |
industry | string | отрасль деятельности |
market_cap | string | рыночная капитализация |
sector | string | специализация компании |
url | string / null | ссылка на сайт компании |
⚠️ Обратите внимание, что некоторые поля у объектовuser
иcompany
могут принимать значение null.⚠️
Реализовать вывод данных в таблицу на странице нашего приложения. Структура таблицы должна выглядеть так:
<table>
<thead>
<tr>
<th>Transaction ID</th>
<th>User Info</th>
<th>Order Date</th>
<th>Order Amount</th>
<th>Card Number</th>
<th>Card Type</th>
<th>Location</th>
</tr>
</thead>
<tbody>
...тут будут данные о заказах...
</tbody>
</table>
Для каждого заказа необходимо поместить соответствющие данные в строку в таблице.
Каждый <tr>
в html-таблице должен иметь id в заданном формате: order_%id_записи%
.
В ячейке User
пока выводим только идентификатор пользователя.
Дата создания заказа должна отображаться в формате DD/MM/YYYY hh:mm:ss
.
Номер карты необходимо экранировать так, чтобы на странице отображались только первые две и последние четыре цифры номера. Номер заказа и тип карты выводим как есть.
Сумма заказа должна отображаться в денежном формате, валюта USD.
В ячейке Location
информация должна быть предоставлена в следующем формате: %order_country% (%order_ip%)
.
Например:
<tr id="order_11">
<td>8292e007-4682-idkfa-a404-eed9662fa5cc</td>
<td class="user_data">15</td>
<td>21/12/2017, 1:13:47 AM</td>
<td>$453.47</td>
<td>30********4733</td>
<td>diners-club-carte-blanche</td>
<td>IS (211.145.96.59)<td>
</tr>
Заполняем ячейку User Info
. Для этого нам потребуется загрузить список пользователей из файла users.json
и найти пользователя c id
соответствующего order.user_id
.
Далее, необходимо сфомировать строку с обращением (Mr.
если Male
в поле Gender
, иначе Ms.
), именем и фамилией. Эта строка должна быть обернута в тег <a href="#">
.
Полученный результат помещаем в ячейку таблицы:
<tr id="order_11">
...
<td class="user-data">
<a href="#">Mr. Ivan Ivanivanskiy</a>
</td>
...
</tr>
Дополним и немного оживим нашу таблицу. Добавим блок <div class="user-details">
, в который поместим дополнительную информацию о пользователе и связаной с ним компании (если соответствующая информации имеется):
Для нашего примера это будет выглядеть так:
<tr id="order_11">
...
<td class="user-data">
<a href="#">Mr. Ivan Ivanivanskiy</a>
<div class="user-details">
<p>Birthday: 01/02/1991</p>
<p><img src="" width="100px"></p>
<p>Company: <a href="http://awesome.website">Bumbershoot Corp.</a></p>
<p>Industry: Apparel / Consumer Services</p>
</div>
</td>
...
</tr>
Теперь необходимо добавить обработчик события "click", который будет показывать/скрывать блок div.user-details
при нажатии на ссылку. Перехода по ссылке происходить не должно. Состояние по-умолчанию: блок с информацией должен быть скрыт.
avatar
).url
полей данных должна выводится ссылка, по которой пользователь может совершить переход из таблицы.Давайте добавим возможность сортировки таблицы. Помните заголовок thead
нашей таблицы? Необходимо, чтобы при клике на ячейку заголовка (например, <thead>Order Amount</thead>
) данные в таблице сортировались по соответствующему полю в порядке возрастания (для численных данных) или алфавитном (для текстовых данных). Стоит учесть, что некоторые столбцы отображают данные из нескольких полей объекта order
и связаных с ним объектов user
и company
. В таком случае, при сортировке следуюет рукодствоваться следующими правилами:
столбец | порядок сортировки |
---|---|
User Info |
сортировать по полям first_name и last_name . Остальными данными в ячейке пренебречь |
Card Number |
не сортировать по данному столбцу |
Location |
сортировать сначала по Country, потом по IP-адресу. IP-адрес считать строкой |
Если таблица отсортирована по какому-либо столбцу, к соответствующей ячейке заголовка необходимо добавить тэг с символом, информирующем пользователя о текущем состоянии:
<span>↓</span>
Например, в случае сортировки по Order Amount
заголовок таблицы должен иметь следующую разметку:
<thead>
<tr>
<th>#</th>
<th>User Info</th>
<th>Order Date</th>
<th>Order Amount <span>↓</span></th>
<th>Card Number</th>
<th>Card Type</th>
<th>Location</th>
</tr>
</thead>
Кликабельные элементы заголовка таблицы при наведении на них должны менять тип курсора на указатель типа pointer
(вроде этого,
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论