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

UI: Preserve dashboard state when switching to edit mode.

Browse Source
This commit is contained in:
Igor Kulikov 2017-09-08 10:25:21 +03:00
parent 88877cb0f5
commit 0e60537955
5 changed files with 104 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/app/dashboard/dashboard.controller.js
View File

@ -993,6 +993,7 @@ export default function DashboardController(types, utils, dashboardUtils, widget
function setEditMode(isEdit, revert) {
vm.isEdit = isEdit;
if (vm.isEdit) {
vm.dashboardCtx.stateController.preserveState();
vm.prevDashboard = angular.copy(vm.dashboard);
} else {
if (vm.widgetEditMode) {
@ -1009,7 +1010,6 @@ export default function DashboardController(types, utils, dashboardUtils, widget
} else {
vm.dashboard.configuration.timewindow = vm.dashboardCtx.dashboardTimewindow;
}
vm.dashboardCtx.stateController.resetState();
}
}
}

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

@ -15,7 +15,8 @@
*/
/*@ngInject*/
export default function DefaultStateController($scope, $location, $state, $stateParams, utils, types, dashboardUtils) {
export default function DefaultStateController($scope, $timeout, $location, $state,
$stateParams, utils, types, dashboardUtils, preservedState) {
var vm = this;
@ -24,6 +25,7 @@ export default function DefaultStateController($scope, $location, $state, $state
vm.openState = openState;
vm.updateState = updateState;
vm.resetState = resetState;
vm.getStateObject = getStateObject;
vm.navigatePrevState = navigatePrevState;
vm.getStateId = getStateId;
vm.getStateParams = getStateParams;
@ -77,6 +79,10 @@ export default function DefaultStateController($scope, $location, $state, $state
gotoState(rootStateId, true);
}
function getStateObject() {
return vm.stateObject;
}
function navigatePrevState(index) {
if (index < vm.stateObject.length-1) {
stopWatchStateObject();
@ -168,27 +174,33 @@ export default function DefaultStateController($scope, $location, $state, $state
}
function init() {
var initialState = $stateParams.state;
vm.stateObject = parseState(initialState);
if (preservedState) {
vm.stateObject = preservedState;
gotoState(vm.stateObject[0].id, true);
} else {
var initialState = $stateParams.state;
vm.stateObject = parseState(initialState);
gotoState(vm.stateObject[0].id, false);
}
gotoState(vm.stateObject[0].id, false);
$timeout(() => {
$scope.$watchCollection(function () {
return $state.params;
}, function () {
var currentState = $state.params.state;
vm.stateObject = parseState(currentState);
});
$scope.$watchCollection(function(){
return $state.params;
}, function(){
var currentState = $state.params.state;
vm.stateObject = parseState(currentState);
$scope.$watch('vm.dashboardCtrl.dashboardCtx.state', function () {
if (vm.stateObject[0].id !== vm.dashboardCtrl.dashboardCtx.state) {
stopWatchStateObject();
vm.stateObject[0].id = vm.dashboardCtrl.dashboardCtx.state;
updateLocation();
watchStateObject();
}
});
watchStateObject();
});
$scope.$watch('vm.dashboardCtrl.dashboardCtx.state', function() {
if (vm.stateObject[0].id !== vm.dashboardCtrl.dashboardCtx.state) {
stopWatchStateObject();
vm.stateObject[0].id = vm.dashboardCtrl.dashboardCtx.state;
updateLocation();
watchStateObject();
}
});
watchStateObject();
}
function stopWatchStateObject() {

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

@ -17,7 +17,8 @@
import './entity-state-controller.scss';
/*@ngInject*/
export default function EntityStateController($scope, $location, $state, $stateParams, $q, $translate, utils, types, dashboardUtils, entityService) {
export default function EntityStateController($scope, $timeout, $location, $state, $stateParams,
$q, $translate, utils, types, dashboardUtils, entityService, preservedState) {
var vm = this;
@ -26,6 +27,7 @@ export default function EntityStateController($scope, $location, $state, $stateP
vm.openState = openState;
vm.updateState = updateState;
vm.resetState = resetState;
vm.getStateObject = getStateObject;
vm.navigatePrevState = navigatePrevState;
vm.getStateId = getStateId;
vm.getStateParams = getStateParams;
@ -84,6 +86,10 @@ export default function EntityStateController($scope, $location, $state, $stateP
gotoState(rootStateId, true);
}
function getStateObject() {
return vm.stateObject;
}
function navigatePrevState(index) {
if (index < vm.stateObject.length-1) {
stopWatchStateObject();
@ -212,41 +218,49 @@ export default function EntityStateController($scope, $location, $state, $stateP
});
function init() {
var initialState = $stateParams.state;
vm.stateObject = parseState(initialState);
vm.selectedStateIndex = vm.stateObject.length-1;
gotoState(vm.stateObject[vm.stateObject.length-1].id, false);
$scope.$watchCollection(function() {
return $state.params;
}, function(){
var currentState = $state.params.state;
vm.stateObject = parseState(currentState);
});
$scope.$watch('vm.dashboardCtrl.dashboardCtx.state', function() {
if (vm.stateObject[vm.stateObject.length-1].id !== vm.dashboardCtrl.dashboardCtx.state) {
stopWatchStateObject();
vm.stateObject[vm.stateObject.length-1].id = vm.dashboardCtrl.dashboardCtx.state;
updateLocation();
watchStateObject();
}
});
watchStateObject();
if (vm.dashboardCtrl.isMobile) {
watchSelectedStateIndex();
if (preservedState) {
vm.stateObject = preservedState;
vm.selectedStateIndex = vm.stateObject.length-1;
gotoState(vm.stateObject[vm.stateObject.length-1].id, true);
} else {
var initialState = $stateParams.state;
vm.stateObject = parseState(initialState);
vm.selectedStateIndex = vm.stateObject.length-1;
gotoState(vm.stateObject[vm.stateObject.length-1].id, false);
}
$scope.$watch('vm.dashboardCtrl.isMobile', function(newVal, prevVal) {
if (!angular.equals(newVal, prevVal)) {
if (vm.dashboardCtrl.isMobile) {
watchSelectedStateIndex();
} else {
stopWatchSelectedStateIndex();
$timeout(() => {
$scope.$watchCollection(function () {
return $state.params;
}, function () {
var currentState = $state.params.state;
vm.stateObject = parseState(currentState);
});
$scope.$watch('vm.dashboardCtrl.dashboardCtx.state', function () {
if (vm.stateObject[vm.stateObject.length - 1].id !== vm.dashboardCtrl.dashboardCtx.state) {
stopWatchStateObject();
vm.stateObject[vm.stateObject.length - 1].id = vm.dashboardCtrl.dashboardCtx.state;
updateLocation();
watchStateObject();
}
});
watchStateObject();
if (vm.dashboardCtrl.isMobile) {
watchSelectedStateIndex();
}
$scope.$watch('vm.dashboardCtrl.isMobile', function (newVal, prevVal) {
if (!angular.equals(newVal, prevVal)) {
if (vm.dashboardCtrl.isMobile) {
watchSelectedStateIndex();
} else {
stopWatchSelectedStateIndex();
}
}
});
});
}

14
ui/src/app/dashboard/states/states-component.directive.js
View File

@ -47,6 +47,13 @@ export default function StatesComponent($compile, $templateCache, $controller, s
}
}
stateController.preserveState = function() {
if (scope.statesController) {
var state = scope.statesController.getStateObject();
statesControllerService.preserveStateControllerState(scope.statesControllerId, state);
}
}
stateController.navigatePrevState = function(index) {
if (scope.statesController) {
scope.statesController.navigatePrevState(index);
@ -109,7 +116,12 @@ export default function StatesComponent($compile, $templateCache, $controller, s
}
var template = $templateCache.get(statesControllerInfo.templateUrl);
element.html(template);
var locals = {};
var preservedState = statesControllerService.withdrawStateControllerState(scope.statesControllerId);
var locals = {
preservedState: preservedState
};
angular.extend(locals, {$scope: scope, $element: element});
var controller = $controller(statesControllerInfo.controller, locals, true, 'vm');
controller.instance = controller();

14
ui/src/app/dashboard/states/states-controller.service.js
View File

@ -40,7 +40,9 @@ export default function StatesControllerService() {
var service = {
registerStatesController: registerStatesController,
getStateControllers: getStateControllers,
getStateController: getStateController
getStateController: getStateController,
preserveStateControllerState: preserveStateControllerState,
withdrawStateControllerState: withdrawStateControllerState
};
return service;
@ -57,4 +59,14 @@ export default function StatesControllerService() {
return statesControllers[id];
}
function preserveStateControllerState(id, state) {
statesControllers[id].state = angular.copy(state);
}
function withdrawStateControllerState(id) {
var state = statesControllers[id].state;
statesControllers[id].state = null;
return state;
}
}