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

UI: Fix dashboard layout. Fix dashboard states processing.

Browse Source
This commit is contained in:
Igor Kulikov 2017-07-13 13:46:19 +03:00
parent d43995eadf
commit 2e7eed79f9
3 changed files with 65 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,7 +89,7 @@ function Dashboard() {
} }
/*@ngInject*/ /*@ngInject*/
function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $mdUtil, timeService, types, utils) { function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $mdUtil, $q, timeService, types, utils) {
var highlightedMode = false; var highlightedMode = false;
var highlightedWidget = null; var highlightedWidget = null;
@ -311,11 +311,13 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
if (vm.gridsterOpts.mobileBreakPoint != mobileBreakPoint) { if (vm.gridsterOpts.mobileBreakPoint != mobileBreakPoint) {
vm.gridsterOpts.mobileBreakPoint = mobileBreakPoint; vm.gridsterOpts.mobileBreakPoint = mobileBreakPoint;
} }
var rowHeight = detectRowSize(isMobile); detectRowSize(isMobile).then(
function(rowHeight) {
if (vm.gridsterOpts.rowHeight != rowHeight) { if (vm.gridsterOpts.rowHeight != rowHeight) {
vm.gridsterOpts.rowHeight = rowHeight; vm.gridsterOpts.rowHeight = rowHeight;
} }
}
);
vm.isMobileSize = checkIsMobileSize(); vm.isMobileSize = checkIsMobileSize();
} }
@ -403,11 +405,14 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
$scope.$on('gridster-mobile-changed', function (event, theGridster) { $scope.$on('gridster-mobile-changed', function (event, theGridster) {
if (checkIsLocalGridsterElement(theGridster)) { if (checkIsLocalGridsterElement(theGridster)) {
vm.gridster = theGridster; vm.gridster = theGridster;
var rowHeight = detectRowSize(vm.gridster.isMobile); detectRowSize(vm.gridster.isMobile).then(
function(rowHeight) {
if (vm.gridsterOpts.rowHeight != rowHeight) { if (vm.gridsterOpts.rowHeight != rowHeight) {
vm.gridsterOpts.rowHeight = rowHeight; vm.gridsterOpts.rowHeight = rowHeight;
updateGridsterParams(); updateGridsterParams();
} }
}
);
vm.isMobileSize = checkIsMobileSize(); vm.isMobileSize = checkIsMobileSize();
//TODO: widgets visibility //TODO: widgets visibility
@ -425,10 +430,30 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
} }
} }
function detectViewportHeight() {
var deferred = $q.defer();
var viewportHeight = gridsterParent.height();
if (viewportHeight) {
deferred.resolve(viewportHeight);
} else {
$scope.viewportHeightWatch = $scope.$watch(function() { return gridsterParent.height(); },
function(viewportHeight) {
if (viewportHeight) {
$scope.viewportHeightWatch();
deferred.resolve(viewportHeight);
}
}
);
}
return deferred.promise;
}
function detectRowSize(isMobile) { function detectRowSize(isMobile) {
var deferred = $q.defer();
var rowHeight; var rowHeight;
if (autofillHeight()) { if (autofillHeight()) {
var viewportHeight = gridsterParent.height(); detectViewportHeight().then(
function(viewportHeight) {
var totalRows = 0; var totalRows = 0;
for (var i = 0; i < vm.widgets.length; i++) { for (var i = 0; i < vm.widgets.length; i++) {
var w = vm.widgets[i]; var w = vm.widgets[i];
@ -442,12 +467,17 @@ function DashboardController($scope, $rootScope, $element, $timeout, $mdMedia, $
} }
} }
rowHeight = (viewportHeight - vm.gridsterOpts.margins[1]*(vm.widgets.length+1) + vm.gridsterOpts.margins[0]*vm.widgets.length) / totalRows; rowHeight = (viewportHeight - vm.gridsterOpts.margins[1]*(vm.widgets.length+1) + vm.gridsterOpts.margins[0]*vm.widgets.length) / totalRows;
deferred.resolve(rowHeight);
}
);
} else if (isMobile) { } else if (isMobile) {
rowHeight = angular.isDefined(vm.mobileRowHeight) ? vm.mobileRowHeight : 70; rowHeight = angular.isDefined(vm.mobileRowHeight) ? vm.mobileRowHeight : 70;
deferred.resolve(rowHeight);
} else { } else {
rowHeight = 'match'; rowHeight = 'match';
deferred.resolve(rowHeight);
} }
return rowHeight; return deferred.promise;
} }
function widgetOrder(widget) { function widgetOrder(widget) {

5
ui/src/app/dashboard/states/default-state-controller.js
View File

@ -135,7 +135,12 @@ export default function DefaultStateController($scope, $location, $state, $state
} }
if (!result.length) { if (!result.length) {
result[0] = { id: null, params: {} } result[0] = { id: null, params: {} }
} else if (result.length > 1) {
var newResult = [];
newResult.push(result[result.length-1]);
result = newResult;
} }
if (!result[0].id) { if (!result[0].id) {
result[0].id = dashboardUtils.getRootStateId(vm.states); result[0].id = dashboardUtils.getRootStateId(vm.states);
} }

6
ui/src/app/dashboard/states/entity-state-controller.js
View File

@ -183,8 +183,12 @@ export default function EntityStateController($scope, $location, $state, $stateP
if (!result.length) { if (!result.length) {
result[0] = { id: null, params: {} } result[0] = { id: null, params: {} }
} }
var rootStateId = dashboardUtils.getRootStateId(vm.states);
if (!result[0].id) { if (!result[0].id) {
result[0].id = dashboardUtils.getRootStateId(vm.states); result[0].id = rootStateId;
}
if (result[0].id !== rootStateId) {
result = [ { id: rootStateId, params: {} } ];
} }
return result; return result;
} }