component.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237
  1. function init_components_dashboard(input){
  2. var data = $.extend({
  3. column: 8,
  4. line: 8,
  5. onMove: 'dashboard_widget_move',
  6. onRemove: 'dashboard_widget_delete',
  7. onResize: 'dashboard_widget_resize',
  8. onConfigure: 'dashboard_widget_configure',
  9. onConfigureForm : 'dashboard_widget_configure_form',
  10. onRefresh: 'dashboard_widget_refresh',
  11. onAdd: 'dashboard_widget_add'
  12. },{
  13. column: input.attr('data-column'),
  14. line: input.attr('data-line'),
  15. scope: input.attr('data-scope'),
  16. uid: input.attr('data-uid'),
  17. id: input.attr('data-id'),
  18. });
  19. component = input.data('component');
  20. if(!component){
  21. component = new Dashboard({
  22. element : input,
  23. columnNumber : data.column,
  24. lineNumber : data.line
  25. });
  26. input.data('component',component);
  27. }
  28. if(data.scope){
  29. $.action({
  30. action: 'dashboard_widget_search',
  31. scope: data.scope,
  32. uid: data.uid
  33. },function(response){
  34. component.addWidgets(response.widgets);
  35. });
  36. }
  37. if(data.onRefresh){
  38. setInterval(function(){
  39. $.action({
  40. action : data.onRefresh,
  41. scope: data.scope,
  42. uid: data.uid
  43. }, function(response){
  44. for(var k in response.rows){
  45. var widget = $.extend(component.widgets[response.rows[k].id],response.rows[k]);
  46. component.widgets[widget.id] = widget;
  47. component.renderContent(widget.id);
  48. }
  49. });
  50. },1000);
  51. }
  52. /*component.addWidgets([{
  53. width : 1,
  54. height: 1,
  55. row: 3,
  56. column: 5,
  57. id: 1,
  58. icon : 'far fa-user',
  59. headerBackground : 'rgb(0, 123, 255)',
  60. label : 'Hello monde',
  61. content : '<p>Wazup ?</p>'
  62. },
  63. {
  64. width : 3,
  65. height: 3,
  66. row: 0,
  67. column: 1,
  68. id: 2,
  69. removable : false,
  70. resizeable : false,
  71. draggable : false,
  72. label : 'ByBy',
  73. content : '<p>Wazup 2 ?</p>'
  74. }]);*/
  75. component.on('placeholder-click',function(placeholder){
  76. $.action({
  77. action : data.onAdd,
  78. scope : data.scope,
  79. uid : data.uid,
  80. row : placeholder.row,
  81. column : placeholder.column
  82. },function(widget){
  83. component.addWidgets([widget]);
  84. });
  85. }).on('move',function(widget){
  86. console.log('Widget has moved', widget);
  87. $.action({
  88. action : data.onMove,
  89. widget : widget
  90. });
  91. }).on('resize',function(widget){
  92. console.log('Widget has resized', widget);
  93. $.action({
  94. action: data.onResize,
  95. widget: widget
  96. });
  97. }).on('delete',function(widget){
  98. if(!confirm('Êtes-vous sûr de vouloir supprimer ce widget?')) return true;
  99. console.log('Widget has removed', widget);
  100. $.action({
  101. action : data.onRemove,
  102. widget : widget
  103. });
  104. }).on('configure',function(id){
  105. $.action({
  106. action : 'dashboard_widget_by_id',
  107. id : id
  108. },function(response){
  109. var widget = $.extend(component.widgets[response.item.id],response.item);
  110. $('#dashboard-configure-menu li').off('click').click(function(){
  111. var li = $(this);
  112. var menu = li.attr('data-menu');
  113. li.addClass('active').parent().find('>li').removeClass('active');
  114. switch(menu){
  115. case "model":
  116. $('#dashboard-configure-content').html($('#configure-model').html());
  117. init_components('#dashboard-configure-content');
  118. var modelList = $('#widget-models');
  119. modelList.fill({
  120. action : 'dashboard_model_search',
  121. },function(response){
  122. $('li',modelList).removeClass('active');
  123. $('li[data-model="'+widget.model+'"]',modelList).addClass('active');
  124. $('li',modelList).click(function(){
  125. $('#widget-models li').removeClass('active');
  126. $(this).addClass('active');
  127. $.action({
  128. action : data.onConfigure,
  129. type : menu,
  130. id : widget.id,
  131. model : $(this).attr('data-model')
  132. },function(response){
  133. });
  134. });
  135. });
  136. break;
  137. case "properties":
  138. $('#dashboard-configure-content').html($('#properties-model').html());
  139. $('#dashboard-properties-form').load('action.php',{action:data.onConfigureForm,id : widget.id});
  140. $('#dashboard-properties-save').click(function(){
  141. var bundle ={
  142. action : data.onConfigure,
  143. type : menu,
  144. id : widget.id,
  145. meta : $('#dashboard-properties-form').toJson()
  146. };
  147. $.action(bundle,function(){
  148. $.message('success','sauvegardé');
  149. });
  150. });
  151. break;
  152. case "style":
  153. $('#dashboard-configure-content').html($('#configure-style').html());
  154. var form = {};
  155. form['widget-header-background'] = widget.headerBackground ;
  156. form['widget-body-background'] = widget.bodyBackground;
  157. form['widget-body-color'] = widget.bodyColor ;
  158. form['widget-header-icon-color'] = widget.iconColor;
  159. form['widget-header-title-color'] = widget.titleColor;
  160. form['widget-header-icon'] = widget.icon;
  161. $('#configure-style-table').fromJson(form).off('change').change(function(){
  162. var form = $('#configure-style-table').toJson();
  163. widget.headerBackground = form['widget-header-background'];
  164. widget.bodyBackground = form['widget-body-background'];
  165. widget.bodyColor= form['widget-body-color'];
  166. widget.iconColor = form['widget-header-icon-color'];
  167. widget.titleColor = form['widget-header-title-color'];
  168. widget.icon = form['widget-header-icon'];
  169. var customiser = $('.dashboard-widget-customizer');
  170. $('.dashboard-widget-header',customiser).css('backgroundColor',widget.headerBackground+'!important');
  171. $('.widget-header-title',customiser).css('color',widget.titleColor+'!important');
  172. $('.dashboard-widget-content',customiser).css({
  173. backgroundColor : widget.bodyBackground+'!important',
  174. color : widget.bodyColor+'!important'
  175. });
  176. $('.widget-header-icon i',customiser).css('color',widget.iconColor+'!important');
  177. $('.widget-header-icon i',customiser).attr('class',widget.icon);
  178. component.widgets[widget.id] = widget;
  179. component.renderContent(widget.id);
  180. $.action({
  181. action : data.onConfigure,
  182. id : widget.id,
  183. type : menu,
  184. headerBackground : widget.headerBackground,
  185. bodyBackground : widget.bodyBackground,
  186. bodyColor : widget.bodyColor,
  187. iconColor : widget.iconColor,
  188. titleColor : widget.titleColor,
  189. icon : widget.icon
  190. });
  191. });
  192. init_components('#dashboard-configure-content');
  193. break;
  194. }
  195. });
  196. $('#dashboard-configure-menu li[data-menu="model"]').click();
  197. });
  198. });
  199. }