dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dashboard layout for non standard columns count.

Browse Source
This commit is contained in:
Igor Kulikov 2017-12-20 11:42:48 +02:00
parent 23f81fe450
commit c8edbffe43
2 changed files with 118 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui/src/app/common/dashboard-utils.service.js
View File

@ -425,12 +425,26 @@ function DashboardUtils(types, utils, timeService) {
var prevColumns = prevGridSettings ? prevGridSettings.columns : 24;
var ratio = gridSettings.columns / prevColumns;
layout.gridSettings = gridSettings;
var maxRow = 0;
for (var w in layout.widgets) {
var widget = layout.widgets[w];
maxRow = Math.max(maxRow, widget.row + widget.sizeY);
}
var newMaxRow = Math.round(maxRow * ratio);
for (w in layout.widgets) {
widget = layout.widgets[w];
if (widget.row + widget.sizeY == maxRow) {
widget.row = Math.round(widget.row * ratio);
widget.sizeY = newMaxRow - widget.row;
} else {
widget.row = Math.round(widget.row * ratio);
widget.sizeY = Math.round(widget.sizeY * ratio);
}
widget.sizeX = Math.round(widget.sizeX * ratio);
widget.sizeY = Math.round(widget.sizeY * ratio);
widget.col = Math.round(widget.col * ratio);
widget.row = Math.round(widget.row * ratio);
if (widget.col + widget.sizeX > gridSettings.columns) {
widget.sizeX = gridSettings.columns - widget.col;
}
}
}

218
ui/src/app/components/dashboard.directive.js
View File

@ -235,6 +235,108 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
removeResizeListener(gridsterParent[0], onGridsterParentResize); // eslint-disable-line no-undef
});
function onGridsterParentResize() {
if (gridsterParent.height() && autofillHeight()) {
updateMobileOpts();
}
}
//TODO: widgets visibility
/*gridsterParent.scroll(function () {
updateVisibleRect();
});
gridsterParent.resize(function () {
updateVisibleRect();
});*/
function updateMobileOpts() {
var isMobileDisabled = vm.isMobileDisabled === true;
var isMobile = vm.isMobile === true && !isMobileDisabled;
var mobileBreakPoint = isMobileDisabled ? 0 : (isMobile ? 20000 : 960);
if (!isMobile && !isMobileDisabled) {
isMobile = !$mdMedia('gt-sm');
}
if (vm.gridsterOpts.isMobile != isMobile) {
vm.gridsterOpts.isMobile = isMobile;
vm.gridsterOpts.mobileModeEnabled = isMobile;
}
if (vm.gridsterOpts.mobileBreakPoint != mobileBreakPoint) {
vm.gridsterOpts.mobileBreakPoint = mobileBreakPoint;
}
detectRowSize(isMobile).then(
function(rowHeight) {
if (vm.gridsterOpts.rowHeight != rowHeight) {
vm.gridsterOpts.rowHeight = rowHeight;
}
}
);
vm.isMobileSize = checkIsMobileSize();
}
function checkIsMobileSize() {
var isMobileDisabled = vm.isMobileDisabled === true;
var isMobileSize = vm.isMobile === true && !isMobileDisabled;
if (!isMobileSize && !isMobileDisabled) {
isMobileSize = !$mdMedia('gt-sm');
}
return isMobileSize;
}
$scope.$watch('vm.columns', function () {
var columns = vm.columns ? vm.columns : 24;
if (vm.gridsterOpts.columns != columns) {
vm.gridsterOpts.columns = columns;
if (vm.gridster) {
vm.gridster.columns = vm.columns;
updateGridsterParams();
}
//TODO: widgets visibility
//updateVisibleRect();
}
});
$scope.$watch(function() {
return $mdMedia('gt-sm') + ',' + vm.isMobile + ',' + vm.isMobileDisabled;
}, function() {
updateMobileOpts();
sortWidgets();
});
$scope.$watch(function() {
return vm.autofillHeight + ',' + vm.mobileAutofillHeight + ',' + vm.mobileRowHeight;
}, function () {
updateMobileOpts();
});
$scope.$watch('vm.margins', function () {
var margins = vm.margins ? vm.margins : [10, 10];
if (!angular.equals(vm.gridsterOpts.margins, margins)) {
vm.gridsterOpts.margins = margins;
updateMobileOpts();
if (vm.gridster) {
vm.gridster.margins = vm.margins;
updateGridsterParams();
}
//TODO: widgets visibility
//updateVisibleRect();
}
});
$scope.$watch('vm.isEdit', function () {
vm.gridsterOpts.resizable.enabled = vm.isEdit;
vm.gridsterOpts.draggable.enabled = vm.isEdit;
$scope.$broadcast('toggleDashboardEditMode', vm.isEdit);
});
$scope.$watch('vm.isMobileSize', function (newVal, prevVal) {
if (!angular.equals(newVal, prevVal)) {
$scope.$broadcast('mobileModeChanged', vm.isMobileSize);
}
});
$scope.$watchCollection('vm.widgets', function () {
var ids = [];
for (var i=0;i<vm.widgets.length;i++) {
@ -290,127 +392,11 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
});
});
function onGridsterParentResize() {
if (gridsterParent.height() && autofillHeight()) {
updateMobileOpts();
}
}
//TODO: widgets visibility
/*gridsterParent.scroll(function () {
updateVisibleRect();
});
gridsterParent.resize(function () {
updateVisibleRect();
});*/
function updateMobileOpts() {
var isMobileDisabled = vm.isMobileDisabled === true;
var isMobile = vm.isMobile === true && !isMobileDisabled;
var mobileBreakPoint = isMobileDisabled ? 0 : (isMobile ? 20000 : 960);
if (!isMobile && !isMobileDisabled) {
isMobile = !$mdMedia('gt-sm');
}
if (vm.gridsterOpts.isMobile != isMobile) {
vm.gridsterOpts.isMobile = isMobile;
vm.gridsterOpts.mobileModeEnabled = isMobile;
}
if (vm.gridsterOpts.mobileBreakPoint != mobileBreakPoint) {
vm.gridsterOpts.mobileBreakPoint = mobileBreakPoint;
}
detectRowSize(isMobile).then(
function(rowHeight) {
if (vm.gridsterOpts.rowHeight != rowHeight) {
vm.gridsterOpts.rowHeight = rowHeight;
}
}
);
vm.isMobileSize = checkIsMobileSize();
}
function checkIsMobileSize() {
var isMobileDisabled = vm.isMobileDisabled === true;
var isMobileSize = vm.isMobile === true && !isMobileDisabled;
if (!isMobileSize && !isMobileDisabled) {
isMobileSize = !$mdMedia('gt-sm');
}
return isMobileSize;
}
$scope.$watch(function() { return $mdMedia('gt-sm'); }, function() {
updateMobileOpts();
sortWidgets();
});
$scope.$watch('vm.isMobile', function () {
updateMobileOpts();
sortWidgets();
});
$scope.$watch('vm.autofillHeight', function () {
updateMobileOpts();
});
$scope.$watch('vm.mobileAutofillHeight', function () {
updateMobileOpts();
});
$scope.$watch('vm.mobileRowHeight', function () {
updateMobileOpts();
});
$scope.$watch('vm.isMobileDisabled', function () {
updateMobileOpts();
sortWidgets();
});
$scope.$watch('vm.widgetLayouts', function () {
updateMobileOpts();
sortWidgets();
});
$scope.$watch('vm.columns', function () {
var columns = vm.columns ? vm.columns : 24;
if (vm.gridsterOpts.columns != columns) {
vm.gridsterOpts.columns = columns;
if (vm.gridster) {
vm.gridster.columns = vm.columns;
updateGridsterParams();
}
//TODO: widgets visibility
//updateVisibleRect();
}
});
$scope.$watch('vm.margins', function () {
var margins = vm.margins ? vm.margins : [10, 10];
if (!angular.equals(vm.gridsterOpts.margins, margins)) {
vm.gridsterOpts.margins = margins;
updateMobileOpts();
if (vm.gridster) {
vm.gridster.margins = vm.margins;
updateGridsterParams();
}
//TODO: widgets visibility
//updateVisibleRect();
}
});
$scope.$watch('vm.isEdit', function () {
vm.gridsterOpts.resizable.enabled = vm.isEdit;
vm.gridsterOpts.draggable.enabled = vm.isEdit;
$scope.$broadcast('toggleDashboardEditMode', vm.isEdit);
});
$scope.$watch('vm.isMobileSize', function (newVal, prevVal) {
if (!angular.equals(newVal, prevVal)) {
$scope.$broadcast('mobileModeChanged', vm.isMobileSize);
}
});
$scope.$on('gridster-resized', function (event, sizes, theGridster) {
if (checkIsLocalGridsterElement(theGridster)) {
vm.gridster = theGridster;