tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

pull/1704/head
pgrisu 7 years ago
parent
e157f76fcf
commit
76e5aa24fa
3 changed files with 69 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      ui/src/app/components/datasource-entity.directive.js
  2. 1
      ui/src/app/components/datasource-entity.scss
  3. 99
      ui/src/app/components/datasource-entity.tpl.html

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

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

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

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

@ -25,82 +25,39 @@
<section flex layout='column'>
<section flex layout='column' layout-align="center" style="padding-left: 4px;">
<md-chips flex ng-if="widgetType != types.widgetType.alarm.value"
id="timeseries_datakey_chips"
ng-model="timeseriesDataKeys" md-autocomplete-snap
md-transform-chip="transformTimeseriesDataKeyChip($chip)"
md-require-match="false">
<md-autocomplete
md-no-cache="true"
id="timeseries_datakey"
md-selected-item="selectedTimeseriesDataKey"
md-search-text="timeseriesDataKeySearchText"
md-items="item in dataKeysSearch(timeseriesDataKeySearchText, types.dataKeyType.timeseries)"
md-item-text="item.name"
md-min-length="0"
placeholder="{{'datakey.timeseries' | translate }}"
md-menu-class="tb-timeseries-datakey-autocomplete">
<span md-highlight-text="timeseriesDataKeySearchText" md-highlight-flags="^i">{{item}}</span>
<md-not-found>
<div class="tb-not-found">
<div class="tb-no-entries" ng-if="!textIsNotEmpty(timeseriesDataKeySearchText)">
<span translate>entity.no-keys-found</span>
</div>
<div ng-if="textIsNotEmpty(timeseriesDataKeySearchText)">
<span translate translate-values='{ key: "{{timeseriesDataKeySearchText | truncate:true:6:&apos;...&apos;}}" }'>entity.no-key-matching</span>
<span>
<a translate ng-click="createKey($event, '#timeseries_datakey_chips')">entity.create-new-key</a>
</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}}
</div>
<div class="tb-chip-separator">: </div>
<div class="tb-chip-label">
<strong ng-if="!$chip.postFuncBody">{{$chip.name}}</strong>
<strong ng-if="$chip.postFuncBody">f({{$chip.name}})</strong>
</div>
</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)"
id="datakey_chips"
ng-model="dataKeys" md-autocomplete-snap
md-transform-chip="transformDataKeyChip($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)"
id="datakey"
md-selected-item="selectedDataKey"
md-search-text="dataKeySearchText"
md-items="item in dataKeysSearch(dataKeySearchText)"
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>
placeholder=""
md-menu-class="tb-datakey-autocomplete">
<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>
<div class="tb-not-found">
<div class="tb-no-entries" ng-if="!textIsNotEmpty(attributeDataKeySearchText)">
<div class="tb-no-entries" ng-if="!textIsNotEmpty(dataKeySearchText)">
<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>
<div ng-if="textIsNotEmpty(dataKeySearchText)">
<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>
<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>
</div>
</div>
</md-not-found>
@ -112,6 +69,14 @@
</div>
<div layout="row">
<div class="tb-chip-label" tb-chip-draggable>
<span ng-show="$chip.type==types.dataKeyType.attribute">
<md-tooltip>{{'datakey.attributes' | translate }}</md-tooltip>
<ng-md-icon size="20" icon="perm_device_information"></ng-md-icon>
</span>
<span ng-show="$chip.type==types.dataKeyType.timeseries">
<md-tooltip>{{'datakey.timeseries' | translate }}</md-tooltip>
<ng-md-icon size="20" icon="timeline"></ng-md-icon>
</span>
{{$chip.label}}
</div>
<div class="tb-chip-separator">: </div>
@ -137,7 +102,7 @@
id="alarm_datakey"
md-selected-item="selectedAlarmDataKey"
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-min-length="0"
placeholder="{{'datakey.alarm' | translate }}"

Write Preview
Loading…
Cancel
Save