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

Improve chips dragging. Minor bug fixes.

pull/1807/head
Igor Kulikov 7 years ago
parent
e4e3b0450e
commit
39da7835ab
7 changed files with 83 additions and 48 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. 30
      ui/src/app/common/utils.service.js
  2. 10
      ui/src/app/components/datasource-entity.directive.js
  3. 28
      ui/src/app/components/datasource-entity.tpl.html
  4. 14
      ui/src/app/components/datasource-func.tpl.html
  5. 8
      ui/src/app/components/datasource.scss
  6. 27
      ui/src/app/components/md-chip-draggable.directive.js
  7. 14
      ui/src/app/components/widget/widget-config.tpl.html

30
ui/src/app/common/utils.service.js
View File

@ -120,18 +120,6 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
];
var defaultAlarmDataKeys = [];
for (var i=0;i<defaultAlarmFields.length;i++) {
var name = defaultAlarmFields[i];
var dataKey = {
name: name,
type: types.dataKeyType.alarm,
label: $translate.instant(types.alarmFields[name].name)+'',
color: getMaterialColor(i),
settings: {},
_hash: Math.random()
};
defaultAlarmDataKeys.push(dataKey);
}
var imageAspectMap = {};
@ -312,7 +300,25 @@ function Utils($mdColorPalette, $rootScope, $window, $translate, $q, $timeout, t
return angular.toJson(getDefaultDatasource(dataKeySchema));
}
function initDefaultAlarmDataKeys() {
for (var i=0;i<defaultAlarmFields.length;i++) {
var name = defaultAlarmFields[i];
var dataKey = {
name: name,
type: types.dataKeyType.alarm,
label: $translate.instant(types.alarmFields[name].name)+'',
color: getMaterialColor(i),
settings: {},
_hash: Math.random()
};
defaultAlarmDataKeys.push(dataKey);
}
}
function getDefaultAlarmDataKeys() {
if (!defaultAlarmDataKeys.length) {
initDefaultAlarmDataKeys();
}
return angular.copy(defaultAlarmDataKeys);
}

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

@ -152,7 +152,15 @@ function DatasourceEntity($compile, $templateCache, $q, $mdDialog, $window, $doc
if (scope.maxDataKeys > 0 && ngModelCtrl.$viewValue.dataKeys.length >= scope.maxDataKeys ) {
return null;
} else {
return scope.generateDataKey({chip: chip.name, type: chip.type});
if (chip.type) {
return scope.generateDataKey({chip: chip.name, type: chip.type});
} else {
if (scope.widgetType != types.widgetType.latest.value) {
return scope.generateDataKey({chip: chip, type: types.dataKeyType.timeseries});
} else {
return null;
}
}
}
};

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

@ -70,20 +70,23 @@
</md-autocomplete>
<md-chip-template>
<div layout="row" layout-align="start center" class="tb-attribute-chip">
<div class="tb-chip-drag-handle" style="margin-right: 5px;" tb-chip-draggable>
<ng-md-icon size="20" icon="drag_handle"></ng-md-icon>
</div>
<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>
<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 class="tb-chip-label">
<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>
<div class="tb-chip-label">
@ -130,11 +133,14 @@
</md-autocomplete>
<md-chip-template>
<div layout="row" layout-align="start center" class="tb-attribute-chip">
<div class="tb-chip-drag-handle" style="margin-right: 5px;" tb-chip-draggable>
<ng-md-icon size="20" icon="drag_handle"></ng-md-icon>
</div>
<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>
<div class="tb-chip-label">
{{$chip.label}}
</div>
<div class="tb-chip-separator">: </div>

14
ui/src/app/components/datasource-func.tpl.html
View File

@ -58,11 +58,14 @@
</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-chip-drag-handle" style="margin-right: 5px;" tb-chip-draggable>
<ng-md-icon size="20" icon="drag_handle"></ng-md-icon>
</div>
<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>
<div class="tb-chip-label">
{{$chip.label}}
</div>
<div class="tb-chip-separator">: </div>
@ -109,11 +112,14 @@
</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-chip-drag-handle" style="margin-right: 5px;" tb-chip-draggable>
<ng-md-icon size="20" icon="drag_handle"></ng-md-icon>
</div>
<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>
<div class="tb-chip-label">
{{$chip.label}}
</div>
<div class="tb-chip-separator">: </div>

8
ui/src/app/components/datasource.scss
View File

@ -58,6 +58,14 @@
}
.tb-attribute-chip {
.tb-chip-drag-handle {
cursor: move;
ng-md-icon {
pointer-events: none;
}
}
.tb-chip-label {
overflow: hidden;
text-overflow: ellipsis;

27
ui/src/app/components/md-chip-draggable.directive.js
View File

@ -22,9 +22,6 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
controllerAs: 'vm',
controller: ['$document', '$scope', '$element', '$timeout',
function ($document, $scope, $element, $timeout) {
var options = {
axis: 'horizontal',
};
var handle = $element[0];
var draggingClassName = 'dragging';
var droppingClassName = 'dropping';
@ -92,26 +89,28 @@ export default angular.module('thingsboard.directives.mdChipDraggable', [])
y: (event.originalEvent || event).clientY - bounds.top,
};
var offset = options.axis === 'vertical' ? props.y : props.x;
var midPoint = (options.axis === 'vertical' ? props.height : props.width) / 2;
var horizontalOffset = props.x;
var horizontalMidPoint = props.width / 2;
var verticalOffset = props.y;
var verticalMidPoint = props.height / 2;
$element.addClass(droppingClassName);
if (offset < midPoint) {
dropPosition = 'before';
$element.removeClass(droppingAfterClassName);
$element.addClass(droppingBeforeClassName);
if (horizontalOffset >= horizontalMidPoint || verticalOffset >= verticalMidPoint) {
dropPosition = 'after';
$element.removeClass(droppingBeforeClassName);
$element.addClass(droppingAfterClassName);
} else {
dropPosition = 'after';
$element.removeClass(droppingBeforeClassName);
$element.addClass(droppingAfterClassName);
dropPosition = 'before';
$element.removeClass(droppingAfterClassName);
$element.addClass(droppingBeforeClassName);
}
};
var dropHandler = function (event) {
event.preventDefault();
var droppedItemIndex = parseInt((event.dataTransfer || event.originalEvent.dataTransfer).getData('text/plain'), 10);
var currentIndex = $scope.$parent.$mdChipsCtrl.items.indexOf($scope.$parent.$chip);
var newIndex = null;

14
ui/src/app/components/widget/widget-config.tpl.html
View File

@ -23,12 +23,14 @@
<md-content class="md-padding" layout="column">
<div ng-show="widgetType === types.widgetType.timeseries.value || widgetType === types.widgetType.alarm.value" layout='column' layout-align="center"
layout-gt-sm='row' layout-align-gt-sm="start center">
<md-checkbox flex aria-label="{{ 'widget-config.use-dashboard-timewindow' | translate }}"
ng-model="useDashboardTimewindow">{{ 'widget-config.use-dashboard-timewindow' | translate }}
</md-checkbox>
<md-checkbox ng-disabled="useDashboardTimewindow" flex aria-label="{{ 'widget-config.display-timewindow' | translate }}"
ng-model="displayTimewindow">{{ 'widget-config.display-timewindow' | translate }}
</md-checkbox>
<div layout="column" flex>
<md-checkbox flex aria-label="{{ 'widget-config.use-dashboard-timewindow' | translate }}"
ng-model="useDashboardTimewindow">{{ 'widget-config.use-dashboard-timewindow' | translate }}
</md-checkbox>
<md-checkbox ng-disabled="useDashboardTimewindow" flex aria-label="{{ 'widget-config.display-timewindow' | translate }}"
ng-model="displayTimewindow">{{ 'widget-config.display-timewindow' | translate }}
</md-checkbox>
</div>
<section flex layout="row" layout-align="start center" style="margin-bottom: 16px;">
<span ng-class="{'tb-disabled-label': useDashboardTimewindow}" translate style="padding-right: 8px;">widget-config.timewindow</span>
<tb-timewindow ng-disabled="useDashboardTimewindow" as-button="true" aggregation="{{ widgetType === types.widgetType.timeseries.value }}"

Write Preview
Loading…
Cancel
Save