Mirco Pizzichini
7 years ago
9 changed files with 397 additions and 7 deletions
@ -0,0 +1,259 @@ |
|||||
|
/* |
||||
|
* Copyright © 2016-2019 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 './multiple-input-widget.scss'; |
||||
|
|
||||
|
/* eslint-disable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import multipleInputWidgetTemplate from './multiple-input-widget.tpl.html'; |
||||
|
|
||||
|
/* eslint-enable import/no-unresolved, import/default */ |
||||
|
|
||||
|
export default angular.module('thingsboard.widgets.multipleInputWidget', []) |
||||
|
.directive('tbMultipleInputWidget', MultipleInputWidget) |
||||
|
.name; |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function MultipleInputWidget() { |
||||
|
return { |
||||
|
restrict: "E", |
||||
|
scope: true, |
||||
|
bindToController: { |
||||
|
formId: '=', |
||||
|
ctx: '=' |
||||
|
}, |
||||
|
controller: MultipleInputWidgetController, |
||||
|
controllerAs: 'vm', |
||||
|
templateUrl: multipleInputWidgetTemplate |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function MultipleInputWidgetController($q, $scope, attributeService, toast, types, utils) { |
||||
|
var vm = this; |
||||
|
|
||||
|
vm.dataKeyDetected = false; |
||||
|
vm.hasAnyChange = false; |
||||
|
vm.entityDetected = false; |
||||
|
vm.isValidParameter = true; |
||||
|
vm.message = 'No entity selected'; |
||||
|
|
||||
|
vm.rows = []; |
||||
|
vm.rowIndex = 0; |
||||
|
|
||||
|
vm.datasources = null; |
||||
|
|
||||
|
vm.cellStyle = cellStyle; |
||||
|
vm.discardAll = discardAll; |
||||
|
vm.inputChanged = inputChanged; |
||||
|
vm.postData = postData; |
||||
|
|
||||
|
$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.$on('multiple-input-data-updated', function(event, formId) { |
||||
|
if (vm.formId == formId) { |
||||
|
updateRowData(vm.subscription.data); |
||||
|
$scope.$digest(); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
function defaultStyle() { |
||||
|
return {}; |
||||
|
} |
||||
|
|
||||
|
function cellStyle(key) { |
||||
|
var style = {}; |
||||
|
if (key) { |
||||
|
var styleInfo = vm.stylesInfo[key.label]; |
||||
|
var value = key.currentValue; |
||||
|
if (styleInfo.useCellStyleFunction && styleInfo.cellStyleFunction) { |
||||
|
try { |
||||
|
style = styleInfo.cellStyleFunction(value); |
||||
|
} catch (e) { |
||||
|
style = {}; |
||||
|
} |
||||
|
} else { |
||||
|
style = defaultStyle(); |
||||
|
} |
||||
|
} |
||||
|
return style; |
||||
|
} |
||||
|
|
||||
|
function discardAll() { |
||||
|
for (var r = 0; r < vm.rows.length; r++) { |
||||
|
var row = vm.rows[r]; |
||||
|
for (var d = 0; d < row.data.length; d++ ) { |
||||
|
row.data[d].currentValue = row.data[d].originalValue; |
||||
|
} |
||||
|
} |
||||
|
vm.hasAnyChange = false; |
||||
|
} |
||||
|
|
||||
|
function inputChanged() { |
||||
|
var newValue = false; |
||||
|
for (var r = 0; r < vm.rows.length; r++) { |
||||
|
var row = vm.rows[r]; |
||||
|
for (var d = 0; d < row.data.length; d++ ) { |
||||
|
if (!row.data[d].currentValue) { |
||||
|
return; |
||||
|
} |
||||
|
if (row.data[d].currentValue !== row.data[d].originalValue) { |
||||
|
newValue = true; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
vm.hasAnyChange = newValue; |
||||
|
} |
||||
|
|
||||
|
function postData() { |
||||
|
var promises = []; |
||||
|
for (var r = 0; r < vm.rows.length; r++) { |
||||
|
var row = vm.rows[r]; |
||||
|
var datasource = row.datasource; |
||||
|
var attributes = []; |
||||
|
var newValues = false; |
||||
|
|
||||
|
for (var d = 0; d < row.data.length; d++ ) { |
||||
|
if (row.data[d].currentValue !== row.data[d].originalValue) { |
||||
|
attributes.push({ |
||||
|
key : row.data[d].name, |
||||
|
value : row.data[d].currentValue, |
||||
|
}); |
||||
|
newValues = true; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (newValues) { |
||||
|
promises.push(attributeService.saveEntityAttributes( |
||||
|
datasource.entityType, |
||||
|
datasource.entityId, |
||||
|
vm.attributeScope, |
||||
|
attributes)); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (promises.length) { |
||||
|
$q.all(promises).then( |
||||
|
function success() { |
||||
|
for (var d = 0; d < row.data.length; d++ ) { |
||||
|
row.data[d].originalValue = row.data[d].currentValue; |
||||
|
} |
||||
|
vm.hasAnyChange = false; |
||||
|
if (vm.settings.showResultMessage) { |
||||
|
toast.showSuccess('Update successful', 1000, angular.element(vm.ctx.$container), 'bottom left'); |
||||
|
} |
||||
|
}, |
||||
|
function fail() { |
||||
|
if (vm.settings.showResultMessage) { |
||||
|
toast.showError('Update failed', angular.element(vm.ctx.$container), 'bottom left'); |
||||
|
} |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function initializeConfig() { |
||||
|
|
||||
|
if (vm.settings.widgetTitle && vm.settings.widgetTitle.length) { |
||||
|
vm.widgetTitle = utils.customTranslation(vm.settings.widgetTitle, vm.settings.widgetTitle); |
||||
|
} else { |
||||
|
vm.widgetTitle = vm.ctx.widgetConfig.title; |
||||
|
} |
||||
|
|
||||
|
vm.ctx.widgetTitle = vm.widgetTitle; |
||||
|
|
||||
|
vm.attributeScope = vm.settings.attributesShared ? types.attributesScope.shared.value : types.attributesScope.server.value; |
||||
|
} |
||||
|
|
||||
|
function updateDatasources() { |
||||
|
|
||||
|
vm.stylesInfo = {}; |
||||
|
vm.rows = []; |
||||
|
vm.rowIndex = 0; |
||||
|
|
||||
|
if (vm.datasources) { |
||||
|
vm.entityDetected = true; |
||||
|
for (var ds = 0; ds < vm.datasources.length; ds++) { |
||||
|
var row = {}; |
||||
|
var datasource = vm.datasources[ds]; |
||||
|
row.datasource = datasource; |
||||
|
row.data = []; |
||||
|
if (datasource.dataKeys) { |
||||
|
vm.dataKeyDetected = true; |
||||
|
for (var a = 0; a < datasource.dataKeys.length; a++ ) { |
||||
|
var dataKey = datasource.dataKeys[a]; |
||||
|
|
||||
|
if (dataKey.units) { |
||||
|
dataKey.label += ' (' + dataKey.units + ')'; |
||||
|
} |
||||
|
|
||||
|
var keySettings = dataKey.settings; |
||||
|
if (keySettings.inputTypeNumber) { |
||||
|
keySettings.inputType = 'number'; |
||||
|
} else { |
||||
|
keySettings.inputType = 'text'; |
||||
|
} |
||||
|
|
||||
|
var cellStyleFunction = null; |
||||
|
var useCellStyleFunction = false; |
||||
|
|
||||
|
if (keySettings.useCellStyleFunction === true) { |
||||
|
if (angular.isDefined(keySettings.cellStyleFunction) && keySettings.cellStyleFunction.length > 0) { |
||||
|
try { |
||||
|
cellStyleFunction = new Function('value', keySettings.cellStyleFunction); |
||||
|
useCellStyleFunction = true; |
||||
|
} catch (e) { |
||||
|
cellStyleFunction = null; |
||||
|
useCellStyleFunction = false; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
vm.stylesInfo[dataKey.label] = { |
||||
|
useCellStyleFunction: useCellStyleFunction, |
||||
|
cellStyleFunction: cellStyleFunction |
||||
|
}; |
||||
|
|
||||
|
row.data.push(dataKey); |
||||
|
} |
||||
|
vm.rows.push(row); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function updateRowData(data) { |
||||
|
var dataIndex = 0; |
||||
|
for (var r = 0; r < vm.rows.length; r++) { |
||||
|
var row = vm.rows[r]; |
||||
|
for (var d = 0; d < row.data.length; d++ ) { |
||||
|
var keyData = data[dataIndex++].data; |
||||
|
if (keyData && keyData.length && keyData[0].length > 1) { |
||||
|
row.data[d].currentValue = row.data[d].originalValue = keyData[0][1]; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2019 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-multiple-input { |
||||
|
height: 100%; |
||||
|
|
||||
|
.md-button.md-icon-button { |
||||
|
width: 32px; |
||||
|
min-width: 32px; |
||||
|
height: 32px; |
||||
|
min-height: 32px; |
||||
|
padding: 0 !important; |
||||
|
margin: 0; |
||||
|
line-height: 20px; |
||||
|
} |
||||
|
|
||||
|
.md-icon-button md-icon { |
||||
|
width: 20px; |
||||
|
min-width: 20px; |
||||
|
height: 20px; |
||||
|
min-height: 20px; |
||||
|
font-size: 20px; |
||||
|
|
||||
|
&:not([disabled]) { |
||||
|
color: #f66; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
md-toast { |
||||
|
min-width: 0; |
||||
|
|
||||
|
.md-toast-content { |
||||
|
font-size: 14px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.footer { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
} |
||||
@ -0,0 +1,55 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2019 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 class="tb-multiple-input" name="multipleInputForm" ng-submit="vm.postData($event)"> |
||||
|
<div style="padding: 0 8px; margin: auto 0;"> |
||||
|
<div ng-show="vm.entityDetected" layout="row" flex ng-repeat="row in vm.rows track by $index"> |
||||
|
<div layout="column" flex ng-repeat="key in row.data track by $index"> |
||||
|
<md-input-container class="md-icon-float" ng-style="vm.cellStyle(key)"> |
||||
|
<label>{{key.label}}</label> |
||||
|
<md-icon class="material-icons" ng-if="key.settings.icon"> |
||||
|
{{key.settings.icon}} |
||||
|
</md-icon> |
||||
|
<input name="key.name" |
||||
|
ng-model="key.currentValue" |
||||
|
type="{{key.settings.inputType}}" |
||||
|
step="{{key.settings.step}}" |
||||
|
md-select-on-focus |
||||
|
ng-change="vm.inputChanged()"> |
||||
|
</md-input-container> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;" ng-hide="vm.entityDetected" ng-bind="vm.message" |
||||
|
></div> |
||||
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;" ng-show="vm.entityDetected && !vm.dataKeyDetected"> |
||||
|
No attribute is selected |
||||
|
</div> |
||||
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;" ng-show="vm.entityDetected && !vm.isValidParameter"> |
||||
|
Timeseries parameter cannot be used in this widget |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="footer md-padding" layout="row" layout-align="end center" ng-show="vm.entityDetected && vm.dataKeyDetected"> |
||||
|
<md-button class="md-primary" ng-click="vm.discardAll()" style="max-height: 50px;margin-right:20px;" ng-disabled="!vm.hasAnyChange"> |
||||
|
{{ 'action.discard-changes' | translate }} |
||||
|
</md-button> |
||||
|
<md-button class="md-raised md-primary" type="submit" value="Submit" style="max-height: 50px;margin-right:20px;" |
||||
|
ng-disabled="!vm.hasAnyChange" ng-click="vm.isFocused = false"> |
||||
|
{{ 'action.save' | translate }} |
||||
|
</md-button> |
||||
|
</div> |
||||
|
</form> |
||||
Loading…
Reference in new issue