Igor Kulikov
9 years ago
26 changed files with 832 additions and 505 deletions
@ -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-entity-alias-dialog { |
|||
.tb-resolve-multiple-switch { |
|||
padding-left: 10px; |
|||
.resolve-multiple-switch { |
|||
margin: 0; |
|||
} |
|||
.resolve-multiple-label { |
|||
margin: 5px 0; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,73 @@ |
|||
<!-- |
|||
|
|||
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-entity-alias-dialog" style="width: 600px;" aria-label="{{ (vm.isAdd ? 'alias.add' : 'alias.edit') | translate }}"> |
|||
<form name="theForm" ng-submit="vm.save()"> |
|||
<md-toolbar> |
|||
<div class="md-toolbar-tools"> |
|||
<h2>{{ (vm.isAdd ? 'alias.add' : 'alias.edit') | translate }}</h2> |
|||
<span flex></span> |
|||
<md-button class="md-icon-button" ng-click="vm.cancel()"> |
|||
<ng-md-icon icon="close" aria-label="{{ 'dialog.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"> |
|||
<fieldset ng-disabled="loading"> |
|||
<div flex layout="column"> |
|||
<div layout="row"> |
|||
<md-input-container flex class="md-block"> |
|||
<label translate>alias.name</label> |
|||
<input required name="aliasName" |
|||
ng-model="vm.alias.alias" |
|||
aria-label="{{ 'alias.name' | translate }}"> |
|||
<div ng-messages="theForm.aliasName.$error"> |
|||
<div ng-message="required" translate>alias.name-required</div> |
|||
<div ng-message="duplicateAliasName" translate>alias.duplicate-alias</div> |
|||
</div> |
|||
</md-input-container> |
|||
<section class="tb-resolve-multiple-switch" layout="column" layout-align="start center"> |
|||
<label class="tb-small resolve-multiple-label" translate>alias.resolve-multiple</label> |
|||
<md-switch class="resolve-multiple-switch" ng-model="vm.alias.filter.resolveMultiple" |
|||
aria-label="{{ 'alias.resolve-multiple' | translate }}"> |
|||
</md-switch> |
|||
</section> |
|||
</div> |
|||
<tb-entity-filter |
|||
ng-model="vm.alias.filter" |
|||
allowed-entity-types="vm.allowedEntityTypes" |
|||
the-form="theForm"> |
|||
</tb-entity-filter> |
|||
<div class="tb-error-messages" ng-messages="theForm.$error" role="alert"> |
|||
<div translate ng-message="entityFilter" class="tb-error-message">alias.entity-filter-no-entity-matched</div> |
|||
</div> |
|||
</div> |
|||
</fieldset> |
|||
</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> |
|||
@ -1,100 +0,0 @@ |
|||
<!-- |
|||
|
|||
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-entity-filter-dialog" style="width: 600px;" aria-label="{{ 'alias.entity-filter' | translate }}"> |
|||
<form name="theForm" ng-submit="vm.save()"> |
|||
<md-toolbar> |
|||
<div class="md-toolbar-tools"> |
|||
<h2>{{ (vm.isAdd ? 'alias.create-entity-filter' : 'alias.edit-entity-filter') | translate }}</h2> |
|||
<span flex></span> |
|||
<md-button class="md-icon-button" ng-click="vm.cancel()"> |
|||
<ng-md-icon icon="close" aria-label="{{ 'dialog.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"> |
|||
<fieldset ng-disabled="loading"> |
|||
<div flex layout="column"> |
|||
<md-input-container> |
|||
<label>{{ 'alias.filter-type' | translate }}</label> |
|||
<md-select required name="filterType" |
|||
ng-model="vm.filter.type" aria-label="{{ 'alias.filter-type' | translate }}"> |
|||
<md-option ng-repeat="type in vm.types.aliasFilterType" ng-value="type.value"> |
|||
{{type.name | translate}} |
|||
</md-option> |
|||
</md-select> |
|||
<div ng-messages="theForm.filterType.$error"> |
|||
<div ng-message="required" translate>alias.filter-type-required</div> |
|||
</div> |
|||
</md-input-container> |
|||
<section layout="column" ng-if="vm.filter.type == vm.types.aliasFilterType.entityList.value" id="entityListFilter"> |
|||
<md-checkbox flex aria-label="{{ 'alias.use-state-entity' | translate }}" |
|||
ng-model="vm.filter.stateEntity">{{ 'alias.use-state-entity' | translate }} |
|||
</md-checkbox> |
|||
<tb-entity-type-select |
|||
ng-if="!vm.filter.stateEntity" |
|||
ng-model="vm.filter.entityType" |
|||
the-form="theForm" |
|||
ng-disabled="vm.filter.stateEntity" |
|||
tb-required="!vm.filter.stateEntity" |
|||
allowed-entity-types="vm.allowedEntityTypes"> |
|||
</tb-entity-type-select> |
|||
<tb-entity-list |
|||
ng-if="!vm.filter.stateEntity" |
|||
ng-model="vm.filter.entityList" |
|||
ng-disabled="vm.filter.stateEntity" |
|||
tb-required="!vm.filter.stateEntity" |
|||
entity-type="vm.filter.entityType"> |
|||
</tb-entity-list> |
|||
</section> |
|||
<section flex layout="column" ng-if="vm.filter.type == vm.types.aliasFilterType.entityName.value" id="entityNameFilter"> |
|||
<tb-entity-type-select |
|||
ng-model="vm.filter.entityType" |
|||
the-form="theForm" |
|||
tb-required="true" |
|||
allowed-entity-types="vm.allowedEntityTypes"> |
|||
</tb-entity-type-select> |
|||
<md-input-container flex> |
|||
<label translate>entity.name-starts-with</label> |
|||
<input required name="entityNameFilter" |
|||
ng-model="vm.filter.entityNameFilter" |
|||
aria-label="{{ 'entity.name-starts-with' | translate }}"> |
|||
<div ng-messages="theForm.entityNameFilter.$error"> |
|||
<div ng-message="required" translate>entity.entity-name-filter-required</div> |
|||
</div> |
|||
|
|||
</md-input-container> |
|||
</section> |
|||
<div class="tb-error-messages" ng-messages="theForm.$error" role="alert"> |
|||
<div translate ng-message="entityFilter" class="tb-error-message">alias.entity-filter-no-entity-matched</div> |
|||
</div> |
|||
</div> |
|||
</fieldset> |
|||
</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"> |
|||
{{ '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> |
|||
@ -0,0 +1,106 @@ |
|||
/* |
|||
* 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. |
|||
*/ |
|||
|
|||
/* eslint-disable import/no-unresolved, import/default */ |
|||
|
|||
import entityFilterViewTemplate from './entity-filter-view.tpl.html'; |
|||
|
|||
/* eslint-enable import/no-unresolved, import/default */ |
|||
|
|||
import './entity-filter-view.scss'; |
|||
|
|||
/*@ngInject*/ |
|||
export default function EntityFilterViewDirective($compile, $templateCache, $q, $document, $mdDialog, $translate, types/*, entityService*/) { |
|||
|
|||
var linker = function (scope, element, attrs, ngModelCtrl) { |
|||
|
|||
var template = $templateCache.get(entityFilterViewTemplate); |
|||
element.html(template); |
|||
|
|||
scope.ngModelCtrl = ngModelCtrl; |
|||
scope.types = types; |
|||
scope.filterDisplayValue = ''; |
|||
|
|||
scope.$watch('filter', function () { |
|||
scope.updateDisplayValue(); |
|||
}); |
|||
|
|||
scope.updateDisplayValue = function() { |
|||
if (scope.filter && scope.filter.type) { |
|||
var entityType; |
|||
var prefix; |
|||
switch (scope.filter.type) { |
|||
case types.aliasFilterType.entityList.value: |
|||
entityType = scope.filter.entityType; |
|||
var count = scope.filter.entityList.length; |
|||
scope.filterDisplayValue = $translate.instant(types.entityTypeTranslations[entityType].list, {count: count}, 'messageformat'); |
|||
break; |
|||
case types.aliasFilterType.entityName.value: |
|||
entityType = scope.filter.entityType; |
|||
prefix = scope.filter.entityNameFilter; |
|||
scope.filterDisplayValue = $translate.instant(types.entityTypeTranslations[entityType].nameStartsWith, {prefix: prefix}); |
|||
break; |
|||
case types.aliasFilterType.stateEntity.value: |
|||
scope.filterDisplayValue = $translate.instant('alias.filter-type-state-entity-description'); |
|||
break; |
|||
case types.aliasFilterType.assetType.value: |
|||
var assetType = scope.filter.assetType; |
|||
prefix = scope.filter.assetNameFilter; |
|||
if (prefix && prefix.length) { |
|||
scope.filterDisplayValue = $translate.instant('alias.filter-type-asset-type-and-name-description', {assetType: assetType, prefix: prefix}); |
|||
} else { |
|||
scope.filterDisplayValue = $translate.instant('alias.filter-type-asset-type-description', {assetType: assetType}); |
|||
} |
|||
break; |
|||
case types.aliasFilterType.deviceType.value: |
|||
var deviceType = scope.filter.deviceType; |
|||
prefix = scope.filter.deviceNameFilter; |
|||
if (prefix && prefix.length) { |
|||
scope.filterDisplayValue = $translate.instant('alias.filter-type-device-type-and-name-description', {deviceType: deviceType, prefix: prefix}); |
|||
} else { |
|||
scope.filterDisplayValue = $translate.instant('alias.filter-type-device-type-description', {deviceType: deviceType}); |
|||
} |
|||
break; |
|||
//TODO: Alias filter
|
|||
default: |
|||
scope.filterDisplayValue = scope.filter.type; |
|||
break; |
|||
} |
|||
} else { |
|||
scope.filterDisplayValue = ''; |
|||
} |
|||
} |
|||
|
|||
ngModelCtrl.$render = function () { |
|||
if (ngModelCtrl.$viewValue) { |
|||
scope.filter = ngModelCtrl.$viewValue; |
|||
} else { |
|||
scope.filter = null; |
|||
} |
|||
} |
|||
|
|||
$compile(element.contents())(scope); |
|||
|
|||
} |
|||
|
|||
return { |
|||
restrict: "E", |
|||
require: "^ngModel", |
|||
link: linker, |
|||
scope: true |
|||
}; |
|||
|
|||
} |
|||
@ -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-entity-filter-view { |
|||
.entity-filter-empty { |
|||
color: rgba(221, 44, 0, 0.87); |
|||
font-size: 14px; |
|||
line-height: 16px; |
|||
} |
|||
.entity-filter-type { |
|||
font-size: 14px; |
|||
line-height: 16px; |
|||
color: rgba(0, 0, 0, 0.570588); |
|||
} |
|||
.entity-filter-value { |
|||
font-size: 14px; |
|||
line-height: 16px; |
|||
color: rgba(0, 0, 0, 0.570588); |
|||
} |
|||
} |
|||
@ -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 layout='column' class="tb-entity-filter-view"> |
|||
<div ng-if="!filter || !filter.type" class="entity-filter-empty" translate>alias.no-entity-filter-specified</div> |
|||
<div ng-if="filter && filter.type" layout="column"> |
|||
<div class="entity-filter-value">{{ filterDisplayValue }}</div> |
|||
</div> |
|||
</div> |
|||
Loading…
Reference in new issue