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

Deleted edges hierarchy widget

pull/3693/head
deaflynx 6 years ago
parent
b1011f43a5
commit
00a40e63ba
4 changed files with 1 additions and 841 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. 3
      ui/src/app/api/widget.service.js
  2. 679
      ui/src/app/widget/lib/edges-hierarchy-widget.js
  3. 109
      ui/src/app/widget/lib/edges-hierarchy-widget.scss
  4. 51
      ui/src/app/widget/lib/edges-hierarchy-widget.tpl.html

3
ui/src/app/api/widget.service.js
View File

@ -22,7 +22,6 @@ import thingsboardTimeseriesTableWidget from '../widget/lib/timeseries-table-wid
import thingsboardAlarmsTableWidget from '../widget/lib/alarms-table-widget';
import thingsboardEntitiesTableWidget from '../widget/lib/entities-table-widget';
import thingsboardEntitiesHierarchyWidget from '../widget/lib/entities-hierarchy-widget';
import thingsboardEdgesHierarchyWidget from '../widget/lib/edges-hierarchy-widget';
import thingsboardExtensionsTableWidget from '../widget/lib/extensions-table-widget';
import thingsboardDateRangeNavigatorWidget from '../widget/lib/date-range-navigator/date-range-navigator';
import thingsboardMultipleInputWidget from '../widget/lib/multiple-input-widget';
@ -53,7 +52,7 @@ import thingsboardUtils from '../common/utils.service';
export default angular.module('thingsboard.api.widget', ['oc.lazyLoad', thingsboardLedLight,
thingsboardTimeseriesTableWidget, thingsboardAlarmsTableWidget, thingsboardEntitiesTableWidget,
thingsboardEntitiesHierarchyWidget, thingsboardEdgesHierarchyWidget, thingsboardExtensionsTableWidget, thingsboardDateRangeNavigatorWidget,
thingsboardEntitiesHierarchyWidget, thingsboardExtensionsTableWidget, thingsboardDateRangeNavigatorWidget,
thingsboardMultipleInputWidget, thingsboardWebCameraInputWidget, thingsboardRpcWidgets, thingsboardTypes,
thingsboardUtils, thingsboardJsonToString, TripAnimationWidget])
.factory('widgetService', WidgetService)

679
ui/src/app/widget/lib/edges-hierarchy-widget.js
View File

@ -1,679 +0,0 @@
/*
* Copyright © 2016-2020 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 './edges-hierarchy-widget.scss';
/* eslint-disable import/no-unresolved, import/default */
import edgesHierarchyWidgetTemplate from './edges-hierarchy-widget.tpl.html';
/* eslint-enable import/no-unresolved, import/default */
export default angular.module('thingsboard.widgets.edgesHierarchyWidget', [])
.directive('tbEdgesHierarchyWidget', EdgesHierarchyWidget)
.name;
/* eslint-disable no-unused-vars */
/*@ngInject*/
function EdgesHierarchyWidget() {
return {
restrict: "E",
scope: true,
bindToController: {
hierarchyId: '=',
ctx: '='
},
controller: EdgesHierarchyWidgetController,
controllerAs: 'vm',
templateUrl: edgesHierarchyWidgetTemplate
};
}
/*@ngInject*/
function EdgesHierarchyWidgetController($element, $scope, $q, $timeout, toast, types, entityService, entityRelationService,
assetService, deviceService, entityViewService, dashboardService, ruleChainService /*$filter, $mdMedia, $mdPanel, $document, $translate, $timeout, utils, types*/) {
var vm = this;
vm.showData = true;
vm.nodeEditCallbacks = {};
vm.nodeIdCounter = 0;
vm.nodesMap = {};
vm.pendingUpdateNodeTasks = {};
vm.edgeGroupsNodesMap = {};
vm.query = {
search: null
};
vm.searchAction = {
name: 'action.search',
show: true,
onAction: function() {
vm.enterFilterMode();
},
icon: 'search'
};
vm.onNodesInserted = onNodesInserted;
vm.onNodeSelected = onNodeSelected;
vm.enterFilterMode = enterFilterMode;
vm.exitFilterMode = exitFilterMode;
vm.searchCallback = searchCallback;
$scope.$watch('vm.ctx', function() {
if (vm.ctx && vm.ctx.defaultSubscription) {
vm.settings = vm.ctx.settings;
vm.widgetConfig = vm.ctx.widgetConfig;
vm.subscription = vm.ctx.defaultSubscription;
vm.datasources = vm.subscription.datasources;
initializeConfig();
updateDatasources();
}
});
$scope.$watch("vm.query.search", function(newVal, prevVal) {
if (!angular.equals(newVal, prevVal) && vm.query.search != null) {
updateSearchNodes();
}
});
$scope.$on('edges-hierarchy-data-updated', function(event, hierarchyId) {
if (vm.hierarchyId == hierarchyId) {
if (vm.subscription) {
updateNodeData(vm.subscription.data);
}
}
});
function initializeConfig() {
vm.ctx.widgetActions = [ vm.searchAction ];
var testNodeCtx = {
entity: {
id: {
entityType: 'DEVICE',
id: '123'
},
name: 'TEST DEV1'
},
data: {},
level: 2
};
var parentNodeCtx = angular.copy(testNodeCtx);
parentNodeCtx.level = 1;
testNodeCtx.parentNodeCtx = parentNodeCtx;
var nodeRelationQueryFunction = loadNodeCtxFunction(vm.settings.nodeRelationQueryFunction, 'nodeCtx', testNodeCtx);
var nodeIconFunction = loadNodeCtxFunction(vm.settings.nodeIconFunction, 'nodeCtx', testNodeCtx);
var nodeTextFunction = loadNodeCtxFunction(vm.settings.nodeTextFunction, 'nodeCtx', testNodeCtx);
var nodeDisabledFunction = loadNodeCtxFunction(vm.settings.nodeDisabledFunction, 'nodeCtx', testNodeCtx);
var nodeOpenedFunction = loadNodeCtxFunction(vm.settings.nodeOpenedFunction, 'nodeCtx', testNodeCtx);
var nodeHasChildrenFunction = loadNodeCtxFunction(vm.settings.nodeHasChildrenFunction, 'nodeCtx', testNodeCtx);
var testNodeCtx2 = angular.copy(testNodeCtx);
testNodeCtx2.entity.name = 'TEST DEV2';
var nodesSortFunction = loadNodeCtxFunction(vm.settings.nodesSortFunction, 'nodeCtx1,nodeCtx2', testNodeCtx, testNodeCtx2);
vm.nodeRelationQueryFunction = nodeRelationQueryFunction || defaultNodeRelationQueryFunction;
vm.nodeIconFunction = nodeIconFunction || defaultNodeIconFunction;
vm.nodeTextFunction = nodeTextFunction || ((nodeCtx) => nodeCtx.entity.name);
vm.nodeDisabledFunction = nodeDisabledFunction || (() => false);
vm.nodeOpenedFunction = nodeOpenedFunction || defaultNodeOpenedFunction;
vm.nodeHasChildrenFunction = nodeHasChildrenFunction || (() => true);
vm.nodesSortFunction = nodesSortFunction || defaultSortFunction;
}
function loadNodeCtxFunction(functionBody, argNames, ...args) {
var nodeCtxFunction = null;
if (angular.isDefined(functionBody) && functionBody.length) {
try {
nodeCtxFunction = new Function(argNames, functionBody);
var res = nodeCtxFunction.apply(null, args);
if (angular.isUndefined(res)) {
nodeCtxFunction = null;
}
} catch (e) {
nodeCtxFunction = null;
}
}
return nodeCtxFunction;
}
function enterFilterMode () {
vm.query.search = '';
vm.ctx.hideTitlePanel = true;
$timeout(()=>{
angular.element(vm.ctx.$container).find('.searchInput').focus();
})
}
function exitFilterMode () {
vm.query.search = null;
updateSearchNodes();
vm.ctx.hideTitlePanel = false;
}
function searchCallback (searchText, node) {
var theNode = vm.nodesMap[node.id];
if (theNode && theNode.data.searchText) {
return theNode.data.searchText.includes(searchText.toLowerCase());
}
return false;
}
function updateDatasources() {
vm.loadNodes = loadNodes;
}
function updateSearchNodes() {
if (vm.query.search != null) {
vm.nodeEditCallbacks.search(vm.query.search);
} else {
vm.nodeEditCallbacks.clearSearch();
}
}
function onNodesInserted(nodes/*, parent*/) {
if (nodes) {
nodes.forEach((nodeId) => {
var task = vm.pendingUpdateNodeTasks[nodeId];
if (task) {
task();
delete vm.pendingUpdateNodeTasks[nodeId];
}
});
}
}
function onNodeSelected(node, event) {
var nodeId;
if (!node) {
nodeId = -1;
} else {
nodeId = node.id;
}
if (nodeId !== -1) {
var selectedNode = vm.nodesMap[nodeId];
if (selectedNode) {
var descriptors = vm.ctx.actionsApi.getActionDescriptors('nodeSelected');
if (descriptors.length) {
var entity = selectedNode.data.nodeCtx.entity;
vm.ctx.actionsApi.handleWidgetAction(event, descriptors[0], entity.id, entity.name, { nodeCtx: selectedNode.data.nodeCtx });
}
}
}
}
function updateNodeData(subscriptionData) {
var affectedNodes = [];
if (subscriptionData) {
for (var i=0;i<subscriptionData.length;i++) {
var datasource = subscriptionData[i].datasource;
if (datasource.nodeId) {
var node = vm.nodesMap[datasource.nodeId];
var key = subscriptionData[i].dataKey.label;
var value = undefined;
if (subscriptionData[i].data && subscriptionData[i].data.length) {
value = subscriptionData[i].data[0][1];
}
if (node.data.nodeCtx.data[key] !== value) {
if (affectedNodes.indexOf(datasource.nodeId) === -1) {
affectedNodes.push(datasource.nodeId);
}
node.data.nodeCtx.data[key] = value;
}
}
}
}
affectedNodes.forEach((nodeId) => {
var node = vm.nodeEditCallbacks.getNode(nodeId);
if (node) {
updateNodeStyle(vm.nodesMap[nodeId]);
} else {
vm.pendingUpdateNodeTasks[nodeId] = () => {
updateNodeStyle(vm.nodesMap[nodeId]);
};
}
});
}
function updateNodeStyle(node) {
var newText = prepareNodeText(node);
if (!angular.equals(node.text, newText)) {
node.text = newText;
vm.nodeEditCallbacks.updateNode(node.id, node.text);
}
var newDisabled = vm.nodeDisabledFunction(node.data.nodeCtx);
if (!angular.equals(node.state.disabled, newDisabled)) {
node.state.disabled = newDisabled;
if (node.state.disabled) {
vm.nodeEditCallbacks.disableNode(node.id);
} else {
vm.nodeEditCallbacks.enableNode(node.id);
}
}
var newHasChildren = vm.nodeHasChildrenFunction(node.data.nodeCtx);
if (!angular.equals(node.children, newHasChildren)) {
node.children = newHasChildren;
vm.nodeEditCallbacks.setNodeHasChildren(node.id, node.children);
}
}
function prepareNodeText(node) {
var nodeIcon = prepareNodeIcon(node.data.nodeCtx);
var nodeText = vm.nodeTextFunction(node.data.nodeCtx);
node.data.searchText = nodeText ? nodeText.replace(/<[^>]+>/g, '').toLowerCase() : "";
return nodeIcon + nodeText;
}
function loadNodes(node, cb) {
if (node.id === '#') {
var tasks = [];
for (var i=0;i<vm.datasources.length;i++) {
var datasource = vm.datasources[i];
tasks.push(datasourceToNode(datasource));
}
$q.all(tasks).then((nodes) => {
cb(prepareNodes(nodes));
updateNodeData(vm.subscription.data);
});
} else {
if (node.data && node.data.nodeCtx.entity && node.data.nodeCtx.entity.id && node.data.nodeCtx.entity.id.entityType !== 'function') {
if (node.data.nodeCtx.entity.id.entityType === types.entityType.edge) {
/* assetService.getEdgeAssets(node.data.nodeCtx.entity.id.id, {limit: 20}, null).then(
(entities) => {
var tasks = [];
for (var i=0;i<entities.data.length;i++) {
var relation = entities.data[i];
var targetId = node.data.nodeCtx.entity.id.entityType === types.entityType.edge ? relation.id : node.data.nodeCtx.entity.id;
tasks.push(entityIdToNode(targetId.entityType, targetId.id, node.data.datasource, node.data.nodeCtx));
}
$q.all(tasks).then((nodes) => {
cb(prepareNodes(nodes));
});
}
);
deviceService.getEdgeDevices(node.data.nodeCtx.entity.id.id, {limit: 20}, null).then(
(entities) => {
var tasks = [];
for (var i=0;i<entities.data.length;i++) {
var relation = entities.data[i];
var targetId = node.data.nodeCtx.entity.id.entityType === types.entityType.edge ? relation.id : node.data.nodeCtx.entity.id;
tasks.push(entityIdToNode(targetId.entityType, targetId.id, node.data.datasource, node.data.nodeCtx));
}
$q.all(tasks).then((nodes) => {
cb(prepareNodes(nodes));
});
}
);
entityViewService.getEdgeEntityViews(node.data.nodeCtx.entity.id.id, {limit: 20}, null).then(
(entities) => {
var tasks = [];
for (var i=0;i<entities.data.length;i++) {
var relation = entities.data[i];
var targetId = node.data.nodeCtx.entity.id.entityType === types.entityType.edge ? relation.id : node.data.nodeCtx.entity.id;
tasks.push(entityIdToNode(targetId.entityType, targetId.id, node.data.datasource, node.data.nodeCtx));
}
$q.all(tasks).then((nodes) => {
cb(prepareNodes(nodes));
});
}
);
dashboardService.getEdgeDashboards(node.data.nodeCtx.entity.id.id, {limit: 20}, null).then(
(entities) => {
var tasks = [];
for (var i=0;i<entities.data.length;i++) {
var relation = entities.data[i];
var targetId = node.data.nodeCtx.entity.id.entityType === types.entityType.edge ? relation.id : node.data.nodeCtx.entity.id;
tasks.push(entityIdToNode(targetId.entityType, targetId.id, node.data.datasource, node.data.nodeCtx));
}
$q.all(tasks).then((nodes) => {
cb(prepareNodes(nodes));
});
}
)
ruleChainService.getEdgeRuleChains(node.data.nodeCtx.entity.id.id, {limit: 20}, null).then(
(entities) => {
var tasks = [];
for (var i=0;i<entities.data.length;i++) {
var relation = entities.data[i];
var targetId = node.data.nodeCtx.entity.id.entityType === types.entityType.edge ? relation.id : node.data.nodeCtx.entity.id;
tasks.push(entityIdToNode(targetId.entityType, targetId.id, node.data.datasource, node.data.nodeCtx));
}
$q.all(tasks).then((nodes) => {
cb(prepareNodes(nodes));
});
}
)
*/
entityIdToNodeEdge("edgeGroup", "001", node.data.datasource, )
} else {
var relationQuery = prepareNodeRelationQuery(node.data.nodeCtx);
entityRelationService.findByQuery(relationQuery, {ignoreErrors: true, ignoreLoading: true}).then(
(entityRelations) => {
var tasks = [];
for (var i=0;i<entityRelations.length;i++) {
var relation = entityRelations[i];
var targetId = relationQuery.parameters.direction === types.entitySearchDirection.from ? relation.to : relation.from;
tasks.push(entityIdToNode(targetId.entityType, targetId.id, node.data.datasource, node.data.nodeCtx));
}
$q.all(tasks).then((nodes) => {
cb(prepareNodes(nodes));
});
},
(error) => {
var errorText = "Failed to get relations!";
if (error && error.status === 400) {
errorText = "Invalid relations query returned by 'Node relations query function'! Please check widget configuration!";
}
showError(errorText);
}
);
}
} else {
cb([]);
}
}
}
function showError(errorText) {
var toastParent = angular.element('.tb-edges-hierarchy', $element);
toast.showError(errorText, toastParent, 'bottom left');
}
function prepareNodes(nodes) {
nodes = nodes.filter((node) => node !== null);
nodes.sort((node1, node2) => vm.nodesSortFunction(node1.data.nodeCtx, node2.data.nodeCtx));
return nodes;
}
function datasourceToNode(datasource, parentNodeCtx) {
var deferred = $q.defer();
resolveEntity(datasource).then(
(entity) => {
if (entity != null) {
var node = {
id: ++vm.nodeIdCounter
};
vm.nodesMap[node.id] = node;
datasource.nodeId = node.id;
node.icon = false;
var nodeCtx = {
parentNodeCtx: parentNodeCtx,
entity: entity,
data: {}
};
nodeCtx.level = parentNodeCtx ? parentNodeCtx.level + 1 : 1;
node.data = {
datasource: datasource,
nodeCtx: nodeCtx
};
node.state = {
disabled: vm.nodeDisabledFunction(node.data.nodeCtx),
opened: vm.nodeOpenedFunction(node.data.nodeCtx)
};
node.text = prepareNodeText(node);
node.children = vm.nodeHasChildrenFunction(node.data.nodeCtx);
deferred.resolve(node);
} else {
deferred.resolve(null);
}
}
);
return deferred.promise;
}
function datasourceToNodeEdge(datasource, parentNodeCtx) {
var deferred = $q.defer();
resolveEntity(datasource).then(
(entity) => {
if (entity != null) {
var node = {
id: ++vm.nodeIdCounter
};
vm.nodesMap[node.id] = node;
datasource.nodeId = node.id;
node.icon = false;
var nodeCtx = {
parentNodeCtx: parentNodeCtx,
entity: entity,
data: {}
};
nodeCtx.level = parentNodeCtx ? parentNodeCtx.level + 1 : 1;
node.data = {
datasource: datasource,
nodeCtx: nodeCtx
};
node.state = {
disabled: vm.nodeDisabledFunction(node.data.nodeCtx),
opened: vm.nodeOpenedFunction(node.data.nodeCtx)
};
node.text = prepareNodeText(node);
node.children = vm.nodeHasChildrenFunction(node.data.nodeCtx);
deferred.resolve(node);
} else {
deferred.resolve(null);
}
}
);
return deferred.promise;
}
function entityIdToNodeEdge(entityType, entityId, parentDatasource, parentNodeCtx) {
var deferred = $q.defer();
var datasource = {
dataKeys: parentDatasource.dataKeys,
type: types.datasourceType.entity,
entityType: entityType,
entityId: entityId
};
datasourceToNodeEdge(datasource, parentNodeCtx).then(
(node) => {
if (node != null) {
var subscriptionOptions = {
type: types.widgetType.latest.value,
datasources: [datasource],
callbacks: {
onDataUpdated: (subscription) => {
updateNodeData(subscription.data);
}
}
};
vm.ctx.subscriptionApi.createSubscription(subscriptionOptions, true).then(
(/*subscription*/) => {
deferred.resolve(node);
}
);
} else {
deferred.resolve(node);
}
}
);
return deferred.promise;
}
function entityIdToNode(entityType, entityId, parentDatasource, parentNodeCtx) {
var deferred = $q.defer();
var datasource = {
dataKeys: parentDatasource.dataKeys,
type: types.datasourceType.entity,
entityType: entityType,
entityId: entityId
};
datasourceToNode(datasource, parentNodeCtx).then(
(node) => {
if (node != null) {
var subscriptionOptions = {
type: types.widgetType.latest.value,
datasources: [datasource],
callbacks: {
onDataUpdated: (subscription) => {
updateNodeData(subscription.data);
}
}
};
vm.ctx.subscriptionApi.createSubscription(subscriptionOptions, true).then(
(/*subscription*/) => {
deferred.resolve(node);
}
);
} else {
deferred.resolve(node);
}
}
);
return deferred.promise;
}
function resolveEntity(datasource) {
var deferred = $q.defer();
if (datasource.type === types.datasourceType.function) {
var entity = {
id: {
entityType: "function"
},
name: datasource.name
}
deferred.resolve(entity);
} else {
entityService.getEntity(datasource.entityType, datasource.entityId, {ignoreLoading: true}).then(
(entity) => {
deferred.resolve(entity);
},
() => {
deferred.resolve(null);
}
);
}
return deferred.promise;
}
function prepareNodeRelationQuery(nodeCtx) {
var relationQuery = vm.nodeRelationQueryFunction(nodeCtx);
if (relationQuery && relationQuery === 'default') {
relationQuery = defaultNodeRelationQueryFunction(nodeCtx);
}
return relationQuery;
}
function defaultNodeRelationQueryFunction(nodeCtx) {
var entity = nodeCtx.entity;
var query = {
parameters: {
rootId: entity.id.id,
rootType: entity.id.entityType,
direction: types.entitySearchDirection.from,
relationTypeGroup: "COMMON",
maxLevel: 1
},
filters: [
{
relationType: "Contains",
entityTypes: []
}
]
};
return query;
}
function prepareNodeIcon(nodeCtx) {
var iconInfo = vm.nodeIconFunction(nodeCtx);
if (iconInfo && iconInfo === 'default') {
iconInfo = defaultNodeIconFunction(nodeCtx);
}
if (iconInfo && (iconInfo.iconUrl || iconInfo.materialIcon)) {
if (iconInfo.materialIcon) {
return materialIconHtml(iconInfo.materialIcon);
} else {
return iconUrlHtml(iconInfo.iconUrl);
}
} else {
return "";
}
}
function materialIconHtml(materialIcon) {
return '<md-icon aria-label="'+materialIcon+'" class="node-icon material-icons" role="img" aria-hidden="false">'+materialIcon+'</md-icon>';
}
function iconUrlHtml(iconUrl) {
return '<div class="node-icon" style="background-image: url('+iconUrl+');">&nbsp;</div>';
}
function defaultNodeIconFunction(nodeCtx) {
var materialIcon = 'insert_drive_file';
var entity = nodeCtx.entity;
if (entity && entity.id && entity.id.entityType) {
switch (entity.id.entityType) {
case 'function':
materialIcon = 'functions';
break;
case types.entityType.device:
materialIcon = 'devices_other';
break;
case types.entityType.asset:
materialIcon = 'domain';
break;
case types.entityType.tenant:
materialIcon = 'supervisor_account';
break;
case types.entityType.customer:
materialIcon = 'supervisor_account';
break;
case types.entityType.user:
materialIcon = 'account_circle';
break;
case types.entityType.dashboard:
materialIcon = 'dashboards';
break;
case types.entityType.alarm:
materialIcon = 'notifications_active';
break;
case types.entityType.entityView:
materialIcon = 'view_quilt';
break;
case types.entityType.edge:
materialIcon = 'router';
break;
case types.entityType.rulechain:
materialIcon = 'settings_ethernet';
break;
}
}
return {
materialIcon: materialIcon
};
}
function defaultNodeOpenedFunction(nodeCtx) {
return nodeCtx.level <= 4;
}
function defaultSortFunction(nodeCtx1, nodeCtx2) {
var result = nodeCtx1.entity.id.entityType.localeCompare(nodeCtx2.entity.id.entityType);
if (result === 0) {
result = nodeCtx1.entity.name.localeCompare(nodeCtx2.entity.name);
}
return result;
}
}

109
ui/src/app/widget/lib/edges-hierarchy-widget.scss
View File

@ -1,109 +0,0 @@
/**
* Copyright © 2016-2020 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-has-timewindow {
.tb-edges-hierarchy {
md-toolbar {
min-height: 60px;
max-height: 60px;
}
}
}
.tb-edges-hierarchy {
md-toolbar {
min-height: 39px;
max-height: 39px;
}
.tb-entities-nav-tree-panel {
overflow-x: auto;
overflow-y: auto;
.tb-nav-tree-container {
&.jstree-proton {
.jstree-anchor {
div.node-icon {
display: inline-block;
width: 22px;
height: 22px;
margin-right: 2px;
margin-bottom: 2px;
background-color: transparent;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: 18px 18px;
}
md-icon.node-icon {
width: 22px;
min-width: 22px;
height: 22px;
min-height: 22px;
margin-right: 2px;
margin-bottom: 2px;
color: inherit;
&.material-icons { /* stylelint-disable-line selector-max-class */
font-size: 18px;
line-height: 22px;
text-align: center;
}
}
&.jstree-hovered:not(.jstree-clicked),
&.jstree-disabled {
div.node-icon { /* stylelint-disable-line selector-max-class */
opacity: .5;
}
}
}
}
}
}
}
@media (max-width: 768px) {
.tb-edges-hierarchy {
.tb-entities-nav-tree-panel {
.tb-nav-tree-container {
&.jstree-proton-responsive {
.jstree-anchor {
div.node-icon {
width: 40px;
height: 40px;
margin: 0;
background-size: 24px 24px;
}
md-icon.node-icon {
width: 40px;
min-width: 40px;
height: 40px;
min-height: 40px;
margin: 0;
&.material-icons { /* stylelint-disable-line selector-max-class */
font-size: 24px;
line-height: 40px;
}
}
}
}
}
}
}
}

51
ui/src/app/widget/lib/edges-hierarchy-widget.tpl.html
View File

@ -1,51 +0,0 @@
<!--
Copyright © 2016-2020 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-absolute-fill tb-edges-hierarchy" layout="column">
<div ng-show="vm.showData" flex class="tb-absolute-fill" layout="column">
<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="{{vm.ctx.dashboard.isWidgetExpanded ? 'bottom' : 'top'}}">
{{'entity.search' | translate}}
</md-tooltip>
</md-button>
<md-input-container flex>
<label>&nbsp;</label>
<input ng-model="vm.query.search" class="searchInput" placeholder="{{'entity.search' | 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="{{vm.ctx.dashboard.isWidgetExpanded ? 'bottom' : 'top'}}">
{{ 'action.close' | translate }}
</md-tooltip>
</md-button>
</div>
</md-toolbar>
<div flex class="tb-entities-nav-tree-panel">
<tb-nav-tree
load-nodes="vm.loadNodes"
on-node-selected="vm.onNodeSelected(node, event)"
on-nodes-inserted="vm.onNodesInserted(nodes, parent)"
edit-callbacks="vm.nodeEditCallbacks"
enable-search="true"
search-callback="vm.searchCallback(searchText, node)"
></tb-nav-tree>
</div>
</div>
</div>
Write Preview
Loading…
Cancel
Save