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

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

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

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

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

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) { stateController.navigatePrevState = function(index) {
if (scope.statesController) { if (scope.statesController) {
scope.statesController.navigatePrevState(index); scope.statesController.navigatePrevState(index);
@ -109,7 +116,12 @@ export default function StatesComponent($compile, $templateCache, $controller, s
} }
var template = $templateCache.get(statesControllerInfo.templateUrl); var template = $templateCache.get(statesControllerInfo.templateUrl);
element.html(template); element.html(template);
var locals = {};
var preservedState = statesControllerService.withdrawStateControllerState(scope.statesControllerId);
var locals = {
preservedState: preservedState
};
angular.extend(locals, {$scope: scope, $element: element}); angular.extend(locals, {$scope: scope, $element: element});
var controller = $controller(statesControllerInfo.controller, locals, true, 'vm'); var controller = $controller(statesControllerInfo.controller, locals, true, 'vm');
controller.instance = controller(); 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 = { var service = {
registerStatesController: registerStatesController, registerStatesController: registerStatesController,
getStateControllers: getStateControllers, getStateControllers: getStateControllers,
getStateController: getStateController getStateController: getStateController,
preserveStateControllerState: preserveStateControllerState,
withdrawStateControllerState: withdrawStateControllerState
}; };
return service; return service;
@ -57,4 +59,14 @@ export default function StatesControllerService() {
return statesControllers[id]; 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;
}
} }