Merge pull request #66 from EverythingMe/bug-9

Dashboard: update layout editor when adding/removing widgets. fixes #9
This commit is contained in:
Arik Fraimovich 2014-01-26 07:28:54 -08:00
commit 1625149221
2 changed files with 48 additions and 39 deletions

View File

@ -33,35 +33,52 @@ directives.directive('editDashboardForm', ['$http', '$location', '$timeout', 'Da
templateUrl: '/views/edit_dashboard.html',
replace: true,
link: function($scope, element, attrs) {
$scope.$watch('dashboard.widgets', function() {
if ($scope.dashboard.widgets) {
$scope.layout = [];
_.each($scope.dashboard.widgets, function(row, rowIndex) {
_.each(row, function(widget, colIndex) {
$scope.layout.push({
id: widget.id,
col: colIndex+1,
row: rowIndex+1,
ySize: 1,
xSize: widget.width,
name: widget.query.name
})
})
});
$timeout(function () {
$(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [260, 100],
min_cols: 2,
max_cols: 2,
serialize_params: function ($w, wgd) {
return { col: wgd.col, row: wgd.row, id: $w.data('widget-id') }
}
});
});
var gridster = element.find(".gridster ul").gridster({
widget_margins: [5, 5],
widget_base_dimensions: [260, 100],
min_cols: 2,
max_cols: 2,
serialize_params: function($w, wgd) {
return {
col: wgd.col,
row: wgd.row,
id: $w.data('widget-id')
}
}
});
}).data('gridster');
var gsItemTemplate = '<li data-widget-id="{id}" class="widget panel panel-default gs-w">' +
'<div class="panel-heading">{name}' +
'</div></li>';
$scope.$watch('dashboard.widgets', function(widgets) {
$timeout(function () {
gridster.remove_all_widgets();
if (widgets && widgets.length) {
var layout = [];
_.each(widgets, function(row, rowIndex) {
_.each(row, function(widget, colIndex) {
layout.push({
id: widget.id,
col: colIndex+1,
row: rowIndex+1,
ySize: 1,
xSize: widget.width,
name: widget.query.name
});
});
});
_.each(layout, function(item) {
var el = gsItemTemplate.replace('{id}', item.id).replace('{name}', item.name);
gridster.add_widget(el, item.xSize, item.ySize, item.col, item.row);
});
}
});
}, true);
$scope.saveDashboard = function() {
$scope.saveInProgress = true;

View File

@ -10,17 +10,9 @@
<input type="text" class="form-control" placeholder="Dashboard Name" ng-model="dashboard.name">
</p>
<p ng-show="layout!='null'">
<div class="gridster">
<ul>
<li ng-repeat="widget in layout" data-row="{{widget.row}}" data-col="{{widget.col}}"
data-sizey="{{widget.ySize}}" data-sizex="{{widget.xSize}}" data-widget-id="{{widget.id}}"
class="widget panel panel-default">
<div class="panel-heading">{{widget.name}}</div>
</li>
</ul>
</div>
</p>
<div class="gridster">
<ul></ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-disabled="saveInProgress" data-dismiss="modal">Close</button>