Igor Kulikov
9 years ago
committed by
GitHub
GitHub
40 changed files with 1543 additions and 92 deletions
@ -0,0 +1,33 @@ |
|||
/* |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
export default angular.module('thingsboard.directives.finishRender', []) |
|||
.directive('tbOnFinishRender', OnFinishRender) |
|||
.name; |
|||
|
|||
/*@ngInject*/ |
|||
function OnFinishRender($timeout) { |
|||
return { |
|||
restrict: 'A', |
|||
link: function (scope, element, attr) { |
|||
if (scope.$last === true) { |
|||
$timeout(function () { |
|||
scope.$emit(attr.tbOnFinishRender); |
|||
}); |
|||
} |
|||
} |
|||
}; |
|||
} |
|||
@ -0,0 +1,90 @@ |
|||
/* |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
import './material-icon-select.scss'; |
|||
|
|||
import MaterialIconsDialogController from './material-icons-dialog.controller'; |
|||
|
|||
/* eslint-disable import/no-unresolved, import/default */ |
|||
|
|||
import materialIconSelectTemplate from './material-icon-select.tpl.html'; |
|||
import materialIconsDialogTemplate from './material-icons-dialog.tpl.html'; |
|||
|
|||
/* eslint-enable import/no-unresolved, import/default */ |
|||
|
|||
|
|||
export default angular.module('thingsboard.directives.materialIconSelect', []) |
|||
.controller('MaterialIconsDialogController', MaterialIconsDialogController) |
|||
.directive('tbMaterialIconSelect', MaterialIconSelect) |
|||
.name; |
|||
|
|||
/*@ngInject*/ |
|||
function MaterialIconSelect($compile, $templateCache, $document, $mdDialog) { |
|||
|
|||
var linker = function (scope, element, attrs, ngModelCtrl) { |
|||
var template = $templateCache.get(materialIconSelectTemplate); |
|||
element.html(template); |
|||
|
|||
scope.tbRequired = angular.isDefined(scope.tbRequired) ? scope.tbRequired : false; |
|||
scope.icon = null; |
|||
|
|||
scope.updateView = function () { |
|||
ngModelCtrl.$setViewValue(scope.icon); |
|||
} |
|||
|
|||
ngModelCtrl.$render = function () { |
|||
if (ngModelCtrl.$viewValue) { |
|||
scope.icon = ngModelCtrl.$viewValue; |
|||
} |
|||
if (!scope.icon || !scope.icon.length) { |
|||
scope.icon = 'more_horiz'; |
|||
} |
|||
} |
|||
|
|||
scope.$watch('icon', function () { |
|||
scope.updateView(); |
|||
}); |
|||
|
|||
scope.openIconDialog = function($event) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
$mdDialog.show({ |
|||
controller: 'MaterialIconsDialogController', |
|||
controllerAs: 'vm', |
|||
templateUrl: materialIconsDialogTemplate, |
|||
parent: angular.element($document[0].body), |
|||
locals: {icon: scope.icon}, |
|||
skipHide: true, |
|||
fullscreen: true, |
|||
targetEvent: $event |
|||
}).then(function (icon) { |
|||
scope.icon = icon; |
|||
}); |
|||
} |
|||
|
|||
$compile(element.contents())(scope); |
|||
} |
|||
|
|||
return { |
|||
restrict: "E", |
|||
require: "^ngModel", |
|||
link: linker, |
|||
scope: { |
|||
tbRequired: '=?', |
|||
} |
|||
}; |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
/** |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
.tb-material-icon-select { |
|||
md-icon { |
|||
padding: 4px; |
|||
margin: 8px 4px 4px; |
|||
cursor: pointer; |
|||
border: solid 1px rgba(0,0,0,0.27); |
|||
} |
|||
md-input-container { |
|||
margin-bottom: 0px; |
|||
} |
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2017 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-material-icon-select" layout="row"> |
|||
<md-icon class="material-icons" ng-click="openIconDialog($event)">{{icon}}</md-icon> |
|||
<md-input-container flex> |
|||
<label translate>icon.icon</label> |
|||
<input ng-mousedown="openIconDialog($event)" ng-model="icon"> |
|||
</md-input-container> |
|||
</div> |
|||
@ -0,0 +1,59 @@ |
|||
/* |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
import './material-icons-dialog.scss'; |
|||
|
|||
/*@ngInject*/ |
|||
export default function MaterialIconsDialogController($scope, $mdDialog, $timeout, utils, icon) { |
|||
|
|||
var vm = this; |
|||
|
|||
vm.selectedIcon = icon; |
|||
|
|||
vm.showAll = false; |
|||
vm.loadingIcons = false; |
|||
|
|||
$scope.$watch('vm.showAll', function(showAll) { |
|||
if (showAll) { |
|||
vm.loadingIcons = true; |
|||
$timeout(function() { |
|||
utils.getMaterialIcons().then( |
|||
function success(icons) { |
|||
vm.icons = icons; |
|||
} |
|||
); |
|||
}); |
|||
} else { |
|||
vm.icons = utils.getCommonMaterialIcons(); |
|||
} |
|||
}); |
|||
|
|||
$scope.$on('iconsLoadFinished', function() { |
|||
vm.loadingIcons = false; |
|||
}); |
|||
|
|||
vm.cancel = cancel; |
|||
vm.selectIcon = selectIcon; |
|||
|
|||
function cancel() { |
|||
$mdDialog.cancel(); |
|||
} |
|||
|
|||
function selectIcon($event, icon) { |
|||
vm.selectedIcon = icon; |
|||
$mdDialog.hide(vm.selectedIcon); |
|||
} |
|||
} |
|||
@ -0,0 +1,31 @@ |
|||
/** |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
.tb-material-icons-dialog { |
|||
button.md-icon-button.tb-select-icon-button { |
|||
border: solid 1px orange; |
|||
border-radius: 0%; |
|||
padding: 16px; |
|||
height: 56px; |
|||
width: 56px; |
|||
margin: 10px; |
|||
} |
|||
.tb-icons-load { |
|||
top: 64px; |
|||
background: rgba(255,255,255,0.75); |
|||
z-index: 3; |
|||
} |
|||
} |
|||
@ -0,0 +1,62 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2017 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<md-dialog class="tb-material-icons-dialog" aria-label="{{'icon.material-icons' | translate }}" style="min-width: 600px;"> |
|||
<form> |
|||
<md-toolbar> |
|||
<div class="md-toolbar-tools"> |
|||
<h2>{{ 'icon.select-icon' | translate }}</h2> |
|||
<span flex></span> |
|||
<section layout="row" layout-align="start center"> |
|||
<md-switch ng-model="vm.showAll" |
|||
aria-label="{{ 'icon.show-all' | translate }}"> |
|||
</md-switch> |
|||
<label translate>icon.show-all</label> |
|||
</section> |
|||
<md-button class="md-icon-button" ng-click="vm.cancel()"> |
|||
<ng-md-icon icon="close" aria-label="{{ 'action.close' | translate }}"></ng-md-icon> |
|||
</md-button> |
|||
</div> |
|||
</md-toolbar> |
|||
<md-progress-linear class="md-warn" md-mode="indeterminate" ng-disabled="!loading" ng-show="loading"></md-progress-linear> |
|||
<span style="min-height: 5px;" flex="" ng-show="!loading"></span> |
|||
<div class="tb-absolute-fill tb-icons-load" ng-show="vm.loadingIcons" layout="column" layout-align="center center"> |
|||
<md-progress-circular md-mode="indeterminate" ng-disabled="!vm.loadingIcons" class="md-accent" md-diameter="40"></md-progress-circular> |
|||
</div> |
|||
<md-dialog-content> |
|||
<div class="md-dialog-content"> |
|||
<md-content class="md-padding" layout="column"> |
|||
<fieldset ng-disabled="loading"> |
|||
<md-button ng-class="{'md-primary md-raised': icon == vm.selectedIcon}" class="tb-select-icon-button md-icon-button" |
|||
ng-repeat="icon in vm.icons" ng-click="vm.selectIcon($event, icon)" tb-on-finish-render="iconsLoadFinished"> |
|||
<md-icon class="material-icons">{{icon}}</md-icon> |
|||
<md-tooltip md-direction="bottom"> |
|||
{{ icon }} |
|||
</md-tooltip> |
|||
</md-button> |
|||
</fieldset> |
|||
</md-content> |
|||
</div> |
|||
</md-dialog-content> |
|||
<md-dialog-actions layout="row"> |
|||
<span flex></span> |
|||
<md-button ng-disabled="loading" ng-click="vm.cancel()"> |
|||
{{ 'action.cancel' | translate }} |
|||
</md-button> |
|||
</md-dialog-actions> |
|||
</form> |
|||
</md-dialog> |
|||
@ -0,0 +1,270 @@ |
|||
/** |
|||
* Created by igor on 6/20/17. |
|||
*/ |
|||
/* |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
import './manage-widget-actions.scss'; |
|||
|
|||
import thingsboardMaterialIconSelect from '../../material-icon-select.directive'; |
|||
|
|||
import WidgetActionDialogController from './widget-action-dialog.controller'; |
|||
|
|||
/* eslint-disable import/no-unresolved, import/default */ |
|||
|
|||
import manageWidgetActionsTemplate from './manage-widget-actions.tpl.html'; |
|||
import widgetActionDialogTemplate from './widget-action-dialog.tpl.html'; |
|||
|
|||
/* eslint-enable import/no-unresolved, import/default */ |
|||
|
|||
export default angular.module('thingsboard.directives.widgetActions', [thingsboardMaterialIconSelect]) |
|||
.controller('WidgetActionDialogController', WidgetActionDialogController) |
|||
.directive('tbManageWidgetActions', ManageWidgetActions) |
|||
.name; |
|||
|
|||
/*@ngInject*/ |
|||
function ManageWidgetActions() { |
|||
return { |
|||
restrict: "E", |
|||
scope: true, |
|||
bindToController: { |
|||
actionSources: '=', |
|||
widgetActions: '=', |
|||
fetchDashboardStates: '&', |
|||
}, |
|||
controller: ManageWidgetActionsController, |
|||
controllerAs: 'vm', |
|||
templateUrl: manageWidgetActionsTemplate |
|||
}; |
|||
} |
|||
|
|||
/* eslint-disable angular/angularelement */ |
|||
|
|||
|
|||
/*@ngInject*/ |
|||
function ManageWidgetActionsController($rootScope, $scope, $document, $mdDialog, $q, $filter, |
|||
$translate, $timeout, utils, types) { |
|||
|
|||
let vm = this; |
|||
|
|||
vm.allActions = []; |
|||
|
|||
vm.actions = []; |
|||
vm.actionsCount = 0; |
|||
|
|||
vm.query = { |
|||
order: 'actionSourceName', |
|||
limit: 10, |
|||
page: 1, |
|||
search: null |
|||
}; |
|||
|
|||
vm.enterFilterMode = enterFilterMode; |
|||
vm.exitFilterMode = exitFilterMode; |
|||
vm.onReorder = onReorder; |
|||
vm.onPaginate = onPaginate; |
|||
vm.addAction = addAction; |
|||
vm.editAction = editAction; |
|||
vm.deleteAction = deleteAction; |
|||
|
|||
$timeout(function(){ |
|||
$scope.manageWidgetActionsForm.querySearchInput.$pristine = false; |
|||
}); |
|||
|
|||
$scope.$watch('vm.widgetActions', function() { |
|||
if (vm.widgetActions) { |
|||
reloadActions(); |
|||
} |
|||
}); |
|||
|
|||
$scope.$watch("vm.query.search", function(newVal, prevVal) { |
|||
if (!angular.equals(newVal, prevVal) && vm.query.search != null) { |
|||
updateActions(); |
|||
} |
|||
}); |
|||
|
|||
function enterFilterMode () { |
|||
vm.query.search = ''; |
|||
} |
|||
|
|||
function exitFilterMode () { |
|||
vm.query.search = null; |
|||
updateActions(); |
|||
} |
|||
|
|||
function onReorder () { |
|||
updateActions(); |
|||
} |
|||
|
|||
function onPaginate () { |
|||
updateActions(); |
|||
} |
|||
|
|||
function addAction($event) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
openWidgetActionDialog($event, null, true); |
|||
} |
|||
|
|||
function editAction ($event, action) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
openWidgetActionDialog($event, action, false); |
|||
} |
|||
|
|||
function deleteAction($event, action) { |
|||
if ($event) { |
|||
$event.stopPropagation(); |
|||
} |
|||
if (action) { |
|||
var title = $translate.instant('widget-config.delete-action-title'); |
|||
var content = $translate.instant('widget-config.delete-action-text', {actionName: action.name}); |
|||
var confirm = $mdDialog.confirm() |
|||
.targetEvent($event) |
|||
.title(title) |
|||
.htmlContent(content) |
|||
.ariaLabel(title) |
|||
.cancel($translate.instant('action.no')) |
|||
.ok($translate.instant('action.yes')); |
|||
|
|||
confirm._options.skipHide = true; |
|||
confirm._options.fullscreen = true; |
|||
|
|||
$mdDialog.show(confirm).then(function () { |
|||
var index = getActionIndex(action.id, vm.allActions); |
|||
if (index > -1) { |
|||
vm.allActions.splice(index, 1); |
|||
} |
|||
var targetActions = vm.widgetActions[action.actionSourceId]; |
|||
index = getActionIndex(action.id, targetActions); |
|||
if (index > -1) { |
|||
targetActions.splice(index, 1); |
|||
} |
|||
$scope.manageWidgetActionsForm.$setDirty(); |
|||
updateActions(); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
function openWidgetActionDialog($event, action, isAdd) { |
|||
var prevActionId = null; |
|||
if (!isAdd) { |
|||
prevActionId = action.id; |
|||
} |
|||
var availableActionSources = {}; |
|||
for (var id in vm.actionSources) { |
|||
var actionSource = vm.actionSources[id]; |
|||
if (actionSource.multiple) { |
|||
availableActionSources[id] = actionSource; |
|||
} else { |
|||
if (!isAdd && action.actionSourceId == id) { |
|||
availableActionSources[id] = actionSource; |
|||
} else { |
|||
var result = $filter('filter')(vm.allActions, {actionSourceId: id}); |
|||
if (!result || !result.length) { |
|||
availableActionSources[id] = actionSource; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
$mdDialog.show({ |
|||
controller: 'WidgetActionDialogController', |
|||
controllerAs: 'vm', |
|||
templateUrl: widgetActionDialogTemplate, |
|||
parent: angular.element($document[0].body), |
|||
locals: {isAdd: isAdd, fetchDashboardStates: vm.fetchDashboardStates, |
|||
actionSources: availableActionSources, widgetActions: vm.widgetActions, |
|||
action: angular.copy(action)}, |
|||
skipHide: true, |
|||
fullscreen: true, |
|||
targetEvent: $event |
|||
}).then(function (action) { |
|||
saveAction(action, prevActionId); |
|||
updateActions(); |
|||
}); |
|||
} |
|||
|
|||
function getActionIndex(id, actions) { |
|||
var result = $filter('filter')(actions, {id: id}, true); |
|||
if (result && result.length) { |
|||
return actions.indexOf(result[0]); |
|||
} |
|||
return -1; |
|||
} |
|||
|
|||
function saveAction(action, prevActionId) { |
|||
var actionSourceName = vm.actionSources[action.actionSourceId].name; |
|||
action.actionSourceName = utils.customTranslation(actionSourceName, actionSourceName); |
|||
action.typeName = $translate.instant(types.widgetActionTypes[action.type].name); |
|||
var actionSourceId = action.actionSourceId; |
|||
var widgetAction = angular.copy(action); |
|||
delete widgetAction.actionSourceId; |
|||
delete widgetAction.actionSourceName; |
|||
delete widgetAction.typeName; |
|||
var targetActions = vm.widgetActions[actionSourceId]; |
|||
if (!targetActions) { |
|||
targetActions = []; |
|||
vm.widgetActions[actionSourceId] = targetActions; |
|||
} |
|||
if (prevActionId) { |
|||
var index = getActionIndex(prevActionId, vm.allActions); |
|||
if (index > -1) { |
|||
vm.allActions[index] = action; |
|||
} |
|||
index = getActionIndex(prevActionId, targetActions); |
|||
if (index > -1) { |
|||
targetActions[index] = widgetAction; |
|||
} |
|||
} else { |
|||
vm.allActions.push(action); |
|||
targetActions.push(widgetAction); |
|||
} |
|||
$scope.manageWidgetActionsForm.$setDirty(); |
|||
} |
|||
|
|||
function reloadActions() { |
|||
vm.allActions = []; |
|||
vm.actions = []; |
|||
vm.actionsCount = 0; |
|||
|
|||
for (var actionSourceId in vm.widgetActions) { |
|||
var actionSource = vm.actionSources[actionSourceId]; |
|||
var actionSourceActions = vm.widgetActions[actionSourceId]; |
|||
for (var i=0;i<actionSourceActions.length;i++) { |
|||
var actionSourceAction = actionSourceActions[i]; |
|||
var action = angular.copy(actionSourceAction); |
|||
action.actionSourceId = actionSourceId; |
|||
action.actionSourceName = utils.customTranslation(actionSource.name, actionSource.name); |
|||
action.typeName = $translate.instant(types.widgetActionTypes[actionSourceAction.type].name); |
|||
vm.allActions.push(action); |
|||
} |
|||
} |
|||
|
|||
updateActions (); |
|||
} |
|||
|
|||
function updateActions () { |
|||
var result = $filter('orderBy')(vm.allActions, vm.query.order); |
|||
if (vm.query.search != null) { |
|||
result = $filter('filter')(result, {$: vm.query.search}); |
|||
} |
|||
vm.actionsCount = result.length; |
|||
var startIndex = vm.query.limit * (vm.query.page - 1); |
|||
vm.actions = result.slice(startIndex, startIndex + vm.query.limit); |
|||
} |
|||
} |
|||
@ -0,0 +1,33 @@ |
|||
/** |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
.tb-manage-widget-actions { |
|||
table.md-table { |
|||
tbody { |
|||
tr { |
|||
td { |
|||
&.tb-action-cell { |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
min-width: 100px; |
|||
max-width: 100px; |
|||
width: 100px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,99 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2017 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div ng-form="manageWidgetActionsForm" class="tb-manage-widget-actions md-whiteframe-z1" layout="column"> |
|||
<md-toolbar class="md-table-toolbar md-default" ng-show="vm.query.search === null"> |
|||
<div class="md-toolbar-tools"> |
|||
<span translate>widget-config.actions</span> |
|||
<span flex></span> |
|||
<md-button class="md-icon-button" ng-click="vm.addAction($event)"> |
|||
<md-icon>add</md-icon> |
|||
<md-tooltip md-direction="top"> |
|||
{{ 'widget-config.add-action' | translate }} |
|||
</md-tooltip> |
|||
</md-button> |
|||
<md-button class="md-icon-button" ng-click="vm.enterFilterMode()"> |
|||
<md-icon>search</md-icon> |
|||
<md-tooltip md-direction="top"> |
|||
{{ 'action.search' | translate }} |
|||
</md-tooltip> |
|||
</md-button> |
|||
</div> |
|||
</md-toolbar> |
|||
<md-toolbar class="md-table-toolbar md-default" ng-show="vm.query.search != null"> |
|||
<div class="md-toolbar-tools"> |
|||
<md-button class="md-icon-button" aria-label="{{ 'action.search' | translate }}"> |
|||
<md-icon aria-label="{{ 'action.search' | translate }}" class="material-icons">search</md-icon> |
|||
<md-tooltip md-direction="top"> |
|||
{{ 'widget-config.search-actions' | translate }} |
|||
</md-tooltip> |
|||
</md-button> |
|||
<md-input-container flex> |
|||
<label> </label> |
|||
<input ng-model="vm.query.search" name="querySearchInput" placeholder="{{ 'widget-config.search-actions' | translate }}"/> |
|||
</md-input-container> |
|||
<md-button class="md-icon-button" aria-label="Close" ng-click="vm.exitFilterMode()"> |
|||
<md-icon aria-label="Close" class="material-icons">close</md-icon> |
|||
<md-tooltip md-direction="top"> |
|||
{{ 'action.close' | translate }} |
|||
</md-tooltip> |
|||
</md-button> |
|||
</div> |
|||
</md-toolbar> |
|||
<md-table-container> |
|||
<table md-table> |
|||
<thead md-head md-order="vm.query.order" md-on-reorder="vm.onReorder"> |
|||
<tr md-row> |
|||
<th md-column md-order-by="actionSourceName"><span translate>widget-config.action-source</span></th> |
|||
<th md-column md-order-by="name"><span translate>widget-config.action-name</span></th> |
|||
<th md-column md-order-by="icon"><span translate>widget-config.action-icon</span></th> |
|||
<th md-column md-order-by="typeName"><span translate>widget-config.action-type</span></th> |
|||
<th md-column><span> </span></th> |
|||
</tr> |
|||
</thead> |
|||
<tbody md-body> |
|||
<tr md-row ng-repeat="action in vm.actions"> |
|||
<td md-cell>{{action.actionSourceName}}</td> |
|||
<td md-cell>{{action.name}}</td> |
|||
<td md-cell> |
|||
<md-icon aria-label="{{ 'widget-config.action-icon' | translate }}" class="material-icons">{{action.icon}}</md-icon> |
|||
</td> |
|||
<td md-cell>{{action.typeName}}</td> |
|||
<td md-cell class="tb-action-cell"> |
|||
<md-button class="md-icon-button" aria-label="{{ 'action.edit' | translate }}" |
|||
ng-click="vm.editAction($event, action)"> |
|||
<md-icon aria-label="{{ 'action.edit' | translate }}" class="material-icons">edit</md-icon> |
|||
<md-tooltip md-direction="top"> |
|||
{{ 'widget-config.edit-action' | translate }} |
|||
</md-tooltip> |
|||
</md-button> |
|||
<md-button class="md-icon-button" aria-label="{{'action.delete' | translate}}" ng-click="vm.deleteAction($event, action)"> |
|||
<md-icon aria-label="Delete" class="material-icons">delete</md-icon> |
|||
<md-tooltip md-direction="top"> |
|||
{{ 'widget-config.delete-action' | translate }} |
|||
</md-tooltip> |
|||
</md-button> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</md-table-container> |
|||
<md-table-pagination md-limit="vm.query.limit" md-limit-options="[10, 15, 20]" |
|||
md-page="vm.query.page" md-total="{{vm.actionsCount}}" |
|||
md-on-paginate="vm.onPaginate" md-page-select> |
|||
</md-table-pagination> |
|||
</div> |
|||
@ -0,0 +1,169 @@ |
|||
/* |
|||
* Copyright © 2016-2017 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0
|
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
|
|||
/*@ngInject*/ |
|||
export default function WidgetActionDialogController($scope, $mdDialog, $filter, $q, dashboardService, dashboardUtils, types, utils, |
|||
isAdd, fetchDashboardStates, actionSources, widgetActions, action) { |
|||
|
|||
var vm = this; |
|||
|
|||
vm.types = types; |
|||
|
|||
vm.isAdd = isAdd; |
|||
vm.fetchDashboardStates = fetchDashboardStates; |
|||
vm.actionSources = actionSources; |
|||
vm.widgetActions = widgetActions; |
|||
|
|||
vm.targetDashboardStateSearchText = ''; |
|||
|
|||
vm.selectedDashboardStateIds = []; |
|||
|
|||
if (vm.isAdd) { |
|||
vm.action = { |
|||
id: utils.guid() |
|||
}; |
|||
} else { |
|||
vm.action = action; |
|||
} |
|||
|
|||
vm.actionSourceName = actionSourceName; |
|||
|
|||
vm.targetDashboardStateSearchTextChanged = function() { |
|||
} |
|||
|
|||
vm.dashboardStateSearch = dashboardStateSearch; |
|||
vm.cancel = cancel; |
|||
vm.save = save; |
|||
|
|||
$scope.$watch("vm.action.name", function(newVal, prevVal) { |
|||
if (!angular.equals(newVal, prevVal) && vm.action.name != null) { |
|||
checkActionName(); |
|||
} |
|||
}); |
|||
|
|||
$scope.$watch("vm.action.actionSourceId", function(newVal, prevVal) { |
|||
if (!angular.equals(newVal, prevVal) && vm.action.actionSourceId != null) { |
|||
checkActionName(); |
|||
} |
|||
}); |
|||
|
|||
$scope.$watch("vm.action.targetDashboardId", function() { |
|||
vm.selectedDashboardStateIds = []; |
|||
if (vm.action.targetDashboardId) { |
|||
dashboardService.getDashboard(vm.action.targetDashboardId).then( |
|||
function success(dashboard) { |
|||
dashboard = dashboardUtils.validateAndUpdateDashboard(dashboard); |
|||
var states = dashboard.configuration.states; |
|||
vm.selectedDashboardStateIds = Object.keys(states); |
|||
} |
|||
); |
|||
} |
|||
}); |
|||
|
|||
$scope.$watch('vm.action.type', function(newType) { |
|||
if (newType) { |
|||
switch (newType) { |
|||
case vm.types.widgetActionTypes.openDashboardState.value: |
|||
case vm.types.widgetActionTypes.updateDashboardState.value: |
|||
case vm.types.widgetActionTypes.openDashboard.value: |
|||
if (angular.isUndefined(vm.action.setEntityId)) { |
|||
vm.action.setEntityId = true; |
|||
} |
|||
break; |
|||
} |
|||
} |
|||
}); |
|||
|
|||
function checkActionName() { |
|||
var actionNameIsUnique = true; |
|||
if (vm.action.actionSourceId && vm.action.name) { |
|||
var sourceActions = vm.widgetActions[vm.action.actionSourceId]; |
|||
if (sourceActions) { |
|||
var result = $filter('filter')(sourceActions, {name: vm.action.name}, true); |
|||
if (result && result.length && result[0].id !== vm.action.id) { |
|||
actionNameIsUnique = false; |
|||
} |
|||
} |
|||
} |
|||
$scope.theForm.name.$setValidity('actionNameNotUnique', actionNameIsUnique); |
|||
} |
|||
|
|||
function actionSourceName (actionSource) { |
|||
if (actionSource) { |
|||
return utils.customTranslation(actionSource.name, actionSource.name); |
|||
} else { |
|||
return ''; |
|||
} |
|||
} |
|||
|
|||
function dashboardStateSearch (query) { |
|||
if (vm.action.type == vm.types.widgetActionTypes.openDashboard.value) { |
|||
var deferred = $q.defer(); |
|||
var result = query ? vm.selectedDashboardStateIds.filter( |
|||
createFilterForDashboardState(query)) : vm.selectedDashboardStateIds; |
|||
if (result && result.length) { |
|||
deferred.resolve(result); |
|||
} else { |
|||
deferred.resolve([query]); |
|||
} |
|||
return deferred.promise; |
|||
} else { |
|||
return vm.fetchDashboardStates({query: query}); |
|||
} |
|||
} |
|||
|
|||
function createFilterForDashboardState (query) { |
|||
var lowercaseQuery = angular.lowercase(query); |
|||
return function filterFn(stateId) { |
|||
return (angular.lowercase(stateId).indexOf(lowercaseQuery) === 0); |
|||
}; |
|||
} |
|||
|
|||
function cleanupAction(action) { |
|||
var result = {}; |
|||
result.id = action.id; |
|||
result.actionSourceId = action.actionSourceId; |
|||
result.name = action.name; |
|||
result.icon = action.icon; |
|||
result.type = action.type; |
|||
switch (action.type) { |
|||
case vm.types.widgetActionTypes.openDashboardState.value: |
|||
case vm.types.widgetActionTypes.updateDashboardState.value: |
|||
result.targetDashboardStateId = action.targetDashboardStateId; |
|||
result.openRightLayout = action.openRightLayout; |
|||
result.setEntityId = action.setEntityId; |
|||
break; |
|||
case vm.types.widgetActionTypes.openDashboard.value: |
|||
result.targetDashboardId = action.targetDashboardId; |
|||
result.targetDashboardStateId = action.targetDashboardStateId; |
|||
result.setEntityId = action.setEntityId; |
|||
break; |
|||
case vm.types.widgetActionTypes.custom.value: |
|||
result.customFunction = action.customFunction; |
|||
break; |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
function cancel() { |
|||
$mdDialog.cancel(); |
|||
} |
|||
|
|||
function save() { |
|||
$scope.theForm.$setPristine(); |
|||
$mdDialog.hide(cleanupAction(vm.action)); |
|||
} |
|||
} |
|||
@ -0,0 +1,133 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2017 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<md-dialog class="tb-widget-action-dialog" aria-label="{{'widget-config.action' | translate }}" style="min-width: 600px;"> |
|||
<form name="theForm" ng-submit="vm.save()"> |
|||
<md-toolbar> |
|||
<div class="md-toolbar-tools"> |
|||
<h2>{{ (vm.isAdd ? 'widget-config.add-action' : 'widget-config.edit-action') | translate }}</h2> |
|||
<span flex></span> |
|||
<md-button class="md-icon-button" ng-click="vm.cancel()"> |
|||
<ng-md-icon icon="close" aria-label="{{ 'action.close' | translate }}"></ng-md-icon> |
|||
</md-button> |
|||
</div> |
|||
</md-toolbar> |
|||
<md-progress-linear class="md-warn" md-mode="indeterminate" ng-disabled="!loading" ng-show="loading"></md-progress-linear> |
|||
<span style="min-height: 5px;" flex="" ng-show="!loading"></span> |
|||
<md-dialog-content> |
|||
<div class="md-dialog-content"> |
|||
<md-content class="md-padding" layout="column"> |
|||
<fieldset ng-disabled="loading" layout="column"> |
|||
<md-input-container class="md-block"> |
|||
<label translate>widget-config.action-source</label> |
|||
<md-select name="actionSource" required aria-label="{{ 'widget-config.action-source' | translate }}" ng-model="vm.action.actionSourceId"> |
|||
<md-option ng-repeat="(actionSourceId, actionSource) in vm.actionSources" ng-value="actionSourceId"> |
|||
{{vm.actionSourceName(actionSource)}} |
|||
</md-option> |
|||
</md-select> |
|||
<div ng-messages="theForm.actionSource.$error"> |
|||
<div ng-message="required" translate>widget-config.action-source-required</div> |
|||
</div> |
|||
</md-input-container> |
|||
<md-input-container class="md-block"> |
|||
<label translate>widget-config.action-name</label> |
|||
<input name="name" required ng-model="vm.action.name"> |
|||
<div ng-messages="theForm.name.$error"> |
|||
<div ng-message="required" translate>widget-config.action-name-required</div> |
|||
<div ng-message="actionNameNotUnique" translate>widget-config.action-name-not-unique</div> |
|||
</div> |
|||
</md-input-container> |
|||
<tb-material-icon-select ng-model="vm.action.icon"> |
|||
</tb-material-icon-select> |
|||
<md-input-container class="md-block"> |
|||
<label translate>widget-config.action-type</label> |
|||
<md-select name="actionType" required aria-label="{{ 'widget-config.action-type' | translate }}" ng-model="vm.action.type"> |
|||
<md-option ng-repeat="actionType in vm.types.widgetActionTypes" ng-value="actionType.value"> |
|||
{{ actionType.name | translate }} |
|||
</md-option> |
|||
</md-select> |
|||
<div ng-messages="theForm.actionType.$error"> |
|||
<div ng-message="required" translate>widget-config.action-type-required</div> |
|||
</div> |
|||
</md-input-container> |
|||
<div layout="column" |
|||
style="padding-bottom: 20px;" |
|||
ng-if="vm.action.type == vm.types.widgetActionTypes.openDashboard.value"> |
|||
<div class="md-caption tb-required" |
|||
style="padding-left: 3px; padding-bottom: 10px; color: rgba(0,0,0,0.57);" translate>widget-action.target-dashboard</div> |
|||
<tb-dashboard-autocomplete the-form="theForm" |
|||
tb-required="true" |
|||
ng-model="vm.action.targetDashboardId" |
|||
select-first-dashboard="false"> |
|||
</tb-dashboard-autocomplete> |
|||
</div> |
|||
<md-autocomplete ng-if="vm.action.type == vm.types.widgetActionTypes.openDashboardState.value || |
|||
vm.action.type == vm.types.widgetActionTypes.updateDashboardState.value || |
|||
vm.action.type == vm.types.widgetActionTypes.openDashboard.value" |
|||
ng-required="vm.action.type == vm.types.widgetActionTypes.openDashboardState.value" |
|||
md-no-cache="true" |
|||
md-input-name="targetDashboardState" |
|||
ng-model="vm.action.targetDashboardStateId" |
|||
md-selected-item="vm.action.targetDashboardStateId" |
|||
md-search-text="vm.targetDashboardStateSearchText" |
|||
md-search-text-change="vm.targetDashboardStateSearchTextChanged()" |
|||
md-items="item in vm.dashboardStateSearch(vm.targetDashboardStateSearchText)" |
|||
md-item-text="item" |
|||
md-min-length="0" |
|||
md-floating-label="{{ 'widget-action.target-dashboard-state' | translate }}" |
|||
md-select-on-match="true"> |
|||
<md-item-template> |
|||
<div> |
|||
<span md-highlight-text="vm.targetDashboardStateSearchText" md-highlight-flags="^i">{{item}}</span> |
|||
</div> |
|||
</md-item-template> |
|||
<div ng-messages="theForm.targetDashboardState.$error"> |
|||
<div translate ng-message="required">widget-action.target-dashboard-state-required</div> |
|||
</div> |
|||
</md-autocomplete> |
|||
<md-checkbox ng-if="vm.action.type == vm.types.widgetActionTypes.openDashboardState.value || |
|||
vm.action.type == vm.types.widgetActionTypes.updateDashboardState.value" |
|||
flex aria-label="{{ 'widget-action.open-right-layout' | translate }}" |
|||
ng-model="vm.action.openRightLayout">{{ 'widget-action.open-right-layout' | translate }} |
|||
</md-checkbox> |
|||
<md-checkbox ng-if="vm.action.type == vm.types.widgetActionTypes.openDashboardState.value || |
|||
vm.action.type == vm.types.widgetActionTypes.updateDashboardState.value || |
|||
vm.action.type == vm.types.widgetActionTypes.openDashboard.value" |
|||
flex aria-label="{{ 'widget-action.set-entity-from-widget' | translate }}" |
|||
ng-model="vm.action.setEntityId">{{ 'widget-action.set-entity-from-widget' | translate }} |
|||
</md-checkbox> |
|||
<tb-js-func ng-if="vm.action.type == vm.types.widgetActionTypes.custom.value" |
|||
ng-model="vm.action.customFunction" |
|||
function-args="{{ ['$event', 'widgetContext', 'entityId'] }}" |
|||
validation-args="{{ [] }}"> |
|||
</tb-js-func> |
|||
</fieldset> |
|||
</md-content> |
|||
</div> |
|||
</md-dialog-content> |
|||
<md-dialog-actions layout="row"> |
|||
<span flex></span> |
|||
<md-button ng-disabled="loading || theForm.$invalid || !theForm.$dirty" type="submit" |
|||
class="md-raised md-primary"> |
|||
{{ (vm.isAdd ? 'action.add' : 'action.save') | translate }} |
|||
</md-button> |
|||
<md-button ng-disabled="loading" ng-click="vm.cancel()" style="margin-right:20px;"> |
|||
{{ 'action.cancel' | translate }} |
|||
</md-button> |
|||
</md-dialog-actions> |
|||
</form> |
|||
</md-dialog> |
|||
Loading…
Reference in new issue