Действия в браузере actions JSON

Введение

После выполнения действий в SQL на клиенте иногда возникает необходимость что-то обновить или сделать. 

Для этого используются JS коллбеки. Но есть более простая альтернатива - настройка actions в виде JSON, где указывается JS что необходимо сделать на странице. 

Пример реализован на демостенде watch - https://demo.web-automation.ru/list/watch/rabota-actions--json-dlya-vypolneniya-deystviy-v-brauzere---1149

Где доступна эта настройка: 

• Формы SaveItem, CheckField, SaveField, 
• Таблицы RemoveItem, UpdateField, Import, Create, Operation

Параметр actions представляет из себя массив, каждый объект которого состоит из полей действий (alert, refreshContainer и т.д.)

Какие операции может выполнять actions

Параметр modal - вывод модального окна. 

• title - заголовок окна
• text - разметка окна 
• btnText - кнопка внизу окна (если пустое, то не будет указана кнопка). Ее обработка может работать через кастом JS обработчик
• big - если 1, то окно будет на весь экран.

Пример: 

select 1 Result, ' ' Msg, '
    [{modal: {
    		title:"111",
            text:"222", 
            big: 1, 
            btnText:"123"
    	}
    }]    
    ' actions

Параметр audio (путь к файлу mp3) - если указан путь к файлу, то он будет единоразово проигран в браузере получателя. 

Параметры для alert: 

• text - текст сообщения
• title - заголовок окна
• type - вид окна (primary, success, warning, danger, info и т.д.)
• delay - задержка сколько будет показываться окно в мс (если 0, то будет висеть постоянно)
• hidePrev - если true, то уберет все предыдущие сообщения 

Массив updates позволяет обновить в режиме реального времени поле таблицы или формы. Указываем тип компонента (control), код компонента (code), itemID (привязка к сущности - параметр компонента data-itemID), какая колонка (col) и какое значение необходимо установить. Для таблиц также передается pk - первичный ключ таблицы (параметр id). 

Параметр setContainerContent - позволяет установить через delay мс нужную разметку(value) в некотором контейнере с селектором selector. 

Если передан refreshContainer, то на клиенте будет обновлена область с указанным jquery селектором в refreshContainer. 

Параметр redirectUrl - если задан, то пользователь, которому пришло это сообщение, будет переведен на указанный адрес. 

Параметр focus - задает селектор элемента, на который будет установлен фокус ввода. 

Параметр pushOptions задает настройки push уведомления пользователю: 

• title - заголовок push уведомления
• body - текст
• icon - ссылка на иконку
• image - ссыка на картинку
• id - id, который передается в data в push уведомлении
• actions  - массив действий (с полями action, title). Отображаются внизу push уведомления как ссылки.  
• vibrate - если true, то будет вибрация мобильного устройства при пуш уведомлении. 
• tag - некая строка, которая позволяет сделать так, чтобы выводилось одно пуш уведомление (а не много дублей) при нескольких открытых вкладках (например, идентификатор уведомления). 

Параметр printlog выводит общий поток подобных данных в контейнере слева внизу на странице: 

• title - заголовок
• text  - текст
• type - тип (warning, info, danger, success,primary).

Параметр addClass позволяет добавить css класс к какому-то объекту на странице (параметры class и selector).

Параметр removeClass позволяет удалить css класс у какого-то объекта на странице (параметры class и selector).

Параметр attr задает атрибут html элемента - поля selector(jquery селектор атрибута), key (название атрибута), value (значение атрибута).

Параметр removeAttr удаляет атрибут html элемента - поля selector(jquery селектор атрибута), key (название атрибута).

Пример JSON объекта с 1 элементом в массиве, который содержит все варианты действий:

    [
     {
     	"alert": {"text": "111", "title": "222", "type": "secondary", "delay": 5000, hidePrev: true, icon: "fa fa-bars fa-3x"},
     	setContainerContent:{selector: "h1", delay: "2000", "value": "11111111"},
        audio: "/uploads/mp3/call.mp3",
        printlog: {title: "111", text: "222", type: "success"},
        pushOptions:{
        	title: "11111", body: "222222",	icon: "", image: "", id: 0,
            actions:  [{ action:  "https:yandex.ru" , title: "Yandex.ru" }] ,
            vibrate: null, tag: "nt"+0
        },
        updates: [
        	{control: "form", itemID: 0, code: "watch_actionsjson", col: "actions", value: "xxxxx"},
            {control: "table", itemID: 0, code: "watch_actionsjson", col: "actions", pk:"123", value: "xxxxx"},            
        ],
        refreshContainer: "body", 
        redirectUrl: "", 
        addClass: {selector:"body", class:"text-danger"},
        removeClass: {selector:"h1", class:"text-danger"} ,
        attr: {selector:"body", key:"data-p1", value: "xx1"},
        removeAttr: {selector:"h1", key:"data-p1"}        
     },      
     ]