kiss/plugin/dashboard/js/component.js

function init_components_dashboard(input){
	var data = $.extend({
		column: 8,
		line: 8,
		onMove: 'dashboard_widget_move',
		onRemove: 'dashboard_widget_delete',
		onResize: 'dashboard_widget_resize',
		onConfigure: 'dashboard_widget_configure',
		onConfigureForm : 'dashboard_widget_configure_form',
		onRefresh: 'dashboard_widget_refresh',
		onAdd: 'dashboard_widget_add'
	},{
		column: input.attr('data-column'),
		line: input.attr('data-line'),
		scope: input.attr('data-scope'),
		uid: input.attr('data-uid'),
		id: input.attr('data-id'),
	});

	component = input.data('component');
	if(!component){
		component = new Dashboard({
			element : input,
			columnNumber : data.column,
			lineNumber : data.line
		});
		input.data('component',component);
	}

	if(data.scope){
		$.action({
			action: 'dashboard_widget_search',
			scope: data.scope,
			uid: data.uid
		},function(response){
			component.addWidgets(response.widgets);
		});
	}

	if(data.onRefresh){
		setInterval(function(){
			$.action({
				action : data.onRefresh,
				scope: data.scope,
				uid: data.uid
			}, function(response){
				for(var k in response.rows){
					
					var widget = $.extend(component.widgets[response.rows[k].id],response.rows[k]);
					component.widgets[widget.id] = widget;
			 		component.renderContent(widget.id);
				}
			});

		},1000);
	}

	/*component.addWidgets([{
		width : 1,
		height: 1,
		row: 3,
		column: 5,
		id: 1,
		icon : 'far fa-user',
		headerBackground : 'rgb(0, 123, 255)',
		label : 'Hello monde',
		content : '<p>Wazup ?</p>'
	},
	{
		width : 3,
		height: 3,
		row: 0,
		column: 1,
		id: 2,
		removable : false,
		resizeable : false,
		draggable : false,
		label : 'ByBy',
		content : '<p>Wazup 2 ?</p>'
	}]);*/

	component.on('placeholder-click',function(placeholder){
		$.action({
			action : data.onAdd,
			scope : data.scope,
			uid : data.uid,
			row : placeholder.row,
			column : placeholder.column
		},function(widget){
			component.addWidgets([widget]);
		});
	}).on('move',function(widget){
		console.log('Widget has moved', widget);

		$.action({
			action : data.onMove,
			widget : widget
		});

	}).on('resize',function(widget){
		console.log('Widget has resized', widget);

		$.action({
			action: data.onResize,
			widget: widget
		});

	}).on('delete',function(widget){
		if(!confirm('Êtes-vous sûr de vouloir supprimer ce widget?')) return true;
		console.log('Widget has removed', widget);

		$.action({
			action : data.onRemove,
			widget : widget
		});

	}).on('configure',function(id){
		
		$.action({
		        action : 'dashboard_widget_by_id',
		        id : id
		},function(response){
			var widget = $.extend(component.widgets[response.item.id],response.item);
			
			$('#dashboard-configure-menu li').off('click').click(function(){
					
			    var li = $(this);
			    var menu = li.attr('data-menu');
			    li.addClass('active').parent().find('>li').removeClass('active');
			 	
			 	switch(menu){
			 		case "model":

			 			$('#dashboard-configure-content').html($('#configure-model').html());

			 			init_components('#dashboard-configure-content');
			 			var modelList = $('#widget-models');
			 			modelList.fill({
					        action : 'dashboard_model_search',
					    },function(response){
					    	$('li',modelList).removeClass('active');
					    	$('li[data-model="'+widget.model+'"]',modelList).addClass('active');
					    	$('li',modelList).click(function(){
					    		$('#widget-models li').removeClass('active');
					    		$(this).addClass('active');
					    		$.action({
							        action : data.onConfigure,
							        type : menu,
							        id : widget.id,
							        model : $(this).attr('data-model')
							    },function(response){
							    });
					    	});
					    });
			 		break;
			 		case "properties":

			 			$('#dashboard-configure-content').html($('#properties-model').html());

			 			$('#dashboard-properties-form').load('action.php',{action:data.onConfigureForm,id :  widget.id});

			 			$('#dashboard-properties-save').click(function(){
			 				var bundle ={
		 						action :  data.onConfigure,
		 						type : menu,
		 						id :  widget.id,
		 						meta : $('#dashboard-properties-form').toJson()
			 				};
			 				$.action(bundle,function(){
			 					$.message('success','sauvegardé');
			 				});
			 			});
			 			
			 		break;
			 		case "style":
			 			$('#dashboard-configure-content').html($('#configure-style').html());
			 			
			 				var form = {};
		 					form['widget-header-background'] = widget.headerBackground  ;
		 					form['widget-body-background'] = widget.bodyBackground;  
		 					form['widget-body-color'] = widget.bodyColor ;
		 					form['widget-header-icon-color'] = widget.iconColor;
		 					form['widget-header-title-color'] = widget.titleColor;
		 					form['widget-header-icon'] = widget.icon;  


			 				$('#configure-style-table').fromJson(form).off('change').change(function(){

			 					var form = $('#configure-style-table').toJson();

			 					widget.headerBackground = form['widget-header-background'];
			 					widget.bodyBackground = form['widget-body-background'];
			 					widget.bodyColor= form['widget-body-color'];
			 					widget.iconColor = form['widget-header-icon-color'];
			 					widget.titleColor = form['widget-header-title-color'];
			 					widget.icon = form['widget-header-icon'];

			 					var customiser = $('.dashboard-widget-customizer');
			 					$('.dashboard-widget-header',customiser).css('backgroundColor',widget.headerBackground+'!important');
			 					$('.widget-header-title',customiser).css('color',widget.titleColor+'!important');
			 					$('.dashboard-widget-content',customiser).css({
			 						backgroundColor : widget.bodyBackground+'!important',
			 						color : widget.bodyColor+'!important'
			 					});
			 					$('.widget-header-icon i',customiser).css('color',widget.iconColor+'!important');
			 					$('.widget-header-icon i',customiser).attr('class',widget.icon);

			 					component.widgets[widget.id] = widget;
			 					component.renderContent(widget.id);

			 					$.action({
			 						action :  data.onConfigure,
			 						id :  widget.id,
			 						type : menu,
			 						headerBackground : widget.headerBackground,
									bodyBackground : widget.bodyBackground,
									bodyColor : widget.bodyColor,
									iconColor : widget.iconColor,
									titleColor : widget.titleColor,
									icon : widget.icon
			 					});
			 			});

			 			
			 			init_components('#dashboard-configure-content');
			 		break;
			 	}
			   
			});
		
			$('#dashboard-configure-menu li[data-menu="model"]').click();
		});

		

	});
}