Dmitriymush
2 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