Dmitriymush
3 years ago
9 changed files with 21 additions and 359 deletions
@ -1,175 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2024 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. |
|
||||
|
|
||||
--> |
|
||||
<ng-template [formGroup]="mqttConfigFormGroup"> |
|
||||
<mat-tab label="{{ 'gateway.broker.connection' | translate }}*"> |
|
||||
<ng-container formGroupName="broker"> |
|
||||
<div class="tb-form-panel no-border no-padding padding-top"> |
|
||||
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> |
|
||||
<div class="fixed-title-width tb-required" translate>gateway.broker.name</div> |
|
||||
<div class="tb-flex no-gap"> |
|
||||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput name="value" formControlName="name" placeholder="{{ 'gateway.set' | translate }}"/> |
|
||||
<mat-icon matSuffix |
|
||||
matTooltipPosition="above" |
|
||||
matTooltipClass="tb-error-tooltip" |
|
||||
[matTooltip]="('gateway.broker.name-required') | translate" |
|
||||
*ngIf="mqttConfigFormGroup.get('broker.name').hasError('required') |
|
||||
&& mqttConfigFormGroup.get('broker.name').touched" |
|
||||
class="tb-error"> |
|
||||
warning |
|
||||
</mat-icon> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> |
|
||||
<div class="fixed-title-width tb-required" translate>gateway.host</div> |
|
||||
<div class="tb-flex no-gap"> |
|
||||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput name="value" formControlName="host" placeholder="{{ 'gateway.set' | translate }}"/> |
|
||||
<mat-icon matSuffix |
|
||||
matTooltipPosition="above" |
|
||||
matTooltipClass="tb-error-tooltip" |
|
||||
[matTooltip]="('gateway.host-required') | translate" |
|
||||
*ngIf="mqttConfigFormGroup.get('broker.host').hasError('required') |
|
||||
&& mqttConfigFormGroup.get('broker.host').touched" |
|
||||
class="tb-error"> |
|
||||
warning |
|
||||
</mat-icon> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> |
|
||||
<div class="fixed-title-width tb-required" translate>gateway.port</div> |
|
||||
<div class="tb-flex no-gap"> |
|
||||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput name="value" formControlName="port" placeholder="{{ 'gateway.set' | translate }}"/> |
|
||||
<mat-icon matSuffix |
|
||||
matTooltipPosition="above" |
|
||||
matTooltipClass="tb-error-tooltip" |
|
||||
[matTooltip]="('gateway.port-required') | translate" |
|
||||
*ngIf="mqttConfigFormGroup.get('broker.port').hasError('required') |
|
||||
&& mqttConfigFormGroup.get('broker.port').touched" |
|
||||
class="tb-error"> |
|
||||
warning |
|
||||
</mat-icon> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> |
|
||||
<div class="fixed-title-width" translate>gateway.mqtt-version</div> |
|
||||
<div class="tb-flex no-gap"> |
|
||||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<mat-select formControlName="version"> |
|
||||
<mat-option *ngFor="let version of mqttVersions" [value]="version.value">{{ version.name }}</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> |
|
||||
<div class="fixed-title-width" translate>gateway.client-id</div> |
|
||||
<div class="tb-flex no-gap"> |
|
||||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput name="value" formControlName="clientId" placeholder="{{ 'gateway.set' | translate }}"/> |
|
||||
<button type="button" |
|
||||
matSuffix |
|
||||
mat-icon-button |
|
||||
aria-label="Generate" |
|
||||
matTooltip="{{ 'gateway.generate-client-id' | translate }}" |
|
||||
matTooltipPosition="above" |
|
||||
(click)="generate('broker.clientId')" |
|
||||
*ngIf="!mqttConfigFormGroup.get('broker.clientId').value"> |
|
||||
<mat-icon>autorenew</mat-icon> |
|
||||
</button> |
|
||||
<!-- <ng-template #copyClientId>--> |
|
||||
<!-- <tb-copy-button--> |
|
||||
<!-- matSuffix--> |
|
||||
<!-- miniButton="false"--> |
|
||||
<!-- *ngIf="deviceCredentialsMqttFormGroup.get('clientId').value"--> |
|
||||
<!-- [copyText]="deviceCredentialsMqttFormGroup.get('clientId').value"--> |
|
||||
<!-- tooltipText="{{ 'device.copy-client-id' | translate }}"--> |
|
||||
<!-- tooltipPosition="above"--> |
|
||||
<!-- icon="content_copy">--> |
|
||||
<!-- </tb-copy-button>--> |
|
||||
<!-- </ng-template>--> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<tb-broker-security formControlName="security"> |
|
||||
</tb-broker-security> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</mat-tab> |
|
||||
<mat-tab label="{{ 'gateway.data-mapping' | translate }}*"> |
|
||||
<div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height"> |
|
||||
<tb-mapping-table formControlName="dataMapping" [mappingType]="mappingTypes.DATA"></tb-mapping-table> |
|
||||
</div> |
|
||||
</mat-tab> |
|
||||
<mat-tab label="{{ 'gateway.requests-mapping' | translate }}"> |
|
||||
<div class="tb-form-panel no-border no-padding padding-top tb-flex fill-height"> |
|
||||
<tb-mapping-table formControlName="requestsMapping" [mappingType]="mappingTypes.REQUESTS"></tb-mapping-table> |
|
||||
</div> |
|
||||
</mat-tab> |
|
||||
<mat-tab label="{{ 'gateway.workers-settings' | translate }}"> |
|
||||
<div class="tb-form-panel no-border no-padding"> |
|
||||
<ng-container formGroupName="broker"> |
|
||||
<div class="tb-form-panel no-border no-padding padding-top"> |
|
||||
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> |
|
||||
<div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}" translate> |
|
||||
gateway.max-number-of-workers |
|
||||
</div> |
|
||||
<div class="tb-flex no-gap" [style.padding-left.px]="66"> |
|
||||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput name="value" type="number" min="1" formControlName="maxNumberOfWorkers" placeholder="{{ 'gateway.default' | translate }}"/> |
|
||||
<mat-icon matSuffix |
|
||||
matTooltipPosition="above" |
|
||||
matTooltipClass="tb-error-tooltip" |
|
||||
[matTooltip]="('gateway.max-number-of-workers-required') | translate" |
|
||||
*ngIf="mqttConfigFormGroup.get('broker.maxNumberOfWorkers').hasError('min') || |
|
||||
(mqttConfigFormGroup.get('broker.maxNumberOfWorkers').hasError('required') && |
|
||||
mqttConfigFormGroup.get('broker.maxNumberOfWorkers').touched)" |
|
||||
class="tb-error"> |
|
||||
warning |
|
||||
</mat-icon> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="tb-form-row column-xs" fxLayoutAlign="space-between center"> |
|
||||
<div class="fixed-title-width tb-required" tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}" translate> |
|
||||
gateway.max-messages-queue-for-worker |
|
||||
</div> |
|
||||
<div class="tb-flex no-gap"> |
|
||||
<mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic"> |
|
||||
<input matInput name="value" type="number" min="1" formControlName="maxMessageNumberPerWorker" placeholder="{{ 'gateway.default' | translate }}"/> |
|
||||
<mat-icon matSuffix |
|
||||
matTooltipPosition="above" |
|
||||
matTooltipClass="tb-error-tooltip" |
|
||||
[matTooltip]="('gateway.max-messages-queue-for-worker-required') | translate" |
|
||||
*ngIf="mqttConfigFormGroup.get('broker.maxMessageNumberPerWorker').hasError('min') || |
|
||||
(mqttConfigFormGroup.get('broker.maxMessageNumberPerWorker').hasError('required') && |
|
||||
mqttConfigFormGroup.get('broker.maxMessageNumberPerWorker').touched)" |
|
||||
class="tb-error"> |
|
||||
warning |
|
||||
</mat-icon> |
|
||||
</mat-form-field> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</ng-container> |
|
||||
</div> |
|
||||
</mat-tab> |
|
||||
</ng-template> |
|
||||
@ -1,27 +0,0 @@ |
|||||
/** |
|
||||
* Copyright © 2016-2024 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. |
|
||||
*/ |
|
||||
:host { |
|
||||
//width: 100%; |
|
||||
//height: 100%; |
|
||||
//display: block; |
|
||||
// |
|
||||
//.tb-form-row { |
|
||||
// .tb-form-table-header { |
|
||||
// min-height: 48px; |
|
||||
// } |
|
||||
//} |
|
||||
|
|
||||
} |
|
||||
@ -1,150 +0,0 @@ |
|||||
///
|
|
||||
/// Copyright © 2016-2024 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 { |
|
||||
AfterViewInit, |
|
||||
ChangeDetectionStrategy, |
|
||||
ChangeDetectorRef, |
|
||||
Component, |
|
||||
ElementRef, |
|
||||
forwardRef, |
|
||||
Input, |
|
||||
NgZone, |
|
||||
OnDestroy, |
|
||||
OnInit, |
|
||||
ViewContainerRef |
|
||||
} from '@angular/core'; |
|
||||
import { PageComponent } from '@shared/components/page.component'; |
|
||||
import { Store } from '@ngrx/store'; |
|
||||
import { AppState } from '@core/core.state'; |
|
||||
import { TranslateService } from '@ngx-translate/core'; |
|
||||
import { MatDialog } from '@angular/material/dialog'; |
|
||||
import { DialogService } from '@core/services/dialog.service'; |
|
||||
import { Subject } from 'rxjs'; |
|
||||
import { takeUntil } from 'rxjs/operators'; |
|
||||
import { Overlay } from '@angular/cdk/overlay'; |
|
||||
import { UtilsService } from '@core/services/utils.service'; |
|
||||
import { EntityService } from '@core/http/entity.service'; |
|
||||
import { |
|
||||
ControlValueAccessor, |
|
||||
FormBuilder, FormGroup, NG_VALIDATORS, |
|
||||
NG_VALUE_ACCESSOR, |
|
||||
UntypedFormGroup, ValidationErrors, Validator, Validators |
|
||||
} from '@angular/forms'; |
|
||||
import { |
|
||||
MappingTypes, |
|
||||
MqttVersions, |
|
||||
SourceTypes, |
|
||||
SourceTypeTranslationsMap |
|
||||
} from '@home/components/widget/lib/gateway/gateway-widget.models'; |
|
||||
import { coerceBoolean } from '@shared/decorators/coercion'; |
|
||||
import { generateSecret } from '@core/utils'; |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'tb-mqtt-basic-config', |
|
||||
templateUrl: './mqtt-basic-config.component.html', |
|
||||
styleUrls: ['./mqtt-basic-config.component.scss'], |
|
||||
changeDetection: ChangeDetectionStrategy.OnPush, |
|
||||
providers: [ |
|
||||
{ |
|
||||
provide: NG_VALUE_ACCESSOR, |
|
||||
useExisting: forwardRef(() => MqttBasicConfigComponent), |
|
||||
multi: true |
|
||||
}, |
|
||||
{ |
|
||||
provide: NG_VALIDATORS, |
|
||||
useExisting: forwardRef(() => MqttBasicConfigComponent), |
|
||||
multi: true |
|
||||
} |
|
||||
] |
|
||||
}) |
|
||||
export class MqttBasicConfigComponent extends PageComponent implements ControlValueAccessor, Validator, AfterViewInit, OnInit, OnDestroy { |
|
||||
|
|
||||
mqttConfigFormGroup: UntypedFormGroup; |
|
||||
|
|
||||
mqttVersions = MqttVersions; |
|
||||
|
|
||||
mappingTypes = MappingTypes; |
|
||||
|
|
||||
private destroy$ = new Subject<void>(); |
|
||||
private propagateChange = (v: any) => {}; |
|
||||
|
|
||||
constructor(protected store: Store<AppState>, |
|
||||
public translate: TranslateService, |
|
||||
public dialog: MatDialog, |
|
||||
private overlay: Overlay, |
|
||||
private viewContainerRef: ViewContainerRef, |
|
||||
private dialogService: DialogService, |
|
||||
private entityService: EntityService, |
|
||||
private utils: UtilsService, |
|
||||
private zone: NgZone, |
|
||||
private cd: ChangeDetectorRef, |
|
||||
private elementRef: ElementRef, |
|
||||
private fb: FormBuilder) { |
|
||||
super(store); |
|
||||
console.log('mqttconfig inited'); |
|
||||
} |
|
||||
|
|
||||
ngOnInit() { |
|
||||
this.mqttConfigFormGroup = this.fb.group({ |
|
||||
broker: this.fb.group({ |
|
||||
name: ['', [Validators.required]], |
|
||||
host: ['', [Validators.required]], |
|
||||
port: [null, [Validators.required]], |
|
||||
version: [5, []], |
|
||||
clientId: ['', []], |
|
||||
maxNumberOfWorkers: [100, [Validators.required, Validators.min(1)]], |
|
||||
maxMessageNumberPerWorker: [10, [Validators.required, Validators.min(1)]], |
|
||||
security: [{}, [Validators.required]] |
|
||||
}), |
|
||||
dataMapping: [[], Validators.required], |
|
||||
requestsMapping: [{}, []] |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
ngOnDestroy() { |
|
||||
this.destroy$.next(); |
|
||||
this.destroy$.complete(); |
|
||||
} |
|
||||
|
|
||||
ngAfterViewInit() { |
|
||||
} |
|
||||
|
|
||||
registerOnChange(fn: any): void { |
|
||||
this.propagateChange = fn; |
|
||||
} |
|
||||
|
|
||||
registerOnTouched(fn: any): void {} |
|
||||
|
|
||||
writeValue(deviceInfo: any) { |
|
||||
this.mqttConfigFormGroup.patchValue(deviceInfo, {emitEvent: false}); |
|
||||
} |
|
||||
|
|
||||
validate(): ValidationErrors | null { |
|
||||
return this.mqttConfigFormGroup.valid ? null : { |
|
||||
mqttConfigForm: { valid: false } |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
updateView(value: any) { |
|
||||
this.propagateChange(value); |
|
||||
} |
|
||||
|
|
||||
generate(formControlName: string) { |
|
||||
this.mqttConfigFormGroup.get(formControlName).patchValue(generateSecret(5)); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
Loading…
Reference in new issue