Добавить функционал в веб-приложение на Angular/Javascript, HTML, CSS
Мы разрабатываем сервис онлайн-чата для сайтов (онлайн-консультант / LiveChat). Необходимо добавить определенную функциональность в приложение оператора. Это Single-Page Application (SPA), которое разрабатывается на MEAN (MongoDB, Express, Angular, Node.js). Нужно добавить функции только во frontend-часть (Angular/Javascript, HTML, CSS). Серверный JSON-API предоставляется нами.
Проект будет доступен на github. Пожалуйста, сообщите стоимость и срок реализации требуемых функций. После выполнения работы мы будем готовы предоставить новый список задач.
Список задач:
1) Доделать функцию редактирования авто-приглашений ("Auto-Invitations"):
- Сделать, чтобы форма редактирования отображалась не на новой странице (как сейчас), а во всплывающем окне как на рисунке №1
- В верхнем меню окна в начальном состоянии есть кнопка Canel, закрывающая окно и Save, которая является неактивной; после внесения каких-либо изменений кнопка Save становится активной
- Добавить выпадающий список "all / any" (как на рисунке №1)
- Добавить возможность редактирования текста авто-приглашения
- Добавить возможность добавления/удаления conditions
Condition состоит из 3 полей - Parameter, Matcher и Value, причем, в зависимости от выбранного параметра меняются значения Matcher и тип поля Value. Список всех возможных параметров мы предоставим в json-формате в виде:
[
"URL of the current page" : {
"type": "String",
"matchers": [
"equal_to",
"not_equal_to",
"contains",
"does not contain"
]
},
"Visited pages number" : {
"type": "Integer",
"matchers": [
"equal_to",
"not_equal_to",
"greater_than",
"less_than"
]
}
]
2) Добавить страницу Reports -> Total Chats (как на рисунке №2)
- Возможность фильтрации по оператору
- Выбор диапазона дат - Last week / Last month
- Графики Chats Served / Chats Missed должны быть разными цветами
- При перемещении указателя мыши по оси X отображается дата и кол-во чатов в данную дату (как на рисунке)
- Если исполнитель предложит похожий, но немного отличающийся вид графика (какой-то готовый компонент), то есть возможность согласовать его
3) Добавить страницу Reports -> Auto-Invitations (как на рисунке №3)
- Выбор диапазона дат - Last week / Last month как на предыдущей странице
- Графики строятся так же, как на предыдущей странице
- Должна быть добавлена круговая диаграмма
4) Привязать текущую функциональность в разделе "Operators" к предоставленному нами API (добавление, редактирование, удаление)
- При нажатии на кнопку удаления должен всплывать modal dialog для подтверждения как на рисунке №4 (эффект появления - вылетает снизу, задний фон затемняется)
5) Добавить страницу настроек оформления "Appearence" (как на рисунке №5)
- Выбор цвета из предложенных вариантов
- Переключатель положения виджета - "Left / Right"
- Preview виджета в свернутом/развернутом состоянии
(для preview виджета мы сами предоставим html-код + стили; нужно будет просто менять цвет рамки и сообщений при выборе пользователем определенного цвета)
- В верхнем меню в начальном состоянии кнопка Canel отсутствует, а Save является неактивной; после внесения каких-либо изменений (например, смена цвета) кнопка Cancel появляется (при нажатии она отменяет сделанные изменения), а кнопка Save становится активной (при нажатии сохраняет текущие настройки)
-- ПРИЛОЖЕНИЯ ---------------------------
Рисунок №0-1..0-7 - Скриншоты текущего состояния приложения
Рисунок №1 - Всплывающее окно редактирования Auto-Invitation
Рисунок №2 - Страница Reports -> Total Chats
Рисунок №3 - Страница Reports -> Auto-Invitations
Рисунок №4 - Пример Modal Dialog для подтверждения удаления
Рисунок №5 - Страница настроек оформления ("Appearence")
P.S. веблансер немного глючит, названия файлов сбились(
-----------------------------------------