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