Igor Kulikov
10 years ago
66 changed files with 1193 additions and 602 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,21 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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-button ng-disabled="disabled" class="md-raised md-primary" ng-click="openEditMode($event)"> |
||||
|
<ng-md-icon icon="toc"></ng-md-icon> |
||||
|
<span translate>legend.settings</span> |
||||
|
</md-button> |
||||
@ -0,0 +1,35 @@ |
|||||
|
/* |
||||
|
* 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. |
||||
|
*/ |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
export default function LegendConfigPanelController(mdPanelRef, $scope, types, legendConfig, onLegendConfigUpdate) { |
||||
|
|
||||
|
var vm = this; |
||||
|
vm._mdPanelRef = mdPanelRef; |
||||
|
vm.legendConfig = legendConfig; |
||||
|
vm.onLegendConfigUpdate = onLegendConfigUpdate; |
||||
|
vm.positions = types.position; |
||||
|
|
||||
|
vm._mdPanelRef.config.onOpenComplete = function () { |
||||
|
$scope.theForm.$setPristine(); |
||||
|
} |
||||
|
|
||||
|
$scope.$watch('vm.legendConfig', function () { |
||||
|
if (onLegendConfigUpdate) { |
||||
|
onLegendConfigUpdate(vm.legendConfig); |
||||
|
} |
||||
|
}, true); |
||||
|
} |
||||
@ -0,0 +1,47 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<form name="theForm" ng-submit="vm.update()"> |
||||
|
<fieldset ng-disabled="loading"> |
||||
|
<md-content style="height: 100%" flex layout="column"> |
||||
|
<section layout="column"> |
||||
|
<md-content class="md-padding" layout="column"> |
||||
|
<md-input-container> |
||||
|
<label translate>legend.position</label> |
||||
|
<md-select ng-model="vm.legendConfig.position" style="min-width: 150px;"> |
||||
|
<md-option ng-repeat="pos in vm.positions" ng-value="pos.value"> |
||||
|
{{pos.name | translate}} |
||||
|
</md-option> |
||||
|
</md-select> |
||||
|
</md-input-container> |
||||
|
<md-checkbox flex aria-label="{{ 'legend.show-min' | translate }}" |
||||
|
ng-model="vm.legendConfig.showMin">{{ 'legend.show-min' | translate }} |
||||
|
</md-checkbox> |
||||
|
<md-checkbox flex aria-label="{{ 'legend.show-max' | translate }}" |
||||
|
ng-model="vm.legendConfig.showMax">{{ 'legend.show-max' | translate }} |
||||
|
</md-checkbox> |
||||
|
<md-checkbox flex aria-label="{{ 'legend.show-avg' | translate }}" |
||||
|
ng-model="vm.legendConfig.showAvg">{{ 'legend.show-avg' | translate }} |
||||
|
</md-checkbox> |
||||
|
<md-checkbox flex aria-label="{{ 'legend.show-total' | translate }}" |
||||
|
ng-model="vm.legendConfig.showTotal">{{ 'legend.show-total' | translate }} |
||||
|
</md-checkbox> |
||||
|
</md-content> |
||||
|
</section> |
||||
|
</md-content> |
||||
|
</fieldset> |
||||
|
</form> |
||||
@ -0,0 +1,151 @@ |
|||||
|
/* |
||||
|
* 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. |
||||
|
*/ |
||||
|
|
||||
|
import './legend-config.scss'; |
||||
|
|
||||
|
import $ from 'jquery'; |
||||
|
|
||||
|
/* eslint-disable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import legendConfigButtonTemplate from './legend-config-button.tpl.html'; |
||||
|
import legendConfigPanelTemplate from './legend-config-panel.tpl.html'; |
||||
|
|
||||
|
/* eslint-enable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import LegendConfigPanelController from './legend-config-panel.controller'; |
||||
|
|
||||
|
|
||||
|
export default angular.module('thingsboard.directives.legendConfig', []) |
||||
|
.controller('LegendConfigPanelController', LegendConfigPanelController) |
||||
|
.directive('tbLegendConfig', LegendConfig) |
||||
|
.name; |
||||
|
|
||||
|
/* eslint-disable angular/angularelement */ |
||||
|
/*@ngInject*/ |
||||
|
function LegendConfig($compile, $templateCache, types, $mdPanel, $document) { |
||||
|
|
||||
|
var linker = function (scope, element, attrs, ngModelCtrl) { |
||||
|
|
||||
|
/* tbLegendConfig (ng-model) |
||||
|
* { |
||||
|
* position: types.position.bottom.value, |
||||
|
* showMin: false, |
||||
|
* showMax: false, |
||||
|
* showAvg: true, |
||||
|
* showTotal: false |
||||
|
* } |
||||
|
*/ |
||||
|
|
||||
|
var template = $templateCache.get(legendConfigButtonTemplate); |
||||
|
element.html(template); |
||||
|
|
||||
|
scope.openEditMode = function (event) { |
||||
|
if (scope.disabled) { |
||||
|
return; |
||||
|
} |
||||
|
var position; |
||||
|
var panelHeight = 220; |
||||
|
var panelWidth = 220; |
||||
|
var offset = element[0].getBoundingClientRect(); |
||||
|
var bottomY = offset.bottom - $(window).scrollTop(); //eslint-disable-line
|
||||
|
var leftX = offset.left - $(window).scrollLeft(); //eslint-disable-line
|
||||
|
var yPosition; |
||||
|
var xPosition; |
||||
|
if (bottomY + panelHeight > $( window ).height()) { //eslint-disable-line
|
||||
|
yPosition = $mdPanel.yPosition.ABOVE; |
||||
|
} else { |
||||
|
yPosition = $mdPanel.yPosition.BELOW; |
||||
|
} |
||||
|
if (leftX + panelWidth > $( window ).width()) { //eslint-disable-line
|
||||
|
xPosition = $mdPanel.xPosition.ALIGN_END; |
||||
|
} else { |
||||
|
xPosition = $mdPanel.xPosition.ALIGN_START; |
||||
|
} |
||||
|
position = $mdPanel.newPanelPosition() |
||||
|
.relativeTo(element) |
||||
|
.addPanelPosition(xPosition, yPosition); |
||||
|
var config = { |
||||
|
attachTo: angular.element($document[0].body), |
||||
|
controller: 'LegendConfigPanelController', |
||||
|
controllerAs: 'vm', |
||||
|
templateUrl: legendConfigPanelTemplate, |
||||
|
panelClass: 'tb-legend-config-panel', |
||||
|
position: position, |
||||
|
fullscreen: false, |
||||
|
locals: { |
||||
|
'legendConfig': angular.copy(scope.model), |
||||
|
'onLegendConfigUpdate': function (legendConfig) { |
||||
|
scope.model = legendConfig; |
||||
|
scope.updateView(); |
||||
|
} |
||||
|
}, |
||||
|
openFrom: event, |
||||
|
clickOutsideToClose: true, |
||||
|
escapeToClose: true, |
||||
|
focusOnOpen: false |
||||
|
}; |
||||
|
$mdPanel.open(config); |
||||
|
} |
||||
|
|
||||
|
scope.updateView = function () { |
||||
|
var value = {}; |
||||
|
var model = scope.model; |
||||
|
value.position = model.position; |
||||
|
value.showMin = model.showMin; |
||||
|
value.showMax = model.showMax; |
||||
|
value.showAvg = model.showAvg; |
||||
|
value.showTotal = model.showTotal; |
||||
|
ngModelCtrl.$setViewValue(value); |
||||
|
} |
||||
|
|
||||
|
ngModelCtrl.$render = function () { |
||||
|
if (ngModelCtrl.$viewValue) { |
||||
|
var value = ngModelCtrl.$viewValue; |
||||
|
if (!scope.model) { |
||||
|
scope.model = {}; |
||||
|
} |
||||
|
var model = scope.model; |
||||
|
model.position = value.position || types.position.bottom.value; |
||||
|
model.showMin = angular.isDefined(value.showMin) ? value.showMin : false; |
||||
|
model.showMax = angular.isDefined(value.showMax) ? value.showMax : false; |
||||
|
model.showAvg = angular.isDefined(value.showAvg) ? value.showAvg : true; |
||||
|
model.showTotal = angular.isDefined(value.showTotal) ? value.showTotal : false; |
||||
|
} else { |
||||
|
scope.model = { |
||||
|
position: types.position.bottom.value, |
||||
|
showMin: false, |
||||
|
showMax: false, |
||||
|
showAvg: true, |
||||
|
showTotal: false |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$compile(element.contents())(scope); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
restrict: "E", |
||||
|
require: "^ngModel", |
||||
|
scope: { |
||||
|
disabled:'=ngDisabled' |
||||
|
}, |
||||
|
link: linker |
||||
|
}; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* eslint-enable angular/angularelement */ |
||||
@ -0,0 +1,49 @@ |
|||||
|
/** |
||||
|
* 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-panel { |
||||
|
&.tb-legend-config-panel { |
||||
|
position: absolute; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.tb-legend-config-panel { |
||||
|
max-height: 220px; |
||||
|
min-width: 220px; |
||||
|
background: white; |
||||
|
border-radius: 4px; |
||||
|
box-shadow: 0 7px 8px -4px rgba(0, 0, 0, 0.2), |
||||
|
0 13px 19px 2px rgba(0, 0, 0, 0.14), |
||||
|
0 5px 24px 4px rgba(0, 0, 0, 0.12); |
||||
|
overflow: hidden; |
||||
|
form, fieldset { |
||||
|
height: 100%; |
||||
|
} |
||||
|
md-content { |
||||
|
background-color: #fff; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.md-padding { |
||||
|
padding: 0 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
tb-legend-config { |
||||
|
span { |
||||
|
pointer-events: all; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,85 @@ |
|||||
|
/* |
||||
|
* 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. |
||||
|
*/ |
||||
|
|
||||
|
import './legend.scss'; |
||||
|
|
||||
|
/* eslint-disable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import legendTemplate from './legend.tpl.html'; |
||||
|
|
||||
|
/* eslint-enable import/no-unresolved, import/default */ |
||||
|
|
||||
|
|
||||
|
export default angular.module('thingsboard.directives.legend', []) |
||||
|
.directive('tbLegend', Legend) |
||||
|
.name; |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function Legend($compile, $templateCache, types) { |
||||
|
|
||||
|
var linker = function (scope, element) { |
||||
|
var template = $templateCache.get(legendTemplate); |
||||
|
element.html(template); |
||||
|
|
||||
|
scope.displayHeader = function() { |
||||
|
return scope.legendConfig.showMin === true || |
||||
|
scope.legendConfig.showMax === true || |
||||
|
scope.legendConfig.showAvg === true || |
||||
|
scope.legendConfig.showTotal === true; |
||||
|
} |
||||
|
|
||||
|
scope.isHorizontal = scope.legendConfig.position === types.position.bottom.value || |
||||
|
scope.legendConfig.position === types.position.top.value; |
||||
|
|
||||
|
scope.$on('legendDataUpdated', function () { |
||||
|
scope.$digest(); |
||||
|
}); |
||||
|
|
||||
|
scope.toggleHideData = function(index) { |
||||
|
scope.legendData.data[index].hidden = !scope.legendData.data[index].hidden; |
||||
|
scope.$emit('legendDataHiddenChanged', index); |
||||
|
} |
||||
|
|
||||
|
$compile(element.contents())(scope); |
||||
|
|
||||
|
} |
||||
|
|
||||
|
/* scope.legendData = { |
||||
|
keys: [], |
||||
|
data: [] |
||||
|
|
||||
|
key: { |
||||
|
label: '', |
||||
|
color: '' |
||||
|
dataIndex: 0 |
||||
|
} |
||||
|
data: { |
||||
|
min: null, |
||||
|
max: null, |
||||
|
avg: null, |
||||
|
total: null |
||||
|
} |
||||
|
};*/ |
||||
|
|
||||
|
return { |
||||
|
restrict: "E", |
||||
|
link: linker, |
||||
|
scope: { |
||||
|
legendConfig: '=', |
||||
|
legendData: '=' |
||||
|
} |
||||
|
}; |
||||
|
} |
||||
@ -0,0 +1,53 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
*/ |
||||
|
|
||||
|
table.tb-legend { |
||||
|
width: 100%; |
||||
|
font-size: 12px; |
||||
|
.tb-legend-header, .tb-legend-value { |
||||
|
text-align: right; |
||||
|
} |
||||
|
.tb-legend-header { |
||||
|
th { |
||||
|
color: rgb(255,110,64); |
||||
|
white-space: nowrap; |
||||
|
padding: 0 10px 1px 0; |
||||
|
} |
||||
|
} |
||||
|
.tb-legend-keys { |
||||
|
td.tb-legend-label, td.tb-legend-value { |
||||
|
white-space: nowrap; |
||||
|
padding: 2px 10px; |
||||
|
} |
||||
|
.tb-legend-line { |
||||
|
width: 15px; |
||||
|
height: 3px; |
||||
|
display: inline-block; |
||||
|
vertical-align: middle; |
||||
|
} |
||||
|
.tb-legend-label { |
||||
|
text-align: left; |
||||
|
outline: none; |
||||
|
&.tb-horizontal { |
||||
|
width: 95%; |
||||
|
} |
||||
|
&.tb-hidden-label { |
||||
|
text-decoration: line-through; |
||||
|
opacity: 0.6; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,42 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<table class="tb-legend"> |
||||
|
<thead> |
||||
|
<tr class="tb-legend-header"> |
||||
|
<th colspan="2"></th> |
||||
|
<th ng-if="legendConfig.showMin === true">{{ 'legend.min' | translate }}</th> |
||||
|
<th ng-if="legendConfig.showMax === true">{{ 'legend.max' | translate }}</th> |
||||
|
<th ng-if="legendConfig.showAvg === true">{{ 'legend.avg' | translate }}</th> |
||||
|
<th ng-if="legendConfig.showTotal === true">{{ 'legend.total' | translate }}</th> |
||||
|
</tr> |
||||
|
</thead> |
||||
|
<tbody> |
||||
|
<tr class="tb-legend-keys" ng-repeat="legendKey in legendData.keys"> |
||||
|
<td><span class="tb-legend-line" ng-style="{backgroundColor: legendKey.color}"></span></td> |
||||
|
<td class="tb-legend-label" |
||||
|
ng-click="toggleHideData(legendKey.dataIndex)" |
||||
|
ng-class="{ 'tb-hidden-label': legendData.data[legendKey.dataIndex].hidden, 'tb-horizontal': isHorizontal }"> |
||||
|
{{ legendKey.label }} |
||||
|
</td> |
||||
|
<td class="tb-legend-value" ng-if="legendConfig.showMin === true">{{ legendData.data[legendKey.dataIndex].min }}</td> |
||||
|
<td class="tb-legend-value" ng-if="legendConfig.showMax === true">{{ legendData.data[legendKey.dataIndex].max }}</td> |
||||
|
<td class="tb-legend-value" ng-if="legendConfig.showAvg === true">{{ legendData.data[legendKey.dataIndex].avg }}</td> |
||||
|
<td class="tb-legend-value" ng-if="legendConfig.showTotal === true">{{ legendData.data[legendKey.dataIndex].total }}</td> |
||||
|
</tr> |
||||
|
</tbody> |
||||
|
</table> |
||||
Loading…
Reference in new issue