Оконный интерфейс пользователя в личном кабинете на сайте - терминалы

Терминал - это альтернативный способ работы пользователя в личном кабинете. Вся работа выполняется в рамках одной страницы: подгружаются новые виджеты, их можно перемещать по экрану, сворачивать. Есть области, как аналоги листов в Excel. 

Таким образом пользователь сам создает свой интерфейс, определяя состав областей и виджетов на них. 

Области можно:

• добавлять/удалять
• переключаться между ними
• переименовывать

Виджеты можно: 

• добавлять/удалять с области
• сворачивать
• менять размеры
• переносить
• менять itemID у компонента через поиск (через доп. настройки)

Данный режим подходит только для настольных ПК. Особенно удобен он будет для больших экранов, где можно разместить множество виджетов на экране.

Изменения по терминалу запоминаются в БД. Каждый терминал закрепляется за определенным пользователем в системе. 

На терминал добавляются виджеты из заранее предопределенного списка в getOptions процедуре.

Примечание: на странице примера убраны левая колонка, правая колонка для более удобной работы с рабочей областью терминала.

Документация по терминалам: https://falcon.web-automation.ru/docs/terminal---rabochee-prostranstvo-s-oknami-i-vkladkami

Как реализовать подобный терминал

1. Помещаем на страницу сниппет:

<div class="as-terminal" data-code="watch1" data-itemid="0"></div>

2. Создаем в разделе Терминалы новый терминал с кодом watch1.

3. Реализуем процедуру GetOptions (см. документацию): 

CREATE PROCEDURE [dbo].[term_watch1_getOptions]
    @code nvarchar(64),    -- terminalType
	@itemID nvarchar(128),	  -- terminalItemID	
	@parameters ExtendedDictionaryParameter readonly,	  -- for future parameters
	@username nvarchar(256)  -- current user
AS
BEGIN	
	-- SELECT 1
	select 1 Result, '' Msg
    --'{"title": "111", "text": "222", "type": "warning", "icon": "fa fa-bars"}' NoTerminal 
    
    -- SELECT 2 Available widgets
	select 'Дашборд 1' name, 'dash' catCode, 'fa fa-bars' icon, 'dashboard' controlType, 'watch_dashFilter' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Дашборд 2' name, 'dash' catCode, 'fa fa-bars' icon,  'dashboard' controlType, 'tst-dashboard' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
	select 'Форма с фоном' name, 'form' catCode, 'fa fa-bars' icon, 'form' controlType, 'watch_bg' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Форма в линейку' name, 'form' catCode, 'fa fa-bars' icon,  'form' controlType, 'watch_custom' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Форма с рабочим графиком' name, 'form' catCode, 'fa fa-bars' icon,  'form' controlType, 'watch_weektime' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Таблица - вывод графа' name, 'table' catCode, 'fa fa-bars' icon, 'table' controlType, 'watch_graph' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Таблица - вывод progressbar' name, 'table' catCode, 'fa fa-bars' icon,  'table' controlType, 'watch_progressbars' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Таблица - вывод карты' name, 'table' catCode, 'fa fa-bars' icon,  'table' controlType, 'watch_map' controlCode, ''  defaultItemID, 0 canChangeItemID
    union 
    select 'Простая таблица' name, 'table' catCode, 'fa fa-bars' icon,  'table' controlType, 'watch_table' controlCode, '0'  defaultItemID, 0 canChangeItemID
    union
    select 'Подтаблицы' name, 'table' catCode, 'fa fa-bars' icon,  'table' controlType, 'watch_tables' controlCode, '0'  defaultItemID, 0 canChangeItemID
          
    -- select 3 AvailableWidget catetories
    select 'Дашборды' name, 'dash' code, 1 ord  
    union 
    select 'Таблицы' name, 'table' code, 2 ord  
    union 
    select 'Формы' name, 'form' code, 3  ord  
    order by ord
	
END

4. Реализуем процедуру Search (в примере она не задействована)