Igor Kulikov
7 years ago
15 changed files with 604 additions and 13 deletions
@ -0,0 +1,134 @@ |
|||
/* |
|||
* 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 $ from 'jquery'; |
|||
import React from 'react'; |
|||
import ReactDOM from 'react-dom'; |
|||
import ThingsboardBaseComponent from './json-form-base-component.jsx'; |
|||
import reactCSS from 'reactcss'; |
|||
import TextField from 'material-ui/TextField'; |
|||
import IconButton from 'material-ui/IconButton'; |
|||
|
|||
class ThingsboardIcon extends React.Component { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.onValueChanged = this.onValueChanged.bind(this); |
|||
this.onIconClick = this.onIconClick.bind(this); |
|||
this.onClear = this.onClear.bind(this); |
|||
var icon = props.value ? props.value : ''; |
|||
this.state = { |
|||
icon: icon |
|||
}; |
|||
} |
|||
|
|||
componentDidMount() { |
|||
var node = ReactDOM.findDOMNode(this); |
|||
var iconContainer = $(node).children('#icon-container'); |
|||
iconContainer.click(this, function(event) { |
|||
event.data.onIconClick(event); |
|||
}); |
|||
} |
|||
|
|||
componentWillUnmount () { |
|||
var node = ReactDOM.findDOMNode(this); |
|||
var iconContainer = $(node).children('#icon-container'); |
|||
iconContainer.off( "click" ); |
|||
} |
|||
|
|||
onValueChanged(value) { |
|||
var icon = value; |
|||
|
|||
this.setState({ |
|||
icon: value |
|||
}) |
|||
this.props.onChange(this.props.form.key, value); |
|||
} |
|||
|
|||
onIconClick(event) { |
|||
this.props.onIconClick(event); |
|||
} |
|||
|
|||
onClear(event) { |
|||
if (event) { |
|||
event.stopPropagation(); |
|||
} |
|||
this.onValueChanged(''); |
|||
} |
|||
|
|||
render() { |
|||
|
|||
const styles = reactCSS({ |
|||
'default': { |
|||
clear: { |
|||
marginTop: '15px' |
|||
}, |
|||
container: { |
|||
display: 'flex' |
|||
}, |
|||
icon: { |
|||
display: 'inline-block', |
|||
marginRight: '10px', |
|||
marginTop: '16px', |
|||
marginBottom: 'auto', |
|||
cursor: 'pointer', |
|||
border: 'solid 1px rgba(0, 0, 0, .27)' |
|||
}, |
|||
iconContainer: { |
|||
display: 'flex', |
|||
width: '100%' |
|||
}, |
|||
iconText: { |
|||
display: 'inline-block', |
|||
width: '100%' |
|||
}, |
|||
}, |
|||
}); |
|||
|
|||
var fieldClass = "tb-field"; |
|||
if (this.props.form.required) { |
|||
fieldClass += " tb-required"; |
|||
} |
|||
if (this.state.focused) { |
|||
fieldClass += " tb-focused"; |
|||
} |
|||
|
|||
var pickedIcon = 'more_horiz'; |
|||
if (this.state.icon != '') { |
|||
pickedIcon = this.state.icon; |
|||
} |
|||
|
|||
return ( |
|||
<div style={ styles.container }> |
|||
<div id="icon-container" style={ styles.iconContainer }> |
|||
<IconButton iconClassName="material-icons" style={ styles.icon }> |
|||
{pickedIcon} |
|||
</IconButton> |
|||
<TextField |
|||
className={fieldClass} |
|||
floatingLabelText={this.props.form.title} |
|||
hintText={this.props.form.placeholder} |
|||
errorText={this.props.error} |
|||
value={this.state.icon} |
|||
disabled={this.props.form.readonly} |
|||
style={ styles.iconText } /> |
|||
</div> |
|||
<IconButton iconClassName="material-icons" tooltip="Clear" onTouchTap={this.onClear}>clear</IconButton> |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
|
|||
export default ThingsboardBaseComponent(ThingsboardIcon); |
|||
@ -0,0 +1,288 @@ |
|||
/* |
|||
* 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.textColor = textColor; |
|||
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, rowIndex, firstKey, lastKey) { |
|||
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(); |
|||
} |
|||
} |
|||
if (vm.settings.rowMargin) { |
|||
if (angular.isUndefined(style.marginTop) && rowIndex != 0) { |
|||
style.marginTop = (vm.settings.rowMargin / 2) + 'px'; |
|||
} |
|||
if (angular.isUndefined(style.marginBottom)) { |
|||
style.marginBottom = (vm.settings.rowMargin / 2) + 'px'; |
|||
} |
|||
} |
|||
if (vm.settings.columnMargin) { |
|||
if (angular.isUndefined(style.marginLeft) && !firstKey) { |
|||
style.marginLeft = (vm.settings.columnMargin / 2) + 'px'; |
|||
} |
|||
if (angular.isUndefined(style.marginRight) && !lastKey) { |
|||
style.marginRight = (vm.settings.columnMargin / 2) + 'px'; |
|||
} |
|||
} |
|||
return style; |
|||
} |
|||
|
|||
function textColor(key) { |
|||
var style = {}; |
|||
if (key) { |
|||
var styleInfo = vm.stylesInfo[key.label]; |
|||
if (styleInfo.color) { |
|||
style = { color: styleInfo.color }; |
|||
} |
|||
} |
|||
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, |
|||
color: keySettings.color |
|||
}; |
|||
|
|||
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,48 @@ |
|||
/** |
|||
* 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; |
|||
} |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
<!-- |
|||
|
|||
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)" novalidate> |
|||
<div style="padding: 0 8px; margin: auto 0;"> |
|||
<div ng-show="vm.entityDetected" layout="row" flex ng-repeat="row in vm.rows" ng-init="rowIndex=$index"> |
|||
<div layout="column" flex ng-repeat="key in row.data track by $index" ng-init="keyIndex=$index"> |
|||
<md-tooltip class="tb-tooltip-multiline" ng-if="key.settings.tooltipMessage && key.settings.tooltipMessage.length" md-direction="left"> |
|||
<span ng-bind-html="key.settings.tooltipMessage"></span> |
|||
</md-tooltip> |
|||
<md-input-container class="md-block" ng-style="vm.cellStyle(key, rowIndex, $first, $last)"> |
|||
<label ng-style="vm.textColor(key)">{{key.label}}</label> |
|||
<md-icon ng-style="vm.textColor(key)" class="material-icons" ng-if="key.settings.icon"> |
|||
{{key.settings.icon}} |
|||
</md-icon> |
|||
<input name="value{{rowIndex}}{{keyIndex}}" |
|||
ng-style="vm.textColor(key)" |
|||
ng-disabled="key.settings.readOnly" |
|||
ng-model="key.currentValue" |
|||
min="{{key.settings.min}}" |
|||
max="{{key.settings.max}}" |
|||
ng-required="key.settings.required" |
|||
type="{{key.settings.inputType}}" |
|||
step="{{key.settings.step}}" |
|||
md-select-on-focus |
|||
ng-change="vm.inputChanged()"> |
|||
<div ng-messages="multipleInputForm['value' + rowIndex + keyIndex].$error"> |
|||
<div ng-message="min">Value must be greater than {{key.settings.min}}</div> |
|||
<div ng-message="max">Value must be lower than {{key.settings.max}}</div> |
|||
<div ng-message="required">This field is required</div> |
|||
</div> |
|||
</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="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.undo' | 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 || multipleInputForm.$invalid" ng-click="vm.isFocused = false"> |
|||
{{ 'action.save' | translate }} |
|||
</md-button> |
|||
</div> |
|||
</form> |
|||
Loading…
Reference in new issue