Andrew Shvayka
5 years ago
committed by
GitHub
GitHub
22 changed files with 613 additions and 305 deletions
@ -0,0 +1,55 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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 [formGroup]="addConfigServerFormGroup" style="width: 400px;"> |
||||
|
<mat-toolbar fxLayout="row" color="primary"> |
||||
|
<h2 translate>device-profile.lwm2m.add-new-server-title</h2> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-button mat-icon-button (click)="cancel()" type="button"> |
||||
|
<mat-icon class="material-icons">close</mat-icon> |
||||
|
</button> |
||||
|
</mat-toolbar> |
||||
|
<mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async"> |
||||
|
</mat-progress-bar> |
||||
|
<div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div> |
||||
|
<div mat-dialog-content fxLayout="column"> |
||||
|
<mat-form-field> |
||||
|
<mat-label>{{ 'device-profile.lwm2m.server-type' | translate }}</mat-label> |
||||
|
<mat-select formControlName="serverType"> |
||||
|
<mat-option *ngFor="let serverType of serverTypes" |
||||
|
[value]="serverType"> |
||||
|
{{ serverConfigTypeNamesMap.get(serverType) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
<div mat-dialog-actions fxLayout="row"> |
||||
|
<span fxFlex></span> |
||||
|
<button mat-button color="primary" |
||||
|
type="button" |
||||
|
[disabled]="(isLoading$ | async)" |
||||
|
(click)="cancel()" cdkFocusInitial> |
||||
|
{{ 'action.cancel' | translate }} |
||||
|
</button> |
||||
|
<button mat-button mat-raised-button color="primary" |
||||
|
type="button" |
||||
|
[disabled]="(isLoading$ | async) || addConfigServerFormGroup.invalid" |
||||
|
(click)="addServerConfig()"> |
||||
|
{{ 'action.add' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</form> |
||||
@ -0,0 +1,60 @@ |
|||||
|
///
|
||||
|
/// 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.
|
||||
|
///
|
||||
|
|
||||
|
import { Component } from '@angular/core'; |
||||
|
import { DialogComponent } from '@shared/components/dialog.component'; |
||||
|
import { FormBuilder, FormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { Router } from '@angular/router'; |
||||
|
import { MatDialogRef } from '@angular/material/dialog'; |
||||
|
import { |
||||
|
ServerConfigType, |
||||
|
ServerConfigTypeTranslationMap |
||||
|
} from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-profile-lwm2m-bootstrap-add-config-server-dialog', |
||||
|
templateUrl: './lwm2m-bootstrap-add-config-server-dialog.component.html' |
||||
|
}) |
||||
|
export class Lwm2mBootstrapAddConfigServerDialogComponent extends DialogComponent<Lwm2mBootstrapAddConfigServerDialogComponent> { |
||||
|
|
||||
|
addConfigServerFormGroup: FormGroup; |
||||
|
|
||||
|
serverTypes = Object.values(ServerConfigType); |
||||
|
serverConfigTypeNamesMap = ServerConfigTypeTranslationMap; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected router: Router, |
||||
|
private fb: FormBuilder, |
||||
|
public dialogRef: MatDialogRef<Lwm2mBootstrapAddConfigServerDialogComponent, boolean>, |
||||
|
) { |
||||
|
super(store, router, dialogRef); |
||||
|
this.addConfigServerFormGroup = this.fb.group({ |
||||
|
serverType: [ServerConfigType.LWM2M] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
addServerConfig() { |
||||
|
this.dialogRef.close(this.addConfigServerFormGroup.get('serverType').value === ServerConfigType.BOOTSTRAP); |
||||
|
} |
||||
|
|
||||
|
cancel(): void { |
||||
|
this.dialogRef.close(null); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
@ -0,0 +1,39 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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. |
||||
|
|
||||
|
--> |
||||
|
<div fxLayout="column"> |
||||
|
<mat-accordion multi="true"> |
||||
|
<div *ngFor="let serverConfig of serverConfigsFromArray().controls; trackBy: trackByParams; let $index = index;"> |
||||
|
<tb-profile-lwm2m-device-config-server |
||||
|
[formControl]="serverConfig" |
||||
|
(removeServer)="removeServerConfig($event, $index)"> |
||||
|
</tb-profile-lwm2m-device-config-server> |
||||
|
</div> |
||||
|
</mat-accordion> |
||||
|
<div *ngIf="!serverConfigsFromArray().controls.length" style="margin:32px 0"> |
||||
|
<span translate fxLayoutAlign="center center" |
||||
|
class="tb-prompt">device-profile.lwm2m.no-config-servers</span> |
||||
|
</div> |
||||
|
<div *ngIf="!disabled" style="padding-top: 16px;"> |
||||
|
<button mat-raised-button color="primary" |
||||
|
type="button" |
||||
|
(click)="addServerConfig()"> |
||||
|
<span>{{ (isBootstrapAdded() ? 'device-profile.lwm2m.add-lwm2m-server-config' : |
||||
|
'device-profile.lwm2m.add-server-config') | translate}}</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,185 @@ |
|||||
|
///
|
||||
|
/// 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.
|
||||
|
///
|
||||
|
|
||||
|
import { Component, forwardRef, Input, OnInit } from '@angular/core'; |
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, FormControl, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR |
||||
|
} from '@angular/forms'; |
||||
|
import { of, Subscription } from 'rxjs'; |
||||
|
import { ServerSecurityConfig } from '@home/components/profile/device/lwm2m/lwm2m-profile-config.models'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { DialogService } from '@core/services/dialog.service'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { Lwm2mBootstrapAddConfigServerDialogComponent } from '@home/components/profile/device/lwm2m/lwm2m-bootstrap-add-config-server-dialog.component'; |
||||
|
import { mergeMap } from 'rxjs/operators'; |
||||
|
import { DeviceProfileService } from '@core/http/device-profile.service'; |
||||
|
import { Lwm2mSecurityType } from '@shared/models/lwm2m-security-config.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-profile-lwm2m-bootstrap-config-servers', |
||||
|
templateUrl: './lwm2m-bootstrap-config-servers.component.html', |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => Lwm2mBootstrapConfigServersComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => Lwm2mBootstrapConfigServersComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class Lwm2mBootstrapConfigServersComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
bootstrapConfigServersFormGroup: FormGroup; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
private valueChangeSubscription: Subscription = null; |
||||
|
|
||||
|
private propagateChange = (v: any) => { }; |
||||
|
|
||||
|
constructor(public translate: TranslateService, |
||||
|
public matDialog: MatDialog, |
||||
|
private dialogService: DialogService, |
||||
|
private deviceProfileService: DeviceProfileService, |
||||
|
private fb: FormBuilder) { |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.bootstrapConfigServersFormGroup = this.fb.group({ |
||||
|
serverConfigs: this.fb.array([]) |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
serverConfigsFromArray(): FormArray { |
||||
|
return this.bootstrapConfigServersFormGroup.get('serverConfigs') as FormArray; |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (this.disabled) { |
||||
|
this.bootstrapConfigServersFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.bootstrapConfigServersFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(serverConfigs: Array<ServerSecurityConfig> | null): void { |
||||
|
if (this.valueChangeSubscription) { |
||||
|
this.valueChangeSubscription.unsubscribe(); |
||||
|
} |
||||
|
const serverConfigsControls: Array<AbstractControl> = []; |
||||
|
if (serverConfigs) { |
||||
|
serverConfigs.forEach((serverConfig) => { |
||||
|
serverConfigsControls.push(this.fb.control(serverConfig)); |
||||
|
}); |
||||
|
} |
||||
|
this.bootstrapConfigServersFormGroup.setControl('serverConfigs', this.fb.array(serverConfigsControls)); |
||||
|
if (this.disabled) { |
||||
|
this.bootstrapConfigServersFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.bootstrapConfigServersFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
this.valueChangeSubscription = this.bootstrapConfigServersFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
trackByParams(index: number): number { |
||||
|
return index; |
||||
|
} |
||||
|
|
||||
|
removeServerConfig($event: Event, index: number) { |
||||
|
if ($event) { |
||||
|
$event.stopPropagation(); |
||||
|
$event.preventDefault(); |
||||
|
} |
||||
|
this.dialogService.confirm( |
||||
|
this.translate.instant('device-profile.lwm2m.delete-server-title'), |
||||
|
this.translate.instant('device-profile.lwm2m.delete-server-text'), |
||||
|
this.translate.instant('action.no'), |
||||
|
this.translate.instant('action.yes'), |
||||
|
true |
||||
|
).subscribe((result) => { |
||||
|
if (result) { |
||||
|
this.serverConfigsFromArray().removeAt(index); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
addServerConfig(): void { |
||||
|
const addDialogObs = this.isBootstrapAdded() ? of(false) : |
||||
|
this.matDialog.open<Lwm2mBootstrapAddConfigServerDialogComponent>(Lwm2mBootstrapAddConfigServerDialogComponent, { |
||||
|
disableClose: true, |
||||
|
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'] |
||||
|
}).afterClosed(); |
||||
|
const addServerConfigObs = addDialogObs.pipe( |
||||
|
mergeMap((isBootstrap) => { |
||||
|
if (isBootstrap === null) { |
||||
|
return of(null); |
||||
|
} |
||||
|
return this.deviceProfileService.getLwm2mBootstrapSecurityInfoBySecurityType(isBootstrap, Lwm2mSecurityType.NO_SEC); |
||||
|
}) |
||||
|
); |
||||
|
addServerConfigObs.subscribe((serverConfig) => { |
||||
|
if (serverConfig) { |
||||
|
serverConfig.securityMode = Lwm2mSecurityType.NO_SEC; |
||||
|
this.serverConfigsFromArray().push(this.fb.control(serverConfig)); |
||||
|
this.updateModel(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
public validate(c: FormControl) { |
||||
|
return (this.bootstrapConfigServersFormGroup.valid) ? null : { |
||||
|
serverConfigs: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
public isBootstrapAdded() { |
||||
|
const serverConfigsArray = this.serverConfigsFromArray().getRawValue(); |
||||
|
for (let i = 0; i < serverConfigsArray.length; i++) { |
||||
|
if (serverConfigsArray[i].bootstrapServerIs) { |
||||
|
return true; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const serverConfigs: Array<ServerSecurityConfig> = this.serverConfigsFromArray().value; |
||||
|
this.propagateChange(serverConfigs); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue