Добавить функционал в веб-приложение на Angular/Javascript, HTML, CSS

Александр15 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
11.05.2015

Мы разрабатываем сервис онлайн-чата для сайтов (онлайн-консультант / 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. веблансер немного глючит, названия файлов сбились(

-----------------------------------------