135 lines
7.2 KiB
HTML
135 lines
7.2 KiB
HTML
<!--
|
|
|
|
Copyright © 2016-2021 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 #formContainer class="tb-multiple-input"
|
|
[formGroup]="multipleInputFormGroup"
|
|
tb-toast toastTarget="{{ toastTargetId }}"
|
|
(ngSubmit)="save()" novalidate autocomplete="off">
|
|
<div style="padding: 0 8px;" *ngIf="entityDetected && isAllParametersValid">
|
|
<fieldset *ngFor="let source of sources" [ngClass]="{'fields-group': settings.showGroupTitle}">
|
|
<legend class="group-title" *ngIf="settings.showGroupTitle">{{ getGroupTitle(source.datasource) }}
|
|
</legend>
|
|
<div fxLayout="row" class="layout-wrap"
|
|
[ngClass]="{'vertical-alignment': isVerticalAlignment || changeAlignment}">
|
|
<div *ngFor="let key of visibleKeys(source)"
|
|
[ngStyle]="{width: (isVerticalAlignment || changeAlignment) ? '100%' : inputWidthSettings}">
|
|
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'string'">
|
|
<mat-form-field class="mat-block">
|
|
<mat-label>{{key.label}}</mat-label>
|
|
<input matInput
|
|
formControlName="{{key.formId}}"
|
|
[required]="key.settings.required"
|
|
[readonly]="key.settings.isEditable === 'readonly'"
|
|
type="text"
|
|
(focus)="key.isFocused = true; focusInputElement($event)"
|
|
(blur)="key.isFocused = false; inputChanged(source, key)">
|
|
<mat-icon *ngIf="key.settings.icon" matPrefix>{{key.settings.icon}}</mat-icon>
|
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
|
|
{{ getErrorMessageText(key.settings, 'required') }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="input-field" *ngIf="key.settings.dataKeyValueType === 'double' ||
|
|
key.settings.dataKeyValueType === 'integer'">
|
|
<mat-form-field class="mat-block">
|
|
<mat-label>{{key.label}}</mat-label>
|
|
<input matInput
|
|
formControlName="{{key.formId}}"
|
|
[required]="key.settings.required"
|
|
[readonly]="key.settings.isEditable === 'readonly'"
|
|
type="number"
|
|
step="{{key.settings.step}}"
|
|
min="{{key.settings.minValue}}"
|
|
max="{{key.settings.maxValue}}"
|
|
(focus)="key.isFocused = true; focusInputElement($event)"
|
|
(blur)="key.isFocused = false; inputChanged(source, key)">
|
|
<mat-icon *ngIf="key.settings.icon" matPrefix>{{key.settings.icon}}</mat-icon>
|
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
|
|
{{ getErrorMessageText(key.settings,'required') }}
|
|
</mat-error>
|
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('min')">
|
|
{{ getErrorMessageText(key.settings,'min') }}
|
|
</mat-error>
|
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('max')">
|
|
{{ getErrorMessageText(key.settings,'max') }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanCheckbox'">
|
|
<mat-checkbox formControlName="{{key.formId}}"
|
|
(change)="inputChanged(source, key)">
|
|
<span class="label-wrapper">{{key.label}}</span>
|
|
</mat-checkbox>
|
|
</div>
|
|
<div class="input-field mat-block" *ngIf="key.settings.dataKeyValueType === 'booleanSwitch'">
|
|
<mat-slide-toggle formControlName="{{key.formId}}"
|
|
(change)="inputChanged(source, key)">
|
|
<span class="label-wrapper">{{key.label}}</span>
|
|
</mat-slide-toggle>
|
|
</div>
|
|
<div class="input-field mat-block date-time-input" *ngIf="(key.settings.dataKeyValueType === 'dateTime') ||
|
|
(key.settings.dataKeyValueType === 'date') ||
|
|
(key.settings.dataKeyValueType === 'time')" fxLayout="column">
|
|
<mat-form-field>
|
|
<mat-placeholder>{{key.label}}</mat-placeholder>
|
|
<mat-datetimepicker-toggle [for]="datePicker" matPrefix></mat-datetimepicker-toggle>
|
|
<mat-datetimepicker #datePicker type="{{datePickerType(key.settings.dataKeyValueType)}}"
|
|
openOnFocus="true"></mat-datetimepicker>
|
|
<input matInput formControlName="{{key.formId}}"
|
|
[required]="key.settings.required"
|
|
[readonly]="key.settings.isEditable === 'readonly'"
|
|
[matDatetimepicker]="datePicker"
|
|
(focus)="key.isFocused = true;"
|
|
(blur)="key.isFocused = false;"
|
|
(dateChange)="inputChanged(source, key)">
|
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('required')">
|
|
{{ getErrorMessageText(key.settings, 'required') }}
|
|
</mat-error>
|
|
<mat-error *ngIf="multipleInputFormGroup.get(key.formId).hasError('matDatepickerParse')">
|
|
{{ getErrorMessageText(key.settings, 'invalidDate') }}
|
|
</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="mat-padding" fxLayout="row" fxLayoutAlign="end center"
|
|
[fxShow]="entityDetected && settings.showActionButtons">
|
|
<button mat-button color="primary" type="button"
|
|
(click)="discardAll()" style="max-height: 50px; margin-right:20px;"
|
|
[disabled]="!multipleInputFormGroup.dirty">
|
|
{{ resetButtonLabel }}
|
|
</button>
|
|
<button mat-button mat-raised-button color="primary" type="submit"
|
|
style="max-height: 50px; margin-right:20px;"
|
|
[disabled]="!multipleInputFormGroup.dirty || multipleInputFormGroup.invalid">
|
|
{{ saveButtonLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="tb-multiple-input__errors" fxLayout="column" fxLayoutAlign="center center" style="height: 100%;"
|
|
*ngIf="!entityDetected || !isAllParametersValid">
|
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;" [fxHide]="entityDetected">
|
|
{{ 'widgets.input-widgets.no-entity-selected' | translate }}
|
|
</div>
|
|
<div style="text-align: center; font-size: 18px; color: #a0a0a0;"
|
|
[fxShow]="entityDetected && !isAllParametersValid">
|
|
{{ 'widgets.input-widgets.not-allowed-entity' | translate }}
|
|
</div>
|
|
</div>
|
|
</form>
|