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

add support for flexible entity dataKeys order (timeseries mixed with attributes in arbitrary way) in the widget config

Browse Source
This commit is contained in:
pgrisu 2019-05-10 12:08:02 +02:00
parent e157f76fcf
commit 76e5aa24fa
3 changed files with 69 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
ui/src/app/components/datasource-entity.directive.js
View File

@ -50,11 +50,8 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
scope.alarmFields.push(alarmField); scope.alarmFields.push(alarmField);
} }
scope.selectedTimeseriesDataKey = null; scope.selectedDataKey = null;
scope.timeseriesDataKeySearchText = null; scope.dataKeySearchText = null;
scope.selectedAttributeDataKey = null;
scope.attributeDataKeySearchText = null;
scope.selectedAlarmDataKey = null; scope.selectedAlarmDataKey = null;
scope.alarmDataKeySearchText = null; scope.alarmDataKeySearchText = null;
@ -92,11 +89,7 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
} }
}); });
scope.$watch('timeseriesDataKeys', function () { scope.$watch('dataKeys', function () {
updateDataKeys();
}, true);
scope.$watch('attributeDataKeys', function () {
updateDataKeys(); updateDataKeys();
}, true); }, true);
@ -107,10 +100,9 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
function updateDataKeys() { function updateDataKeys() {
if (ngModelCtrl.$viewValue) { if (ngModelCtrl.$viewValue) {
var dataKeys = []; var dataKeys = [];
dataKeys = dataKeys.concat(scope.timeseriesDataKeys); dataKeys = dataKeys.concat(scope.dataKeys);
dataKeys = dataKeys.concat(scope.attributeDataKeys);
dataKeys = dataKeys.concat(scope.alarmDataKeys); dataKeys = dataKeys.concat(scope.alarmDataKeys);
if (ngModelCtrl.$viewValue.dataKeys != dataKeys) if (!angular.equals(ngModelCtrl.$viewValue.dataKeys, dataKeys))
{ {
ngModelCtrl.$setDirty(); ngModelCtrl.$setDirty();
ngModelCtrl.$viewValue.dataKeys = dataKeys; ngModelCtrl.$viewValue.dataKeys = dataKeys;
@ -128,21 +120,17 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
} else { } else {
scope.entityAlias = null; scope.entityAlias = null;
} }
var timeseriesDataKeys = []; var dataKeys = [];
var attributeDataKeys = [];
var alarmDataKeys = []; var alarmDataKeys = [];
for (var d in ngModelCtrl.$viewValue.dataKeys) { for (var d in ngModelCtrl.$viewValue.dataKeys) {
var dataKey = ngModelCtrl.$viewValue.dataKeys[d]; var dataKey = ngModelCtrl.$viewValue.dataKeys[d];
if (dataKey.type === types.dataKeyType.timeseries) { if ((dataKey.type === types.dataKeyType.timeseries) || (dataKey.type === types.dataKeyType.attribute)) {
timeseriesDataKeys.push(dataKey); dataKeys.push(dataKey);
} else if (dataKey.type === types.dataKeyType.attribute) {
attributeDataKeys.push(dataKey);
} else if (dataKey.type === types.dataKeyType.alarm) { } else if (dataKey.type === types.dataKeyType.alarm) {
alarmDataKeys.push(dataKey); alarmDataKeys.push(dataKey);
} }
} }
scope.timeseriesDataKeys = timeseriesDataKeys; scope.dataKeys = dataKeys;
scope.attributeDataKeys = attributeDataKeys;
scope.alarmDataKeys = alarmDataKeys; scope.alarmDataKeys = alarmDataKeys;
} }
}; };
@ -152,30 +140,19 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
} }
scope.selectedEntityAliasChange = function () { scope.selectedEntityAliasChange = function () {
if (!scope.timeseriesDataKeySearchText || scope.timeseriesDataKeySearchText === '') { if (!scope.dataKeySearchText || scope.dataKeySearchText === '') {
scope.timeseriesDataKeySearchText = scope.timeseriesDataKeySearchText === '' ? null : ''; scope.dataKeySearchText = scope.dataKeySearchText === '' ? null : '';
}
if (!scope.attributeDataKeySearchText || scope.attributeDataKeySearchText === '') {
scope.attributeDataKeySearchText = scope.attributeDataKeySearchText === '' ? null : '';
} }
if (!scope.alarmDataKeySearchText || scope.alarmDataKeySearchText === '') { if (!scope.alarmDataKeySearchText || scope.alarmDataKeySearchText === '') {
scope.alarmDataKeySearchText = scope.alarmDataKeySearchText === '' ? null : ''; scope.alarmDataKeySearchText = scope.alarmDataKeySearchText === '' ? null : '';
} }
}; };
scope.transformTimeseriesDataKeyChip = function (chip) { scope.transformDataKeyChip = function (chip) {
if (scope.maxDataKeys > 0 && ngModelCtrl.$viewValue.dataKeys.length >= scope.maxDataKeys ) { if (scope.maxDataKeys > 0 && ngModelCtrl.$viewValue.dataKeys.length >= scope.maxDataKeys ) {
return null; return null;
} else { } else {
return scope.generateDataKey({chip: chip, type: types.dataKeyType.timeseries}); return scope.generateDataKey({chip: chip.name, type: chip.type});
}
};
scope.transformAttributeDataKeyChip = function (chip) {
if (scope.maxDataKeys > 0 && ngModelCtrl.$viewValue.dataKeys.length >= scope.maxDataKeys ) {
return null;
} else {
return scope.generateDataKey({chip: chip, type: types.dataKeyType.attribute});
} }
}; };
@ -230,10 +207,8 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
w.triggerHandler('resize'); w.triggerHandler('resize');
} }
}).then(function (dataKey) { }).then(function (dataKey) {
if (dataKey.type === types.dataKeyType.timeseries) { if ((dataKey.type === types.dataKeyType.timeseries) || (dataKey.type === types.dataKeyType.attribute)) {
scope.timeseriesDataKeys[index] = dataKey; scope.dataKeys[index] = dataKey;
} else if (dataKey.type === types.dataKeyType.attribute) {
scope.attributeDataKeys[index] = dataKey;
} else if (dataKey.type === types.dataKeyType.alarm) { } else if (dataKey.type === types.dataKeyType.alarm) {
scope.alarmDataKeys[index] = dataKey; scope.alarmDataKeys[index] = dataKey;
} }
@ -242,7 +217,7 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
}); });
}; };
scope.dataKeysSearch = function (searchText, type) { scope.dataKeysSearch = function (searchText) {
if (scope.widgetType == types.widgetType.alarm.value) { if (scope.widgetType == types.widgetType.alarm.value) {
var dataKeys = searchText ? scope.alarmFields.filter( var dataKeys = searchText ? scope.alarmFields.filter(
scope.createFilterForDataKey(searchText)) : scope.alarmFields; scope.createFilterForDataKey(searchText)) : scope.alarmFields;
@ -250,9 +225,25 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
} else { } else {
if (scope.entityAlias) { if (scope.entityAlias) {
var deferred = $q.defer(); var deferred = $q.defer();
scope.fetchEntityKeys({entityAliasId: scope.entityAlias.id, query: searchText, type: type}) scope.fetchEntityKeys({entityAliasId: scope.entityAlias.id, query: searchText, type: types.dataKeyType.timeseries})
.then(function (dataKeys) { .then(function (dataKeys) {
deferred.resolve(dataKeys); var items = [];
for (var i = 0; i < dataKeys.length; i++) {
items.push({ name: dataKeys[i], type: types.dataKeyType.timeseries });
}
if (scope.widgetType == types.widgetType.latest.value) {
scope.fetchEntityKeys({entityAliasId: scope.entityAlias.id, query: searchText, type: types.dataKeyType.attribute})
.then(function (dataKeys) {
for (var i = 0; i < dataKeys.length; i++) {
items.push({ name: dataKeys[i], type: types.dataKeyType.attribute });
}
deferred.resolve(items);
}, function (e) {
deferred.reject(e);
});
}
else
deferred.resolve(items);
}, function (e) { }, function (e) {
deferred.reject(e); deferred.reject(e);
}); });
@ -270,13 +261,13 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
}; };
}; };
scope.createKey = function (event, chipsId) { scope.createKey = function (event, type, chipsId) {
var chipsChild = $(chipsId, element)[0].firstElementChild; var chipsChild = $(chipsId, element)[0].firstElementChild;
var el = angular.element(chipsChild); var el = angular.element(chipsChild);
var chipBuffer = el.scope().$mdChipsCtrl.getChipBuffer(); var chipBuffer = el.scope().$mdChipsCtrl.getChipBuffer();
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
el.scope().$mdChipsCtrl.appendChip(chipBuffer.trim()); el.scope().$mdChipsCtrl.appendChip({ name: chipBuffer.trim(), type: type});
el.scope().$mdChipsCtrl.resetChipBuffer(); el.scope().$mdChipsCtrl.resetChipBuffer();
} }

1
ui/src/app/components/datasource-entity.scss
View File

@ -16,6 +16,7 @@
@import "../../scss/constants"; @import "../../scss/constants";
.tb-entity-alias-autocomplete, .tb-entity-alias-autocomplete,
.tb-datakey-autocomplete,
.tb-timeseries-datakey-autocomplete, .tb-timeseries-datakey-autocomplete,
.tb-attribute-datakey-autocomplete, .tb-attribute-datakey-autocomplete,
.tb-alarm-datakey-autocomplete { .tb-alarm-datakey-autocomplete {

95
ui/src/app/components/datasource-entity.tpl.html
View File

@ -25,30 +25,38 @@
<section flex layout='column'> <section flex layout='column'>
<section flex layout='column' layout-align="center" style="padding-left: 4px;"> <section flex layout='column' layout-align="center" style="padding-left: 4px;">
<md-chips flex ng-if="widgetType != types.widgetType.alarm.value" <md-chips flex ng-if="widgetType != types.widgetType.alarm.value"
id="timeseries_datakey_chips" id="datakey_chips"
ng-model="timeseriesDataKeys" md-autocomplete-snap ng-model="dataKeys" md-autocomplete-snap
md-transform-chip="transformTimeseriesDataKeyChip($chip)" md-transform-chip="transformDataKeyChip($chip)"
md-require-match="false"> md-require-match="false">
<md-autocomplete <md-autocomplete
md-no-cache="true" md-no-cache="true"
id="timeseries_datakey" id="datakey"
md-selected-item="selectedTimeseriesDataKey" md-selected-item="selectedDataKey"
md-search-text="timeseriesDataKeySearchText" md-search-text="dataKeySearchText"
md-items="item in dataKeysSearch(timeseriesDataKeySearchText, types.dataKeyType.timeseries)" md-items="item in dataKeysSearch(dataKeySearchText)"
md-item-text="item.name" md-item-text="item.name"
md-min-length="0" md-min-length="0"
placeholder="{{'datakey.timeseries' | translate }}" placeholder=""
md-menu-class="tb-timeseries-datakey-autocomplete"> md-menu-class="tb-datakey-autocomplete">
<span md-highlight-text="timeseriesDataKeySearchText" md-highlight-flags="^i">{{item}}</span> <span ng-show="item.type==types.dataKeyType.attribute"><ng-md-icon size="16" icon="perm_device_information"></ng-md-icon></span>
<span ng-show="item.type==types.dataKeyType.timeseries"><ng-md-icon size="16" icon="timeline"></ng-md-icon></span>
<span md-highlight-text="dataKeySearchText" md-highlight-flags="^i">{{item.name}}</span>
<md-not-found> <md-not-found>
<div class="tb-not-found"> <div class="tb-not-found">
<div class="tb-no-entries" ng-if="!textIsNotEmpty(timeseriesDataKeySearchText)"> <div class="tb-no-entries" ng-if="!textIsNotEmpty(dataKeySearchText)">
<span translate>entity.no-keys-found</span> <span translate>entity.no-keys-found</span>
</div> </div>
<div ng-if="textIsNotEmpty(timeseriesDataKeySearchText)"> <div ng-if="textIsNotEmpty(dataKeySearchText)">
<span translate translate-values='{ key: "{{timeseriesDataKeySearchText | truncate:true:6:&apos;...&apos;}}" }'>entity.no-key-matching</span> <span translate translate-values='{ key: "{{dataKeySearchText | truncate:true:6:&apos;...&apos;}}" }'>entity.no-key-matching</span>
<span>{{'entity.create-new-key' | translate }} </span>
<span ng-show="widgetType == types.widgetType.latest.value">
<md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
<ng-md-icon size="16" icon="perm_device_information" ng-click="createKey($event, types.dataKeyType.attribute, '#datakey_chips')"></ng-md-icon>
</span>
<span> <span>
<a translate ng-click="createKey($event, '#timeseries_datakey_chips')">entity.create-new-key</a> <md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
<ng-md-icon size="16" icon="timeline" ng-click="createKey($event, types.dataKeyType.timeseries, '#datakey_chips')"></ng-md-icon>
</span> </span>
</div> </div>
</div> </div>
@ -61,57 +69,14 @@
</div> </div>
<div layout="row"> <div layout="row">
<div class="tb-chip-label" tb-chip-draggable> <div class="tb-chip-label" tb-chip-draggable>
{{$chip.label}} <span ng-show="$chip.type==types.dataKeyType.attribute">
</div> <md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
<div class="tb-chip-separator">: </div> <ng-md-icon size="20" icon="perm_device_information"></ng-md-icon>
<div class="tb-chip-label"> </span>
<strong ng-if="!$chip.postFuncBody">{{$chip.name}}</strong> <span ng-show="$chip.type==types.dataKeyType.timeseries">
<strong ng-if="$chip.postFuncBody">f({{$chip.name}})</strong> <md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
</div> <ng-md-icon size="20" icon="timeline"></ng-md-icon>
</div>
<md-button ng-click="editDataKey($event, $chip, $index)" class="md-icon-button tb-md-32">
<md-icon aria-label="edit" class="material-icons tb-md-20">edit</md-icon>
</md-button>
</div>
</md-chip-template>
</md-chips>
<md-chips flex ng-if="widgetType === types.widgetType.latest.value"
id="attribute_datakey_chips"
ng-model="attributeDataKeys" md-autocomplete-snap
md-transform-chip="transformAttributeDataKeyChip($chip)"
md-require-match="false">
<md-autocomplete
md-no-cache="true"
id="attribute_datakey"
md-selected-item="selectedAttributeDataKey"
md-search-text="attributeDataKeySearchText"
md-items="item in dataKeysSearch(attributeDataKeySearchText, types.dataKeyType.attribute)"
md-item-text="item.name"
md-min-length="0"
placeholder="{{'datakey.attributes' | translate }}"
md-menu-class="tb-attribute-datakey-autocomplete">
<span md-highlight-text="attributeDataKeySearchText" md-highlight-flags="^i">{{item}}</span>
<md-not-found>
<div class="tb-not-found">
<div class="tb-no-entries" ng-if="!textIsNotEmpty(attributeDataKeySearchText)">
<span translate>entity.no-keys-found</span>
</div>
<div ng-if="textIsNotEmpty(attributeDataKeySearchText)">
<span translate translate-values='{ key: "{{attributeDataKeySearchText | truncate:true:6:&apos;...&apos;}}" }'>entity.no-key-matching</span>
<span>
<a translate ng-click="createKey($event, '#attribute_datakey_chips')">entity.create-new-key</a>
</span> </span>
</div>
</div>
</md-not-found>
</md-autocomplete>
<md-chip-template>
<div layout="row" layout-align="start center" class="tb-attribute-chip">
<div class="tb-color-preview" ng-click="showColorPicker($event, $chip, $index)" style="margin-right: 5px;">
<div class="tb-color-result" ng-style="{background: $chip.color}"></div>
</div>
<div layout="row">
<div class="tb-chip-label" tb-chip-draggable>
{{$chip.label}} {{$chip.label}}
</div> </div>
<div class="tb-chip-separator">: </div> <div class="tb-chip-separator">: </div>
@ -137,7 +102,7 @@
id="alarm_datakey" id="alarm_datakey"
md-selected-item="selectedAlarmDataKey" md-selected-item="selectedAlarmDataKey"
md-search-text="alarmDataKeySearchText" md-search-text="alarmDataKeySearchText"
md-items="item in dataKeysSearch(alarmDataKeySearchText, types.dataKeyType.alarm)" md-items="item in dataKeysSearch(alarmDataKeySearchText)"
md-item-text="item.name" md-item-text="item.name"
md-min-length="0" md-min-length="0"
placeholder="{{'datakey.alarm' | translate }}" placeholder="{{'datakey.alarm' | translate }}"