Срочно: Фронтенд сервиса проката повербанков на React/Vue.js с RESTapi
Необходимо сделать функциональный лендинг для сервиса проката повербанков.
Должно быть две версии, которые автоматически будут определяться и использоваться на одном адресе - мобильная и для ПК/Ноутбука
Фронтенд нужен для конкурса, поэтому этот минимум нужно сделать максимально быстро, а уже потом допиливать. Не должно быть никаких товарных знаков, названий брендов. Также всё должно быть свободно от юридических обязательств
Реализовать несколько страниц: Главная, О нас, Станции, FAQ, Контакты.
Стартовая страница - Главная.
В шапке - Главная, Карта. В подвале - всё остальное.
В куках хранить вечный сгенерированный на стороне сайта uuid, который должен быть присвоен при отсутствии.
Элементы страницы "Главная":
- Поле ввода номера станции (всегда цифра в пределах 1 и 999)
- Числовой url-параметр ?sn=число.
-- Записывается в поле ввода при перезагрузке сайта как будто это вписал пользователь в плане модификации других форм. У нас же его ввод номера станции в поле что-то там добавляет. Если параметр некорректный, то действуем как будто пользователь сам вводил некорректно.
- Выезжающий лейбл рядом с полем ввода с подсказками (Должен выезжать сразу при модификации поля ввода или при наличии информации о корректном номере станции из url-параметра):
- -"Введите номер от 1 до 999" - При некорректном вводе
или
-- значение из поля "address", если оно не пустое
- Динамически обновляющаяся кнопка "Получить"
-- Информация из GET /station (внизу описан REST api)
-- При нажатии выводить текст в всплывающем окне из GET /try-give, если все проверки корректны
- Лейбл с текущим статусом повербанка.
-- Информация из GET /user/active-powerbank
-- Скрыт, если нет информации (т.е пусто, "")
Элементы страницы "Станции":
- Повторяющаяся группа динамически обновляющихся блоков
-- К каждому блоку мы привязываем информацию о станции
-- Загружаются разом все
-- В каждом элементе должна быть информация:
--- Адрес
--- Активность станции. Включена/Выключена
--- Заполненность станции X/Y (Например будет 2/6)
Элементы страницы "FAQ":
- Информация должна браться из файла faq.txt
- Лейбл с текстом "Ответы на вопросы"
- Повторяющаяся группа элементов
-- Вопрос
-- Ответ, который выползает/уползает при нажатии
Элементы страницы "О нас":
- Лейбл, в который записывается информация из файла about-us.txt
Элементы страницы "Контакты":
- Лейбл, в который записывается информация из файла contacts.txt
Готовое REST API:
- Начало адреса в файле rest.txt
- Ответ везде в json
GET {тут_начало_адреса_из_файла. у всех остальных также}/user/active-powerbank?user={uuid}
Вернёт: {
"info": "тут_строка_с_информацией"
}
GET /try-give?user={uuid}&sn={station_number}
Вернёт: {
"result": "тут_строка_с_информацией"
}
GET /stations?user={uuid}
Вернёт: {
"size": количество_элементов
"content": [
{как_будто_из_GET_/station},
{как_будто_из_GET_/station}
]
}
GET /station?user={uuid}&sn={station_number}
Вернёт: {
"address": "тут_строка_с_адресом",
"network": "online" or "offile",
"powerbanks": "x/y" например "1/6"
}
Заявки фрілансерів
