Вывод временной линии timeline на сайте. Отображение процесса в виде таймлайна

Как реализовать временную линию

Разметка компонента:

<div class="as-table" data-code="watch_timeline" ></div>

GetItems:

CREATE PROCEDURE [dbo].[crud_watch_timeline_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	declare @result TABLE (id nvarchar(64), title nvarchar(max), link nvarchar(256), date nvarchar(64), [text] nvarchar(max), icon nvarchar(64), iconBackgroundClass nvarchar(64), isRight bit, dateOrder datetime)

	declare @langID int
	select @langID = try_cast(Value as int) from @filters where [Key] = 'langID'


	declare @filterTitle nvarchar(64)
    select @filterTitle = Value from @filters where [Key] = 'title'
    
    declare @filterDate datetime
	select @filterDate = try_convert(date, Value, 104) from @filters where [Key] = 'date'
    
	insert into @result
	select 'cust_'+cast(id as nvarchar) as id,
		   '<sup class="text-success font-weight-bold mr-1">new</sup>'+name title,
		   '' as link,
		   convert(nvarchar,getdate(),120) as date,
		   fio + '<div class="as-like" data-code="tst-timeline" data-itemID="'+cast(id as nvarchar)+'"></div>' as text,
		   'fas fa-user-tie' as icon,
		   'primary' as iconBackgroundClass,
		   0 isRight,
		   getdate() as dateOrder
	from tst_customers
    where (isnull(@filterTitle,'')='' or name like '%'+@filterTitle+'%' or fio like '%'+@filterTitle+'%')
    --and (isnull(@filterDate,'01-01-1900')='01-01-1900' or convert(nvarchar,created,104) = convert(nvarchar,@filterDate,104))
	union
	select 'order_'+cast(id as nvarchar) as id,
		   cast(isnull(price,0) as nvarchar)+' '+iif(@langID=1, 'USD', 'руб.')+' <sup class="text-secondary font-weight-bold ml-1">'+(select name from tst_products where id = productID)+', '+cast(isnull(cnt,0) as nvarchar)+' '+iif(@langID=1, 'cnt', 'шт.')+'</sup>' title,
		   '' as link,
		   convert(nvarchar,created,120) as date,
		   (select isnull(name,'--')+', '+isnull(fio,'--')+':' from tst_customers where id = customerID)+'<br>'+isnull(note,'--') as text,
		   'fas fa-box' as icon,
		   'success' as iconBackgroundClass,
		   1 isRight,
		   created as dateOrder
	from tst_orders
    where (isnull(@filterTitle,'')='' or (select name from tst_customers where id = customerID) like '%'+@filterTitle+'%' or (select fio from tst_customers where id = customerID) like '%'+@filterTitle+'%')
    --and (isnull(@filterDate,'01-01-1900')='01-01-1900' or convert(nvarchar,created,104) = convert(nvarchar,@filterDate,104))
	
	-- 1 SELECT - сами данные		
	select * from @result
	order by dateOrder
	OFFSET @PageSize * (@Page - 1) ROWS
	FETCH NEXT @PageSize ROWS ONLY;
	
	-- 2 SELECT - кол-во в таблице
	select count(*) from @result	

	-- 3 SELECT Дополнительные настройки таблицы
    Select 'timeline' ViewType, 1 InstantFilter, 'h4' headerTag

END

Документация - https://falcon.web-automation.ru/docs/vremennaya-liniya--timeline

Другие модули

Рабочий стол в личном кабинете на сайте. Что видит пользователь в личном кабинете

Дашборд пользователя с фильтром по времени. Создание панели управления на сайте

Визуализация данных на сайте в виде графа в личном кабинете пользователя

Вывод полосок прогресса - отображение статуса процесса в личном кабинете

Вывод круговой диаграммы polarArea

Как отобразить гистограмму bar на странице

Графики в личном кабинете. Вывод графика типа line

Диаграмма радар на сайте - radar bar

Последние обновления

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства