composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-23 10:38:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

User editable dashboards... implementation in progress

Browse Source 
SVN:trunk[2019]
This commit is contained in:
Denis Flaven
2012-05-24 08:37:15 +00:00
parent ae22563177
commit a53be218f1
2 changed files with 137 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
js/dashboard.js
View File

@@ -14,7 +14,8 @@ $(function()
submit_to: 'index.php',
submit_parameters: {},
render_to: 'index.php',
render_parameters: {}
render_parameters: {},
new_dashlet_parameters: {}
},
// the constructor
@@ -26,6 +27,8 @@ $(function()
.addClass('itop-dashboard');
this.ajax_div = $('<div></div>').appendTo(this.element);
$('.itop-dashboard').bind('keyup.dashboard_editor', function(event) { me._on_keyup(event); } );
this._make_draggable();
},
// called when created, and later when changing options
@@ -35,6 +38,7 @@ $(function()
var me = this;
$.post(this.options.render_to, oParams, function(data){
me.element.html(data);
me._make_draggable();
});
},
// events bound via _bind are removed automatically
@@ -45,6 +49,7 @@ $(function()
.removeClass('itop-dashboard');
this.ajax_div.remove();
$(document).unbind('keyup.dashboard_editor');
// call the original destroy method since we overwrote it
$.Widget.prototype.destroy.call( this );
@@ -70,14 +75,30 @@ $(function()
{
var oState = oMergeInto;
oState.dashlets = [];
this.element.find(':itop-dashlet').each(function() {
var oDashlet = $(this).data('dashlet');
if(oDashlet)
this.element.find('.layout_cell').each(function() {
var aList = { dashlets: [] };
$(this).find(':itop-dashlet').each(function() {
var oDashlet = $(this).data('dashlet');
if(oDashlet)
{
var oDashletParams = oDashlet.get_params();
var sId = oDashletParams.dashlet_id;
aList[sId] = oDashletParams;
aList.dashlets.push({dashlet_id: sId, dashlet_class: oDashletParams.dashlet_class} );
}
});
if (aList.dashlets.length == 0)
{
var oDashletParams = oDashlet.get_params();
var sId = oDashletParams.dashlet_id;
oState[sId] = oDashletParams;
oState.dashlets.push({dashlet_id: sId, dashlet_class: oDashletParams.dashlet_class} );
oState.dashlets.push({dashlet_id: 0, dashlet_class: 'DashletEmptyCell'});
}
else
{
for(var idx in aList.dashlets)
{
var sId = aList.dashlets[idx].dashlet_id;
oState[sId] = aList[sId];
oState.dashlets.push(aList.dashlets[idx]);
}
}
});
oState.dashboard_id = this.options.dashboard_id;
@@ -93,6 +114,85 @@ $(function()
$.post(this.options.submit_to, oParams, function(data){
me.ajax_div.html(data);
});
},
add_dashlet: function(options)
{
var sDashletId = this._get_new_id();
var oDashlet = $('<div class="dashlet" id="dashlet_'+sDashletId+'"/>');
oDashlet.appendTo(options.container);
var oDashletProperties = $('<div class="dashlet_properties" id="dashlet_properties_'+sDashletId+'"/>');
oDashletProperties.appendTo($('#dashlet_properties'));
var oParams = this.options.new_dashlet_parameters;
var sDashletClass = options.dashlet_class;
oParams.dashlet_class = sDashletClass;
oParams.dashlet_id = sDashletId;
var me = this;
$.post(this.options.render_to, oParams, function(data){
me.ajax_div.html(data);
$('#dashlet_'+sDashletId)
.dashlet({dashlet_id: sDashletId, dashlet_class: sDashletClass})
.dashlet('deselect_all')
.dashlet('select')
.draggable({
revert: 'invalid', appendTo: 'body', zIndex: 9999,
helper: function() {
var oDragItem = $(this).dashlet('get_drag_icon');
return oDragItem;
},
cursorAt: { top: 16, left: 16 },
});
});
},
_get_new_id: function()
{
var iMaxId = 0;
this.element.find(':itop-dashlet').each(function() {
var oDashlet = $(this).data('dashlet');
if(oDashlet)
{
var oDashletParams = oDashlet.get_params();
var id = parseInt(oDashletParams.dashlet_id, 10);
if (id > iMaxId) iMaxId = id;
}
});
return 1 + iMaxId;
},
_make_draggable: function()
{
this.element.find('.dashlet').draggable({
revert: 'invalid', appendTo: 'body', zIndex: 9999,
helper: function() {
var oDragItem = $(this).dashlet('get_drag_icon');
return oDragItem;
},
cursorAt: { top: 16, left: 16 },
});
this.element.find('table td').droppable({
accept: '.dashlet,.dashlet_icon',
drop: function(event, ui) {
$( this ).find( ".placeholder" ).remove();
var oDashlet = ui.draggable;
if (oDashlet.hasClass('dashlet'))
{
// moving around a dashlet
oDashlet.detach();
oDashlet.css({top: 0, left: 0});
oDashlet.appendTo($(this));
}
else
{
// inserting a new dashlet
var sDashletClass = ui.draggable.attr('dashlet_class');
$(':itop-dashboard').dashboard('add_dashlet', {dashlet_class: sDashletClass, container: $(this) })
}
},
});
},
_on_keyup: function(event)
{
console.log('Key pressed in Dashlet');
}
});
});

40
js/dashlet.js
View File

@@ -20,6 +20,9 @@ $(function()
this.element
.addClass('itop-dashlet')
.bind('click.itop-dashlet', function(event) { me._on_click(event); } );
this.closeBox = $('<div class="close-box"/>');
this.closeBox.click(function() { me._remove_dashlet(); }).hide().prependTo(this.element);
},
// called when created, and later when changing options
@@ -33,6 +36,8 @@ $(function()
this.element
.removeClass('itop-dashlet')
.unbind('click.itop-dashlet');
this.closeBox.remove();
// call the original destroy method since we overwrote it
$.Widget.prototype.destroy.call( this );
@@ -49,31 +54,32 @@ $(function()
// in 1.9 would use _super
$.Widget.prototype._setOption.call( this, key, value );
},
_select: function()
select: function()
{
this.element.addClass('dashlet-selected');
this.closeBox.fadeIn(500);
$('#event_bus').trigger('dashlet-selected', {'dashlet_id': this.options.dashlet_id, 'dashlet_class': this.options.dashlet_class})
},
_deselect: function()
deselect: function()
{
this.element.removeClass('dashlet-selected');
this.element.removeClass('dashlet-selected');
this.closeBox.hide();
},
_on_click: function(event)
deselect_all: function()
{
var sCurrentId = this.element.attr('id');
$(':itop-dashlet').each(function(){
var sId = $(this).attr('id');
var oWidget = $(this).data('dashlet');
if (oWidget)
{
if (sCurrentId != sId)
{
oWidget._deselect();
}
oWidget.deselect();
}
});
this._select();
},
_on_click: function(event)
{
this.deselect_all();
this.select();
},
get_params: function()
{
@@ -90,6 +96,18 @@ $(function()
oParams.dashlet_id = this.options.dashlet_id;
oParams.dashlet_class = this.options.dashlet_class;
return oParams;
},
get_drag_icon: function()
{
var oDragItem = $('#dashlet_'+this.options.dashlet_class).clone();
oDragItem.css({zIndex: 999});
oDragItem.appendTo('body');
return oDragItem;
},
_remove_dashlet: function()
{
$('#dashlet_properties_'+this.options.dashlet_id).remove();
this.element.remove();
}
});
});