163 lines
10 KiB
HTML
163 lines
10 KiB
HTML
<!--
|
|
|
|
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.save()" novalidate autocomplete="off">
|
|
<div style="padding: 0 8px;" ng-if="vm.entityDetected && vm.isAllParametersValid">
|
|
<fieldset ng-repeat="source in vm.sources" ng-class="{'fields-group': vm.settings.showGroupTitle}">
|
|
<legend class="group-title" ng-if="vm.settings.showGroupTitle">{{ vm.getGroupTitle(source.datasource) }}
|
|
</legend>
|
|
<div layout="row" layout-wrap
|
|
ng-class="{'vertical-alignment': vm.isVerticalAlignment || vm.changeAlignment}">
|
|
<div ng-repeat="key in source.keys" ng-if="!key.settings.dataKeyHidden"
|
|
ng-style="{'width': (vm.isVerticalAlignment || vm.changeAlignment) ? '100%' : vm.inputWidthSettings}">
|
|
<div class="input-field" ng-if="(key.settings.dataKeyValueType === 'string')">
|
|
<md-input-container class="md-block">
|
|
<label>{{key.label}}</label>
|
|
<md-icon class="material-icons" ng-if="key.settings.icon">
|
|
{{key.settings.icon}}
|
|
</md-icon>
|
|
<input name="{{key.name}}"
|
|
ng-disabled="(key.settings.isEditable === 'disabled') || key.settings.disabledOnCondition"
|
|
ng-readonly="key.settings.isEditable === 'readonly'"
|
|
ng-model="key.data.currentValue"
|
|
ng-required="key.settings.required"
|
|
type="text"
|
|
md-select-on-focus
|
|
ng-blur="vm.inputChanged(source,key)">
|
|
<div ng-messages="multipleInputForm[key.name].$error">
|
|
<div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
|
|
</div>
|
|
</md-input-container>
|
|
</div>
|
|
<div class="input-field" ng-if="(key.settings.dataKeyValueType === 'double')">
|
|
<md-input-container class="md-block">
|
|
<label>{{key.label}}</label>
|
|
<md-icon class="material-icons" ng-if="key.settings.icon">
|
|
{{key.settings.icon}}
|
|
</md-icon>
|
|
<input name="{{key.name}}"
|
|
ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
|
|
ng-readonly="key.settings.isEditable === 'readonly'"
|
|
ng-model="key.data.currentValue"
|
|
ng-required="key.settings.required"
|
|
type="number"
|
|
step="key.settings.step"
|
|
md-select-on-focus
|
|
ng-blur="vm.inputChanged(source,key)">
|
|
<div ng-messages="multipleInputForm[key.name].$error">
|
|
<div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
|
|
</div>
|
|
</md-input-container>
|
|
</div>
|
|
<div class="input-field" ng-if="(key.settings.dataKeyValueType === 'integer')">
|
|
<md-input-container class="md-block">
|
|
<label>{{key.label}}</label>
|
|
<md-icon class="material-icons" ng-if="key.settings.icon">
|
|
{{key.settings.icon}}
|
|
</md-icon>
|
|
<input name="{{key.name}}"
|
|
ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
|
|
ng-readonly="key.settings.isEditable === 'readonly'"
|
|
ng-model="key.data.currentValue"
|
|
ng-required="key.settings.required"
|
|
type="number"
|
|
step="key.settings.step"
|
|
md-select-on-focus
|
|
ng-pattern="/^-?[0-9]+$/"
|
|
ng-blur="vm.inputChanged(source,key)">
|
|
<div ng-messages="multipleInputForm[key.name].$error">
|
|
<div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
|
|
<div translate ng-message="pattern">value.invalid-integer-value</div>
|
|
</div>
|
|
</md-input-container>
|
|
</div>
|
|
<div class="input-field md-block" ng-if="(key.settings.dataKeyValueType === 'booleanCheckbox')">
|
|
<md-checkbox name="{{key.name}}"
|
|
ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
|
|
ng-model="key.data.currentValue"
|
|
ng-change="vm.inputChanged(source,key)">
|
|
{{key.label}}
|
|
</md-checkbox>
|
|
</div>
|
|
<div class="input-field md-block" ng-if="(key.settings.dataKeyValueType === 'booleanSwitch')">
|
|
<md-switch name="{{key.name}}"
|
|
ng-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
|
|
ng-model="key.data.currentValue"
|
|
ng-change="vm.inputChanged(source,key)"
|
|
aria-label="{{key.label}}"
|
|
md-invert>
|
|
{{key.label}}
|
|
</md-switch>
|
|
</div>
|
|
<div ng-if="(key.settings.dataKeyValueType === 'dateTime') ||
|
|
(key.settings.dataKeyValueType === 'date') ||
|
|
(key.settings.dataKeyValueType === 'time')"
|
|
class="md-block input-field date-time-input" layout="column">
|
|
<label class="date-time-input__label">{{key.label}}</label>
|
|
<div layout="row" ng-class="{'vertically-aligned': vm.smallWidthContainer}">
|
|
<mdp-date-picker name="{{key.name + 'Date'}}"
|
|
ng-if="key.settings.dataKeyValueType !== 'time'"
|
|
mdp-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
|
|
ng-model="key.data.currentValue"
|
|
ng-change="vm.inputChanged(source,key)"
|
|
mdp-placeholder="{{ 'widgets.input-widgets.date' | translate }}">
|
|
<div ng-messages="multipleInputForm[key.name].$error">
|
|
<div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
|
|
</div>
|
|
</mdp-date-picker>
|
|
<mdp-time-picker name="{{key.name + 'Time'}}"
|
|
ng-if="key.settings.dataKeyValueType !== 'date'"
|
|
mdp-disabled="key.settings.isEditable === 'disabled' || key.settings.disabledOnCondition"
|
|
ng-model="key.data.currentValue"
|
|
ng-change="vm.inputChanged(source,key)"
|
|
mdp-placeholder="{{ 'widgets.input-widgets.time' | translate }}"
|
|
mdp-auto-switch="true">
|
|
<div ng-messages="multipleInputForm[key.name].$error">
|
|
<div ng-message="required">{{ key.settings.requiredErrorMessage }}</div>
|
|
</div>
|
|
</mdp-time-picker>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="md-padding" layout="row" layout-align="end center"
|
|
ng-if="vm.entityDetected && vm.settings.showActionButtons">
|
|
<md-button class="md-primary" ng-click="vm.discardAll()" style="max-height: 50px; margin-right:20px;"
|
|
ng-disabled="!multipleInputForm.$dirty">
|
|
{{ '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="!multipleInputForm.$dirty || multipleInputForm.$invalid"
|
|
ng-click="vm.isFocused = false">
|
|
{{ 'action.save' | translate }}
|
|
</md-button>
|
|
</div>
|
|
</div>
|
|
<div class="tb-multiple-input__errors" layout="column" layout-align="center center" style="height: 100%;"
|
|
ng-if="!vm.entityDetected || !vm.isAllParametersValid">
|
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;" ng-hide="vm.entityDetected">
|
|
{{ 'widgets.input-widgets.no-entity-selected' | translate }}
|
|
</div>
|
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;"
|
|
ng-show="vm.entityDetected && !vm.isAllParametersValid">
|
|
{{ 'widgets.input-widgets.not-allowed-entity' | translate }}
|
|
</div>
|
|
</div>
|
|
</form>
|